Merge branch 'master' into roadmap-update-28jul21

Author: kdinev

package.json

@@ -20,7 +20,7 @@
     "test:lib:azure:tgrid": "ng test igniteui-angular --watch=false --no-progress --karma-config=./projects/igniteui-angular/karma.azure.tree-grid.conf.js",
     "test:lib:azure:hgrid": "ng test igniteui-angular --watch=false --no-progress --karma-config=./projects/igniteui-angular/karma.azure.hierarchical-grid.conf.js",
     "test:lib:azure:others": "ng test igniteui-angular --watch=false --no-progress --karma-config=./projects/igniteui-angular/karma.azure.non-grid.conf.js",
-    "test:lib:watch": "ng test igniteui-angular",
+    "test:lib:watch": "ng test igniteui-angular --karma-config=./projects/igniteui-angular/karma.watch.conf.js",
     "test:schematics": "ts-node --project projects/igniteui-angular/migrations/tsconfig.json ./node_modules/jasmine/bin/jasmine.js ./projects/igniteui-angular/migrations/**/*.spec.ts ./projects/igniteui-angular/schematics/**/*.spec.ts",
     "test:styles": "ts-node --skip-project ./node_modules/jasmine/bin/jasmine.js ./projects/igniteui-angular/src/lib/core/styles/spec/tests.ts",
     "build:lib": "ng build igniteui-angular --configuration production && gulp buildStyle",

projects/igniteui-angular/karma.watch.conf.js

@@ -0,0 +1,46 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', 'jasmine-spec-tags', '@angular-devkit/build-angular'],
+    files: [
+      { pattern: '../../node_modules/hammerjs/hammer.min.js', watched: false },
+      { pattern: '../../node_modules/hammer-simulator/index.js', watched: false },
+      { pattern: './test.css', watched: false },
+      { pattern: '../../dist/igniteui-angular/styles/igniteui-angular.css', watched: false }
+    ],
+    plugins: [
+        require('karma-jasmine'),
+        require('karma-chrome-launcher'),
+        require('karma-jasmine-spec-tags'),
+        require('karma-jasmine-html-reporter'),
+        require('karma-spec-reporter'),
+        require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+      jasmine: {
+        random: false
+      },
+      tagPrefix: '#',
+      skipTags: 'perf'
+    },
+    reporters: ['progress'],
+    specReporter: {
+        suppressSkipped: true,
+        suppressErrorSummary: false,
+        suppressFailed: false,
+        suppressPassed: false,
+        showSpecTiming: false,
+        failFast: false
+    },
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

projects/igniteui-angular/migrations/common/UpdateChanges.ts

@@ -489,16 +489,15 @@ export class UpdateChanges {
                 return;
             }
             let content;
-            try {
-                // there could be comments in the json file and JSON.parse would fail
-                // TODO: use some 3rd party parser or write our own.
-                // @angular-devkit/core.parseJson is deprecated
-                content = JSON.parse(originalContent);
-            } catch (e: any) {
+            // use ts parser as it handles jsonc-style files w/ comments
+            const result = ts.parseConfigFileTextToJson(TSCONFIG_PATH, originalContent);
+            if (!result.error) {
+                content = result.config;
+            } else {
                 this.context?.logger
                 .warn(`Could not parse ${TSCONFIG_PATH}. Angular Ivy language service might be unavailable during migrations.`);
                 this.context?.logger
-                .warn(`Error:\n${e}`);
+                .warn(`Error:\n${result.error}`);
                 return;
             }
             if (!content.angularCompilerOptions) {

projects/igniteui-angular/package.json

@@ -84,7 +84,7 @@
         "web-animations-js": "^2.3.2"
     },
     "igxDevDependencies": {
-        "@igniteui/angular-schematics": "~12.1.810-beta.0"
+        "@igniteui/angular-schematics": "~12.1.810"
     },
     "ng-update": {
         "migrations": "./migrations/migration-collection.json"

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

@@ -376,7 +376,7 @@ export class IgxCheckboxComponent implements ControlValueAccessor, EditorProvide
     }
     /** @hidden @internal */
     @HostListener('click', ['$event'])
-    public _onCheckboxClick(event: MouseEvent) {
+    public _onCheckboxClick(event: PointerEvent | MouseEvent) {
         // Since the original checkbox is hidden and the label
         // is used for styling and to change the checked state of the checkbox,
         // we need to prevent the checkbox click event from bubbling up

projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss

@@ -578,7 +578,6 @@
 
     %igx-chip__ghost {
         position: absolute;
-        z-index: 10;
         box-shadow: --var($theme, 'ghost-shadow');
         overflow: hidden;
         color: --var($theme, 'focus-text-color');
@@ -606,6 +605,14 @@
             padding: map-get($chip-padding, 'compact');
         }
     }
+
+    // Remark: If z-index is not set, the chip would
+    // hide behind it's parent grid as it has a z-index of 1
+    %igx-chip__ghost,
+    %igx-chip__ghost--cosy,
+    %igx-chip__ghost--compact {
+        z-index: 10;
+    }
 }
 
 /// Adds typography styles for the igx-chip component.

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.module.ts

@@ -43,6 +43,7 @@ import { IgxCalendarContainerModule } from '../date-common/calendar-container/ca
         IgxDateRangeEndComponent,
         IgxDateRangeSeparatorDirective,
         IgxDateTimeEditorModule,
+        IgxPickersCommonModule,
         IgxInputGroupModule
     ]
 })

