Merge branch 'astaev/issue7377-master' of github.com:IgniteUI/igniteui-angular into astaev/issue7377-master

Author: simeonoff

CHANGELOG.md

@@ -4,9 +4,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.
+- `IgxNavbar`:
+    - **Breaking Changes** - The `igx-action-icon` has been renamed to `igx-navbar-action`. It should get renamed in your components via `ng update`;
+
 ### New Features
-- `IgxColumn` 
+- `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.
+- `IgxNavbar`
+    - Added new `igx-navbar-title, igxNavbarTitle` directive that can be used to provide custom content for navbar title. It would override the value of `title` input property.
 
 ## 10.0.0
 
@@ -16,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`
@@ -41,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
@@ -162,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/migrations/migration-collection.json

@@ -75,6 +75,11 @@
             "version": "9.1.0",
             "description": "Updates Ignite UI for Angular from v9.0.x to v9.1.0",
             "factory": "./update-9_1_0"
+        },
+        "migration-16": {
+            "version": "10.1.0",
+            "description": "Updates Ignite UI for Angular from v10.0.x to v10.1.0",
+            "factory": "./update-10_1_0"
         }
     }
 }

projects/igniteui-angular/migrations/update-9_1_0/changes/classes.json renamed to projects/igniteui-angular/migrations/update-10_1_0/changes/classes.json

@@ -3,8 +3,8 @@
     "changes": [
         {
             "type": "component",
-            "selector": "<igx-action-icon>",
-            "replaceWith": "<igx-navbar-action>"
+            "selector": "igx-action-icon",
+            "replaceWith": "igx-navbar-action"
         }
     ]
 }

projects/igniteui-angular/migrations/update-9_1_0/changes/selectors.json renamed to projects/igniteui-angular/migrations/update-10_1_0/changes/selectors.json

@@ -0,0 +1,68 @@
+import * as path from 'path';
+
+// tslint:disable:no-implicit-dependencies
+import { virtualFs } from '@angular-devkit/core';
+import { EmptyTree } from '@angular-devkit/schematics';
+// tslint:disable-next-line:no-submodule-imports
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+describe('Update 10.1.0', () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+    const configJson = {
+        defaultProject: 'testProj',
+        projects: {
+            testProj: {
+                sourceRoot: '/testSrc'
+            }
+        },
+        schematics: {
+            '@schematics/angular:component': {
+                prefix: 'appPrefix'
+            }
+        }
+    };
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+
+    it('should upgrade the igx-action-icon to igx-navbar-action', async () => {
+        appTree.create(
+            '/testSrc/appPrefix/component/custom.component.html',
+            `<igx-navbar title="Test title">
+            <igx-action-icon>
+            <igx-icon>arrow_back</igx-icon>
+            </igx-action-icon>
+            </igx-navbar>`);
+        const tree = await schematicRunner.runSchematicAsync('migration-16', {}, appTree)
+            .toPromise();
+
+        expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
+            .toEqual(
+            `<igx-navbar title="Test title">
+            <igx-navbar-action>
+            <igx-icon>arrow_back</igx-icon>
+            </igx-navbar-action>
+            </igx-navbar>`);
+    });
+
+    it('should update IgxActionIconDirective to IgxNavbarActionDirective', async () => {
+        appTree.create('/testSrc/appPrefix/component/custom.component.ts',
+            `import { IgxActionIconDirective } from 'igniteui-angular';
+            export class TestNavbar {
+            @ViewChild(IgxActionIconDirective, { read: IgxActionIconDirective })
+            private actionIcon: IgxActionIconDirective; }`);
+
+        const tree = await schematicRunner.runSchematicAsync('migration-16', {}, appTree).toPromise();
+
+        expect(tree.readContent('/testSrc/appPrefix/component/custom.component.ts'))
+            .toEqual(
+                `import { IgxNavbarActionDirective } from 'igniteui-angular';
+            export class TestNavbar {
+            @ViewChild(IgxNavbarActionDirective, { read: IgxNavbarActionDirective })
+            private actionIcon: IgxNavbarActionDirective; }`);
+    });
+
+});

projects/igniteui-angular/migrations/update-10_1_0/index.spec.ts

@@ -0,0 +1,17 @@
+import {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges, InputPropertyType, BoundPropertyObject } from '../common/UpdateChanges';
+
+const version = '10.1.0';
+
+export default function (): Rule {
+    return (host: Tree, context: SchematicContext) => {
+        context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+
+        const update = new UpdateChanges(__dirname, host, context);
+        update.applyChanges();
+    };
+}

projects/igniteui-angular/migrations/update-10_1_0/index.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/combo/combo.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`;
@@ -1754,12 +1792,30 @@ export class IgxColumnComponent implements AfterContentInit {
      */
     public autosize(byHeader = false) {
         if (!this.columnGroup) {
-            this.width = !byHeader ? this.getLargestCellWidth() :
-                (Object.values(this.getHeaderCellWidths()).reduce((a, b) => a + b) + 'px');
+            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
      */
@@ -1880,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/columns/column.component.ts

@@ -3552,7 +3552,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) {