igniteui-angular 14.1.1 → 14.2.0-alpha.2

package/fesm2015/igniteui-angular.mjs

@@ -8,9 +8,9 @@ import * as i1$1 from '@angular/common';
 import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, formatPercent, formatNumber, getLocaleCurrencyCode, DatePipe, DOCUMENT, CommonModule, FormatWidth, getLocaleDateFormat, getLocaleFirstDayOfWeek, getLocaleCurrencySymbol, formatCurrency as formatCurrency$1, getLocaleNumberFormat, NumberFormatStyle, getCurrencySymbol } from '@angular/common';
 import { Observable, Subject, fromEvent, interval, animationFrameScheduler, noop, merge, Subscription, timer, pipe } from 'rxjs';
 import { takeUntil, filter, first as first$1, throttleTime, take, throttle, startWith, debounce, tap, switchMap, skipLast, map, debounceTime, shareReplay, takeWhile, pluck } from 'rxjs/operators';
-import mergeWith from 'lodash.mergewith';
+import { mergeWith } from 'lodash-es';
 import { __awaiter, __decorate, __param } from 'tslib';
-import * as JSZip from 'jszip';
+import { strToU8, zip } from 'fflate';
 import * as i1$2 from '@angular/platform-browser';
 import { HammerGestureConfig, HAMMER_GESTURE_CONFIG, ɵgetDOM } from '@angular/platform-browser';
 import * as i2 from '@angular/common/http';
@@ -3830,7 +3830,7 @@ ExcelStrings.SHARED_STRING_RELATIONSHIP = '<Relationship Id="rId4" Type="http://
  */
 class RootRelsFile {
     writeElement(folder) {
-        folder.file('.rels', ExcelStrings.getRels());
+        folder['.rels'] = strToU8(ExcelStrings.getRels());
     }
 }
 /**
@@ -3838,7 +3838,7 @@ class RootRelsFile {
  */
 class AppFile {
     writeElement(folder, worksheetData) {
-        folder.file('app.xml', ExcelStrings.getApp(worksheetData.options.worksheetName));
+        folder['app.xml'] = strToU8(ExcelStrings.getApp(worksheetData.options.worksheetName));
     }
 }
 /**
@@ -3846,7 +3846,7 @@ class AppFile {
  */
 class CoreFile {
     writeElement(folder) {
-        folder.file('core.xml', ExcelStrings.getCore());
+        folder['core.xml'] = strToU8(ExcelStrings.getCore());
     }
 }
 /**
@@ -3855,7 +3855,7 @@ class CoreFile {
 class WorkbookRelsFile {
     writeElement(folder, worksheetData) {
         const hasSharedStrings = !worksheetData.isEmpty || worksheetData.options.alwaysExportHeaders;
-        folder.file('workbook.xml.rels', ExcelStrings.getWorkbookRels(hasSharedStrings));
+        folder['workbook.xml.rels'] = strToU8(ExcelStrings.getWorkbookRels(hasSharedStrings));
     }
 }
 /**
@@ -3863,7 +3863,7 @@ class WorkbookRelsFile {
  */
 class ThemeFile {
     writeElement(folder) {
-        folder.file('theme1.xml', ExcelStrings.getTheme());
+        folder['theme1.xml'] = strToU8(ExcelStrings.getTheme());
     }
 }
 /**
@@ -3886,7 +3886,7 @@ class WorksheetFile {
                 this.prepareDataAsync(worksheetData, (cols, rows) => {
                     const hasTable = (!worksheetData.isEmpty || worksheetData.options.alwaysExportHeaders)
                         && worksheetData.options.exportAsTable;
-                    folder.file('sheet1.xml', ExcelStrings.getSheetXML(this.dimension, this.freezePane, cols, rows, hasTable, this.maxOutlineLevel, worksheetData.isHierarchical));
+                    folder['sheet1.xml'] = strToU8(ExcelStrings.getSheetXML(this.dimension, this.freezePane, cols, rows, hasTable, this.maxOutlineLevel, worksheetData.isHierarchical));
                     resolve();
                 });
             });
@@ -4144,7 +4144,7 @@ WorksheetFile.MIN_WIDTH = 8.43;
  */
 class StyleFile {
     writeElement(folder) {
-        folder.file('styles.xml', ExcelStrings.getStyles());
+        folder['styles.xml'] = strToU8(ExcelStrings.getStyles());
     }
 }
 /**
@@ -4152,7 +4152,7 @@ class StyleFile {
  */
 class WorkbookFile {
     writeElement(folder, worksheetData) {
-        folder.file('workbook.xml', ExcelStrings.getWorkbook(worksheetData.options.worksheetName));
+        folder['workbook.xml'] = strToU8(ExcelStrings.getWorkbook(worksheetData.options.worksheetName));
     }
 }
 /**
@@ -4161,7 +4161,7 @@ class WorkbookFile {
 class ContentTypesFile {
     writeElement(folder, worksheetData) {
         const hasSharedStrings = !worksheetData.isEmpty || worksheetData.options.alwaysExportHeaders;
-        folder.file('[Content_Types].xml', ExcelStrings.getContentTypesXML(hasSharedStrings, worksheetData.options.exportAsTable));
+        folder['[Content_Types].xml'] = strToU8(ExcelStrings.getContentTypesXML(hasSharedStrings, worksheetData.options.exportAsTable));
     }
 }
 /**
@@ -4175,7 +4175,7 @@ class SharedStringsFile {
         for (const value of sortedValues) {
             sharedStrings[dict.getSanitizedValue(value)] = '<si><t>' + value + '</t></si>';
         }
-        folder.file('sharedStrings.xml', ExcelStrings.getSharedStringXML(dict.stringsCount, sortedValues.length, sharedStrings.join('')));
+        folder['sharedStrings.xml'] = strToU8(ExcelStrings.getSharedStringXML(dict.stringsCount, sortedValues.length, sharedStrings.join('')));
     }
 }
 /**
@@ -4210,7 +4210,7 @@ class TablesFile {
             const dir = sortingExpression.dir - 1;
             sortString = `<sortState ref="A2:${lastColumn}"><sortCondition descending="${dir}" ref="${sc}1:${sc}15"/></sortState>`;
         }
-        folder.file('table1.xml', ExcelStrings.getTablesXML(autoFilterDimension, tableDimension, tableColumns, sortString));
+        folder['table1.xml'] = strToU8(ExcelStrings.getTablesXML(autoFilterDimension, tableDimension, tableColumns, sortString));
     }
 }
 /**
@@ -4218,7 +4218,7 @@ class TablesFile {
  */
 class WorksheetRelsFile {
     writeElement(folder) {
-        folder.file('sheet1.xml.rels', ExcelStrings.getWorksheetRels());
+        folder['sheet1.xml.rels'] = strToU8(ExcelStrings.getWorksheetRels());
     }
 }
 
