chore(*): Merge from master.

Author: MKirova

.github/workflows/nodejs.yml

@@ -5,9 +5,9 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ master, 9.1.x ]
+    branches: [ master, 9.1.x, 10.0.x ]
   pull_request:
-    branches: [ master, 9.1.x ]
+    branches: [ master, 9.1.x, 10.0.x ]
 
 jobs:
   build:

CHANGELOG.md

@@ -5,11 +5,26 @@ All notable changes for each version of this project will be documented in this
 ## 10.1.0
 
 ### General
+- `igxCombo`
+    - **Behavioral Change** - Change default positioning strategy from `ConnectedPositioningStrategy` to `AutoPositionStrategy`. The [`Auto`](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay_position.html#auto) strategy will initially try to show the element like the Connected strategy does. If the element goes out of the viewport Auto will flip the starting point and the direction, i.e. if the direction is 'bottom', it will switch it to 'top' and so on. If after flipping direction the content goes out of the view, auto strategy will revert to initial start point and direction and will push the content into the view. Note after pushing the content it may hide the combo's input.
 - `igxGrid`
     - Added `onScroll` event, which is emitted when the grid is scrolled vertically or horizontally.
 - `igxTreeGrid`
     - Removed `onDataPreLoad` event as it is specific for remote virtualization implementation, which is not supported for the `igxTreeGrid`. A more generic `onScroll` event is exposed and can be used instead.
 
+### New Features
+- `IgxGridState` directive
+    - Added support for expansion states, column selection and row pinning.
+    - Added support for `IgxTreeGrid` and `IgxHierarchicalGrid` (including child grids)
+- `IgxColumn`
+    - Added `byHeader` parameter to the `autosize` method which specifies if the autosizing should be based only on the header content width.
+- `IgxToast`
+    - `message` property has been deprecated. You can place the *message text* in the toast content or pass it as parameter to `show` method instead.
+    - An optional string parameter `message` has been added to `show()` method.
+- `IgxSnackbar`
+    - `message` property has been deprecated. You can place the *message text* in the snackbar content or pass it as parameter to `show` method instead.
+    - An optional string parameter `message` has been added to `show()` method.
+
 ## 10.0.0
 
 ### General
@@ -18,9 +33,9 @@ All notable changes for each version of this project will be documented in this
 - `igx-select`, `igx-combo`, `igx-drop-down`
     - **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default.
 - `IgxTransaction` - The `onStateUpdate` now emits with information of its origin. The emitted value is of type `StateUpdateEvent`, which has two properties:
-    - `origin` - it can vary within the values of the `TransactionEventOrigin` interface; 
+    - `origin` - it can vary within the values of the `TransactionEventOrigin` interface;
     - `actions` - contains information about the transactions, that caused the emission of the event.
-- `IgxPaginator` - The input `overlaySettings` was introduced, which allows applying custom overlay settings for the component. 
+- `IgxPaginator` - The input `overlaySettings` was introduced, which allows applying custom overlay settings for the component.
 
 ### New Features
 - `IgxGrid`
@@ -43,6 +58,7 @@ All notable changes for each version of this project will be documented in this
 - `IgxHierarchicalGrid`
     - `onGridInitialized` - New output has been exposed. Emitted after a grid is being initialized for the corresponding row island.
 -  **Behavioral Change** - When moving a column `DropPosition.None` is now acting like `DropPosition.AfterDropTarget`.
+
 ## 9.1.0
 
 ### General
@@ -164,9 +180,9 @@ All notable changes for each version of this project will be documented in this
     ```typescript
     public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
     ```
-  - Added new properties for paging:	
-    - `totalRecords` set to alter the pages count based on total remote records. Keep in mind that If you are using paging and all the data is passed to the grid, the value of totalRecords property will be set by default to the length of the provided data source. If totalRecords is set, it will take precedent over the default length based on the data source.	
-    - `pagingMode` - accepts `GridPagingMode` enumeration. If the paging mode is set to remote the grid will not paginate the passed data source, if the paging mode is set to local (which is the default value) the grid will paginate the data source based on the page, perPage and totalRecords values.   
+  - Added new properties for paging:
+    - `totalRecords` set to alter the pages count based on total remote records. Keep in mind that If you are using paging and all the data is passed to the grid, the value of totalRecords property will be set by default to the length of the provided data source. If totalRecords is set, it will take precedent over the default length based on the data source.
+    - `pagingMode` - accepts `GridPagingMode` enumeration. If the paging mode is set to remote the grid will not paginate the passed data source, if the paging mode is set to local (which is the default value) the grid will paginate the data source based on the page, perPage and totalRecords values.
     - Added functionality for column selection.
     - `columnSelection` property has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.
     - `selected` property has been added to the IgxColumnComponent; Allows you to set whether the column is selected.

gulpfile.js

@@ -137,7 +137,7 @@ module.exports.copySchematics = (cb) => {
 const typedocBuildTheme = (cb) => {
     spawnSync(`typedoc`, [TYPEDOC.PROJECT_PATH,
     "--tsconfig",
-    "tsconfig.base.json"], { stdio: 'inherit', shell: true });
+    path.join(__dirname,"tsconfig.base.json")], { stdio: 'inherit', shell: true });
     cb();
 };
 typedocBuildTheme.displayName = 'typedoc-build:theme';