projects/igniteui-angular/src/lib/directives/button/button.directive.ts

@@ -238,7 +238,7 @@ export class IgxButtonDirective extends DisplayDensityBase {
      */
     @Input()
     @HostBinding('class.igx-button--disabled')
-    public get disabled() {
+    public get disabled(): boolean {
         return this._disabled;
     }
 
@@ -251,7 +251,7 @@ export class IgxButtonDirective extends DisplayDensityBase {
      * ```
      */
     public set disabled(val: boolean) {
-        this._disabled = !!val;
+        this._disabled = (val as any === '') || val;
     }
 
     /**

projects/igniteui-angular/src/lib/directives/mask/mask.directive.spec.ts

@@ -158,7 +158,7 @@ describe('igxMask', () => {
         UIInteractions.simulateCompositionEvent('０９０６２０２１', input, 0, 10);
         fixture.detectChanges();
 
-        input.triggerEventHandler('blur', {});
+        input.triggerEventHandler('blur', { target: input.nativeElement });
         tick();
         fixture.detectChanges();
 
@@ -178,7 +178,7 @@ describe('igxMask', () => {
         UIInteractions.simulateCompositionEvent('あんｓ', input, 0, 3);
         fixture.detectChanges();
 
-        input.triggerEventHandler('blur', {});
+        input.triggerEventHandler('blur', { target: input.nativeElement });
         tick();
         fixture.detectChanges();
 

projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts

@@ -31,9 +31,10 @@ export class IgxTemplateOutletDirective implements OnChanges {
 
     /**
      * The embedded views cache. Collection is key-value paired.
-     * Key is the template id, value is the embedded view for the related template.
+     * Key is the template type, value is another key-value paired collection
+     * where the key is the template id and value is the embedded view for the related template.
      */
-    private _embeddedViewsMap: Map<string, EmbeddedViewRef<any>> = new Map();
+    private _embeddedViewsMap: Map<string, Map<any, EmbeddedViewRef<any>>> = new Map();
 
     constructor(public _viewContainerRef: ViewContainerRef, private _zone: NgZone, public cdr: ChangeDetectorRef) {
     }
@@ -49,19 +50,23 @@ export class IgxTemplateOutletDirective implements OnChanges {
     }
 
     public cleanCache() {
-        this._embeddedViewsMap.forEach((item) => {
-            if (!item.destroyed) {
-                item.destroy();
-            }
+        this._embeddedViewsMap.forEach((collection) => {
+            collection.forEach((item => {
+                if (!item.destroyed) {
+                    item.destroy();
+                }
+            }));
+            collection.clear();
         });
         this._embeddedViewsMap.clear();
     }
 
     public cleanView(tmplID) {
-        const embView = this._embeddedViewsMap.get(tmplID);
+        const embViewCollection = this._embeddedViewsMap.get(tmplID.type);
+        const embView = embViewCollection?.get(tmplID.id);
         if (embView) {
             embView.destroy();
-            this._embeddedViewsMap.delete(tmplID);
+            this._embeddedViewsMap.get(tmplID.type).delete(tmplID.id);
         }
     }
 
@@ -81,9 +86,11 @@ export class IgxTemplateOutletDirective implements OnChanges {
                 // if context contains a template id, check if we have a view for that template already stored in the cache
                 // if not create a copy and add it to the cache in detached state.
                 // Note: Views in detached state do not appear in the DOM, however they remain stored in memory.
-                const res = this._embeddedViewsMap.get(this.igxTemplateOutletContext['templateID']);
+                const resCollection = this._embeddedViewsMap.get(this.igxTemplateOutletContext['templateID'].type);
+                const res = resCollection?.get(this.igxTemplateOutletContext['templateID'].id);
                 if (!res) {
-                    this._embeddedViewsMap.set(this.igxTemplateOutletContext['templateID'], this._viewRef);
+                    this._embeddedViewsMap.set(this.igxTemplateOutletContext['templateID'].type,
+                        new Map([[this.igxTemplateOutletContext['templateID'].id, this._viewRef]]));
                 }
             }
         }
@@ -115,7 +122,7 @@ export class IgxTemplateOutletDirective implements OnChanges {
         // use view for specific template cached in the current template outlet
         const tmplID = this.igxTemplateOutletContext['templateID'];
         const cachedView = tmplID ?
-            this._embeddedViewsMap.get(tmplID) :
+            this._embeddedViewsMap.get(tmplID.type)?.get(tmplID.id) :
             null;
         // if view exists, but template has been changed and there is a view in the cache with the related template
         // then detach old view and insert the stored one with the matching template
@@ -171,7 +178,7 @@ export class IgxTemplateOutletDirective implements OnChanges {
         const movedView = this.igxTemplateOutletContext['moveView'];
         const tmplID = this.igxTemplateOutletContext['templateID'];
         const cachedView = tmplID ?
-            this._embeddedViewsMap.get(tmplID) :
+            this._embeddedViewsMap.get(tmplID.type)?.get(tmplID.id) :
             null;
         const shouldRecreate = this._shouldRecreateView(changes);
         if (movedView) {