@@ -4598,20 +4598,21 @@ class IgxExcelExporterService extends IgxBaseExporter {
          */
         this.exportEnded = new EventEmitter();
     }
-    static populateFolderAsync(folder, zip, worksheetData) {
+    // private _xlsx: JSZip;
+    static populateZipFileConfig(fileStructure, folder, worksheetData) {
         return __awaiter(this, void 0, void 0, function* () {
             for (const childFolder of folder.childFolders(worksheetData)) {
                 const folderInstance = ExcelElementsFactory.getExcelFolder(childFolder);
-                const zipFolder = zip.folder(folderInstance.folderName);
-                yield IgxExcelExporterService.populateFolderAsync(folderInstance, zipFolder, worksheetData);
+                const childStructure = fileStructure[folderInstance.folderName] = {};
+                yield IgxExcelExporterService.populateZipFileConfig(childStructure, folderInstance, worksheetData);
             }
             for (const childFile of folder.childFiles(worksheetData)) {
                 const fileInstance = ExcelElementsFactory.getExcelFile(childFile);
                 if (fileInstance instanceof WorksheetFile) {
-                    yield fileInstance.writeElementAsync(zip, worksheetData);
+                    yield fileInstance.writeElementAsync(fileStructure, worksheetData);
                 }
                 else {
-                    fileInstance.writeElement(zip, worksheetData);
+                    fileInstance.writeElement(fileStructure, worksheetData);
                 }
             }
         });
@@ -4663,25 +4664,24 @@ class IgxExcelExporterService extends IgxBaseExporter {
             columnCount = defaultOwner.columns.filter(col => !col.skip && col.headerType === HeaderType.ColumnHeader).length;
         }
         const worksheetData = new WorksheetData(data, options, this._sort, columnCount, rootKeys, indexOfLastPinnedColumn, columnWidths, defaultOwner, this._ownersMap);
-        this._xlsx = typeof JSZip.default === 'function' ? new JSZip.default() : new JSZip();
         const rootFolder = ExcelElementsFactory.getExcelFolder(ExcelFolderTypes.RootExcelFolder);
-        IgxExcelExporterService.populateFolderAsync(rootFolder, this._xlsx, worksheetData)
+        const fileData = {};
+        IgxExcelExporterService.populateZipFileConfig(fileData, rootFolder, worksheetData)
             .then(() => {
-            this._xlsx.generateAsync(IgxExcelExporterService.ZIP_OPTIONS).then((result) => {
+            zip(fileData, (_, result) => {
                 this.saveFile(result, options.fileName);
-                this.exportEnded.emit({ xlsx: this._xlsx });
+                this.exportEnded.emit({ zipStructure: fileData });
                 done();
             });
         });
     }
     saveFile(data, fileName) {
-        const blob = new Blob([ExportUtilities.stringToArrayBuffer(atob(data))], {
+        const blob = new Blob([data], {
             type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
         });
         ExportUtilities.saveBlobToFile(blob, fileName);
     }
 }
-IgxExcelExporterService.ZIP_OPTIONS = { compression: 'DEFLATE', type: 'base64' };
 IgxExcelExporterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxExcelExporterService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
 IgxExcelExporterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxExcelExporterService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxExcelExporterService, decorators: [{
@@ -46831,6 +46831,10 @@ class IgxExcelStyleLoadingValuesTemplateDirective {
     constructor(template) {
         this.template = template;
     }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    ;
 }
 IgxExcelStyleLoadingValuesTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxExcelStyleLoadingValuesTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
 IgxExcelStyleLoadingValuesTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxExcelStyleLoadingValuesTemplateDirective, selector: "[igxExcelStyleLoading]", ngImport: i0 });
@@ -48717,6 +48721,10 @@ class IgxFilterCellTemplateDirective {
     constructor(template) {
         this.template = template;
     }
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxFilterCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxFilterCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
 IgxFilterCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxFilterCellTemplateDirective, selector: "[igxFilterCellTemplate]", ngImport: i0 });
@@ -48730,6 +48738,10 @@ class IgxCellTemplateDirective {
     constructor(template) {
         this.template = template;
     }
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
 IgxCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxCellTemplateDirective, selector: "[igxCell]", ngImport: i0 });
@@ -48743,6 +48755,10 @@ class IgxCellValidationErrorDirective {
     constructor(template) {
         this.template = template;
     }
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxCellValidationErrorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxCellValidationErrorDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
 IgxCellValidationErrorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxCellValidationErrorDirective, selector: "[igxCellValidationError]", ngImport: i0 });
@@ -48756,6 +48772,10 @@ class IgxCellHeaderTemplateDirective {
     constructor(template) {
         this.template = template;
     }
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxCellHeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxCellHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
 IgxCellHeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxCellHeaderTemplateDirective, selector: "[igxHeader]", ngImport: i0 });
