Merge branch 'master' into mpopov/chip-z-index

Author: simeonoff

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/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/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) {

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -25,7 +25,7 @@ import { ColumnType } from './common/column.interface';
 import { RowType } from './common/row.interface';
 import { GridSelectionMode } from './common/enums';
 import { GridType } from './common/grid.interface';
-import { getCurrencySymbol, getLocaleCurrencyCode} from '@angular/common';
+import { getCurrencySymbol, getLocaleCurrencyCode } from '@angular/common';
 import { GridColumnDataType } from '../data-operations/data-util';
 import { IgxRowDirective } from './row.directive';
 import { ISearchInfo } from './common/events';
@@ -165,11 +165,18 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      * @memberof IgxGridCellComponent
      */
     public get context(): any {
-        return {
+        const ctx = {
             $implicit: this.value,
-            cell: this.getCellType(),
-            additionalTemplateContext: this.column.additionalTemplateContext
+            additionalTemplateContext: this.column.additionalTemplateContext,
         };
+        /* Turns the `cell` property from the template context object into lazy-evaluated one.
+         * Otherwise on each detection cycle the cell template is recreating N cell instances where
+         * N = number of visible cells in the grid, leading to massive performance degradation in large grids.
+         */
+        Object.defineProperty(ctx, 'cell', {
+            get: () => this.getCellType()
+        });
+        return ctx;
     }
 
     /**
@@ -804,7 +811,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
             cell = this.grid.crudService.createCell(this);
         }
         cell.editValue = val;
-        const args = this.gridAPI.update_cell(cell);
+        this.gridAPI.update_cell(cell);
         this.grid.crudService.endCellEdit();
         this.cdr.markForCheck();
     }
@@ -831,7 +838,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
             }
             return;
         }
-        if(this.platformUtil.isFirefox) {
+        if (this.platformUtil.isFirefox) {
             event.preventDefault();
         }
         this.selectionService.pointerDown(this.selectionNode, event.shiftKey, event.ctrlKey);
@@ -1034,6 +1041,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     private getCellType(): CellType {
-        return new IgxGridCell(this.grid, this.row.index, this.column.field);
+        return new IgxGridCell(this.grid, this.intRow.index, this.column.field);
     }
 }

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

@@ -5848,7 +5848,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     public cachedViewLoaded(args: ICachedViewLoadedEventArgs) {
         if (this.hasHorizontalScroll()) {
-            const tmplId = args.context.templateID;
+            const tmplId = args.context.templateID.type;
             const index = args.context.index;
             args.view.detectChanges();
             this.zone.onStable.pipe(first()).subscribe(() => {

projects/igniteui-angular/src/lib/grids/grid-public-cell.ts

@@ -35,6 +35,7 @@ export class IgxGridCell implements CellType {
 			this._rowIndex = row;
 		} else {
 			this._row = row;
+			this._rowIndex = row.index;
 		}
 		if (typeof column === 'string') {
 			this._columnField = column;
@@ -52,7 +53,7 @@ export class IgxGridCell implements CellType {
 	 * @memberof IgxGridCell
 	 */
 	public get row(): RowType {
-		return this._row || this.grid.createRow(this._rowIndex);
+		return this.grid.createRow(this._rowIndex);
 	}
 
 	/**

projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts

@@ -845,7 +845,7 @@ describe('IgxGrid - Row Adding #grid', () => {
             });
             fixture.detectChanges();
 
-            const groupRows = grid.groupsRowList.toArray();
+            let groupRows = grid.groupsRowList.toArray();
             grid.toggleGroup(groupRows[2].groupRow);
             fixture.detectChanges();
             expect(groupRows[2].expanded).toBeFalse();
@@ -867,6 +867,7 @@ describe('IgxGrid - Row Adding #grid', () => {
             fixture.detectChanges();
             const row2 = grid.getRowByKey(addedRec[grid.primaryKey]);
 
+            groupRows = grid.groupsRowList.toArray();
             expect(row2).not.toBeNull();
             expect(groupRows[2].expanded).toBeTrue();
             expect(groupRows[2].groupRow.records.length).toEqual(2);