Merge branch '10.1.x' into dTsvetkov/fix-issue-8320-10.1.x

Author: hanastasov

.github/workflows/nodejs.yml

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

angular.json

@@ -69,6 +69,9 @@
                   "with": "src/environments/environment.hmr.ts"
                 }
               ]
+            },
+            "es5": {
+              "tsConfig": "src/tsconfig-es5.app.json"
             }
           }
         },
@@ -85,6 +88,9 @@
               "hmr": true,
               "hmrWarning": false,
               "browserTarget": "igniteui-dev-demos:build:hmr"
+            },
+            "es5": {
+              "browserTarget": "igniteui-dev-demos:build:es5"
             }
           }
         },

package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve --open --configuration hmr",
+    "start-es5": "ng serve --configuration es5 -o",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",

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

@@ -390,7 +390,7 @@ describe('UpdateChanges', () => {
         });
         spyOn<any>(fs, 'readFileSync').and.callFake(() => JSON.stringify(classJson));
 
-        const fileContent =
+        let fileContent =
 `import { Size, Type as someThg } from "igniteui-angular";
 import { IgxService, IgxDiffService as eDiffService, Calendar as Calendar } from 'igniteui-angular';
 import { Type } from "@angular/core";
@@ -411,7 +411,7 @@ export class Test {
         expect(update.getClassChanges()).toEqual(classJson);
 
         update.applyChanges();
-        expect(appTree.readContent('test.component.ts')).toEqual(
+        let expectedFileContent =
 `import { IgxSize, IgxType as someThg } from "igniteui-angular";
 import { IgxService1, IgxNewDiffService as eDiffService, CalendarActual as Calendar } from 'igniteui-angular';
 import { Type } from "@angular/core";
@@ -423,8 +423,15 @@ export class Test {
     cal: Calendar;
 
     constructor (public router: Router, private _iconService: IgxService1) {}
-}`
-        );
+}`;
+        expect(appTree.readContent('test.component.ts')).toEqual(expectedFileContent);
+
+        // with ig feed package:
+        fileContent = fileContent.replace(/igniteui-angular/g, '@infragistics/igniteui-angular');
+        expectedFileContent = expectedFileContent.replace(/igniteui-angular/g, '@infragistics/igniteui-angular');
+        appTree.overwrite('test.component.ts', fileContent);
+        update.applyChanges();
+        expect(appTree.readContent('test.component.ts')).toEqual(expectedFileContent);
     });
 
     it('should move property value between element tags', done => {

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

@@ -64,7 +64,7 @@ export function getImportModulePositions(sourceText: string, startsWith: string)
 /** Filters out statements to named imports (e.g. `import {x, y}`) from PACKAGE_IMPORT */
 const namedImportFilter = (statement: ts.Statement) => {
     if (statement.kind === ts.SyntaxKind.ImportDeclaration &&
-        ((statement as ts.ImportDeclaration).moduleSpecifier as ts.StringLiteral).text === PACKAGE_IMPORT) {
+        ((statement as ts.ImportDeclaration).moduleSpecifier as ts.StringLiteral).text.endsWith(PACKAGE_IMPORT)) {
 
         const clause = (statement as ts.ImportDeclaration).importClause;
         return clause && clause.namedBindings && clause.namedBindings.kind === ts.SyntaxKind.NamedImports;

projects/igniteui-angular/src/lib/calendar/public_api.ts

@@ -1,4 +1,5 @@
 export * from './calendar';
+export * from './calendar-base';
 export * from './calendar.component';
 export * from './days-view/days-view.component';
 export * from './months-view/months-view.component';

projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

@@ -401,7 +401,9 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         private _cdr: ChangeDetectorRef,
         private _moduleRef: NgModuleRef<any>,
         private _injector: Injector,
-        private _renderer: Renderer2) { }
+        private _renderer: Renderer2) {
+    }
+
 
     /**
      * Gets the input group template.
@@ -801,7 +803,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         return this._inputGroup || this._inputGroupUserTemplate || null;
     }
 
-     /** @hidden @internal */
+    /** @hidden @internal */
     public get inputDirective(): IgxInputDirective {
         return this._inputDirective || this._inputDirectiveUserTemplates.first || null;
     }
@@ -895,7 +897,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 
         this._inputDirectiveUserTemplates.changes.subscribe(() => {
             this.attachTemplateBlur();
-         });
+        });
         this.attachTemplateBlur();
     }
 
@@ -911,8 +913,8 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
                     this.rawDateString = (res.target as HTMLInputElement).value;
                     this.onBlur(res, false);
                 });
-                // TODO: Refactor custom template handling.
-                // Revise blur handling when custom template is passed
+            // TODO: Refactor custom template handling.
+            // Revise blur handling when custom template is passed
         }
     }
 
@@ -1151,6 +1153,12 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 
     /** @hidden @internal */
     public onInput(event) {
+        /**
+         * Fix for #8165 until refactoring (#6483).
+         * The IgxDateTimeEditor will be used to handle all inputs, i.e. this handler will be removed.
+         * It extends the IgxMaskDirective which contains logic that handles this issue.
+         */
+        if (isIE() && !this._isInEditMode && !this.inputGroup.isFocused) { return; }
         const targetValue = event.target.value;
         const cursorPosition = this._getCursorPosition();
         const checkInput = DatePickerUtil.checkForCompleteDateInput(this.dateFormatParts, targetValue);

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

@@ -154,7 +154,7 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
     /** @hidden */
     public ngOnInit(): void {
         if (!this.nativeElement.placeholder) {
-          this.renderer.setAttribute(this.nativeElement, 'placeholder', this.maskOptions.format);
+            this.renderer.setAttribute(this.nativeElement, 'placeholder', this.maskOptions.format);
         }
     }
 
@@ -188,7 +188,15 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
     /** @hidden */
     @HostListener('input')
     public onInputChanged(): void {
-        if (isIE() && this._stopPropagation) {
+        /**
+         * '!this._focused' is a fix for #8165
+         * On page load IE triggers input events before focus events and
+         * it does so for every single input on the page.
+         * The mask needs to be prevented from doing anything while this is happening because
+         * the end user will be unable to blur the input.
+         * https://stackoverflow.com/questions/21406138/input-event-triggered-on-internet-explorer-when-placeholder-changed
+         */
+        if (isIE() && (this._stopPropagation || !this._focused)) {
             this._stopPropagation = false;
             return;
         }

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -443,7 +443,7 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
 
     public get_all_data(includeTransactions = false): any[] {
         const grid = this.grid;
-        let data = grid.data ? grid.data : [];
+        let data = grid && grid.data ? grid.data : [];
         data = includeTransactions ? grid.dataWithAddedInTransactionRows : data;
         return data;
     }

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

@@ -8,7 +8,7 @@
     >
 </ng-template>
 <ng-template #defaultCell>
-    <div
+    <div *ngIf="column.dataType !== 'boolean'"
         igxTextHighlight
         class="igx-grid__td-text"
         style="pointer-events: none;"
@@ -35,8 +35,6 @@
                 ? (value | number:column.pipeArgs.digitsInfo:grid.locale)
                 : column.dataType === "date"
                 ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)
-                : column.dataType === "boolean"
-                ? ""
                 : value
         }}</div>
     <igx-icon