@@ -48785,6 +48805,10 @@ class IgxCellEditorTemplateDirective {
     constructor(template) {
         this.template = template;
     }
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxCellEditorTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxCellEditorTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
 IgxCellEditorTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxCellEditorTemplateDirective, selector: "[igxCellEditor]", ngImport: i0 });
@@ -48798,6 +48822,10 @@ class IgxCollapsibleIndicatorTemplateDirective {
     constructor(template) {
         this.template = template;
     }
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxCollapsibleIndicatorTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxCollapsibleIndicatorTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
 IgxCollapsibleIndicatorTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxCollapsibleIndicatorTemplateDirective, selector: "[igxCollapsibleIndicator]", ngImport: i0 });
@@ -48811,6 +48839,10 @@ class IgxSummaryTemplateDirective {
     constructor(template) {
         this.template = template;
     }
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxSummaryTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxSummaryTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
 IgxSummaryTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxSummaryTemplateDirective, selector: "[igxSummary]", ngImport: i0 });
@@ -51913,6 +51945,10 @@ class IgxGridToolbarDirective {
     constructor(template) {
         this.template = template;
     }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    ;
 }
 IgxGridToolbarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxGridToolbarDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
 IgxGridToolbarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxGridToolbarDirective, selector: "[igxGridToolbar]", ngImport: i0 });
@@ -52068,6 +52104,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
 
 /** @hidden @internal */
 class IgxRowEditTemplateDirective {
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxRowEditTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxRowEditTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 IgxRowEditTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxRowEditTemplateDirective, selector: "[igxRowEdit]", ngImport: i0 });
@@ -52079,6 +52119,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
         }] });
 /** @hidden @internal */
 class IgxRowEditTextDirective {
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxRowEditTextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxRowEditTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 IgxRowEditTextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxRowEditTextDirective, selector: "[igxRowEditText]", ngImport: i0 });
@@ -52090,6 +52134,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
         }] });
 /** @hidden @internal */
 class IgxRowAddTextDirective {
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxRowAddTextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxRowAddTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 IgxRowAddTextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxRowAddTextDirective, selector: "[igxRowAddText]", ngImport: i0 });
@@ -52101,6 +52149,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
         }] });
 /** @hidden @internal */
 class IgxRowEditActionsDirective {
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxRowEditActionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxRowEditActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 IgxRowEditActionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxRowEditActionsDirective, selector: "[igxRowEditActions]", ngImport: i0 });
@@ -54078,6 +54130,10 @@ class IgxGroupByRowTemplateDirective {
     constructor(template) {
         this.template = template;
     }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    ;
 }
 IgxGroupByRowTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxGroupByRowTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
 IgxGroupByRowTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxGroupByRowTemplateDirective, selector: "[igxGroupByRow]", ngImport: i0 });
