Merge branch '9.0.x' into ddimitrov/fix-7133-9.0.x

Author: igdmdimitrov

package-lock.json

@@ -53,11 +53,12 @@
     "@angular/platform-browser-dynamic": "^9.0.0",
     "@angular/router": "^9.0.0",
     "@types/hammerjs": "^2.0.36",
+    "@types/jszip": "^3.1.7",
     "@types/source-map": "0.5.2",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.6.2",
     "hammerjs": "^2.0.8",
-    "jszip": "^3.1.5",
+    "jszip": "^3.3.0",
     "resize-observer-polyfill": "^1.5.1",
     "rxjs": "^6.5.4",
     "tslib": "^1.10.0",

package.json

@@ -7,6 +7,7 @@
   },
   "whitelistedNonPeerDependencies": [
       "@types/hammerjs",
+      "@types/jszip",
       "hammerjs",
       "jszip",
       "resize-observer-polyfill"

projects/igniteui-angular/ng-package.json

@@ -10,6 +10,7 @@
   },
   "whitelistedNonPeerDependencies": [
       "@types/hammerjs",
+      "@types/jszip",
       "hammerjs",
       "jszip",
       "resize-observer-polyfill"

projects/igniteui-angular/ng-package.prod.json

@@ -67,8 +67,9 @@
     ],
     "dependencies": {
         "@types/hammerjs": "^2.0.36",
+        "@types/jszip": "^3.1.7",
         "hammerjs": "^2.0.8",
-        "jszip": "^3.1.5",
+        "jszip": "^3.3.0",
         "resize-observer-polyfill": "^1.5.1"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -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.component.html

@@ -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/excel-style-search.pipe.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);
     }