Merge branch '9.0.x' into dmdimitrov/issue4158-9.0.x

Author: DiyanDimitrov

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';
 
 /**
@@ -281,8 +281,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;
         }
     }
 

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html

@@ -31,13 +31,12 @@
             [indeterminate]="item.indeterminate"
             [disableTransitions]="true"
             (change)="onCheckboxChange($event)">
-                {{ column.formatter && !item.isSpecial ? column.formatter(item.label) : column.dataType === 'number' ? (item.label | igxdecimal:
-                    column.grid.locale) : column.dataType === 'date' ? (item.label | igxdate: column.grid.locale) : item.label }}
+                {{ item.label }}
             </igx-checkbox>
         </igx-list-item>
     </div>
 
-    <ng-template igxDataLoading>        
+    <ng-template igxDataLoading>
         <div class="igx-excel-filter__loading">
             <ng-container *ngTemplateOutlet="valuesLoadingTemplate">
             </ng-container>

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.pipe.ts

@@ -20,8 +20,9 @@ export class IgxExcelStyleSearchFilterPipe implements PipeTransform {
 
         searchText = searchText.toLowerCase();
         const result = items.filter((it, i) => (i === 0 && it.isSpecial) ||
-            (it.value !== null && it.value !== undefined) &&
-            it.value.toString().toLowerCase().indexOf(searchText) > -1);
+            (it.label !== null && it.label !== undefined) &&
+            !it.isBlanks &&
+            it.label.toString().toLowerCase().indexOf(searchText) > -1);
 
         // If 'result' contains the 'Select All' item and at least one more - we use it, otherwise we use an empty array.
         return result.length > 1 ? result : [];

projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts

@@ -40,6 +40,7 @@ import { ISelectionEventArgs, IgxDropDownComponent } from '../../../drop-down';
 import { IgxColumnComponent } from '../../columns/column.component';
 import { IgxGridBaseDirective } from '../../grid-base.directive';
 import { DisplayDensity } from '../../../core/density';
+import { IgxDecimalPipeComponent, IgxDatePipeComponent } from '../../common/pipes';
 
 /**
  *@hidden
@@ -50,6 +51,7 @@ export class FilterListItem {
     public isSelected: boolean;
     public indeterminate: boolean;
     public isSpecial = false;
+    public isBlanks = false;
 }
 
 @Directive({
@@ -672,6 +674,10 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
     private addItems(shouldUpdateSelection: boolean) {
         this.selectAllSelected = true;
         this.selectAllIndeterminate = false;
+
+        const numberPipe = new IgxDecimalPipeComponent(this.column.grid.locale);
+        const datePipe = new IgxDatePipeComponent(this.column.grid.locale);
+
         this.uniqueValues.forEach(element => {
             if (element !== undefined && element !== null && element !== '') {
                 const filterListItem = new FilterListItem();
@@ -691,12 +697,29 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
                     filterListItem.isSelected = true;
                 }
                 if (this.column.dataType === DataType.Date) {
-                    filterListItem.value = new Date(element);
-                    filterListItem.label = new Date(element);
+                    const date = new Date(element);
+
+                    filterListItem.value = date;
+
+                    filterListItem.label = this.column.formatter ?
+                        this.column.formatter(date) :
+                        datePipe.transform(date, this.column.grid.locale);
+
+                } else if (this.column.dataType === DataType.Number) {
+                    filterListItem.value = element;
+
+                    filterListItem.label = this.column.formatter ?
+                        this.column.formatter(element) :
+                        numberPipe.transform(element, this.column.grid.locale);
+
                 } else {
                     filterListItem.value = element;
-                    filterListItem.label = element;
+
+                    filterListItem.label = this.column.formatter ?
+                        this.column.formatter(element) :
+                        element;
                 }
+
                 filterListItem.indeterminate = false;
                 this.listData.push(filterListItem);
             } else {
@@ -732,6 +755,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
         blanks.label = this.grid.resourceStrings.igx_grid_excel_blanks;
         blanks.indeterminate = false;
         blanks.isSpecial = true;
+        blanks.isBlanks = true;
         this.listData.unshift(blanks);
     }
 

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
@@ -4175,6 +4182,34 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
             expect(excelMenu).toBeNull();
         }));
+
+        it('Should filter date by input string', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIcon(fix, 'ReleaseDate');
+            tick(100);
+            fix.detectChanges();
+
+            const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
+            let listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix, searchComponent);
+            const inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent);
+
+            const todayDateFull = SampleTestData.today;
+            const todayDate = todayDateFull.getDate().toString();
+            const dayOfWeek = todayDateFull.toString().substring(0, 3);
+
+            UIInteractions.sendInputElementValue(inputNativeElement, todayDate, fix);
+            tick(100);
+            fix.detectChanges();
+
+            listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix, searchComponent);
+            expect(listItems.length).toBe(4, 'incorrect rendered list items count');
+
+            UIInteractions.sendInputElementValue(inputNativeElement, dayOfWeek, fix);
+            tick(100);
+            fix.detectChanges();
+
+            listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix, searchComponent);
+            expect(listItems.length).toBe(0, 'incorrect rendered list items count');
+        }));
     });
 
     describe(null, () => {

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;
+        }
+    }
+}

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 {
 }

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>