Merge branch 'mkirova/splitter-spec-changes' of https://github.com/IgniteUI/igniteui-angular.git

MKirova · MKirova · commit 93745dbfd655 · 2020-04-14T18:44:45.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,9 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - When a column is sortable sort indicator is always visible. The column is sorted when click on it.
 
+- `IgxInputGroup`
+  - **Renamed** `supressInputAutofocus` input to `suppressInputAutofocus`
+
 ### Themes
 - **Breaking Change**  Change the default `$legacy-support` value to false in the `igx-theme` function.
 
diff --git a/projects/igniteui-angular/migrations/migration-collection.json b/projects/igniteui-angular/migrations/migration-collection.json
@@ -70,6 +70,11 @@
             "version": "9.0.1",
             "description": "Updates Ignite UI for Angular from v9.0.0 to v9.0.1",
             "factory": "./update-9_0_1"
+        },
+        "migration-15": {
+            "version": "9.1.0",
+            "description": "Updates Ignite UI for Angular from v9.0.x to v9.1.0",
+            "factory": "./update-9_1_0"
         }
     }
 }
diff --git a/projects/igniteui-angular/migrations/update-9_1_0/changes/inputs.json b/projects/igniteui-angular/migrations/update-9_1_0/changes/inputs.json
@@ -0,0 +1,13 @@
+{
+    "@scheme": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "supressInputAutofocus",
+            "replaceWith": "suppressInputAutofocus",
+            "owner": {
+                "selector": "igx-input-group",
+                "type": "component"
+            }
+        }
+    ]
+}
diff --git a/projects/igniteui-angular/migrations/update-9_1_0/index.spec.ts b/projects/igniteui-angular/migrations/update-9_1_0/index.spec.ts
@@ -0,0 +1,44 @@
+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 9.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 update igx-group supressInputAutofocus to suppressInputAutofocus', done => {
+        appTree.create(
+            `/testSrc/appPrefix/component/input.component.html`,
+            '<igx-input-group [supressInputAutofocus]="true"><input igxInput></igx-input-group>'
+        );
+
+        const tree = schematicRunner.runSchematic('migration-15', {}, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/input.component.html'))
+            .toEqual('<igx-input-group [suppressInputAutofocus]="true"><input igxInput></igx-input-group>');
+
+        done();
+    });
+});
diff --git a/projects/igniteui-angular/migrations/update-9_1_0/index.ts b/projects/igniteui-angular/migrations/update-9_1_0/index.ts
@@ -0,0 +1,17 @@
+import {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '9.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();
+    };
+}
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html
@@ -16,7 +16,7 @@
 </ng-template>
 
 <ng-template #editableDatePickerTemplate>
-    <igx-input-group #editableInputGroup [supressInputAutofocus]="true" (mousedown)="mouseDown($event)">
+    <igx-input-group #editableInputGroup [suppressInputAutofocus]="true" (mousedown)="mouseDown($event)">
         <igx-prefix (click)="openDialog(editableInputGroup.element.nativeElement)">
             <igx-icon>today</igx-icon>
         </igx-prefix>
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html
@@ -184,7 +184,7 @@ <h6 class="igx-filter-empty__title">
                                  [locale]="grid.locale"
                                  [outlet]="grid.outletDirective">
                     <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-value="value">
-                        <igx-input-group #dropDownTarget type="box" [displayDensity]="'compact'" [supressInputAutofocus]="true">
+                        <igx-input-group #dropDownTarget type="box" [displayDensity]="'compact'" [suppressInputAutofocus]="true">
                             <input #searchValueInput
                                     igxInput
                                     tabindex="0"
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html
@@ -10,7 +10,7 @@
 </igx-drop-down>
 
 <ng-template #defaultFilterUI>