@@ -180,13 +180,26 @@ const TYPEDOC = {
 };
 
 function typedocBuildExportFn(cb) {
-    spawnSync('typedoc', [TYPEDOC.PROJECT_PATH, "--generate-json", TYPEDOC.EXPORT_JSON_PATH, "--tags", "--params"],
+    spawnSync('typedoc', [
+        TYPEDOC.PROJECT_PATH,
+        "--generate-json",
+        TYPEDOC.EXPORT_JSON_PATH,
+        "--tags",
+        "--params",
+        "--tsconfig",
+        path.join(__dirname,"tsconfig.base.json")],
         { stdio: 'inherit', shell: true });
     cb();
 }
 
 function typedocImportJsonFn(cb) {
-    spawnSync('typedoc', [TYPEDOC.PROJECT_PATH, "--generate-from-json", TYPEDOC.EXPORT_JSON_PATH, "--warns"],
+    spawnSync('typedoc', [
+        TYPEDOC.PROJECT_PATH,
+        "--generate-from-json",
+        TYPEDOC.EXPORT_JSON_PATH,
+        "--warns",
+        "--tsconfig",
+        path.join(__dirname,"tsconfig.base.json")],
         { stdio: 'inherit', shell: true});
     cb();
 }
@@ -212,7 +225,7 @@ function typedocBuildDocsJA (cb) {
             '--localize',
             'jp',
             "--tsconfig",
-            "tsconfig.base.json"], { stdio: 'inherit', shell: true });
+            path.join(__dirname,"tsconfig.base.json")], { stdio: 'inherit', shell: true });
 
         cb();
 }
@@ -223,7 +236,7 @@ function typedocBuildDocsEN (cb) {
             '--localize',
             'en',
             "--tsconfig",
-            "tsconfig.base.json"], { stdio: 'inherit', shell: true});
+            path.join(__dirname,"tsconfig.base.json")], { stdio: 'inherit', shell: true});
 
         cb();
 }

projects/igniteui-angular/src/lib/combo/combo.component.ts