@@ -54091,6 +54147,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
  * @hidden
  */
 class IgxGridDetailTemplateDirective {
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    ;
 }
 IgxGridDetailTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxGridDetailTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 IgxGridDetailTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxGridDetailTemplateDirective, selector: "[igxGridDetail]", ngImport: i0 });
@@ -54104,6 +54164,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
  * @hidden
  */
 class IgxRowExpandedIndicatorDirective {
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxRowExpandedIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxRowExpandedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 IgxRowExpandedIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxRowExpandedIndicatorDirective, selector: "[igxRowExpandedIndicator]", ngImport: i0 });
@@ -54117,6 +54181,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
  * @hidden
  */
 class IgxRowCollapsedIndicatorDirective {
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxRowCollapsedIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxRowCollapsedIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 IgxRowCollapsedIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxRowCollapsedIndicatorDirective, selector: "[igxRowCollapsedIndicator]", ngImport: i0 });
@@ -54130,6 +54198,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
  * @hidden
  */
 class IgxHeaderExpandIndicatorDirective {
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxHeaderExpandIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxHeaderExpandIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 IgxHeaderExpandIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxHeaderExpandIndicatorDirective, selector: "[igxHeaderExpandedIndicator]", ngImport: i0 });
@@ -54143,6 +54215,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
  * @hidden
  */
 class IgxHeaderCollapseIndicatorDirective {
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxHeaderCollapseIndicatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxHeaderCollapseIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 IgxHeaderCollapseIndicatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxHeaderCollapseIndicatorDirective, selector: "[igxHeaderCollapsedIndicator]", ngImport: i0 });
@@ -54156,6 +54232,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
  * @hidden
  */
 class IgxExcelStyleHeaderIconDirective {
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxExcelStyleHeaderIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxExcelStyleHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 IgxExcelStyleHeaderIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxExcelStyleHeaderIconDirective, selector: "[igxExcelStyleHeaderIcon]", ngImport: i0 });
@@ -54169,6 +54249,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
  * @hidden
  */
 class IgxSortHeaderIconDirective {
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxSortHeaderIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxSortHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 IgxSortHeaderIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxSortHeaderIconDirective, selector: "[igxSortHeaderIcon]", ngImport: i0 });
@@ -54182,6 +54266,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
  * @hidden
  */
 class IgxSortAscendingHeaderIconDirective {
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxSortAscendingHeaderIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxSortAscendingHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 IgxSortAscendingHeaderIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxSortAscendingHeaderIconDirective, selector: "[igxSortAscendingHeaderIcon]", ngImport: i0 });
@@ -54195,6 +54283,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
  * @hidden
  */
 class IgxSortDescendingHeaderIconDirective {
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxSortDescendingHeaderIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxSortDescendingHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 IgxSortDescendingHeaderIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxSortDescendingHeaderIconDirective, selector: "[igxSortDescendingHeaderIcon]", ngImport: i0 });
@@ -55231,6 +55323,10 @@ class IgxRowSelectorDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxRowSelectorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxRowSelectorDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
 IgxRowSelectorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxRowSelectorDirective, selector: "[igxRowSelector]", ngImport: i0 });
@@ -55248,6 +55344,10 @@ class IgxGroupByRowSelectorDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxGroupByRowSelectorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxGroupByRowSelectorDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
 IgxGroupByRowSelectorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxGroupByRowSelectorDirective, selector: "[igxGroupByRowSelector]", ngImport: i0 });
@@ -55265,6 +55365,10 @@ class IgxHeadSelectorDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxHeadSelectorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxHeadSelectorDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
 IgxHeadSelectorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxHeadSelectorDirective, selector: "[igxHeadSelector]", ngImport: i0 });
@@ -55424,6 +55528,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImpor
  * @hidden
  */
 class IgxDragIndicatorIconDirective {
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxDragIndicatorIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxDragIndicatorIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
 IgxDragIndicatorIconDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxDragIndicatorIconDirective, selector: "[igxDragIndicatorIcon]", ngImport: i0 });
@@ -55440,6 +55548,10 @@ class IgxRowDragGhostDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxRowDragGhostDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxRowDragGhostDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
 IgxRowDragGhostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxRowDragGhostDirective, selector: "[igxRowDragGhost]", ngImport: i0 });