-    <igx-input-group #inputGroup type="box" [displayDensity]="'compact'" [supressInputAutofocus]="true" (focusout)="onInputGroupFocusout()">
+    <igx-input-group #inputGroup type="box" [displayDensity]="'compact'" [suppressInputAutofocus]="true" (focusout)="onInputGroupFocusout()">
         <igx-prefix #inputGroupPrefix
                     (click)="toggleConditionsDropDown(inputGroupPrefix)"
                     (keydown)="onPrefixKeyDown($event)"
@@ -50,7 +50,7 @@
         (onSelection)="onDateSelected($event)"
         (onClose)="datePickerClose()">
         <ng-template igxDatePickerTemplate let-openDialog="openDialog">
-            <igx-input-group #inputGroup type="box" [displayDensity]="'compact'" [supressInputAutofocus]="true" (focusout)="onInputGroupFocusout()">
+            <igx-input-group #inputGroup type="box" [displayDensity]="'compact'" [suppressInputAutofocus]="true" (focusout)="onInputGroupFocusout()">
                 <igx-prefix #inputGroupPrefix
                             tabindex="0"
                             (click)="toggleConditionsDropDown(inputGroupPrefix)"
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts
@@ -24,7 +24,7 @@ import { IBaseChipEventArgs, IgxChipsAreaComponent, IgxChipComponent } from '../
 import { ExpressionUI } from '../grid-filtering.service';
 import { IgxDropDownItemComponent } from '../../../drop-down/drop-down-item.component';
 import { IgxFilteringService } from '../grid-filtering.service';
-import { KEYS, isEdge } from '../../../core/utils';
+import { KEYS, isEdge, isIE } from '../../../core/utils';
 import { AbsoluteScrollStrategy } from '../../../services/overlay/scroll';
 
 /**
@@ -262,8 +262,11 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
     public onInput(eventArgs) {
         // The 'iskeyPressed' flag is needed for a case in IE, because the input event is fired on focus and for some reason,
         // when you have a japanese character as a placeholder, on init the value here is empty string .
-        if (isEdge() || this.isKeyPressed || eventArgs.target.value) {
-            this.value = eventArgs.target.value;
+        // There is no need to reset the value on every invalid number input.
+        // The invalid value is converted to empty string input type="number"
+        const target = eventArgs.target;
+        if (isEdge() && target.type !== 'number' || this.isKeyPressed && isIE() || target.value) {
+             this.value = target.value;
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html
@@ -15,7 +15,7 @@
     (click)="toggleCustomDialogDropDown()"
     type="box"
     [displayDensity]="displayDensity"
-    [supressInputAutofocus]="true">
+    [suppressInputAutofocus]="true">
 
     <igx-prefix>
         <igx-icon *ngIf="expressionUI.expression.condition" fontSet="filtering-icons" [name]="getIconName()"></igx-icon>
@@ -36,7 +36,7 @@
 
 <igx-date-picker #datePicker mode="dropdown" [(ngModel)]="expressionUI.expression.searchVal" [locale]="grid.locale" [outlet]="grid.outletDirective">
     <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-value="value">
-        <igx-input-group #dropDownTarget type="box" [displayDensity]="displayDensity" [supressInputAutofocus]="true">
+        <igx-input-group #dropDownTarget type="box" [displayDensity]="displayDensity" [suppressInputAutofocus]="true">
             <input #input
                     igxInput
                     tabindex="0"
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html
@@ -15,7 +15,7 @@
     (click)="toggleCustomDialogDropDown()"
     type="box"
     [displayDensity]="displayDensity"
-    [supressInputAutofocus]="true">
+    [suppressInputAutofocus]="true">
 
     <igx-prefix>
         <igx-icon *ngIf="expressionUI.expression.condition" fontSet="filtering-icons" [name]="getIconName()"></igx-icon>
@@ -34,7 +34,7 @@
     />
 </igx-input-group>
 
-<igx-input-group #inputGroupValues type="box" [displayDensity]="displayDensity" [supressInputAutofocus]="true">
+<igx-input-group #inputGroupValues type="box" [displayDensity]="displayDensity" [suppressInputAutofocus]="true">
     <input
         #inputValues
         igxInput
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html
@@ -1,7 +1,7 @@
 <igx-input-group
             type="box"
             [displayDensity]="displayDensity"
-            [supressInputAutofocus]="true">
+            [suppressInputAutofocus]="true">
     <igx-icon igxPrefix>search</igx-icon>
     <input
         #input
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
@@ -229,6 +229,13 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
 
             expect(grid.rowList.length).toEqual(3);
             verifyFilterRowUI(input, close, reset, false);
+
+            // greater than or equal to with invalid value should not reset filter
+            GridFunctions.openFilterDDAndSelectCondition(fix, 4);
+            GridFunctions.typeValueInFilterRowInput('254..', fix, input);
+
+            expect(grid.rowList.length).toEqual(3);
+            verifyFilterRowUI(input, close, reset, false);
         }));
 
         // UI tests boolean column
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts
@@ -19,6 +19,7 @@ import { IgxPrefixModule} from '../directives/prefix/prefix.directive';
 import { IgxSuffixModule } from '../directives/suffix/suffix.directive';
 import { DisplayDensity, IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity';
 import { IgxInputGroupBase } from './input-group.common';
+import { DeprecateProperty } from '../core/deprecateDecorators';
 
 let NEXT_ID = 0;
 
@@ -40,8 +41,6 @@ enum IgxInputGroupType {
 export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInputGroupBase {
     private _type = IgxInputGroupType.LINE;
     private _filled = false;
-    private _supressInputAutofocus = false;
-
     /**
      * An ElementRef property of the `IgxInputGroupComponent`.
      */