@@ -1,4 +1,3 @@
-import { ConnectedPositioningStrategy } from './../services/overlay/position/connected-positioning-strategy';
 import { CommonModule } from '@angular/common';
 import {
     AfterViewInit, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostBinding, HostListener,
@@ -30,7 +29,7 @@ import { IgxInputGroupModule, IgxInputGroupComponent } from '../input-group/inpu
 import { IgxComboItemComponent } from './combo-item.component';
 import { IgxComboDropDownComponent } from './combo-dropdown.component';
 import { IgxComboFilteringPipe, IgxComboGroupingPipe } from './combo.pipes';
-import { OverlaySettings, AbsoluteScrollStrategy } from '../services/public_api';
+import { OverlaySettings, AbsoluteScrollStrategy, AutoPositionStrategy } from '../services/public_api';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
@@ -156,7 +155,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     private _onTouchedCallback: () => void = noop;
     private _overlaySettings: OverlaySettings = {
         scrollStrategy: new AbsoluteScrollStrategy(),
-        positionStrategy: new ConnectedPositioningStrategy(),
+        positionStrategy: new AutoPositionStrategy(),
         modal: false,
         closeOnOutsideClick: true,
         excludePositionTarget: true

projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts

@@ -20,6 +20,7 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
     public destroyed;
 
     private _afterViewInit = false;
+    private _scrollNativeSize: number;
 
     ngAfterViewInit() {
         this._afterViewInit = true;
@@ -29,7 +30,9 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
     onScroll(event) {
         this.scrollAmount = event.target.scrollTop || event.target.scrollLeft;
     }
-    constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef) { }
+    constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef) {
+        this._scrollNativeSize = this.calculateScrollNativeSize();
+     }
 
     get nativeElement() {
         return this.elementRef.nativeElement;
@@ -54,6 +57,10 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
     }
 
     public get scrollNativeSize() {
+        return this._scrollNativeSize;
+    }
+
+    public calculateScrollNativeSize() {
         const div = document.createElement('div');
         const style = div.style;
         style.width = '100px';

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -439,6 +439,44 @@ export class IgxColumnComponent implements AfterContentInit {
     @WatchColumnChanges()
     @Input()
     public maxWidth: string;
+
+    /**
+     * @hidden
+     */
+    get maxWidthPx() {
+        const gridAvailableSize = this.grid.calcWidth;
+        const isPercentageWidth = this.maxWidth && typeof this.maxWidth === 'string' && this.maxWidth.indexOf('%') !== -1;
+        return isPercentageWidth ?  parseFloat(this.maxWidth) / 100 * gridAvailableSize : parseFloat(this.maxWidth);
+    }
+
+    /**
+     * @hidden
+     */
+    get maxWidthPercent() {
+        const gridAvailableSize = this.grid.calcWidth;
+        const isPercentageWidth = this.maxWidth && typeof this.maxWidth === 'string' && this.maxWidth.indexOf('%') !== -1;
+        return isPercentageWidth ?  parseFloat(this.maxWidth) : parseFloat(this.maxWidth) / gridAvailableSize * 100;
+    }
+
+    /**
+     * @hidden
+     */
+    get minWidthPx() {
+        const gridAvailableSize = this.grid.calcWidth;
+        const isPercentageWidth = this.minWidth && typeof this.minWidth === 'string' && this.minWidth.indexOf('%') !== -1;
+        return isPercentageWidth ?  parseFloat(this.minWidth) / 100 * gridAvailableSize : parseFloat(this.minWidth);
+    }
+
+    /**
+     * @hidden
+     */
+    get minWidthPercent() {
+        const gridAvailableSize = this.grid.calcWidth;
+        const isPercentageWidth = this.minWidth && typeof this.minWidth === 'string' && this.minWidth.indexOf('%') !== -1;
+        return isPercentageWidth ?  parseFloat(this.minWidth) : parseFloat(this.minWidth) / gridAvailableSize * 100;
+    }
+
+
     /**
      * Sets/gets the minimum `width` of the column.
      * Default value is `88`;
@@ -1750,14 +1788,34 @@ export class IgxColumnComponent implements AfterContentInit {
      * column.autosize();
      * ```
      * @memberof IgxColumnComponent
+     * @param byHeader Set if column should be autized based only on the header content
      */
-    public autosize() {
+    public autosize(byHeader = false) {
         if (!this.columnGroup) {
-            this.width = this.getLargestCellWidth();
+            const size = this.getAutoSize(byHeader);
+            this.width = size;
             this.grid.reflow();
         }
     }
 
+    /**
+     * @hidden
+     */
+    public getAutoSize(byHeader = false) {
+        const size = !byHeader ? this.getLargestCellWidth() :
+            (Object.values(this.getHeaderCellWidths()).reduce((a, b) => a + b) + 'px');
+        const gridAvailableSize = this.grid.calcWidth;
+        let newWidth;
+        const isPercentageWidth = this.width && typeof this.width === 'string' && this.width.indexOf('%') !== -1;
+        if (isPercentageWidth) {
+            const percentageSize =  parseFloat(size) / gridAvailableSize * 100;
+            newWidth = percentageSize + '%';
+        } else {
+            newWidth = size;
+        }
+        return newWidth;
+    }
+
     /**
      * @hidden
      */
@@ -1769,6 +1827,36 @@ export class IgxColumnComponent implements AfterContentInit {
         return this._calcWidth;
     }
 
+
+    /**
+     * @hidden
+     * Returns the width and padding of a header cell.
+     */
+    public getHeaderCellWidths() {
+        const range = this.grid.document.createRange();
+        let headerWidth;
+        if (this.headerTemplate && this.headerCell.elementRef.nativeElement.children[0].children.length > 0) {
+            headerWidth = Math.max(...Array.from(this.headerCell.elementRef.nativeElement.children[0].children)
+                .map((child) => getNodeSizeViaRange(range, child)));
+        } else {
+            headerWidth = getNodeSizeViaRange(range, this.headerCell.elementRef.nativeElement.children[0]);
+        }
+
+        if (this.sortable || this.filterable) {
+            headerWidth += this.headerCell.elementRef.nativeElement.children[1].getBoundingClientRect().width;
+        }
+
+        const headerStyle = this.grid.document.defaultView.getComputedStyle(this.headerCell.elementRef.nativeElement);
+        const headerPadding = parseFloat(headerStyle.paddingLeft) + parseFloat(headerStyle.paddingRight) +
+            parseFloat(headerStyle.borderRightWidth);
+
+        // Take into consideration the header group element, since column pinning applies borders to it if its not a columnGroup.
+        const headerGroupStyle = this.grid.document.defaultView.getComputedStyle(this.headerGroup.element.nativeElement);
+        const borderSize = !this.parent ? parseFloat(headerGroupStyle.borderRightWidth) + parseFloat(headerGroupStyle.borderLeftWidth) : 0;
+
+        return { width: Math.ceil(headerWidth), padding: Math.ceil(headerPadding + borderSize)};
+    }
+
     /**
      * @hidden
      * Returns the size (in pixels) of the longest currently visible cell, including the header cell.
@@ -1795,29 +1883,14 @@ export class IgxColumnComponent implements AfterContentInit {
             const index = cellsContentWidths.indexOf(Math.max(...cellsContentWidths));
             const cellStyle = this.grid.document.defaultView.getComputedStyle(this.cells[index].nativeElement);
             const cellPadding = parseFloat(cellStyle.paddingLeft) + parseFloat(cellStyle.paddingRight) +
-                parseFloat(cellStyle.borderRightWidth);
+                parseFloat(cellStyle.borderLeftWidth) + parseFloat(cellStyle.borderRightWidth);
 
             largest.set(Math.max(...cellsContentWidths), cellPadding);
         }
 
         if (this.headerCell) {
-            let headerCell;
-            if (this.headerTemplate && this.headerCell.elementRef.nativeElement.children[0].children.length > 0) {
-                headerCell = Math.max(...Array.from(this.headerCell.elementRef.nativeElement.children[0].children)
-                    .map((child) => getNodeSizeViaRange(range, child)));
-            } else {
-                headerCell = getNodeSizeViaRange(range, this.headerCell.elementRef.nativeElement.children[0]);
-            }
-
-            if (this.sortable || this.filterable) {
-                headerCell += this.headerCell.elementRef.nativeElement.children[1].getBoundingClientRect().width;
-            }
-
-            const headerStyle = this.grid.document.defaultView.getComputedStyle(this.headerCell.elementRef.nativeElement);
-            const headerPadding = parseFloat(headerStyle.paddingLeft) + parseFloat(headerStyle.paddingRight) +
-                parseFloat(headerStyle.borderRightWidth);
-            largest.set(headerCell, headerPadding);
-
+            const headerCellWidths = this.getHeaderCellWidths();
+            largest.set(headerCellWidths.width, headerCellWidths.padding);
         }
 
         const largestCell = Math.max(...Array.from(largest.keys()));
@@ -1863,14 +1936,14 @@ export class IgxColumnComponent implements AfterContentInit {
         const colWidth = this.width;
         const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
         if (isPercentageWidth) {
-            this._calcWidth = parseInt(colWidth, 10) / 100 * grid.calcWidth;
+            this._calcWidth = parseFloat(colWidth) / 100 * grid.calcWidth;
         } else if (!colWidth) {
             // no width
             this._calcWidth = this.defaultWidth || grid.getPossibleColumnWidth();
         } else {
             this._calcWidth = this.width;
         }
-        this.calcPixelWidth = parseInt(this._calcWidth, 10);
+        this.calcPixelWidth = parseFloat(this._calcWidth);
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -3555,7 +3555,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (this.hasColumnLayouts) {
             return '';
         }
-        const colWidth = parseInt(column.calcWidth, 10);
+        const colWidth = parseFloat(column.calcWidth);
         const minWidth = this.defaultHeaderGroupMinWidth;
 
         if (colWidth < minWidth) {