@@ -57774,7 +57886,7 @@ class IgxGridFilteringCellComponent {
      * @memberof IgxGridFilteringCellComponent
      */
     get context() {
-        return { column: this.column };
+        return { $implicit: this.column, column: this.column };
     }
     /**
      * Chip clicked event handler.
@@ -58562,10 +58674,10 @@ class IgxGridHeaderRowComponent {
     }
 }
 IgxGridHeaderRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxGridHeaderRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-IgxGridHeaderRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedColumnCollection: "pinnedColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", activeDescendant: "activeDescendant", hasMRL: "hasMRL", width: "width", density: "density" }, host: { properties: { "class.igx-grid-thead--cosy": "this.cosyStyle", "class.igx-grid-thead--compact": "this.compactStyle" } }, viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "headerDragContainer", first: true, predicate: ["headerDragContainer"], descendants: true }, { propertyName: "headerSelectorContainer", first: true, predicate: ["headerSelectorContainer"], descendants: true }, { propertyName: "headerGroupContainer", first: true, predicate: ["headerGroupContainer"], descendants: true }, { propertyName: "headSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true }, { propertyName: "filterRow", first: true, predicate: IgxGridFilteringRowComponent, descendants: true }, { propertyName: "headerHierarchyExpander", first: true, predicate: ["headerHierarchyExpander"], descendants: true }, { propertyName: "_groups", predicate: IgxGridHeaderGroupComponent, descendants: true }], ngImport: i0, template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.moving && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && context.totalCount === context.selectedCount\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && context.selectedCount !== context.totalCount\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IgxGridHeaderRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedColumnCollection: "pinnedColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", activeDescendant: "activeDescendant", hasMRL: "hasMRL", width: "width", density: "density" }, host: { properties: { "class.igx-grid-thead--cosy": "this.cosyStyle", "class.igx-grid-thead--compact": "this.compactStyle" } }, viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "headerDragContainer", first: true, predicate: ["headerDragContainer"], descendants: true }, { propertyName: "headerSelectorContainer", first: true, predicate: ["headerSelectorContainer"], descendants: true }, { propertyName: "headerGroupContainer", first: true, predicate: ["headerGroupContainer"], descendants: true }, { propertyName: "headSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true }, { propertyName: "filterRow", first: true, predicate: IgxGridFilteringRowComponent, descendants: true }, { propertyName: "headerHierarchyExpander", first: true, predicate: ["headerHierarchyExpander"], descendants: true }, { propertyName: "_groups", predicate: IgxGridHeaderGroupComponent, descendants: true }], ngImport: i0, template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.moving && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && context.totalCount === context.selectedCount\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && context.selectedCount !== context.totalCount\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxGridHeaderRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-row', template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.moving && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && context.totalCount === context.selectedCount\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && context.selectedCount !== context.totalCount\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-row', template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n        <ng-container *ngIf=\"grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0\">\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        </ng-container>\n\n        <!-- Row dragging area -->\n        <ng-container *ngIf=\"grid.rowDraggable\">\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Row selectors area -->\n        <ng-container *ngIf=\"grid.showRowSelectors\">\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Hierarchical grids expand all area -->\n        <ng-container *ngIf=\"isHierarchicalGrid\">\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n\n        <!-- Grouping icon toggle area -->\n        <ng-container *ngIf=\"grid?.groupingExpressions?.length\">\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        </ng-container>\n\n        <!-- Pinned columns collection from the start -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        <ng-container *ngIf=\"pinnedColumnCollection.length && !grid.isPinningToStart\">\n            <ng-container *ngFor=\"let column of pinnedColumnCollection | igxTopLevel\">\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.width | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            </ng-container>\n        </ng-container>\n    </div>\n\n    <!-- Filter row area -->\n    <ng-container *ngIf=\"grid.filteringService.isFilterRowVisible\">\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    </ng-container>\n\n    <!-- Right column moving area -->\n    <ng-container *ngIf=\"grid.moving && grid.columnInDrag\">\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    </ng-container>\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && context.totalCount === context.selectedCount\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && context.selectedCount !== context.totalCount\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { grid: [{
                 type: Input
             }], pinnedColumnCollection: [{
@@ -68463,10 +68575,10 @@ class IgxGridExpandableCellComponent extends IgxGridCellComponent {
     }
 }
 IgxGridExpandableCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxGridExpandableCellComponent, deps: [{ token: IgxGridSelectionService }, { token: IGX_GRID_BASE }, { token: IgxOverlayService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: HammerGesturesManager }, { token: DOCUMENT }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component });
-IgxGridExpandableCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: IgxGridExpandableCellComponent, selector: "igx-expandable-grid-cell", inputs: { expanded: "expanded" }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, read: ElementRef }, { propertyName: "indentationDiv", first: true, predicate: ["indentationDiv"], descendants: true, read: ElementRef }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    <igx-chip *ngIf=\"displayPinnedChip\" class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [displayDensity]=\"'compact'\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n</ng-template>\n<ng-template #defaultCell>\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\n        [cssClass]=\"highlightClass\"\n        [activeCssClass]=\"activeHighlightClass\"\n        [groupName]=\"gridID\"\n        [value]=\"formatter ? (value | columnFormatter:formatter:rowData)\n            : column.dataType === 'number'\n            ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n            : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n            ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n            : column.dataType === 'currency'\n            ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n            : column.dataType === 'percent'\n            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n            : value\"\n        [row]=\"rowData\"\n        [column]=\"this.column.field\"\n        [containerClass]=\"'igx-grid__td-text'\"\n        [metadata]=\"searchMetadata\">{{ formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === \"number\"\n            ? (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n            ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'\n            ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent'\n            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value}}</div>\n\n    <igx-icon\n        *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n        [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n    >{{ value ? \"check\" : \"close\" }}</igx-icon\n    >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\n    [cssClass]=\"highlightClass\"\n    [activeCssClass]=\"activeHighlightClass\"\n    [groupName]=\"gridID\"\n    [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n        (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n        (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?\n        (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n    [row]=\"rowData\"\n    [column]=\"this.column.field\"\n    [containerClass]=\"'igx-grid__td-text'\"\n    [metadata]=\"searchMetadata\">{{\n        value ? value : (column.header || column.field)\n    }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    <ng-container *ngIf=\"column.dataType === 'string'\" [formGroup]=\"formGroup\">\n        <igx-input-group displayDensity=\"compact\" >\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'number'\">\n        <igx-input-group displayDensity=\"compact\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\" \n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'boolean'\" [formGroup]=\"formGroup\">\n        <igx-checkbox\n            [checked]=\"editValue\"\n            [igxFocus]=\"true\"\n            [disableRipple]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-checkbox>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'date'\" [formGroup]=\"formGroup\">\n        <igx-date-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [weekStart]=\"column.pipeArgs.weekStart\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        >\n        </igx-date-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'time'\" [formGroup]=\"formGroup\">\n        <igx-time-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [inputFormat]=\"column.defaultTimeFormat\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-time-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" \n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'currency'\">\n        <igx-input-group displayDensity=\"compact\" [formGroup]=\"formGroup\">\n            <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix *ngIf=\"!grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-suffix>\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'percent'\">\n        <igx-input-group displayDensity=\"compact\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    </ng-container>\n</ng-template>\n<ng-container *ngIf=\"showExpanderIndicator\">\n    <div #indicator\n         class=\"igx-grid__tree-grouping-indicator\"\n         (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n         <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit:  this }\">\n        </ng-container>\n    </div>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</ng-container>\n<ng-container *ngIf=\"isInvalid\">\n    <igx-icon #errorIcon [igxTooltipTarget]=\"tooltipRef\" [igxToggleOutlet]=\"grid.outlet\"\n    (mouseover)='errorShowing = true' (mouseout)='errorShowing = false'>error</igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #defaultExpandedTemplate>\n        <igx-icon>expand_more</igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n        <igx-icon>chevron_right</igx-icon>\n</ng-template>\n\n<ng-template #defaultError>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['required']\">\n        {{grid.resourceStrings.igx_grid_required_validation_error}}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['minlength']\">\n        {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['maxlength']\">\n        {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['min']\">\n        {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['max']\">\n        {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['email']\">\n        {{grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['pattern']\">\n        {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+IgxGridExpandableCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: IgxGridExpandableCellComponent, selector: "igx-expandable-grid-cell", inputs: { expanded: "expanded" }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, read: ElementRef }, { propertyName: "indentationDiv", first: true, predicate: ["indentationDiv"], descendants: true, read: ElementRef }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    <igx-chip *ngIf=\"displayPinnedChip\" class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [displayDensity]=\"'compact'\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n</ng-template>\n<ng-template #defaultCell>\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\n        [cssClass]=\"highlightClass\"\n        [activeCssClass]=\"activeHighlightClass\"\n        [groupName]=\"gridID\"\n        [value]=\"formatter ? (value | columnFormatter:formatter:rowData)\n            : column.dataType === 'number'\n            ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n            : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n            ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n            : column.dataType === 'currency'\n            ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n            : column.dataType === 'percent'\n            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n            : value\"\n        [row]=\"rowData\"\n        [column]=\"this.column.field\"\n        [containerClass]=\"'igx-grid__td-text'\"\n        [metadata]=\"searchMetadata\">{{ formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === \"number\"\n            ? (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n            ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'\n            ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent'\n            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value}}</div>\n\n    <igx-icon\n        *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n        [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n    >{{ value ? \"check\" : \"close\" }}</igx-icon\n    >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\n    [cssClass]=\"highlightClass\"\n    [activeCssClass]=\"activeHighlightClass\"\n    [groupName]=\"gridID\"\n    [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n        (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n        (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?\n        (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n    [row]=\"rowData\"\n    [column]=\"this.column.field\"\n    [containerClass]=\"'igx-grid__td-text'\"\n    [metadata]=\"searchMetadata\">{{\n        value ? value : (column.header || column.field)\n    }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    <ng-container *ngIf=\"column.dataType === 'string'\" [formGroup]=\"formGroup\">\n        <igx-input-group displayDensity=\"compact\" >\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'number'\">\n        <igx-input-group displayDensity=\"compact\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\" \n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'boolean'\" [formGroup]=\"formGroup\">\n        <igx-checkbox\n            [checked]=\"editValue\"\n            [igxFocus]=\"true\"\n            [disableRipple]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-checkbox>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'date'\" [formGroup]=\"formGroup\">\n        <igx-date-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [weekStart]=\"column.pipeArgs.weekStart\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        >\n        </igx-date-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'time'\" [formGroup]=\"formGroup\">\n        <igx-time-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [inputFormat]=\"column.defaultTimeFormat\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-time-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" \n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'currency'\">\n        <igx-input-group displayDensity=\"compact\" [formGroup]=\"formGroup\">\n            <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix *ngIf=\"!grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-suffix>\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'percent'\">\n        <igx-input-group displayDensity=\"compact\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    </ng-container>\n</ng-template>\n<ng-container *ngIf=\"showExpanderIndicator\">\n    <div #indicator\n         class=\"igx-grid__tree-grouping-indicator\"\n         (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n         <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit:  row }\">\n        </ng-container>\n    </div>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</ng-container>\n<ng-container *ngIf=\"isInvalid\">\n    <igx-icon #errorIcon [igxTooltipTarget]=\"tooltipRef\" [igxToggleOutlet]=\"grid.outlet\"\n    (mouseover)='errorShowing = true' (mouseout)='errorShowing = false'>error</igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #defaultExpandedTemplate>\n        <igx-icon>expand_more</igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n        <igx-icon>chevron_right</igx-icon>\n</ng-template>\n\n<ng-template #defaultError>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['required']\">\n        {{grid.resourceStrings.igx_grid_required_validation_error}}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['minlength']\">\n        {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['maxlength']\">\n        {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['min']\">\n        {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['max']\">\n        {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['email']\">\n        {{grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['pattern']\">\n        {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix]" }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1$1.PercentPipe, name: "percent" }, { kind: "pipe", type: i1$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxGridExpandableCellComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-expandable-grid-cell', providers: [HammerGesturesManager], template: "<ng-template #defaultPinnedIndicator>\n    <igx-chip *ngIf=\"displayPinnedChip\" class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [displayDensity]=\"'compact'\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n</ng-template>\n<ng-template #defaultCell>\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\n        [cssClass]=\"highlightClass\"\n        [activeCssClass]=\"activeHighlightClass\"\n        [groupName]=\"gridID\"\n        [value]=\"formatter ? (value | columnFormatter:formatter:rowData)\n            : column.dataType === 'number'\n            ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n            : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n            ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n            : column.dataType === 'currency'\n            ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n            : column.dataType === 'percent'\n            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n            : value\"\n        [row]=\"rowData\"\n        [column]=\"this.column.field\"\n        [containerClass]=\"'igx-grid__td-text'\"\n        [metadata]=\"searchMetadata\">{{ formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === \"number\"\n            ? (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n            ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'\n            ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent'\n            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value}}</div>\n\n    <igx-icon\n        *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n        [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n    >{{ value ? \"check\" : \"close\" }}</igx-icon\n    >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\n    [cssClass]=\"highlightClass\"\n    [activeCssClass]=\"activeHighlightClass\"\n    [groupName]=\"gridID\"\n    [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n        (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n        (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?\n        (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n    [row]=\"rowData\"\n    [column]=\"this.column.field\"\n    [containerClass]=\"'igx-grid__td-text'\"\n    [metadata]=\"searchMetadata\">{{\n        value ? value : (column.header || column.field)\n    }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    <ng-container *ngIf=\"column.dataType === 'string'\" [formGroup]=\"formGroup\">\n        <igx-input-group displayDensity=\"compact\" >\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'number'\">\n        <igx-input-group displayDensity=\"compact\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\" \n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'boolean'\" [formGroup]=\"formGroup\">\n        <igx-checkbox\n            [checked]=\"editValue\"\n            [igxFocus]=\"true\"\n            [disableRipple]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-checkbox>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'date'\" [formGroup]=\"formGroup\">\n        <igx-date-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [weekStart]=\"column.pipeArgs.weekStart\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        >\n        </igx-date-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'time'\" [formGroup]=\"formGroup\">\n        <igx-time-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [inputFormat]=\"column.defaultTimeFormat\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-time-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" \n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'currency'\">\n        <igx-input-group displayDensity=\"compact\" [formGroup]=\"formGroup\">\n            <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix *ngIf=\"!grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-suffix>\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'percent'\">\n        <igx-input-group displayDensity=\"compact\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    </ng-container>\n</ng-template>\n<ng-container *ngIf=\"showExpanderIndicator\">\n    <div #indicator\n         class=\"igx-grid__tree-grouping-indicator\"\n         (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n         <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit:  this }\">\n        </ng-container>\n    </div>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</ng-container>\n<ng-container *ngIf=\"isInvalid\">\n    <igx-icon #errorIcon [igxTooltipTarget]=\"tooltipRef\" [igxToggleOutlet]=\"grid.outlet\"\n    (mouseover)='errorShowing = true' (mouseout)='errorShowing = false'>error</igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #defaultExpandedTemplate>\n        <igx-icon>expand_more</igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n        <igx-icon>chevron_right</igx-icon>\n</ng-template>\n\n<ng-template #defaultError>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['required']\">\n        {{grid.resourceStrings.igx_grid_required_validation_error}}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['minlength']\">\n        {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['maxlength']\">\n        {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['min']\">\n        {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['max']\">\n        {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['email']\">\n        {{grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['pattern']\">\n        {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n    </div>\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-expandable-grid-cell', providers: [HammerGesturesManager], template: "<ng-template #defaultPinnedIndicator>\n    <igx-chip *ngIf=\"displayPinnedChip\" class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [displayDensity]=\"'compact'\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n</ng-template>\n<ng-template #defaultCell>\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\n        [cssClass]=\"highlightClass\"\n        [activeCssClass]=\"activeHighlightClass\"\n        [groupName]=\"gridID\"\n        [value]=\"formatter ? (value | columnFormatter:formatter:rowData)\n            : column.dataType === 'number'\n            ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n            : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n            ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n            : column.dataType === 'currency'\n            ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n            : column.dataType === 'percent'\n            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n            : value\"\n        [row]=\"rowData\"\n        [column]=\"this.column.field\"\n        [containerClass]=\"'igx-grid__td-text'\"\n        [metadata]=\"searchMetadata\">{{ formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === \"number\"\n            ? (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n            ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'\n            ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent'\n            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value}}</div>\n\n    <igx-icon\n        *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n        [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n    >{{ value ? \"check\" : \"close\" }}</igx-icon\n    >\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\" style=\"pointer-events: none\"\n    [cssClass]=\"highlightClass\"\n    [activeCssClass]=\"activeHighlightClass\"\n    [groupName]=\"gridID\"\n    [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n        (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n        (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?\n        (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n    [row]=\"rowData\"\n    [column]=\"this.column.field\"\n    [containerClass]=\"'igx-grid__td-text'\"\n    [metadata]=\"searchMetadata\">{{\n        value ? value : (column.header || column.field)\n    }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    <ng-container *ngIf=\"column.dataType === 'string'\" [formGroup]=\"formGroup\">\n        <igx-input-group displayDensity=\"compact\" >\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'number'\">\n        <igx-input-group displayDensity=\"compact\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\" \n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'boolean'\" [formGroup]=\"formGroup\">\n        <igx-checkbox\n            [checked]=\"editValue\"\n            [igxFocus]=\"true\"\n            [disableRipple]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-checkbox>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'date'\" [formGroup]=\"formGroup\">\n        <igx-date-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [weekStart]=\"column.pipeArgs.weekStart\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        >\n        </igx-date-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'time'\" [formGroup]=\"formGroup\">\n        <igx-time-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [inputFormat]=\"column.defaultTimeFormat\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-time-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [igxDateTimeEditor]=\"column.defaultDateTimeFormat\" \n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'currency'\">\n        <igx-input-group displayDensity=\"compact\" [formGroup]=\"formGroup\">\n            <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix *ngIf=\"!grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-suffix>\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'percent'\">\n        <igx-input-group displayDensity=\"compact\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    </ng-container>\n</ng-template>\n<ng-container *ngIf=\"showExpanderIndicator\">\n    <div #indicator\n         class=\"igx-grid__tree-grouping-indicator\"\n         (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n         <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit:  row }\">\n        </ng-container>\n    </div>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</ng-container>\n<ng-container *ngIf=\"isInvalid\">\n    <igx-icon #errorIcon [igxTooltipTarget]=\"tooltipRef\" [igxToggleOutlet]=\"grid.outlet\"\n    (mouseover)='errorShowing = true' (mouseout)='errorShowing = false'>error</igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #defaultExpandedTemplate>\n        <igx-icon>expand_more</igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n        <igx-icon>chevron_right</igx-icon>\n</ng-template>\n\n<ng-template #defaultError>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['required']\">\n        {{grid.resourceStrings.igx_grid_required_validation_error}}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['minlength']\">\n        {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['maxlength']\">\n        {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['min']\">\n        {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['max']\">\n        {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['email']\">\n        {{grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['pattern']\">\n        {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: function () {
         return [{ type: IgxGridSelectionService }, { type: undefined, decorators: [{
                         type: Inject,
@@ -70981,6 +71093,10 @@ class IgxPivotValueChipTemplateDirective {
     constructor(template) {
         this.template = template;
     }
+    static ngTemplateContextGuard(_directive, context) {
+        return true;
+    }
+    ;
 }
 IgxPivotValueChipTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: IgxPivotValueChipTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
 IgxPivotValueChipTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: IgxPivotValueChipTemplateDirective, selector: "[igxPivotValueChip]", ngImport: i0 });