@@ -136,6 +135,18 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
     @Input()
     public disabled = false;
 
+    /**
+     * Prevents automaticаlly focusing the input when clicking on other elements in the input group (e.g. prefix or suffix).
+     * @remarks Automatic focus causes software keyboard to show on mobile devices.
+     *
+     * @example
+     * ```html
+     * <igx-input-group [suppressInputAutofocus]="true"></igx-input-group>
+     * ```
+     */
+    @Input()
+    public suppressInputAutofocus = false;
+
     /**
      * @hidden
      */
@@ -175,7 +186,7 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
      */
     @HostListener('click', ['$event'])
     public onClick(event) {
-        if (!this._supressInputAutofocus) {
+        if (!this.suppressInputAutofocus) {
             this.input.focus();
         }
     }
@@ -219,24 +230,21 @@ export class IgxInputGroupComponent extends DisplayDensityBase implements IgxInp
     }
 
     /**
-     * Returns whether the input element of the input group will be automatically focused on click.
-     * ```typescript
-     * let supressInputAutofocus = this.inputGroup.supressInputAutofocus;
-     * ```
+     * @hidden
+     * @deprecated Use 'suppressInputAutofocus' instead.
      */
+    @DeprecateProperty(`Deprecated. Use 'suppressInputAutofocus' instead.`)
     @Input()
     public get supressInputAutofocus(): boolean {
-        return this._supressInputAutofocus;
+        return this.suppressInputAutofocus;
     }
 
     /**
-     * Sets whether the input element of the input group will be automatically focused on click.
-     * ```html
-     * <igx-input-group [supressInputAutofocus]="true"></igx-input-group>
-     * ```
+     * @hidden
+     * @deprecated Use 'suppressInputAutofocus' instead.
      */
     public set supressInputAutofocus(value: boolean) {
-        this._supressInputAutofocus = value;
+        this.suppressInputAutofocus = value;
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.directive.spec.ts b/projects/igniteui-angular/src/lib/input-group/input-group.directive.spec.ts
@@ -336,7 +336,7 @@ class InputGroupInputDisplayDensityComponent {
 }
 
 @Component({
-    template: `<igx-input-group #igxInputGroup [supressInputAutofocus]="true">
+    template: `<igx-input-group #igxInputGroup [suppressInputAutofocus]="true">
                     <igx-icon>phone</igx-icon>
                     <input igxInput #igxInput/>
                 </igx-input-group>`
diff --git a/projects/igniteui-angular/src/lib/tabbar/bottom-nav-routing-test-guard.spec.ts b/projects/igniteui-angular/src/lib/tabbar/bottom-nav-routing-test-guard.spec.ts
@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
+
+@Injectable()
+export class BottomNavRoutingTestGuard implements CanActivate {
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+      if (state.url === '/view5') {
+           return false;
+        } else {
+            return true;
+        }
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/tabbar/routing-view-components.spec.ts b/projects/igniteui-angular/src/lib/tabbar/routing-view-components.spec.ts
@@ -18,12 +18,26 @@ export class BottomNavRoutingView2Component {
 export class BottomNavRoutingView3Component {
 }
 
+@Component({
+    template: `This is a content from view component # 4`
+})
+export class BottomNavRoutingView4Component {
+}
+
+@Component({
+    template: `This is a content from view component # 5`
+})
+export class BottomNavRoutingView5Component {
+}
+
 /**
  * @hidden
  */
 @NgModule({
-    declarations: [BottomNavRoutingView1Component, BottomNavRoutingView2Component, BottomNavRoutingView3Component],
-    exports: [BottomNavRoutingView1Component, BottomNavRoutingView2Component, BottomNavRoutingView3Component],
+    declarations: [BottomNavRoutingView1Component, BottomNavRoutingView2Component, BottomNavRoutingView3Component,
+        BottomNavRoutingView4Component, BottomNavRoutingView5Component],
+    exports: [BottomNavRoutingView1Component, BottomNavRoutingView2Component, BottomNavRoutingView3Component,
+        BottomNavRoutingView4Component, BottomNavRoutingView5Component]
 })
 export class BottomNavRoutingViewComponentsModule {
 }
diff --git a/projects/igniteui-angular/src/lib/tabbar/tab-bar-content.component.html b/projects/igniteui-angular/src/lib/tabbar/tab-bar-content.component.html
@@ -2,9 +2,13 @@
     <ng-content></ng-content>
 </div>
 <div #tablist class="{{itemStyle}}__menu {{itemStyle}}__menu--bottom" role="tablist" aria-orientation="horizontal">
-    <ng-container *ngIf="!hasContentTabs">    
-        <igx-tab *ngFor="let panel of panels" [relatedPanel]="panel">
+    <ng-container *ngIf="!hasContentTabs">
+        <igx-tab *ngFor="let panel of panels; let i = index"
+            [relatedPanel]="panel"
+            [autoGenerated]="true"
+            [id]="getTabId(i)"
+            [attr.aria-controls]="getTabPanelId(i)">>
         </igx-tab>
     </ng-container>
     <ng-content select="igx-tab"></ng-content>
-</div>
+</div>
diff --git a/projects/igniteui-angular/src/lib/tabbar/tabbar.component.spec.ts b/projects/igniteui-angular/src/lib/tabbar/tabbar.component.spec.ts
diff --git a/projects/igniteui-angular/src/lib/tabbar/tabbar.component.ts b/projects/igniteui-angular/src/lib/tabbar/tabbar.component.ts
diff --git a/src/app/input-group/input-group.sample.html b/src/app/input-group/input-group.sample.html
diff --git a/src/app/time-picker/time-picker.sample.html b/src/app/time-picker/time-picker.sample.html

Original file line number	Diff line number	Diff line change
`@@ -70,6 +70,11 @@`
`70`	`70`	`"version": "9.0.1",`
`71`	`71`	`"description": "Updates Ignite UI for Angular from v9.0.0 to v9.0.1",`
`72`	`72`	`"factory": "./update-9_0_1"`
	`73`	`+ },`
	`74`	`+ "migration-15": {`
	`75`	`+ "version": "9.1.0",`
	`76`	`+ "description": "Updates Ignite UI for Angular from v9.0.x to v9.1.0",`
	`77`	`+ "factory": "./update-9_1_0"`
`73`	`78`	`}`
`74`	`79`	`}`
`75`	`80`	`}`