Merge branch 'bpenkov/overlay-close-on-escape' of https://github.com/IgniteUI/igniteui-angular into bpenkov/overlay-close-on-escape

Author: jackofdiamond5

CHANGELOG.md

@@ -11,6 +11,8 @@ All notable changes for each version of this project will be documented in this
     - Added new property - `closeOnEsc` - in `OverlaySettings`. The overlay can now be prevented from closing, on escape keypress, by setting the property to `false`, by default it's `true`.
 - `igxDialog`
     - Added `closeOnEscapeKey` - with it, the dialog can be allowed or prevented from closing when `Esc` is pressed.
+- `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
 - `IgxGridState` directive
     - Added support for expansion states, column selection and row pinning.
@@ -23,6 +25,8 @@ All notable changes for each version of this project will be documented in this
 - `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
 

angularDocsPostDeploy.ps1

@@ -61,7 +61,7 @@ Write-Host "Check file exists: " ([System.IO.File]::Exists($filePath))
 Write-Host "Check dir exists:" ([System.IO.Directory]::Exists($angularDocsRootFolder));
 
 if([System.IO.File]::Exists($filePath) -and [System.IO.Directory]::Exists($angularDocsRootFolder)) {
-    $folders = Get-ChildItem -Path $angularDocsRootFolder -Directory -Exclude $tagFolder,"sass","typescript";
+    $folders = Get-ChildItem -Path $angularDocsRootFolder -Directory -Exclude $tagFolder,"sass","typescript" -Name | Sort-Object @{Expression = {[double]($_.Substring(0, $_.LastIndexOf('.'))) }};
     $textToUpdate = "";
     foreach($item in $folders) {
         $textToUpdate += '"' + $item.Name + '"'; 
@@ -72,4 +72,4 @@ if([System.IO.File]::Exists($filePath) -and [System.IO.Directory]::Exists($angul
     $content = [System.IO.File]::ReadAllText($filePath);
     $newContent = $content -replace "\[.*\]", $textToUpdate;
     [System.IO.File]::WriteAllText($filePath,$newContent);
-}
+}

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-10_1_0/changes/classes.json

@@ -0,0 +1,9 @@
+{
+    "$schema": "../../common/schema/class.schema.json",
+    "changes": [
+        {
+            "name": "IgxActionIconDirective",
+            "replaceWith": "IgxNavbarActionDirective"
+        }
+    ]
+}

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

@@ -0,0 +1,10 @@
+{
+    "$schema": "../../common/schema/selector.schema.json",
+    "changes": [
+        {
+            "type": "component",
+            "selector": "igx-action-icon",
+            "replaceWith": "igx-navbar-action"
+        }
+    ]
+}

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

@@ -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.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/src/lib/action-strip/grid-actions/grid-actions-base.directive.ts

@@ -1,12 +1,13 @@
 import { Directive, Inject } from '@angular/core';
 import { IgxActionStripComponent } from '../action-strip.component';
 import { IgxRowDirective } from '../../grids/public_api';
+import { IgxGridIconService } from '../../grids/common/grid-icon.service';
 
 @Directive({
     selector: '[igxGridActionsBase]'
 })
 export class IgxGridActionsBaseDirective {
-    constructor(@Inject(IgxActionStripComponent) protected strip: IgxActionStripComponent) { }
+    constructor(@Inject(IgxActionStripComponent) protected strip: IgxActionStripComponent, protected iconService: IgxGridIconService) { }
 
     /**
      * Getter to be used in template

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions-icons.ts

@@ -0,0 +1,16 @@
+/* tslint:disable */
+export const PINNING_ACTIONS_ICONS_FONT_SET = 'pinning-actions-icons';
+export const PINNING_ACTIONS_ICONS = [
+    {
+        name: 'jump_up',
+        value: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6 8l4 4H7c0 3.31 2.69 6 6 6 1.01 0 1.97-.25 2.8-.7l1.46 1.46A7.93 7.93 0 0113 20c-4.42 0-8-3.58-8-8H2l4-4zm15-5v2H5V3h16z"/>
+        </svg>`
+    },
+    {
+        name: 'jump_down',
+        value: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M21 19v2H5v-2h16zM13 4c1.57 0 3.03.46 4.26 1.24L15.8 6.7A5.87 5.87 0 0013 6c-3.31 0-6 2.69-6 6h3l-4 4-4-4h3c0-4.42 3.58-8 8-8z"/>
+        </svg>`
+    }
+];

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.html

@@ -1,14 +1,14 @@
 <ng-container *ngIf="isRowContext">
     <button *ngIf="inPinnedArea && pinnedTop" igxRipple igxButton="icon" (click)="scrollToRow($event)">
-        <igx-icon fontSet="filtering-icons" name="jump_down"></igx-icon>
+        <igx-icon fontSet="pinning-actions-icons" name="jump_down"></igx-icon>
     </button>
     <button *ngIf="inPinnedArea && !pinnedTop" igxRipple igxButton="icon" (click)="scrollToRow($event)">
-        <igx-icon fontSet="filtering-icons" name="jump_up"></igx-icon>
+        <igx-icon fontSet="pinning-actions-icons" name="jump_up"></igx-icon>
     </button>
     <button *ngIf="!pinned" igxRipple igxButton="icon" (click)="pin($event)">
-        <igx-icon fontSet="filtering-icons" name="pin"></igx-icon>
+        <igx-icon fontSet="pinning-icons" name="pin"></igx-icon>
     </button>
     <button *ngIf="pinned" igxRipple igxButton="icon" (click)="unpin($event)">
-        <igx-icon fontSet="filtering-icons" name="unpin"></igx-icon>
+        <igx-icon fontSet="pinning-icons" name="unpin"></igx-icon>
     </button>
 </ng-container>