igniteui-angular 22.1.0-beta.4 → 22.1.0-beta.5

package/fesm2022/igniteui-angular-grids-core.mjs

@@ -9,8 +9,8 @@ import { IgxButtonDirective, IgxRippleDirective, IgxGridForOfDirective, IgxDragD
 import { __decorate } from 'tslib';
 import { Subject, fromEvent, interval, animationFrameScheduler } from 'rxjs';
 import { isEqual as isEqual$1 } from 'lodash-es';
-import { IgxSorting, DataUtil, FilteringExpressionsTree, FilteringLogic, GridColumnDataType, PlatformUtil, isDate, isEqual, DateTimeUtil, copyDescriptors, trackByIdentity, mergeObjects, TransactionType, resolveNestedPath, columnFieldPath, DefaultSortingStrategy, isConstructor, ɵSize as _Size, ColumnPinningPosition, ExpressionsTreeUtil, IgxStringFilteringOperand, IgxDateTimeFilteringOperand, IgxTimeFilteringOperand, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxBooleanFilteringOperand, flatten, onResourceChangeHandle, GridResourceStringsEN, getCurrentResourceStrings, QueryBuilderResourceStringsEN, isTree, AbsoluteScrollStrategy, ConnectedPositioningStrategy, IgxOverlayOutletDirective, IgxPercentFormatterPipe, I18N_FORMATTER, IgxPickerToggleComponent, IgxPickerClearComponent, IgxOverlayService, VerticalAlignment, AutoPositionStrategy, HorizontalAlignment, cloneHierarchicalArray, SortingDirection, showMessage, IgxActionStripActionsToken, GridSummaryCalculationMode, cloneArray, cloneValue, recreateTreeFromFields, FilterUtil, TreeGridFilteringStrategy, getHierarchy, isHierarchyMatch, FilteringStrategy, NAVIGATION_KEYS, Util, IgxNumberFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe, reverseMapper } from 'igniteui-angular/core';
-import { first as first$1, takeUntil, map, debounceTime, filter, switchMap, throttle, throttleTime, takeWhile } from 'rxjs/operators';
+import { IgxNumberSummaryOperand, IgxDateSummaryOperand, IgxTimeSummaryOperand, IgxSorting, DataUtil, FilteringExpressionsTree, FilteringLogic, GridColumnDataType, PlatformUtil, isDate, isEqual, DateTimeUtil, copyDescriptors, trackByIdentity, mergeObjects, TransactionType, resolveNestedPath, columnFieldPath, DefaultSortingStrategy, isConstructor, ɵSize as _Size, ColumnPinningPosition, ExpressionsTreeUtil, IgxSummaryOperand, IgxStringFilteringOperand, IgxDateTimeFilteringOperand, IgxTimeFilteringOperand, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxBooleanFilteringOperand, flatten, onResourceChangeHandle, GridResourceStringsEN, getCurrentResourceStrings, QueryBuilderResourceStringsEN, isTree, AbsoluteScrollStrategy, ConnectedPositioningStrategy, IgxOverlayOutletDirective, IgxPercentFormatterPipe, I18N_FORMATTER, IgxPickerToggleComponent, IgxPickerClearComponent, IgxOverlayService, VerticalAlignment, AutoPositionStrategy, HorizontalAlignment, cloneHierarchicalArray, SortingDirection, showMessage, IgxActionStripActionsToken, GridSummaryCalculationMode, cloneArray, cloneValue, recreateTreeFromFields, FilterUtil, TreeGridFilteringStrategy, getHierarchy, isHierarchyMatch, FilteringStrategy, NAVIGATION_KEYS, Util, IgxNumberFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe, reverseMapper } from 'igniteui-angular/core';
+import { first, takeUntil, map, debounceTime, filter, switchMap, throttle, throttleTime, takeWhile } from 'rxjs/operators';
 import { NgClass, NgTemplateOutlet, NgStyle, AsyncPipe } from '@angular/common';
 import { IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent } from 'igniteui-angular/query-builder';
 import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon';
@@ -533,7 +533,7 @@ class IgxColumnHidingDirective extends IgxColumnActionsBaseDirective {
         /**
          * @hidden @internal
          */
-        this.actionEnabledColumnsFilter = c => !c.disableHiding;
+        this.actionEnabledColumnsFilter = (c) => !c.disableHiding;
         const columnActions = this.columnActions;
         columnActions.actionsDirective = this;
     }
@@ -810,7 +810,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * @hidden
  */
 function WatchChanges() {
-    return (_target, key, propDesc) => {
+    return ((_target, key, propDesc) => {
         const privateKey = '_' + key.toString();
         propDesc = propDesc || {
             configurable: true,
@@ -837,10 +837,10 @@ function WatchChanges() {
             }
         };
         return propDesc;
-    };
+    });
 }
 function WatchColumnChanges() {
-    return (_target, key, propDesc) => {
+    return ((_target, key, propDesc) => {
         const privateKey = '_' + key.toString();
         propDesc = propDesc || {
             configurable: true,
@@ -862,7 +862,7 @@ function WatchColumnChanges() {
             }
         };
         return propDesc;
-    };
+    });
 }
 function notifyChanges(repaint = false) {
     return (_, key, propDesc) => {
@@ -896,305 +896,6 @@ function notifyChanges(repaint = false) {
     };
 }
 
-const clear = (el) => el === 0 || Boolean(el);
-const first = (arr) => arr[0];
-const last = (arr) => arr[arr.length - 1];
-/* blazorCSSuppress */
-class IgxSummaryOperand {
-    /**
-     * Counts all the records in the data source.
-     * If filtering is applied, counts only the filtered records.
-     * ```typescript
-     * IgxSummaryOperand.count(dataSource);
-     * ```
-     *
-     * @memberof IgxSummaryOperand
-     */
-    static count(data) {
-        return data.length;
-    }
-    /**
-     * Executes the static `count` method and returns summary result[]`.
-     * ```typescript
-     * interface IgxSummaryResult {
-     *   key: string;
-     *   label: string;
-     *   summaryResult: any;
-     * }
-     * ```
-     * Can be overridden in the inherited classes to provide customization for the `summary`.
-     * ```typescript
-     * class CustomSummary extends IgxSummaryOperand {
-     *   constructor() {
-     *     super();
-     *   }
-     *   public operate(data: any[], allData: any[], fieldName: string, groupRecord: IGroupByRecord): IgxSummaryResult[] {
-     *     const result = [];
-     *     result.push({
-     *       key: "test",
-     *       label: "Test",
-     *       summaryResult: IgxSummaryOperand.count(data)
-     *     });
-     *     return result;
-     *   }
-     * }
-     * this.grid.getColumnByName('ColumnName').summaries = CustomSummary;
-     * ```
-     *
-     * @memberof IgxSummaryOperand
-     */
-    operate(data = [], _allData = [], _fieldName, _groupRecord) {
-        return [{
-                key: 'count',
-                label: 'Count',
-                defaultFormatting: false,
-                summaryResult: IgxSummaryOperand.count(data)
-            }];
-    }
-}
-/* blazorCSSuppress */
-// @dynamic
-class IgxNumberSummaryOperand extends IgxSummaryOperand {
-    /**
-     * Returns the minimum numeric value in the provided data records.
-     * If filtering is applied, returns the minimum value in the filtered data records.
-     * ```typescript
-     * IgxNumberSummaryOperand.min(data);
-     * ```
-     *
-     * @memberof IgxNumberSummaryOperand
-     */
-    static min(data) {
-        return data.length && data.filter(clear).length ? data.filter(clear).reduce((a, b) => Math.min(a, b)) : 0;
-    }
-    /**
-     * Returns the maximum numeric value in the provided data records.
-     * If filtering is applied, returns the maximum value in the filtered data records.
-     * ```typescript
-     * IgxNumberSummaryOperand.max(data);
-     * ```
-     *
-     * @memberof IgxNumberSummaryOperand
-     */
-    static max(data) {
-        return data.length && data.filter(clear).length ? data.filter(clear).reduce((a, b) => Math.max(a, b)) : 0;
-    }
-    /**
-     * Returns the sum of the numeric values in the provided data records.
-     * If filtering is applied, returns the sum of the numeric values in the data records.
-     * ```typescript
-     * IgxNumberSummaryOperand.sum(data);
-     * ```
-     *
-     * @memberof IgxNumberSummaryOperand
-     */
-    static sum(data) {
-        return data.length && data.filter(clear).length ? data.filter(clear).reduce((a, b) => +a + +b) : 0;
-    }
-    /**
-     * Returns the average numeric value in the data provided data records.
-     * If filtering is applied, returns the average numeric value in the filtered data records.
-     * ```typescript
-     * IgxSummaryOperand.average(data);
-     * ```
-     *
-     * @memberof IgxNumberSummaryOperand
-     */
-    static average(data) {
-        return data.length && data.filter(clear).length ? this.sum(data) / this.count(data) : 0;
-    }
-    /**
-     * Executes the static methods and returns summary result[]`.
-     * ```typescript
-     * interface IgxSummaryResult {
-     *   key: string;
-     *   label: string;
-     *   summaryResult: any;
-     * }
-     * ```
-     * Can be overridden in the inherited classes to provide customization for the `summary`.
-     * ```typescript
-     * class CustomNumberSummary extends IgxNumberSummaryOperand {
-     *   constructor() {
-     *     super();
-     *   }
-     *   public operate(data: any[], allData: any[], fieldName: string, groupRecord: IGroupByRecord): IgxSummaryResult[] {
-     *     const result = super.operate(data, allData, fieldName, groupRecord);
-     *     result.push({
-     *       key: "avg",
-     *       label: "Avg",
-     *       summaryResult: IgxNumberSummaryOperand.average(data)
-     *     });
-     *     result.push({
-     *       key: 'mdn',
-     *       label: 'Median',
-     *       summaryResult: this.findMedian(data)
-     *     });
-     *     return result;
-     *   }
-     * }
-     * this.grid.getColumnByName('ColumnName').summaries = CustomNumberSummary;
-     * ```
-     *
-     * @memberof IgxNumberSummaryOperand
-     */
-    operate(data = [], allData = [], fieldName, groupRecord) {
-        const result = super.operate(data, allData, fieldName, groupRecord);
-        result.push({
-            key: 'min',
-            label: 'Min',
-            defaultFormatting: true,
-            summaryResult: IgxNumberSummaryOperand.min(data)
-        });
-        result.push({
-            key: 'max',
-            label: 'Max',
-            defaultFormatting: true,
-            summaryResult: IgxNumberSummaryOperand.max(data)
-        });
-        result.push({
-            key: 'sum',
-            label: 'Sum',
-            defaultFormatting: true,
-            summaryResult: IgxNumberSummaryOperand.sum(data)
-        });
-        result.push({
-            key: 'average',
-            label: 'Avg',
-            defaultFormatting: true,
-            summaryResult: IgxNumberSummaryOperand.average(data)
-        });
-        return result;
-    }
-}
-/* blazorCSSuppress */
-// @dynamic
-class IgxDateSummaryOperand extends IgxSummaryOperand {
-    /**
-     * Returns the latest date value in the data records.
-     * If filtering is applied, returns the latest date value in the filtered data records.
-     * ```typescript
-     * IgxDateSummaryOperand.latest(data);
-     * ```
-     *
-     * @memberof IgxDateSummaryOperand
-     */
-    static latest(data) {
-        return data.length && data.filter(clear).length ?
-            first(data.filter(clear).sort((a, b) => new Date(b).valueOf() - new Date(a).valueOf())) : undefined;
-    }
-    /**
-     * Returns the earliest date value in the data records.
-     * If filtering is applied, returns the latest date value in the filtered data records.
-     * ```typescript
-     * IgxDateSummaryOperand.earliest(data);
-     * ```
-     *
-     * @memberof IgxDateSummaryOperand
-     */
-    static earliest(data) {
-        return data.length && data.filter(clear).length ?
-            last(data.filter(clear).sort((a, b) => new Date(b).valueOf() - new Date(a).valueOf())) : undefined;
-    }
-    /**
-     * Executes the static methods and returns summary result[]`.
-     * ```typescript
-     * interface IgxSummaryResult {
-     *   key: string;
-     *   label: string;
-     *   summaryResult: any;
-     * }
-     * ```
-     * Can be overridden in the inherited classes to provide customization for the `summary`.
-     * ```typescript
-     * class CustomDateSummary extends IgxDateSummaryOperand {
-     *   constructor() {
-     *     super();
-     *   }
-     *   public operate(data: any[], allData: any[], fieldName: string, groupRecord: IGroupByRecord): IgxSummaryResult[] {
-     *     const result = super.operate(data, allData, fieldName, groupRecord);
-     *     result.push({
-     *       key: "deadline",
-     *       label: "Deadline Date",
-     *       summaryResult: this.calculateDeadline(data);
-     *     });
-     *     return result;
-     *   }
-     * }
-     * this.grid.getColumnByName('ColumnName').summaries = CustomDateSummary;
-     * ```
-     *
-     * @memberof IgxDateSummaryOperand
-     */
-    operate(data = [], allData = [], fieldName, groupRecord) {
-        const result = super.operate(data, allData, fieldName, groupRecord);
-        result.push({
-            key: 'earliest',
-            label: 'Earliest',
-            defaultFormatting: true,
-            summaryResult: IgxDateSummaryOperand.earliest(data)
-        });
-        result.push({
-            key: 'latest',
-            label: 'Latest',
-            defaultFormatting: true,
-            summaryResult: IgxDateSummaryOperand.latest(data)
-        });
-        return result;
-    }
-}
-/* blazorCSSuppress */
-// @dynamic
-class IgxTimeSummaryOperand extends IgxSummaryOperand {
-    /**
-     * Returns the latest time value in the data records. Compare only the time part of the date.
-     * If filtering is applied, returns the latest time value in the filtered data records.
-     * ```typescript
-     * IgxTimeSummaryOperand.latestTime(data);
-     * ```
-     *
-     * @memberof IgxTimeSummaryOperand
-     */
-    static latestTime(data) {
-        return data.length && data.filter(clear).length ?
-            first(data.filter(clear).map(v => new Date(v)).sort((a, b) => new Date().setHours(b.getHours(), b.getMinutes(), b.getSeconds()) -
-                new Date().setHours(a.getHours(), a.getMinutes(), a.getSeconds()))) : undefined;
-    }
-    /**
-     * Returns the earliest time value in the data records. Compare only the time part of the date.
-     * If filtering is applied, returns the earliest time value in the filtered data records.
-     * ```typescript
-     * IgxTimeSummaryOperand.earliestTime(data);
-     * ```
-     *
-     * @memberof IgxTimeSummaryOperand
-     */
-    static earliestTime(data) {
-        return data.length && data.filter(clear).length ?
-            last(data.filter(clear).map(v => new Date(v)).sort((a, b) => new Date().setHours(b.getHours(), b.getMinutes(), b.getSeconds()) -
-                new Date().setHours(a.getHours(), a.getMinutes(), a.getSeconds()))) : undefined;
-    }
-    /**
-     * @memberof IgxTimeSummaryOperand
-     */
-    operate(data = [], allData = [], fieldName, groupRecord) {
-        const result = super.operate(data, allData, fieldName, groupRecord);
-        result.push({
-            key: 'earliest',
-            label: 'Earliest',
-            defaultFormatting: true,
-            summaryResult: IgxTimeSummaryOperand.earliestTime(data)
-        });
-        result.push({
-            key: 'latest',
-            label: 'Latest',
-            defaultFormatting: true,
-            summaryResult: IgxTimeSummaryOperand.latestTime(data)
-        });
-        return result;
-    }
-}
-
 class IgxPivotAggregate {
     /**
      * Gets array with default aggregator function for base aggregation.
@@ -1667,7 +1368,7 @@ class PivotUtil {
         return vals;
     }
     static flatten(arr, lvl = 0) {
-        const newArr = arr.reduce((acc, item) => {
+        const newArr = (arr || []).reduce((acc, item) => {
             if (item) {
                 item.level = lvl;
                 acc.push(item);
@@ -1721,7 +1422,7 @@ class PivotUtil {
             if (!aggregator) {
                 throw `No valid aggregator found for ${pivotValue.member}. Please set either a valid aggregatorName or aggregator`;
             }
-            result[pivotValue.member] = aggregator(records.map(r => r[pivotValue.member]), records);
+            result[pivotValue.member] = aggregator(records.map((r) => r[pivotValue.member]), records);
         }
         return result;
     }
@@ -1800,7 +1501,7 @@ class PivotUtil {
     }
     static collectRecords(children, pivotKeys) {
         let result = [];
-        children.forEach(value => result = result.concat(value[pivotKeys.records]));
+        children.forEach((value) => result = result.concat(value[pivotKeys.records]));
         return result;
     }
     static applyHierarchyChildren(hierarchy, val, rec, pivotKeys) {
@@ -1837,7 +1538,7 @@ class PivotUtil {
                         // not all nested children are valid
                         const nestedValue = hierarchyChildValue.value;
                         const dimension = hierarchyChildValue.dimension;
-                        const validRecs = rec[recordsKey].filter(x => this.extractValueFromDimension(dimension, x) === nestedValue);
+                        const validRecs = rec[recordsKey].filter((x) => this.extractValueFromDimension(dimension, x) === nestedValue);
                         copy[recordsKey] = validRecs;
                     }
                     hierarchyChildValue[recordsKey].push(copy);
@@ -1904,6 +1605,7 @@ class PivotUtil {
         else if (value.dataType === GridColumnDataType.Percent && !isCountAggregator) {
             return GridColumnDataType.Percent;
         }
+        return undefined;
     }
 }
 
@@ -1958,7 +1660,7 @@ class IgxGridSelectionService {
             this.pointerEventInGridBody = false;
             this.grid.document.body.removeEventListener('pointerup', this.pointerOriginHandler);
             const gridCellSelectors = ['igx-grid-cell', 'igx-hierarchical-grid-cell', 'igx-tree-grid-cell'];
-            const isInsideGridCell = gridCellSelectors.some(selector => event.target.closest(selector));
+            const isInsideGridCell = gridCellSelectors.some(selector => event.target ? event.target.closest(selector) : false);
             if (!isInsideGridCell) {
                 this.pointerUp(this._lastSelectedNode, this.grid.rangeSelected, true);
             }
@@ -2246,8 +1948,8 @@ class IgxGridSelectionService {
     getSelectedRowsData() {
         if (this.grid.type === 'pivot') {
             return this.grid.dataView.filter(r => {
-                const keys = r.dimensions.map(d => PivotUtil.getRecordKey(r, d));
-                return keys.some(k => this.isPivotRowSelected(k));
+                const keys = r.dimensions.map((d) => PivotUtil.getRecordKey(r, d));
+                return keys.some((k) => this.isPivotRowSelected(k));
             });
         }
         if (!this.grid.primaryKey) {
@@ -2467,7 +2169,7 @@ class IgxGridSelectionService {
     emitRowSelectionEvent(newSelection, added, removed, event, currSelection) {
         currSelection = currSelection ?? this.getSelectedRowsData();
         if (this.areEqualCollections(currSelection, newSelection)) {
-            return;
+            return undefined;
         }
         const args = {
             owner: this.grid,
@@ -2482,13 +2184,14 @@ class IgxGridSelectionService {
         this.grid.rowSelectionChanging.emit(args);
         if (args.cancel) {
             this.clearHeaderCBState();
-            return;
+            return undefined;
         }
         this.selectRowsWithNoEvent(args.newSelection.map(r => this.getRecordKey(r)), true);
+        return undefined;
     }
     getPivotRowsByIds(ids) {
         return this.grid.dataView.filter(r => {
-            const keys = r.dimensions.map(d => PivotUtil.getRecordKey(r, d));
+            const keys = r.dimensions.map((d) => PivotUtil.getRecordKey(r, d));
             return new Set(ids.concat(keys)).size < ids.length + keys.length;
         });
     }
@@ -2503,7 +2206,7 @@ class IgxGridSelectionService {
         this.allRowsSelected = undefined;
     }
     getRowIDs(data) {
-        return this.grid.primaryKey && data.length ? data.map(rec => rec[this.grid.primaryKey]) : data;
+        return this.grid.primaryKey && data.length ? data.map((rec) => rec[this.grid.primaryKey]) : data;
     }
     getRecordKey(record) {
         return this.grid.primaryKey ? record[this.grid.primaryKey] : record;
@@ -2525,7 +2228,7 @@ class IgxGridSelectionService {
         else {
             allData = this.grid.gridAPI.get_all_data(true);
         }
-        return allData.filter(rData => !this.isRowDeleted(this.grid.gridAPI.get_row_id(rData)));
+        return allData.filter((rData) => !this.isRowDeleted(this.grid.gridAPI.get_row_id(rData)));
     }
     /** Returns array of the selected columns fields. */
     getSelectedColumns() {
@@ -2620,7 +2323,7 @@ class IgxGridSelectionService {
     emitColumnSelectionEvent(newSelection, added, removed, event) {
         const currSelection = this.getSelectedColumns();
         if (this.areEqualCollections(currSelection, newSelection)) {
-            return;
+            return undefined;
         }
         const args = {
             oldSelection: currSelection, newSelection,
@@ -2628,9 +2331,10 @@ class IgxGridSelectionService {
         };
         this.grid.columnSelectionChanging.emit(args);
         if (args.cancel) {
-            return;
+            return undefined;
         }
         this.selectColumnsWithNoEvent(args.newSelection, true);
+        return undefined;
     }
     /** Clear columnSelection */
     clearAllSelectedColumns() {
@@ -2843,7 +2547,7 @@ class IgxCellCrudState {
         return this.row = new IgxEditRow(cell.id.rowID, cell.rowIndex, cell.rowData, cell.grid);
     }
     sameRow(rowID) {
-        return this.row && this.row.id === rowID;
+        return !!(this.row && this.row.id === rowID);
     }
     sameCell(cell) {
         return (this.cell.id.rowID === cell.id.rowID &&
@@ -2866,7 +2570,7 @@ class IgxCellCrudState {
     }
     updateCell(exit, event) {
         if (!this.cell) {
-            return;
+            return undefined;
         }
         // this is needed when we are not using ngModel to update the editValue
         // so that the change event of the inlineEditorTemplate is hit before
@@ -2925,7 +2629,7 @@ class IgxCellCrudState {
     /** Exit cell edit mode */
     exitCellEdit(event) {
         if (!this.cell) {
-            return;
+            return undefined;
         }
         const newValue = this.cell.castToNumber(this.cell.editValue);
         const args = this.cell?.createCellEditDoneEventArgs(newValue, event);
@@ -2962,7 +2666,7 @@ class IgxRowCrudState extends IgxCellCrudState {
     }
     get rowInEditMode() {
         const editRowState = this.row;
-        return editRowState !== null ? this.grid.rowList.find(e => e.key === editRowState.id) : null;
+        return editRowState !== null ? this.grid.rowList.find(e => e.key === editRowState.id) : undefined;
     }
     get rowEditing() {
         return this.grid.rowEditable;
@@ -3086,7 +2790,7 @@ class IgxRowCrudState extends IgxCellCrudState {
     updateRowEditData(row, value) {
         const grid = this.grid;
         const rowInEditMode = grid.gridAPI.crudService.row;
-        row.newData = value ?? rowInEditMode.transactionState;
+        row.newData = value ?? rowInEditMode?.transactionState;
         if (rowInEditMode && row.id === rowInEditMode.id) {
             // do not use spread operator here as it will copy everything over an empty object with no descriptors
             row.data = Object.assign(copyDescriptors(row.data), row.data, rowInEditMode.transactionState);
@@ -3138,7 +2842,7 @@ class IgxRowAddCrudState extends IgxRowCrudState {
     endRowTransaction(commit, event) {
         const isAddRow = this.row && this.row.isAddRow;
         if (isAddRow) {
-            this.grid.rowAdded.pipe(first$1()).subscribe((addRowArgs) => {
+            this.grid.rowAdded.pipe(first()).subscribe((addRowArgs) => {
                 const rowData = addRowArgs.data;
                 const pinnedIndex = this.grid.pinnedRecords.findIndex(x => x[this.primaryKey] === rowData[this.primaryKey]);
                 // A check whether the row is in the current view
@@ -3269,8 +2973,8 @@ class IgxGridCRUDService extends IgxRowAddCrudState {
         const dummyRow = this.grid.gridAPI.get_row_by_index(this.row.index + indexAdjust);
         dummyRow.triggerAddAnimation();
         dummyRow.cdr.detectChanges();
-        dummyRow.addAnimationEnd.pipe(first$1()).subscribe(() => {
-            const cell = dummyRow.cells.find(c => c.editable);
+        dummyRow.addAnimationEnd.pipe(first()).subscribe(() => {
+            const cell = dummyRow.cells.find((c) => c.editable);
             if (cell) {
                 this.grid.gridAPI.update_cell(this.cell);
                 this.enterEditMode(cell, event);
@@ -3292,13 +2996,13 @@ class IgxGridCRUDService extends IgxRowAddCrudState {
     // TODO: Implement the same representation of the method without evt emission.
     endEdit(commit = true, event) {
         if (!this.row && !this.cell) {
-            return;
+            return undefined;
         }
         let args;
         if (commit) {
             args = this.updateCell(true, event);
             if (args && args.cancel) {
-                return args.cancel;
+                return true;
             }
         }
         else {
@@ -3634,8 +3338,8 @@ class IgxRowDirective {
         if (this.hasMergedCells && this.metaData?.cellMergeMeta) {
             const targetRowIndex = this.grid.navigation.activeNode.row;
             if (targetRowIndex != this.index) {
-                const row = this.grid.rowList.toArray().find(x => x.index === targetRowIndex);
-                row.onClick(event);
+                const row = this.grid.rowList.find(x => x.index === targetRowIndex);
+                row?.onClick?.(event);
                 return;
             }
         }
@@ -3737,7 +3441,7 @@ class IgxRowDirective {
      */
     update(value) {
         const crudService = this.grid.crudService;
-        if (crudService.cellInEditMode && crudService.cell.id.key === this.key) {
+        if (crudService.cellInEditMode && crudService.cell?.id.key === this.key) {
             this.grid.transactions.endPending(false);
         }
         const row = new IgxEditRow(this.key, this.index, this.data, this.grid);
@@ -3856,7 +3560,7 @@ class IgxRowDirective {
             const isPinned = this.pinned && !this.disabled;
             const indexInData = this.grid.isRowPinningToTop && !isPinned ? this.index - this.grid.pinnedRecordsCount : this.index;
             const range = isPinned ? this.grid.pinnedDataView.slice(indexInData, indexInData + rowCount) : this.grid.verticalScrollContainer.igxForOf.slice(indexInData, indexInData + rowCount);
-            const inRange = range.filter(x => this.selectionService.isRowSelected(this.extractRecordKey(x))).length > 0;
+            const inRange = range.filter((x) => this.selectionService.isRowSelected(this.extractRecordKey(x))).length > 0;
             return inRange;
         }
         return false;
@@ -4364,16 +4068,16 @@ class IgxGridCell {
     }
     isCellInEditMode() {
         if (this.grid.crudService.cellInEditMode) {
-            const cellInEditMode = this.grid.crudService.cell.id;
-            const isCurrentCell = cellInEditMode.rowID === this.id.rowID &&
-                cellInEditMode.rowIndex === this.id.rowIndex &&
-                cellInEditMode.columnID === this.id.columnID;
+            const cellInEditMode = this.grid.crudService.cell?.id;
+            const isCurrentCell = cellInEditMode?.rowID === this.id.rowID &&
+                cellInEditMode?.rowIndex === this.id.rowIndex &&
+                cellInEditMode?.columnID === this.id.columnID;
             return isCurrentCell;
         }
         return false;
     }
     endEdit() {
-        if (!this.isCellInEditMode()) {
+        if (!this.isCellInEditMode() && this.grid.crudService.cell) {
             this.grid.gridAPI.update_cell(this.grid.crudService.cell);
             this.grid.crudService.endCellEdit();
         }
@@ -5659,7 +5363,7 @@ class IgxColumnComponent {
      * @memberof IgxColumnComponent
      */
     get columnLayoutChild() {
-        return this.parent && this.parent.columnLayout;
+        return this.parent != null && this.parent.columnLayout;
     }
     /**
      * A list containing all the child columns under this column (if any).
@@ -5936,7 +5640,7 @@ class IgxColumnComponent {
                 columnSizes[col.colStart - 1] = {
                     ref: col,
                     width: col.width === 'fit-content' ? col.autoSize :
-                        col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
+                        col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth?.toString() || col.defaultWidth) : null,
                     colSpan: col.gridColumnSpan,
                     colEnd: col.colStart + col.gridColumnSpan,
                     widthSetByUser: col.widthSetByUser
@@ -5965,7 +5669,7 @@ class IgxColumnComponent {
                 columnSizes[col.colStart - 1] = {
                     ref: col,
                     width: col.width === 'fit-content' ? col.autoSize :
-                        col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
+                        col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth?.toString() || col.defaultWidth) : null,
                     colSpan: col.gridColumnSpan,
                     colEnd: col.colStart + col.gridColumnSpan,
                     widthSetByUser: col.widthSetByUser
@@ -5980,7 +5684,7 @@ class IgxColumnComponent {
                         columnSizes[i] = {
                             ref: col,
                             width: col.width === 'fit-content' ? col.autoSize :
-                                col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth) : null,
+                                col.widthSetByUser || this.grid.columnWidthSetByUser ? parseFloat(col.calcWidth?.toString() || col.defaultWidth) : null,
                             colSpan: col.gridColumnSpan,
                             colEnd: col.colStart + col.gridColumnSpan,
                             widthSetByUser: col.widthSetByUser
@@ -6111,7 +5815,7 @@ class IgxColumnComponent {
         const args = { column: this, insertAtIndex: index, isPinned: false, cancel: false };
         this.grid.columnPin.emit(args);
         if (args.cancel) {
-            return;
+            return undefined;
         }
         this.grid.crudService.endEdit(false);
         this._pinned = true;
@@ -6136,7 +5840,7 @@ class IgxColumnComponent {
                 let allPinned = [];
                 // FIX: this is duplicated on every step in the hierarchy....
                 // re-create hierarchy
-                rootPinnedCols.forEach(group => {
+                rootPinnedCols.forEach((group) => {
                     allPinned.push(group);
                     allPinned = allPinned.concat(group.allChildren);
                 });
@@ -6199,7 +5903,7 @@ class IgxColumnComponent {
         // estimate the exact index at which column will be inserted
         // takes into account initial unpinned index of the column
         if (!hasIndex) {
-            const indices = grid._unpinnedColumns.map(col => col.index);
+            const indices = grid._unpinnedColumns.map((col) => col.index);
             indices.push(this.index);
             indices.sort((a, b) => a - b);
             index = indices.indexOf(this.index);
@@ -6207,7 +5911,7 @@ class IgxColumnComponent {
         const args = { column: this, insertAtIndex: index, isPinned: true, cancel: false };
         this.grid.columnPin.emit(args);
         if (args.cancel) {
-            return;
+            return undefined;
         }
         this.grid.crudService.endEdit(false);
         this._pinned = false;
@@ -6515,7 +6219,7 @@ class IgxColumnComponent {
             const currentCalcWidth = parseFloat(possibleColumnWidth);
             this._calcWidth = this.getConstrainedSizePx(currentCalcWidth);
         }
-        this.calcPixelWidth = parseFloat(this._calcWidth);
+        this.calcPixelWidth = parseFloat(this._calcWidth.toString());
     }
     /**
      * @hidden
@@ -7211,7 +6915,7 @@ class IgxColumnGroupComponent extends IgxColumnComponent {
             if (val.hidden) {
                 return acc;
             }
-            return acc + parseFloat(val.calcWidth);
+            return acc + parseFloat(val.calcWidth?.toString() || val.defaultWidth);
         }, 0)}`;
         return width + 'px';
     }
@@ -7665,11 +7369,11 @@ class IgxAdvancedFilteringDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxAdvancedFilteringDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxAdvancedFilteringDialogComponent, isStandalone: true, selector: "igx-advanced-filtering-dialog", inputs: { grid: "grid" }, host: { properties: { "style.display": "this.display" } }, viewQueries: [{ propertyName: "queryBuilder", first: true, predicate: ["queryBuilder"], descendants: true, read: IgxQueryBuilderComponent }], ngImport: i0, template: "@if (grid) {\n    <article class=\"igx-advanced-filter\" igxDrag [ghost]=\"false\" [dragTolerance]=\"0\"\n        (dragStart)=\"dragStart($event)\" (dragMove)=\"onDragMove($event)\" (keydown)=\"onKeyDown($event)\"\n        [ngClass]=\"{\n            'igx-advanced-filter': true,\n            'igx-advanced-filter--inline': inline\n        }\">\n        <igx-query-builder #queryBuilder\n            [locale]=\"grid.locale\"\n            [entities]=\"generateEntity()\"\n            [resourceStrings]=\"queryBuilderResourceStrings\"\n            [expressionTree]=\"this.grid.advancedFilteringExpressionsTree\">\n            <igx-query-builder-header\n                [title]=\"grid.resourceStrings.igx_grid_advanced_filter_title\"\n                igxDragHandle>\n            </igx-query-builder-header>\n        </igx-query-builder>\n\n        <footer class=\"igx-excel-filter__secondary-footer\">\n            <div class=\"igx-excel-filter__clear\">\n                <button igxButton=\"flat\" type=\"button\"\n                    (click)=\"onClearButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__cancel\">\n                <button igxButton=\"outlined\" type=\"button\" (click)=\"cancelChanges()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__apply\">\n                <button igxButton=\"contained\" type=\"button\"\n                    (click)=\"onApplyButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_apply }}\n                </button>\n            </div>\n        </footer>\n    </article>\n}\n", dependencies: [{ kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostClasses", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxQueryBuilderComponent, selector: "igx-query-builder", inputs: ["showEntityChangeDialog", "entities", "fields", "expressionTree", "locale", "resourceStrings", "disableEntityChange", "searchValueTemplate", "disableReturnFieldsChange"], outputs: ["expressionTreeChange"] }, { kind: "component", type: IgxQueryBuilderHeaderComponent, selector: "igx-query-builder-header", inputs: ["title", "showLegend", "resourceStrings"] }, { kind: "directive", type: IgxDragHandleDirective, selector: "[igxDragHandle]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxAdvancedFilteringDialogComponent, isStandalone: true, selector: "igx-advanced-filtering-dialog", inputs: { grid: "grid" }, host: { properties: { "style.display": "this.display" } }, viewQueries: [{ propertyName: "queryBuilder", first: true, predicate: ["queryBuilder"], descendants: true, read: IgxQueryBuilderComponent }], ngImport: i0, template: "@if (grid) {\n    <article class=\"igx-advanced-filter\" igxDrag [ghost]=\"false\" [dragTolerance]=\"0\"\n        (dragStart)=\"dragStart($event)\" (dragMove)=\"onDragMove($event)\" (keydown)=\"onKeyDown($event)\"\n        [ngClass]=\"{\n            'igx-advanced-filter': true,\n            'igx-advanced-filter--inline': inline\n        }\">\n        <igx-query-builder #queryBuilder\n            [locale]=\"grid.locale\"\n            [entities]=\"generateEntity()\"\n            [resourceStrings]=\"queryBuilderResourceStrings\"\n            [expressionTree]=\"this.grid.advancedFilteringExpressionsTree\">\n            <igx-query-builder-header\n                [title]=\"grid.resourceStrings.igx_grid_advanced_filter_title!\"\n                igxDragHandle>\n            </igx-query-builder-header>\n        </igx-query-builder>\n\n        <footer class=\"igx-excel-filter__secondary-footer\">\n            <div class=\"igx-excel-filter__clear\">\n                <button igxButton=\"flat\" type=\"button\"\n                    (click)=\"onClearButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__cancel\">\n                <button igxButton=\"outlined\" type=\"button\" (click)=\"cancelChanges()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__apply\">\n                <button igxButton=\"contained\" type=\"button\"\n                    (click)=\"onApplyButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_apply }}\n                </button>\n            </div>\n        </footer>\n    </article>\n}\n", dependencies: [{ kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostClasses", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxQueryBuilderComponent, selector: "igx-query-builder", inputs: ["showEntityChangeDialog", "entities", "fields", "expressionTree", "locale", "resourceStrings", "disableEntityChange", "searchValueTemplate", "disableReturnFieldsChange"], outputs: ["expressionTreeChange"] }, { kind: "component", type: IgxQueryBuilderHeaderComponent, selector: "igx-query-builder-header", inputs: ["title", "showLegend", "resourceStrings"] }, { kind: "directive", type: IgxDragHandleDirective, selector: "[igxDragHandle]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxAdvancedFilteringDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-advanced-filtering-dialog', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDragDirective, NgClass, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxDragHandleDirective, IgxButtonDirective], template: "@if (grid) {\n    <article class=\"igx-advanced-filter\" igxDrag [ghost]=\"false\" [dragTolerance]=\"0\"\n        (dragStart)=\"dragStart($event)\" (dragMove)=\"onDragMove($event)\" (keydown)=\"onKeyDown($event)\"\n        [ngClass]=\"{\n            'igx-advanced-filter': true,\n            'igx-advanced-filter--inline': inline\n        }\">\n        <igx-query-builder #queryBuilder\n            [locale]=\"grid.locale\"\n            [entities]=\"generateEntity()\"\n            [resourceStrings]=\"queryBuilderResourceStrings\"\n            [expressionTree]=\"this.grid.advancedFilteringExpressionsTree\">\n            <igx-query-builder-header\n                [title]=\"grid.resourceStrings.igx_grid_advanced_filter_title\"\n                igxDragHandle>\n            </igx-query-builder-header>\n        </igx-query-builder>\n\n        <footer class=\"igx-excel-filter__secondary-footer\">\n            <div class=\"igx-excel-filter__clear\">\n                <button igxButton=\"flat\" type=\"button\"\n                    (click)=\"onClearButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__cancel\">\n                <button igxButton=\"outlined\" type=\"button\" (click)=\"cancelChanges()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__apply\">\n                <button igxButton=\"contained\" type=\"button\"\n                    (click)=\"onApplyButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_apply }}\n                </button>\n            </div>\n        </footer>\n    </article>\n}\n" }]
+            args: [{ selector: 'igx-advanced-filtering-dialog', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxDragDirective, NgClass, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxDragHandleDirective, IgxButtonDirective], template: "@if (grid) {\n    <article class=\"igx-advanced-filter\" igxDrag [ghost]=\"false\" [dragTolerance]=\"0\"\n        (dragStart)=\"dragStart($event)\" (dragMove)=\"onDragMove($event)\" (keydown)=\"onKeyDown($event)\"\n        [ngClass]=\"{\n            'igx-advanced-filter': true,\n            'igx-advanced-filter--inline': inline\n        }\">\n        <igx-query-builder #queryBuilder\n            [locale]=\"grid.locale\"\n            [entities]=\"generateEntity()\"\n            [resourceStrings]=\"queryBuilderResourceStrings\"\n            [expressionTree]=\"this.grid.advancedFilteringExpressionsTree\">\n            <igx-query-builder-header\n                [title]=\"grid.resourceStrings.igx_grid_advanced_filter_title!\"\n                igxDragHandle>\n            </igx-query-builder-header>\n        </igx-query-builder>\n\n        <footer class=\"igx-excel-filter__secondary-footer\">\n            <div class=\"igx-excel-filter__clear\">\n                <button igxButton=\"flat\" type=\"button\"\n                    (click)=\"onClearButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__cancel\">\n                <button igxButton=\"outlined\" type=\"button\" (click)=\"cancelChanges()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__apply\">\n                <button igxButton=\"contained\" type=\"button\"\n                    (click)=\"onApplyButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_apply }}\n                </button>\n            </div>\n        </footer>\n    </article>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { queryBuilder: [{
                 type: ViewChild,
                 args: ['queryBuilder', { read: IgxQueryBuilderComponent }]
@@ -7884,7 +7588,7 @@ class IgxExcelStyleDefaultExpressionComponent {
         }
     }
     isConditionSelected(conditionName) {
-        return this.expressionUI.expression.condition && this.expressionUI.expression.condition.name === conditionName;
+        return (this.expressionUI.expression.condition && this.expressionUI.expression.condition.name === conditionName);
     }
     onConditionsChanged(eventArgs) {
         const value = eventArgs.newSelection.value;
@@ -7901,7 +7605,8 @@ class IgxExcelStyleDefaultExpressionComponent {
         return this.grid.resourceStrings[`igx_grid_filter_${name}`] || name;
     }
     updateSearchValueOnBlur(eventArgs) {
-        this.expressionUI.expression.searchVal = DataUtil.parseValue(this.column.dataType, eventArgs.target.value);
+        const target = eventArgs.target;
+        this.expressionUI.expression.searchVal = DataUtil.parseValue(this.column.dataType, target.value);
     }
     onLogicOperatorButtonClicked(eventArgs, buttonIndex) {
         if (this.logicOperatorButtonGroup.selectedButtons.length === 0) {
@@ -7931,11 +7636,11 @@ class IgxExcelStyleDefaultExpressionComponent {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxExcelStyleDefaultExpressionComponent, isStandalone: true, selector: "igx-excel-style-default-expression", inputs: { column: "column", expressionUI: "expressionUI", expressionsList: "expressionsList", grid: "grid" }, outputs: { expressionRemoved: "expressionRemoved", logicOperatorChanged: "logicOperatorChanged" }, viewQueries: [{ propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "dropdownConditions", first: true, predicate: ["dropdownConditions"], descendants: true, read: IgxSelectComponent, static: true }, { propertyName: "logicOperatorButtonGroup", first: true, predicate: ["logicOperatorButtonGroup"], descendants: true, read: IgxButtonGroupComponent }, { propertyName: "inputValuesDirective", first: true, predicate: ["inputValues"], descendants: true, read: IgxInputDirective, static: true }], ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <div class=\"igx-grid__filtering-dropdown-items\">\n                <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                <span class=\"igx-grid__filtering-dropdown-text\">{{translateCondition(condition)}}</span>\n            </div>\n        </igx-select-item>\n    }\n</igx-select>\n\n<igx-input-group #inputGroupValues type=\"box\">\n    <input\n        #inputValues\n        igxInput\n        [type]=\"type\"\n        tabindex=\"0\"\n        [placeholder]=\"inputValuePlaceholder\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        autocomplete=\"off\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        (blur)=\"updateSearchValueOnBlur($event)\"\n    />\n    @if (column.dataType === 'percent' && (expressionUI.expression.searchVal || expressionUI.expression.searchVal === 0)) {\n        <igx-suffix>\n            <span class=\"igx-grid__filtering-row-percent-hint\">{{ expressionUI.expression.searchVal | percent:column.pipeArgs.digitsInfo:grid.locale }}</span>\n        </igx-suffix>\n    }\n</igx-input-group>\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\">\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\n            tabindex=\"0\"\n            #andButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n            [selected]=\"expressionUI.afterOperator === 0\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n        </span>\n        <span igxButton\n            tabindex=\"0\"\n            #orButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n            [selected]=\"expressionUI.afterOperator === 1\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n        </span>\n    </igx-buttongroup>\n}\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { 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: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxExcelStyleDefaultExpressionComponent, isStandalone: true, selector: "igx-excel-style-default-expression", inputs: { column: "column", expressionUI: "expressionUI", expressionsList: "expressionsList", grid: "grid" }, outputs: { expressionRemoved: "expressionRemoved", logicOperatorChanged: "logicOperatorChanged" }, viewQueries: [{ propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "dropdownConditions", first: true, predicate: ["dropdownConditions"], descendants: true, read: IgxSelectComponent, static: true }, { propertyName: "logicOperatorButtonGroup", first: true, predicate: ["logicOperatorButtonGroup"], descendants: true, read: IgxButtonGroupComponent }, { propertyName: "inputValuesDirective", first: true, predicate: ["inputValues"], descendants: true, read: IgxInputDirective, static: true }], ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <div class=\"igx-grid__filtering-dropdown-items\">\n                <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                <span class=\"igx-grid__filtering-dropdown-text\">{{translateCondition(condition)}}</span>\n            </div>\n        </igx-select-item>\n    }\n</igx-select>\n\n<igx-input-group #inputGroupValues type=\"box\">\n    <input\n        #inputValues\n        igxInput\n        [type]=\"type\"\n        tabindex=\"0\"\n        [placeholder]=\"inputValuePlaceholder\"\n        [disabled]=\"!!(expressionUI.expression.condition && expressionUI.expression.condition.isUnary)\"\n        autocomplete=\"off\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        (blur)=\"updateSearchValueOnBlur($event)\"\n    />\n    @if (column.dataType === 'percent' && (expressionUI.expression.searchVal || expressionUI.expression.searchVal === 0)) {\n        <igx-suffix>\n            <span class=\"igx-grid__filtering-row-percent-hint\">{{ expressionUI.expression.searchVal | percent:column.pipeArgs.digitsInfo:grid.locale }}</span>\n        </igx-suffix>\n    }\n</igx-input-group>\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\">\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\n            tabindex=\"0\"\n            #andButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n            [selected]=\"expressionUI.afterOperator === 0\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n        </span>\n        <span igxButton\n            tabindex=\"0\"\n            #orButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n            [selected]=\"expressionUI.afterOperator === 1\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n        </span>\n    </igx-buttongroup>\n}\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { 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: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleDefaultExpressionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-default-expression', changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective, IgxPercentFormatterPipe], template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <div class=\"igx-grid__filtering-dropdown-items\">\n                <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                <span class=\"igx-grid__filtering-dropdown-text\">{{translateCondition(condition)}}</span>\n            </div>\n        </igx-select-item>\n    }\n</igx-select>\n\n<igx-input-group #inputGroupValues type=\"box\">\n    <input\n        #inputValues\n        igxInput\n        [type]=\"type\"\n        tabindex=\"0\"\n        [placeholder]=\"inputValuePlaceholder\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        autocomplete=\"off\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        (blur)=\"updateSearchValueOnBlur($event)\"\n    />\n    @if (column.dataType === 'percent' && (expressionUI.expression.searchVal || expressionUI.expression.searchVal === 0)) {\n        <igx-suffix>\n            <span class=\"igx-grid__filtering-row-percent-hint\">{{ expressionUI.expression.searchVal | percent:column.pipeArgs.digitsInfo:grid.locale }}</span>\n        </igx-suffix>\n    }\n</igx-input-group>\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\">\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\n            tabindex=\"0\"\n            #andButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n            [selected]=\"expressionUI.afterOperator === 0\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n        </span>\n        <span igxButton\n            tabindex=\"0\"\n            #orButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n            [selected]=\"expressionUI.afterOperator === 1\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n        </span>\n    </igx-buttongroup>\n}\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
+            args: [{ selector: 'igx-excel-style-default-expression', changeDetection: ChangeDetectionStrategy.Eager, imports: [FormsModule, IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective, IgxPercentFormatterPipe], template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <div class=\"igx-grid__filtering-dropdown-items\">\n                <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n                <span class=\"igx-grid__filtering-dropdown-text\">{{translateCondition(condition)}}</span>\n            </div>\n        </igx-select-item>\n    }\n</igx-select>\n\n<igx-input-group #inputGroupValues type=\"box\">\n    <input\n        #inputValues\n        igxInput\n        [type]=\"type\"\n        tabindex=\"0\"\n        [placeholder]=\"inputValuePlaceholder\"\n        [disabled]=\"!!(expressionUI.expression.condition && expressionUI.expression.condition.isUnary)\"\n        autocomplete=\"off\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        (blur)=\"updateSearchValueOnBlur($event)\"\n    />\n    @if (column.dataType === 'percent' && (expressionUI.expression.searchVal || expressionUI.expression.searchVal === 0)) {\n        <igx-suffix>\n            <span class=\"igx-grid__filtering-row-percent-hint\">{{ expressionUI.expression.searchVal | percent:column.pipeArgs.digitsInfo:grid.locale }}</span>\n        </igx-suffix>\n    }\n</igx-input-group>\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\">\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\n            tabindex=\"0\"\n            #andButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n            [selected]=\"expressionUI.afterOperator === 0\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n        </span>\n        <span igxButton\n            tabindex=\"0\"\n            #orButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n            [selected]=\"expressionUI.afterOperator === 1\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n        </span>\n    </igx-buttongroup>\n}\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n" }]
         }], propDecorators: { column: [{
                 type: Input
             }], expressionUI: [{
@@ -7989,11 +7694,11 @@ class IgxExcelStyleDateExpressionComponent extends IgxExcelStyleDefaultExpressio
         return this.i18nFormatter.getLocaleFirstDayOfWeek(this.grid.locale);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxExcelStyleDateExpressionComponent, isStandalone: true, selector: "igx-excel-style-date-expression", inputs: { searchVal: "searchVal" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-select\n  #dropdownConditions\n  type=\"box\"\n  [placeholder]=\"conditionsPlaceholder\"\n  (selectionChanging)=\"onConditionsChanged($event)\"\n  [overlaySettings]=\"dropDownOverlaySettings\"\n>\n  <igx-prefix>\n    @if (expressionUI.expression.condition) {\n      <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n    }\n    @if (!expressionUI.expression.condition) {\n      <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n    }\n  </igx-prefix>\n  @for (condition of conditions; track condition) {\n    <igx-select-item\n      [value]=\"condition\"\n      [text]=\"getConditionFriendlyName(condition)\"\n      [selected]=\"isConditionSelected(condition)\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"getCondition(condition).iconName\"\n      ></igx-icon>\n      <span>{{ translateCondition(condition) }}</span>\n    </igx-select-item>\n  }\n</igx-select>\n\n@if (column.dataType === 'date') {\n  <igx-date-picker\n    #picker\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(ngModel)]=\"searchVal\"\n    [locale]=\"grid.locale\"\n    (click)=\"picker.open()\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"\n      expressionUI.expression.condition &&\n      expressionUI.expression.condition.isUnary\n    \"\n    type=\"box\"\n  >\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n  </igx-date-picker>\n}\n\n@if (column.dataType === 'time') {\n  <igx-time-picker\n    #picker\n    [(ngModel)]=\"searchVal\"\n    [locale]=\"grid.locale\"\n    (click)=\"picker.open()\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [inputFormat]=\"\n      $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n    \"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"\n      expressionUI.expression.condition &&\n      expressionUI.expression.condition.isUnary\n    \"\n    type=\"box\"\n  >\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n  </igx-time-picker>\n}\n\n@if (column.dataType === 'dateTime') {\n  <igx-input-group #dropDownTarget #inputGroup type=\"box\">\n    <input\n      #input\n      igxInput\n      tabindex=\"0\"\n      [placeholder]=\"inputDatePlaceholder\"\n      [locale]=\"column.grid.locale\"\n      [igxDateTimeEditor]=\"\n        $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n      \"\n      [defaultFormatType]=\"column.dataType\"\n      [displayFormat]=\"column.pipeArgs.format\"\n      [(ngModel)]=\"searchVal\"\n      [disabled]=\"\n        expressionUI.expression.condition &&\n        expressionUI.expression.condition.isUnary\n      \"\n    />\n  </igx-input-group>\n}\n\n@if (!isSingle) {\n  <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\">\n    <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n  </button>\n}\n\n@if (!isLast) {\n  <igx-buttongroup #logicOperatorButtonGroup>\n    <span\n      igxButton\n      #andButton\n      (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n      tabindex=\"0\"\n      [selected]=\"expressionUI.afterOperator === 0\"\n      type=\"button\"\n      (click)=\"onLogicOperatorButtonClicked($event, 0)\"\n    >\n      {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n    <span\n      igxButton\n      #orButton\n      tabindex=\"0\"\n      (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n      [selected]=\"expressionUI.afterOperator === 1\"\n      type=\"button\"\n      (click)=\"onLogicOperatorButtonClicked($event, 1)\"\n    >\n      {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n  </igx-buttongroup>\n}\n\n<div\n  #overlayOutlet\n  igxOverlayOutlet\n  (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n", dependencies: [{ kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxExcelStyleDateExpressionComponent, isStandalone: true, selector: "igx-excel-style-date-expression", inputs: { searchVal: "searchVal" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-select\n  #dropdownConditions\n  type=\"box\"\n  [placeholder]=\"conditionsPlaceholder\"\n  (selectionChanging)=\"onConditionsChanged($event)\"\n  [overlaySettings]=\"dropDownOverlaySettings\"\n>\n  <igx-prefix>\n    @if (expressionUI.expression.condition) {\n      <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n    }\n    @if (!expressionUI.expression.condition) {\n      <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n    }\n  </igx-prefix>\n  @for (condition of conditions; track condition) {\n    <igx-select-item\n      [value]=\"condition\"\n      [text]=\"getConditionFriendlyName(condition)\"\n      [selected]=\"isConditionSelected(condition)\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"getCondition(condition).iconName\"\n      ></igx-icon>\n      <span>{{ translateCondition(condition) }}</span>\n    </igx-select-item>\n  }\n</igx-select>\n\n@if (column.dataType === 'date') {\n  <igx-date-picker\n    #picker\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(ngModel)]=\"searchVal\"\n    [locale]=\"grid.locale\"\n    (click)=\"picker.open()\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [formatter]=\"column.formatter!\"\n    [disabled]=\"!!(\n      expressionUI.expression.condition &&\n      expressionUI.expression.condition.isUnary\n    )\"\n    type=\"box\"\n  >\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n  </igx-date-picker>\n}\n\n@if (column.dataType === 'time') {\n  <igx-time-picker\n    #picker\n    [(ngModel)]=\"searchVal\"\n    [locale]=\"grid.locale\"\n    (click)=\"picker.open()\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format!\"\n    [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n    [formatter]=\"column.formatter!\"\n    [disabled]=\"!!(\n      expressionUI.expression.condition &&\n      expressionUI.expression.condition.isUnary\n    )\"\n    type=\"box\"\n  >\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n  </igx-time-picker>\n}\n\n@if (column.dataType === 'dateTime') {\n  <igx-input-group #dropDownTarget #inputGroup type=\"box\">\n    <input\n      #input\n      igxInput\n      tabindex=\"0\"\n      [placeholder]=\"inputDatePlaceholder\"\n      [locale]=\"column.grid.locale\"\n      [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat!\"\n      [defaultFormatType]=\"column.dataType\"\n      [displayFormat]=\"column.pipeArgs.format!\"\n      [(ngModel)]=\"searchVal\"\n      [disabled]=\"!!(\n        expressionUI.expression.condition &&\n        expressionUI.expression.condition.isUnary\n      )\"\n    />\n  </igx-input-group>\n}\n\n@if (!isSingle) {\n  <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\">\n    <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n  </button>\n}\n\n@if (!isLast) {\n  <igx-buttongroup #logicOperatorButtonGroup>\n    <span\n      igxButton\n      #andButton\n      (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n      tabindex=\"0\"\n      [selected]=\"expressionUI.afterOperator === 0\"\n      type=\"button\"\n      (click)=\"onLogicOperatorButtonClicked($event, 0)\"\n    >\n      {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n    <span\n      igxButton\n      #orButton\n      tabindex=\"0\"\n      (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n      [selected]=\"expressionUI.afterOperator === 1\"\n      type=\"button\"\n      (click)=\"onLogicOperatorButtonClicked($event, 1)\"\n    >\n      {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n  </igx-buttongroup>\n}\n\n<div\n  #overlayOutlet\n  igxOverlayOutlet\n  (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n", dependencies: [{ kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-date-expression', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxDateTimeEditorDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective], template: "<igx-select\n  #dropdownConditions\n  type=\"box\"\n  [placeholder]=\"conditionsPlaceholder\"\n  (selectionChanging)=\"onConditionsChanged($event)\"\n  [overlaySettings]=\"dropDownOverlaySettings\"\n>\n  <igx-prefix>\n    @if (expressionUI.expression.condition) {\n      <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n    }\n    @if (!expressionUI.expression.condition) {\n      <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n    }\n  </igx-prefix>\n  @for (condition of conditions; track condition) {\n    <igx-select-item\n      [value]=\"condition\"\n      [text]=\"getConditionFriendlyName(condition)\"\n      [selected]=\"isConditionSelected(condition)\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"getCondition(condition).iconName\"\n      ></igx-icon>\n      <span>{{ translateCondition(condition) }}</span>\n    </igx-select-item>\n  }\n</igx-select>\n\n@if (column.dataType === 'date') {\n  <igx-date-picker\n    #picker\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(ngModel)]=\"searchVal\"\n    [locale]=\"grid.locale\"\n    (click)=\"picker.open()\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"\n      expressionUI.expression.condition &&\n      expressionUI.expression.condition.isUnary\n    \"\n    type=\"box\"\n  >\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n  </igx-date-picker>\n}\n\n@if (column.dataType === 'time') {\n  <igx-time-picker\n    #picker\n    [(ngModel)]=\"searchVal\"\n    [locale]=\"grid.locale\"\n    (click)=\"picker.open()\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [inputFormat]=\"\n      $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n    \"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"\n      expressionUI.expression.condition &&\n      expressionUI.expression.condition.isUnary\n    \"\n    type=\"box\"\n  >\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n  </igx-time-picker>\n}\n\n@if (column.dataType === 'dateTime') {\n  <igx-input-group #dropDownTarget #inputGroup type=\"box\">\n    <input\n      #input\n      igxInput\n      tabindex=\"0\"\n      [placeholder]=\"inputDatePlaceholder\"\n      [locale]=\"column.grid.locale\"\n      [igxDateTimeEditor]=\"\n        $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n      \"\n      [defaultFormatType]=\"column.dataType\"\n      [displayFormat]=\"column.pipeArgs.format\"\n      [(ngModel)]=\"searchVal\"\n      [disabled]=\"\n        expressionUI.expression.condition &&\n        expressionUI.expression.condition.isUnary\n      \"\n    />\n  </igx-input-group>\n}\n\n@if (!isSingle) {\n  <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\">\n    <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n  </button>\n}\n\n@if (!isLast) {\n  <igx-buttongroup #logicOperatorButtonGroup>\n    <span\n      igxButton\n      #andButton\n      (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n      tabindex=\"0\"\n      [selected]=\"expressionUI.afterOperator === 0\"\n      type=\"button\"\n      (click)=\"onLogicOperatorButtonClicked($event, 0)\"\n    >\n      {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n    <span\n      igxButton\n      #orButton\n      tabindex=\"0\"\n      (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n      [selected]=\"expressionUI.afterOperator === 1\"\n      type=\"button\"\n      (click)=\"onLogicOperatorButtonClicked($event, 1)\"\n    >\n      {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n  </igx-buttongroup>\n}\n\n<div\n  #overlayOutlet\n  igxOverlayOutlet\n  (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n" }]
+            args: [{ selector: 'igx-excel-style-date-expression', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxDateTimeEditorDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective], template: "<igx-select\n  #dropdownConditions\n  type=\"box\"\n  [placeholder]=\"conditionsPlaceholder\"\n  (selectionChanging)=\"onConditionsChanged($event)\"\n  [overlaySettings]=\"dropDownOverlaySettings\"\n>\n  <igx-prefix>\n    @if (expressionUI.expression.condition) {\n      <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n    }\n    @if (!expressionUI.expression.condition) {\n      <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n    }\n  </igx-prefix>\n  @for (condition of conditions; track condition) {\n    <igx-select-item\n      [value]=\"condition\"\n      [text]=\"getConditionFriendlyName(condition)\"\n      [selected]=\"isConditionSelected(condition)\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"getCondition(condition).iconName\"\n      ></igx-icon>\n      <span>{{ translateCondition(condition) }}</span>\n    </igx-select-item>\n  }\n</igx-select>\n\n@if (column.dataType === 'date') {\n  <igx-date-picker\n    #picker\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(ngModel)]=\"searchVal\"\n    [locale]=\"grid.locale\"\n    (click)=\"picker.open()\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [formatter]=\"column.formatter!\"\n    [disabled]=\"!!(\n      expressionUI.expression.condition &&\n      expressionUI.expression.condition.isUnary\n    )\"\n    type=\"box\"\n  >\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n  </igx-date-picker>\n}\n\n@if (column.dataType === 'time') {\n  <igx-time-picker\n    #picker\n    [(ngModel)]=\"searchVal\"\n    [locale]=\"grid.locale\"\n    (click)=\"picker.open()\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format!\"\n    [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n    [formatter]=\"column.formatter!\"\n    [disabled]=\"!!(\n      expressionUI.expression.condition &&\n      expressionUI.expression.condition.isUnary\n    )\"\n    type=\"box\"\n  >\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n  </igx-time-picker>\n}\n\n@if (column.dataType === 'dateTime') {\n  <igx-input-group #dropDownTarget #inputGroup type=\"box\">\n    <input\n      #input\n      igxInput\n      tabindex=\"0\"\n      [placeholder]=\"inputDatePlaceholder\"\n      [locale]=\"column.grid.locale\"\n      [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat!\"\n      [defaultFormatType]=\"column.dataType\"\n      [displayFormat]=\"column.pipeArgs.format!\"\n      [(ngModel)]=\"searchVal\"\n      [disabled]=\"!!(\n        expressionUI.expression.condition &&\n        expressionUI.expression.condition.isUnary\n      )\"\n    />\n  </igx-input-group>\n}\n\n@if (!isSingle) {\n  <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\">\n    <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n  </button>\n}\n\n@if (!isLast) {\n  <igx-buttongroup #logicOperatorButtonGroup>\n    <span\n      igxButton\n      #andButton\n      (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n      tabindex=\"0\"\n      [selected]=\"expressionUI.afterOperator === 0\"\n      type=\"button\"\n      (click)=\"onLogicOperatorButtonClicked($event, 0)\"\n    >\n      {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n    <span\n      igxButton\n      #orButton\n      tabindex=\"0\"\n      (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n      [selected]=\"expressionUI.afterOperator === 1\"\n      type=\"button\"\n      (click)=\"onLogicOperatorButtonClicked($event, 1)\"\n    >\n      {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n  </igx-buttongroup>\n}\n\n<div\n  #overlayOutlet\n  igxOverlayOutlet\n  (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n" }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input', { read: IgxInputDirective, static: false }]
@@ -8353,9 +8058,9 @@ class IgxExcelStyleConditionalFilterComponent {
      */
     showCustomFilterItem() {
         const exprTree = this.esf.column.filteringExpressionsTree;
-        return exprTree && exprTree.filteringOperands && exprTree.filteringOperands.length &&
+        return (exprTree && exprTree.filteringOperands && exprTree.filteringOperands.length &&
             !(exprTree.filteringOperands[0].condition &&
-                exprTree.filteringOperands[0].condition.name === 'in');
+                exprTree.filteringOperands[0].condition.name === 'in'));
     }
     /**
      * @hidden @internal
@@ -8402,11 +8107,11 @@ class IgxExcelStyleHeaderComponent {
         this.esf = inject(BaseFilteringComponent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxExcelStyleHeaderComponent, isStandalone: true, selector: "igx-excel-style-header", inputs: { showPinning: ["showPinning", "showPinning", booleanAttribute], showSelecting: ["showSelecting", "showSelecting", booleanAttribute], showHiding: ["showHiding", "showHiding", booleanAttribute] }, ngImport: i0, template: "@if (esf.column) {\n    <header class=\"igx-excel-filter__menu-header\">\n        <h4 data-no-typography>{{ esf.column.header || esf.column.field }}</h4>\n        <div class=\"igx-excel-filter__menu-header-actions\">\n            @if (showSelecting) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onSelect()\"\n                    [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n                    [attr.aria-label]=\"esf.column.selected ? esf.grid.resourceStrings.igx_grid_excel_deselect : esf.grid.resourceStrings.igx_grid_excel_select\"\n                >\n                    <igx-icon family=\"default\" name=\"selected\"></igx-icon>\n                </button>\n            }\n            @if (showPinning) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onPin()\"\n                    [attr.aria-label]=\"esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin\"\n                >\n                    <igx-icon family=\"default\" [name]=\"esf.column.pinned ? 'unpin' : 'pin'\"></igx-icon>\n                </button>\n            }\n            @if (showHiding) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onHideToggle()\"\n                    [attr.aria-label]=\"esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide\"\n                >\n                    <igx-icon family=\"default\" [name]=\"esf.column.hidden ? 'show' : 'hide'\"></igx-icon>\n                </button>\n            }\n        </div>\n    </header>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxExcelStyleHeaderComponent, isStandalone: true, selector: "igx-excel-style-header", inputs: { showPinning: ["showPinning", "showPinning", booleanAttribute], showSelecting: ["showSelecting", "showSelecting", booleanAttribute], showHiding: ["showHiding", "showHiding", booleanAttribute] }, ngImport: i0, template: "@if (esf.column) {\n    <header class=\"igx-excel-filter__menu-header\">\n        <h4 data-no-typography>{{ esf.column.header || esf.column.field }}</h4>\n        <div class=\"igx-excel-filter__menu-header-actions\">\n            @if (showSelecting) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onSelect($event)\"\n                    [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n                    [attr.aria-label]=\"esf.column.selected ? esf.grid.resourceStrings.igx_grid_excel_deselect : esf.grid.resourceStrings.igx_grid_excel_select\"\n                >\n                    <igx-icon family=\"default\" name=\"selected\"></igx-icon>\n                </button>\n            }\n            @if (showPinning) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onPin()\"\n                    [attr.aria-label]=\"esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin\"\n                >\n                    <igx-icon family=\"default\" [name]=\"esf.column.pinned ? 'unpin' : 'pin'\"></igx-icon>\n                </button>\n            }\n            @if (showHiding) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onHideToggle()\"\n                    [attr.aria-label]=\"esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide\"\n                >\n                    <igx-icon family=\"default\" [name]=\"esf.column.hidden ? 'show' : 'hide'\"></igx-icon>\n                </button>\n            }\n        </div>\n    </header>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-header', changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, IgxIconComponent, IgxIconButtonDirective], template: "@if (esf.column) {\n    <header class=\"igx-excel-filter__menu-header\">\n        <h4 data-no-typography>{{ esf.column.header || esf.column.field }}</h4>\n        <div class=\"igx-excel-filter__menu-header-actions\">\n            @if (showSelecting) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onSelect()\"\n                    [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n                    [attr.aria-label]=\"esf.column.selected ? esf.grid.resourceStrings.igx_grid_excel_deselect : esf.grid.resourceStrings.igx_grid_excel_select\"\n                >\n                    <igx-icon family=\"default\" name=\"selected\"></igx-icon>\n                </button>\n            }\n            @if (showPinning) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onPin()\"\n                    [attr.aria-label]=\"esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin\"\n                >\n                    <igx-icon family=\"default\" [name]=\"esf.column.pinned ? 'unpin' : 'pin'\"></igx-icon>\n                </button>\n            }\n            @if (showHiding) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onHideToggle()\"\n                    [attr.aria-label]=\"esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide\"\n                >\n                    <igx-icon family=\"default\" [name]=\"esf.column.hidden ? 'show' : 'hide'\"></igx-icon>\n                </button>\n            }\n        </div>\n    </header>\n}\n" }]
+            args: [{ selector: 'igx-excel-style-header', changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, IgxIconComponent, IgxIconButtonDirective], template: "@if (esf.column) {\n    <header class=\"igx-excel-filter__menu-header\">\n        <h4 data-no-typography>{{ esf.column.header || esf.column.field }}</h4>\n        <div class=\"igx-excel-filter__menu-header-actions\">\n            @if (showSelecting) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onSelect($event)\"\n                    [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n                    [attr.aria-label]=\"esf.column.selected ? esf.grid.resourceStrings.igx_grid_excel_deselect : esf.grid.resourceStrings.igx_grid_excel_select\"\n                >\n                    <igx-icon family=\"default\" name=\"selected\"></igx-icon>\n                </button>\n            }\n            @if (showPinning) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onPin()\"\n                    [attr.aria-label]=\"esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin\"\n                >\n                    <igx-icon family=\"default\" [name]=\"esf.column.pinned ? 'unpin' : 'pin'\"></igx-icon>\n                </button>\n            }\n            @if (showHiding) {\n                <button\n                    type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"esf.onHideToggle()\"\n                    [attr.aria-label]=\"esf.column.hidden ? esf.grid.resourceStrings.igx_grid_excel_show : esf.grid.resourceStrings.igx_grid_excel_hide\"\n                >\n                    <igx-icon family=\"default\" [name]=\"esf.column.hidden ? 'show' : 'hide'\"></igx-icon>\n                </button>\n            }\n        </div>\n    </header>\n}\n" }]
         }], propDecorators: { showPinning: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -8445,7 +8150,7 @@ class IgxExcelStyleMovingComponent {
         this.defaultClass = true;
     }
     get visibleColumns() {
-        return this.esf.grid.visibleColumns.filter(col => !col.columnGroup);
+        return this.esf.grid.visibleColumns.filter((col) => !col.columnGroup);
     }
     /**
      * @hidden @internal
@@ -8497,7 +8202,9 @@ class IgxExcelStyleMovingComponent {
         else {
             targetColumn = this.findColumn(moveDirection, this.esf.grid.unpinnedColumns);
         }
-        this.esf.grid.moveColumn(this.esf.column, targetColumn, moveDirection);
+        if (targetColumn) {
+            this.esf.grid.moveColumn(this.esf.column, targetColumn, moveDirection);
+        }
     }
     get esfSize() {
         const esf = this.esf;
@@ -8648,6 +8355,10 @@ class IgxExcelStyleSearchComponent {
          * @hidden @internal
          */
         this.displayedListData = [];
+        /**
+         * @hidden @internal
+         */
+        this.matchesCount = 0;
         this.activeDescendant = '';
         this._id = `igx-excel-style-search-${NEXT_ID++}`;
         this._isLoading = true;
@@ -8825,7 +8536,7 @@ class IgxExcelStyleSearchComponent {
         // GE Nov 1st, 2021 #10355 Keep a numeric value so the chunk size is calculated properly.
         // A 0 (instead of undefined) makes _calculateChunkSize() off the ForOfDirective behave.
         this._containerSize = this.esf.listData.length
-            ? (this.list?.element.nativeElement.offsetHeight ?? 0)
+            ? (this.list?.element.nativeElement.clientHeight ?? 0)
             : 0;
     }
     get id() {
@@ -9054,7 +8765,7 @@ class IgxExcelStyleSearchComponent {
                         if (this.esf.column.filteringIgnoreCase && !this.isHierarchical() && !this.isTreeGridWithGroupBy() && !this.isRemote()) {
                             const selectedValues = new Set(selectedItems.map(item => item.value.toLowerCase()));
                             searchVal = new Set();
-                            this.esf.grid.data.forEach(item => {
+                            this.esf.grid.data?.forEach((item) => {
                                 const fieldPaths = columnFieldPath(this.esf.column.field);
                                 const itemValue = resolveNestedPath(item, fieldPaths);
                                 if (typeof itemValue === "string" && selectedValues.has(itemValue.toLowerCase())) {
@@ -9325,11 +9036,11 @@ class IgxExcelStyleSearchComponent {
         return this.esf.grid.verticalScrollContainer.isRemote || this.esf.grid.pagingMode === GridPagingMode.Remote;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxExcelStyleSearchComponent, isStandalone: true, selector: "igx-excel-style-search", inputs: { id: "id" }, host: { properties: { "class.igx-excel-filter__menu-main": "this.defaultClass", "attr.id": "this.id" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "cancelButton", first: true, predicate: ["cancelButton"], descendants: true, read: IgxButtonDirective, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, read: IgxListComponent }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "addToCurrentFilterCheckbox", first: true, predicate: ["addToCurrentFilterCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "tree", first: true, predicate: ["tree"], descendants: true, read: IgxTreeComponent }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true }, { propertyName: "defaultExcelStyleLoadingValuesTemplate", first: true, predicate: ["defaultExcelStyleLoadingValuesTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<igx-input-group type=\"box\">\n  <igx-icon igxPrefix family=\"default\" name=\"search\"></igx-icon>\n  <input\n    #input\n    igxInput\n    tabindex=\"0\"\n    [(ngModel)]=\"searchValue\"\n    (ngModelChange)=\"filterListData()\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [placeholder]=\"\n      esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\n    \"\n    autocomplete=\"off\"\n  />\n  @if (searchValue || searchValue === 0) {\n    <igx-suffix>\n      <igx-icon\n        family=\"default\"\n        name=\"input_clear\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\"\n      >\n      </igx-icon>\n    </igx-suffix>\n  }\n</igx-input-group>\n\n@if (!isHierarchical()) {\n  <igx-list\n    #list\n    role=\"listbox\"\n    [isLoading]=\"isLoading\"\n    (keydown)=\"handleKeyDown($event)\"\n    tabindex=\"0\"\n    [attr.aria-activedescendant]=\"this.activeDescendant\"\n    (focus)=\"onFocus()\"\n    (focusout)=\"onFocusOut()\"\n  >\n    <div style=\"overflow: hidden; position: relative\">\n      <igx-list-item\n        [class.igx-list__item-base--active]=\"\n          focusedItem?.id === this.getItemId(i)\n        \"\n        [attr.id]=\"getItemId(i)\"\n        role=\"option\"\n        *igxFor=\"\n          let item of displayedListData;\n          index as i;\n          scrollOrientation: 'vertical';\n          containerSize: containerSize;\n          itemSize: itemSize\n        \"\n      >\n        <igx-checkbox\n          [value]=\"item\"\n          [tabindex]=\"-1\"\n          [checked]=\"$safeNavigationMigration(item?.isSelected)\"\n          [disableRipple]=\"true\"\n          [indeterminate]=\"$safeNavigationMigration(item?.indeterminate)\"\n          [disableTransitions]=\"true\"\n          (change)=\"onCheckboxChange($event)\"\n        >\n          {{ item.label }}\n        </igx-checkbox>\n      </igx-list-item>\n    </div>\n    <ng-template igxDataLoading>\n      <div class=\"igx-excel-filter__loading\">\n        <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\"> </ng-container>\n      </div>\n    </ng-template>\n    <ng-template igxEmptyList>\n      <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n    <div\n      class=\"igx-excel-filter__filter-results\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n    >\n      {{\n        esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace(\n          '{0}',\n          matchesCount\n        )\n      }}\n    </div>\n  </igx-list>\n}\n\n@if (isHierarchical()) {\n  <div class=\"igx-excel-filter__tree\">\n    @if (!isTreeEmpty()) {\n      <div class=\"igx-excel-filter__tree-alike\">\n        <div class=\"igx-excel-filter__tree-alike-item\">\n          <igx-checkbox\n            #selectAllCheckbox\n            [value]=\"selectAllItem\"\n            [checked]=\"$safeNavigationMigration(selectAllItem?.isSelected)\"\n            [disableRipple]=\"true\"\n            [indeterminate]=\"\n              $safeNavigationMigration(selectAllItem?.indeterminate)\n            \"\n            [disableTransitions]=\"true\"\n            (change)=\"onSelectAllCheckboxChange($event)\"\n          >\n            {{ selectAllItem.label }}\n          </igx-checkbox>\n        </div>\n        @if (searchValue) {\n          <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox\n              #addToCurrentFilterCheckbox\n              [value]=\"addToCurrentFilterItem\"\n              [checked]=\"addToCurrentFilterItem.isSelected\"\n              [disableRipple]=\"true\"\n              [disableTransitions]=\"true\"\n            >\n              {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n          </div>\n        }\n      </div>\n    }\n    <igx-tree\n      #tree\n      selection=\"Cascading\"\n      (nodeSelection)=\"onNodeSelectionChange($event)\"\n    >\n      @for (item of displayedListData; track item.value) {\n        <igx-tree-node [data]=\"item\" [selected]=\"item.isSelected\">\n          <div>{{ item.label }}</div>\n          @for (childLevel1 of item.children; track childLevel1.value) {\n            <igx-tree-node\n              [data]=\"childLevel1\"\n              [selected]=\"childLevel1.isSelected\"\n            >\n              <div>{{ childLevel1.label }}</div>\n              @for (\n                childLevel2 of childLevel1.children;\n                track childLevel2.value\n              ) {\n                <igx-tree-node\n                  [data]=\"childLevel2\"\n                  [selected]=\"childLevel2.isSelected\"\n                >\n                  <div>{{ childLevel2.label }}</div>\n                  @for (\n                    childLevel3 of childLevel2.children;\n                    track childLevel3.value\n                  ) {\n                    <igx-tree-node\n                      [data]=\"childLevel3\"\n                      [selected]=\"childLevel3.isSelected\"\n                    >\n                      <div>{{ childLevel3.label }}</div>\n                      @for (\n                        childLevel4 of childLevel3.children;\n                        track childLevel4.value\n                      ) {\n                        <igx-tree-node\n                          [data]=\"childLevel4\"\n                          [selected]=\"childLevel4.isSelected\"\n                        >\n                          <div>{{ childLevel4.label }}</div>\n                          @for (\n                            childLevel5 of childLevel4.children;\n                            track childLevel5.value\n                          ) {\n                            <igx-tree-node\n                              [data]=\"childLevel5\"\n                              [selected]=\"childLevel5.isSelected\"\n                            >\n                              <div>{{ childLevel5.label }}</div>\n                              @for (\n                                childLevel6 of childLevel5.children;\n                                track childLevel6.value\n                              ) {\n                                <igx-tree-node\n                                  [data]=\"childLevel6\"\n                                  [selected]=\"childLevel6.isSelected\"\n                                >\n                                  <div>{{ childLevel6.label }}</div>\n                                  @for (\n                                    childLevel7 of childLevel6.children;\n                                    track childLevel7.value\n                                  ) {\n                                    <igx-tree-node\n                                      [data]=\"childLevel7\"\n                                      [selected]=\"childLevel7.isSelected\"\n                                    >\n                                      <div>{{ childLevel7.label }}</div>\n                                      @for (\n                                        childLevel8 of childLevel7.children;\n                                        track childLevel8.value\n                                      ) {\n                                        <igx-tree-node\n                                          [data]=\"childLevel8\"\n                                          [selected]=\"childLevel8.isSelected\"\n                                        >\n                                          <div>{{ childLevel8.label }}</div>\n                                          @for (\n                                            childLevel9 of childLevel8.children;\n                                            track childLevel9.value\n                                          ) {\n                                            <igx-tree-node\n                                              [data]=\"childLevel9\"\n                                              [selected]=\"\n                                                childLevel9.isSelected\n                                              \"\n                                            >\n                                              <div>{{ childLevel9.label }}</div>\n                                            </igx-tree-node>\n                                          }\n                                        </igx-tree-node>\n                                      }\n                                    </igx-tree-node>\n                                  }\n                                </igx-tree-node>\n                              }\n                            </igx-tree-node>\n                          }\n                        </igx-tree-node>\n                      }\n                    </igx-tree-node>\n                  }\n                </igx-tree-node>\n              }\n            </igx-tree-node>\n          }\n        </igx-tree-node>\n      }\n    </igx-tree>\n    <ng-template igxDataLoading>\n      <div class=\"igx-excel-filter__loading\">\n        <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\"> </ng-container>\n      </div>\n    </ng-template>\n    @if (isTreeEmpty()) {\n      <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    }\n  </div>\n}\n\n<ng-template #emptySearch>\n  <div class=\"igx-excel-filter__empty\">\n    {{ esf.grid?.resourceStrings.igx_grid_excel_no_matches }}\n  </div>\n</ng-template>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n  <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n  <div class=\"igx-excel-filter__cancel\">\n    <button type=\"button\" #cancelButton igxButton=\"flat\" (click)=\"esf.cancel()\">\n      {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n    </button>\n  </div>\n  <div class=\"igx-excel-filter__apply\">\n    <button\n      type=\"button\"\n      igxButton=\"contained\"\n      [disabled]=\"applyButtonDisabled\"\n      (click)=\"applyFilter()\"\n    >\n      {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n    </button>\n  </div>\n</footer>\n", dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "component", type: IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings", "role"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForInitialChunkSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "chunkSizeChange", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index", "role", "selected"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "directive", type: IgxDataLoadingTemplateDirective, selector: "[igxDataLoading]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxEmptyListTemplateDirective, selector: "[igxEmptyList]" }, { kind: "component", type: IgxTreeComponent, selector: "igx-tree", inputs: ["selection", "singleBranchExpand", "toggleNodeOnClick", "animationSettings"], outputs: ["nodeSelection", "nodeExpanding", "nodeExpanded", "nodeCollapsing", "nodeCollapsed", "activeNodeChanged"] }, { kind: "component", type: IgxTreeNodeComponent, selector: "igx-tree-node", inputs: ["data", "loading", "resourceStrings", "active", "disabled", "selected", "expanded"], outputs: ["selectedChange", "expandedChange"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxExcelStyleSearchComponent, isStandalone: true, selector: "igx-excel-style-search", inputs: { id: "id" }, host: { properties: { "class.igx-excel-filter__menu-main": "this.defaultClass", "attr.id": "this.id" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "cancelButton", first: true, predicate: ["cancelButton"], descendants: true, read: IgxButtonDirective, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, read: IgxListComponent }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "addToCurrentFilterCheckbox", first: true, predicate: ["addToCurrentFilterCheckbox"], descendants: true, read: IgxCheckboxComponent }, { propertyName: "tree", first: true, predicate: ["tree"], descendants: true, read: IgxTreeComponent }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true }, { propertyName: "defaultExcelStyleLoadingValuesTemplate", first: true, predicate: ["defaultExcelStyleLoadingValuesTemplate"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<igx-input-group type=\"box\">\n  <igx-icon igxPrefix family=\"default\" name=\"search\"></igx-icon>\n  <input\n    #input\n    igxInput\n    tabindex=\"0\"\n    [(ngModel)]=\"searchValue\"\n    (ngModelChange)=\"filterListData()\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [placeholder]=\"\n      esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\n    \"\n    autocomplete=\"off\"\n  />\n  @if (searchValue || searchValue === 0) {\n    <igx-suffix>\n      <igx-icon\n        family=\"default\"\n        name=\"input_clear\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\"\n      >\n      </igx-icon>\n    </igx-suffix>\n  }\n</igx-input-group>\n\n@if (!isHierarchical()) {\n  <igx-list\n    #list\n    role=\"listbox\"\n    [isLoading]=\"isLoading\"\n    (keydown)=\"handleKeyDown($event)\"\n    tabindex=\"0\"\n    [attr.aria-activedescendant]=\"this.activeDescendant\"\n    (focus)=\"onFocus()\"\n    (focusout)=\"onFocusOut()\"\n  >\n    <div style=\"overflow: hidden; position: relative\">\n      <igx-list-item\n        [class.igx-list__item-base--active]=\"\n          focusedItem?.id === this.getItemId(i)\n        \"\n        [attr.id]=\"getItemId(i)\"\n        role=\"option\"\n        *igxFor=\"\n          let item of displayedListData;\n          index as i;\n          scrollOrientation: 'vertical';\n          containerSize: containerSize;\n          itemSize: itemSize\n        \"\n      >\n        <igx-checkbox\n          [value]=\"item\"\n          [tabindex]=\"-1\"\n          [checked]=\"$safeNavigationMigration(item?.isSelected)\"\n          [disableRipple]=\"true\"\n          [indeterminate]=\"$safeNavigationMigration(item?.indeterminate)\"\n          [disableTransitions]=\"true\"\n          (change)=\"onCheckboxChange($event)\"\n        >\n          {{ item.label }}\n        </igx-checkbox>\n      </igx-list-item>\n    </div>\n    <ng-template igxDataLoading>\n      <div class=\"igx-excel-filter__loading\">\n        <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\"> </ng-container>\n      </div>\n    </ng-template>\n    <ng-template igxEmptyList>\n      <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n    <div\n      class=\"igx-excel-filter__filter-results\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n    >\n      {{\n        esf.grid?.resourceStrings.igx_grid_excel_matches_count ? \n        esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace(\n          '{0}',\n          matchesCount.toString()\n        ) : ''\n      }}\n    </div>\n  </igx-list>\n}\n\n@if (isHierarchical()) {\n  <div class=\"igx-excel-filter__tree\">\n    @if (!isTreeEmpty()) {\n      <div class=\"igx-excel-filter__tree-alike\">\n        <div class=\"igx-excel-filter__tree-alike-item\">\n          <igx-checkbox\n            #selectAllCheckbox\n            [value]=\"selectAllItem\"\n            [checked]=\"selectAllItem?.isSelected\"\n            [disableRipple]=\"true\"\n            [indeterminate]=\"selectAllItem?.indeterminate\"\n            [disableTransitions]=\"true\"\n            (change)=\"onSelectAllCheckboxChange($event)\"\n          >\n            {{ selectAllItem.label }}\n          </igx-checkbox>\n        </div>\n        @if (searchValue) {\n          <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox\n              #addToCurrentFilterCheckbox\n              [value]=\"addToCurrentFilterItem\"\n              [checked]=\"addToCurrentFilterItem.isSelected\"\n              [disableRipple]=\"true\"\n              [disableTransitions]=\"true\"\n            >\n              {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n          </div>\n        }\n      </div>\n    }\n    <igx-tree\n      #tree\n      selection=\"Cascading\"\n      (nodeSelection)=\"onNodeSelectionChange($event)\"\n    >\n      @for (item of displayedListData; track item.value) {\n        <igx-tree-node [data]=\"item\" [selected]=\"item.isSelected\">\n          <div>{{ item.label }}</div>\n          @for (childLevel1 of item.children; track childLevel1.value) {\n            <igx-tree-node\n              [data]=\"childLevel1\"\n              [selected]=\"childLevel1.isSelected\"\n            >\n              <div>{{ childLevel1.label }}</div>\n              @for (\n                childLevel2 of childLevel1.children;\n                track childLevel2.value\n              ) {\n                <igx-tree-node\n                  [data]=\"childLevel2\"\n                  [selected]=\"childLevel2.isSelected\"\n                >\n                  <div>{{ childLevel2.label }}</div>\n                  @for (\n                    childLevel3 of childLevel2.children;\n                    track childLevel3.value\n                  ) {\n                    <igx-tree-node\n                      [data]=\"childLevel3\"\n                      [selected]=\"childLevel3.isSelected\"\n                    >\n                      <div>{{ childLevel3.label }}</div>\n                      @for (\n                        childLevel4 of childLevel3.children;\n                        track childLevel4.value\n                      ) {\n                        <igx-tree-node\n                          [data]=\"childLevel4\"\n                          [selected]=\"childLevel4.isSelected\"\n                        >\n                          <div>{{ childLevel4.label }}</div>\n                          @for (\n                            childLevel5 of childLevel4.children;\n                            track childLevel5.value\n                          ) {\n                            <igx-tree-node\n                              [data]=\"childLevel5\"\n                              [selected]=\"childLevel5.isSelected\"\n                            >\n                              <div>{{ childLevel5.label }}</div>\n                              @for (\n                                childLevel6 of childLevel5.children;\n                                track childLevel6.value\n                              ) {\n                                <igx-tree-node\n                                  [data]=\"childLevel6\"\n                                  [selected]=\"childLevel6.isSelected\"\n                                >\n                                  <div>{{ childLevel6.label }}</div>\n                                  @for (\n                                    childLevel7 of childLevel6.children;\n                                    track childLevel7.value\n                                  ) {\n                                    <igx-tree-node\n                                      [data]=\"childLevel7\"\n                                      [selected]=\"childLevel7.isSelected\"\n                                    >\n                                      <div>{{ childLevel7.label }}</div>\n                                      @for (\n                                        childLevel8 of childLevel7.children;\n                                        track childLevel8.value\n                                      ) {\n                                        <igx-tree-node\n                                          [data]=\"childLevel8\"\n                                          [selected]=\"childLevel8.isSelected\"\n                                        >\n                                          <div>{{ childLevel8.label }}</div>\n                                          @for (\n                                            childLevel9 of childLevel8.children;\n                                            track childLevel9.value\n                                          ) {\n                                            <igx-tree-node\n                                              [data]=\"childLevel9\"\n                                              [selected]=\"\n                                                childLevel9.isSelected\n                                              \"\n                                            >\n                                              <div>{{ childLevel9.label }}</div>\n                                            </igx-tree-node>\n                                          }\n                                        </igx-tree-node>\n                                      }\n                                    </igx-tree-node>\n                                  }\n                                </igx-tree-node>\n                              }\n                            </igx-tree-node>\n                          }\n                        </igx-tree-node>\n                      }\n                    </igx-tree-node>\n                  }\n                </igx-tree-node>\n              }\n            </igx-tree-node>\n          }\n        </igx-tree-node>\n      }\n    </igx-tree>\n    <ng-template igxDataLoading>\n      <div class=\"igx-excel-filter__loading\">\n        <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\"> </ng-container>\n      </div>\n    </ng-template>\n    @if (isTreeEmpty()) {\n      <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    }\n  </div>\n}\n\n<ng-template #emptySearch>\n  <div class=\"igx-excel-filter__empty\">\n    {{ esf.grid?.resourceStrings.igx_grid_excel_no_matches }}\n  </div>\n</ng-template>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n  <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n  <div class=\"igx-excel-filter__cancel\">\n    <button type=\"button\" #cancelButton igxButton=\"flat\" (click)=\"esf.cancel()\">\n      {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n    </button>\n  </div>\n  <div class=\"igx-excel-filter__apply\">\n    <button\n      type=\"button\"\n      igxButton=\"contained\"\n      [disabled]=\"applyButtonDisabled\"\n      (click)=\"applyFilter()\"\n    >\n      {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n    </button>\n  </div>\n</footer>\n", dependencies: [{ kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "component", type: IgxListComponent, selector: "igx-list", inputs: ["panEndTriggeringThreshold", "id", "allowLeftPanning", "allowRightPanning", "isLoading", "resourceStrings", "role"], outputs: ["leftPan", "rightPan", "startPan", "endPan", "resetPan", "panStateChange", "itemClicked"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForInitialChunkSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "chunkSizeChange", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index", "role", "selected"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "directive", type: IgxDataLoadingTemplateDirective, selector: "[igxDataLoading]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxEmptyListTemplateDirective, selector: "[igxEmptyList]" }, { kind: "component", type: IgxTreeComponent, selector: "igx-tree", inputs: ["selection", "singleBranchExpand", "toggleNodeOnClick", "animationSettings"], outputs: ["nodeSelection", "nodeExpanding", "nodeExpanded", "nodeCollapsing", "nodeCollapsed", "activeNodeChanged"] }, { kind: "component", type: IgxTreeNodeComponent, selector: "igx-tree-node", inputs: ["data", "loading", "resourceStrings", "active", "disabled", "selected", "expanded"], outputs: ["selectedChange", "expandedChange"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-search', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxForOfDirective, IgxListItemComponent, IgxCheckboxComponent, IgxDataLoadingTemplateDirective, NgTemplateOutlet, IgxEmptyListTemplateDirective, IgxTreeComponent, IgxTreeNodeComponent, IgxCircularProgressBarComponent, IgxButtonDirective], template: "<igx-input-group type=\"box\">\n  <igx-icon igxPrefix family=\"default\" name=\"search\"></igx-icon>\n  <input\n    #input\n    igxInput\n    tabindex=\"0\"\n    [(ngModel)]=\"searchValue\"\n    (ngModelChange)=\"filterListData()\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [placeholder]=\"\n      esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\n    \"\n    autocomplete=\"off\"\n  />\n  @if (searchValue || searchValue === 0) {\n    <igx-suffix>\n      <igx-icon\n        family=\"default\"\n        name=\"input_clear\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\"\n      >\n      </igx-icon>\n    </igx-suffix>\n  }\n</igx-input-group>\n\n@if (!isHierarchical()) {\n  <igx-list\n    #list\n    role=\"listbox\"\n    [isLoading]=\"isLoading\"\n    (keydown)=\"handleKeyDown($event)\"\n    tabindex=\"0\"\n    [attr.aria-activedescendant]=\"this.activeDescendant\"\n    (focus)=\"onFocus()\"\n    (focusout)=\"onFocusOut()\"\n  >\n    <div style=\"overflow: hidden; position: relative\">\n      <igx-list-item\n        [class.igx-list__item-base--active]=\"\n          focusedItem?.id === this.getItemId(i)\n        \"\n        [attr.id]=\"getItemId(i)\"\n        role=\"option\"\n        *igxFor=\"\n          let item of displayedListData;\n          index as i;\n          scrollOrientation: 'vertical';\n          containerSize: containerSize;\n          itemSize: itemSize\n        \"\n      >\n        <igx-checkbox\n          [value]=\"item\"\n          [tabindex]=\"-1\"\n          [checked]=\"$safeNavigationMigration(item?.isSelected)\"\n          [disableRipple]=\"true\"\n          [indeterminate]=\"$safeNavigationMigration(item?.indeterminate)\"\n          [disableTransitions]=\"true\"\n          (change)=\"onCheckboxChange($event)\"\n        >\n          {{ item.label }}\n        </igx-checkbox>\n      </igx-list-item>\n    </div>\n    <ng-template igxDataLoading>\n      <div class=\"igx-excel-filter__loading\">\n        <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\"> </ng-container>\n      </div>\n    </ng-template>\n    <ng-template igxEmptyList>\n      <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n    <div\n      class=\"igx-excel-filter__filter-results\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n    >\n      {{\n        esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace(\n          '{0}',\n          matchesCount\n        )\n      }}\n    </div>\n  </igx-list>\n}\n\n@if (isHierarchical()) {\n  <div class=\"igx-excel-filter__tree\">\n    @if (!isTreeEmpty()) {\n      <div class=\"igx-excel-filter__tree-alike\">\n        <div class=\"igx-excel-filter__tree-alike-item\">\n          <igx-checkbox\n            #selectAllCheckbox\n            [value]=\"selectAllItem\"\n            [checked]=\"$safeNavigationMigration(selectAllItem?.isSelected)\"\n            [disableRipple]=\"true\"\n            [indeterminate]=\"\n              $safeNavigationMigration(selectAllItem?.indeterminate)\n            \"\n            [disableTransitions]=\"true\"\n            (change)=\"onSelectAllCheckboxChange($event)\"\n          >\n            {{ selectAllItem.label }}\n          </igx-checkbox>\n        </div>\n        @if (searchValue) {\n          <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox\n              #addToCurrentFilterCheckbox\n              [value]=\"addToCurrentFilterItem\"\n              [checked]=\"addToCurrentFilterItem.isSelected\"\n              [disableRipple]=\"true\"\n              [disableTransitions]=\"true\"\n            >\n              {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n          </div>\n        }\n      </div>\n    }\n    <igx-tree\n      #tree\n      selection=\"Cascading\"\n      (nodeSelection)=\"onNodeSelectionChange($event)\"\n    >\n      @for (item of displayedListData; track item.value) {\n        <igx-tree-node [data]=\"item\" [selected]=\"item.isSelected\">\n          <div>{{ item.label }}</div>\n          @for (childLevel1 of item.children; track childLevel1.value) {\n            <igx-tree-node\n              [data]=\"childLevel1\"\n              [selected]=\"childLevel1.isSelected\"\n            >\n              <div>{{ childLevel1.label }}</div>\n              @for (\n                childLevel2 of childLevel1.children;\n                track childLevel2.value\n              ) {\n                <igx-tree-node\n                  [data]=\"childLevel2\"\n                  [selected]=\"childLevel2.isSelected\"\n                >\n                  <div>{{ childLevel2.label }}</div>\n                  @for (\n                    childLevel3 of childLevel2.children;\n                    track childLevel3.value\n                  ) {\n                    <igx-tree-node\n                      [data]=\"childLevel3\"\n                      [selected]=\"childLevel3.isSelected\"\n                    >\n                      <div>{{ childLevel3.label }}</div>\n                      @for (\n                        childLevel4 of childLevel3.children;\n                        track childLevel4.value\n                      ) {\n                        <igx-tree-node\n                          [data]=\"childLevel4\"\n                          [selected]=\"childLevel4.isSelected\"\n                        >\n                          <div>{{ childLevel4.label }}</div>\n                          @for (\n                            childLevel5 of childLevel4.children;\n                            track childLevel5.value\n                          ) {\n                            <igx-tree-node\n                              [data]=\"childLevel5\"\n                              [selected]=\"childLevel5.isSelected\"\n                            >\n                              <div>{{ childLevel5.label }}</div>\n                              @for (\n                                childLevel6 of childLevel5.children;\n                                track childLevel6.value\n                              ) {\n                                <igx-tree-node\n                                  [data]=\"childLevel6\"\n                                  [selected]=\"childLevel6.isSelected\"\n                                >\n                                  <div>{{ childLevel6.label }}</div>\n                                  @for (\n                                    childLevel7 of childLevel6.children;\n                                    track childLevel7.value\n                                  ) {\n                                    <igx-tree-node\n                                      [data]=\"childLevel7\"\n                                      [selected]=\"childLevel7.isSelected\"\n                                    >\n                                      <div>{{ childLevel7.label }}</div>\n                                      @for (\n                                        childLevel8 of childLevel7.children;\n                                        track childLevel8.value\n                                      ) {\n                                        <igx-tree-node\n                                          [data]=\"childLevel8\"\n                                          [selected]=\"childLevel8.isSelected\"\n                                        >\n                                          <div>{{ childLevel8.label }}</div>\n                                          @for (\n                                            childLevel9 of childLevel8.children;\n                                            track childLevel9.value\n                                          ) {\n                                            <igx-tree-node\n                                              [data]=\"childLevel9\"\n                                              [selected]=\"\n                                                childLevel9.isSelected\n                                              \"\n                                            >\n                                              <div>{{ childLevel9.label }}</div>\n                                            </igx-tree-node>\n                                          }\n                                        </igx-tree-node>\n                                      }\n                                    </igx-tree-node>\n                                  }\n                                </igx-tree-node>\n                              }\n                            </igx-tree-node>\n                          }\n                        </igx-tree-node>\n                      }\n                    </igx-tree-node>\n                  }\n                </igx-tree-node>\n              }\n            </igx-tree-node>\n          }\n        </igx-tree-node>\n      }\n    </igx-tree>\n    <ng-template igxDataLoading>\n      <div class=\"igx-excel-filter__loading\">\n        <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\"> </ng-container>\n      </div>\n    </ng-template>\n    @if (isTreeEmpty()) {\n      <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    }\n  </div>\n}\n\n<ng-template #emptySearch>\n  <div class=\"igx-excel-filter__empty\">\n    {{ esf.grid?.resourceStrings.igx_grid_excel_no_matches }}\n  </div>\n</ng-template>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n  <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n  <div class=\"igx-excel-filter__cancel\">\n    <button type=\"button\" #cancelButton igxButton=\"flat\" (click)=\"esf.cancel()\">\n      {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n    </button>\n  </div>\n  <div class=\"igx-excel-filter__apply\">\n    <button\n      type=\"button\"\n      igxButton=\"contained\"\n      [disabled]=\"applyButtonDisabled\"\n      (click)=\"applyFilter()\"\n    >\n      {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n    </button>\n  </div>\n</footer>\n" }]
+            args: [{ selector: 'igx-excel-style-search', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxForOfDirective, IgxListItemComponent, IgxCheckboxComponent, IgxDataLoadingTemplateDirective, NgTemplateOutlet, IgxEmptyListTemplateDirective, IgxTreeComponent, IgxTreeNodeComponent, IgxCircularProgressBarComponent, IgxButtonDirective], template: "<igx-input-group type=\"box\">\n  <igx-icon igxPrefix family=\"default\" name=\"search\"></igx-icon>\n  <input\n    #input\n    igxInput\n    tabindex=\"0\"\n    [(ngModel)]=\"searchValue\"\n    (ngModelChange)=\"filterListData()\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [placeholder]=\"\n      esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\n    \"\n    autocomplete=\"off\"\n  />\n  @if (searchValue || searchValue === 0) {\n    <igx-suffix>\n      <igx-icon\n        family=\"default\"\n        name=\"input_clear\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\"\n      >\n      </igx-icon>\n    </igx-suffix>\n  }\n</igx-input-group>\n\n@if (!isHierarchical()) {\n  <igx-list\n    #list\n    role=\"listbox\"\n    [isLoading]=\"isLoading\"\n    (keydown)=\"handleKeyDown($event)\"\n    tabindex=\"0\"\n    [attr.aria-activedescendant]=\"this.activeDescendant\"\n    (focus)=\"onFocus()\"\n    (focusout)=\"onFocusOut()\"\n  >\n    <div style=\"overflow: hidden; position: relative\">\n      <igx-list-item\n        [class.igx-list__item-base--active]=\"\n          focusedItem?.id === this.getItemId(i)\n        \"\n        [attr.id]=\"getItemId(i)\"\n        role=\"option\"\n        *igxFor=\"\n          let item of displayedListData;\n          index as i;\n          scrollOrientation: 'vertical';\n          containerSize: containerSize;\n          itemSize: itemSize\n        \"\n      >\n        <igx-checkbox\n          [value]=\"item\"\n          [tabindex]=\"-1\"\n          [checked]=\"$safeNavigationMigration(item?.isSelected)\"\n          [disableRipple]=\"true\"\n          [indeterminate]=\"$safeNavigationMigration(item?.indeterminate)\"\n          [disableTransitions]=\"true\"\n          (change)=\"onCheckboxChange($event)\"\n        >\n          {{ item.label }}\n        </igx-checkbox>\n      </igx-list-item>\n    </div>\n    <ng-template igxDataLoading>\n      <div class=\"igx-excel-filter__loading\">\n        <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\"> </ng-container>\n      </div>\n    </ng-template>\n    <ng-template igxEmptyList>\n      <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n    <div\n      class=\"igx-excel-filter__filter-results\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n    >\n      {{\n        esf.grid?.resourceStrings.igx_grid_excel_matches_count ? \n        esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace(\n          '{0}',\n          matchesCount.toString()\n        ) : ''\n      }}\n    </div>\n  </igx-list>\n}\n\n@if (isHierarchical()) {\n  <div class=\"igx-excel-filter__tree\">\n    @if (!isTreeEmpty()) {\n      <div class=\"igx-excel-filter__tree-alike\">\n        <div class=\"igx-excel-filter__tree-alike-item\">\n          <igx-checkbox\n            #selectAllCheckbox\n            [value]=\"selectAllItem\"\n            [checked]=\"selectAllItem?.isSelected\"\n            [disableRipple]=\"true\"\n            [indeterminate]=\"selectAllItem?.indeterminate\"\n            [disableTransitions]=\"true\"\n            (change)=\"onSelectAllCheckboxChange($event)\"\n          >\n            {{ selectAllItem.label }}\n          </igx-checkbox>\n        </div>\n        @if (searchValue) {\n          <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox\n              #addToCurrentFilterCheckbox\n              [value]=\"addToCurrentFilterItem\"\n              [checked]=\"addToCurrentFilterItem.isSelected\"\n              [disableRipple]=\"true\"\n              [disableTransitions]=\"true\"\n            >\n              {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n          </div>\n        }\n      </div>\n    }\n    <igx-tree\n      #tree\n      selection=\"Cascading\"\n      (nodeSelection)=\"onNodeSelectionChange($event)\"\n    >\n      @for (item of displayedListData; track item.value) {\n        <igx-tree-node [data]=\"item\" [selected]=\"item.isSelected\">\n          <div>{{ item.label }}</div>\n          @for (childLevel1 of item.children; track childLevel1.value) {\n            <igx-tree-node\n              [data]=\"childLevel1\"\n              [selected]=\"childLevel1.isSelected\"\n            >\n              <div>{{ childLevel1.label }}</div>\n              @for (\n                childLevel2 of childLevel1.children;\n                track childLevel2.value\n              ) {\n                <igx-tree-node\n                  [data]=\"childLevel2\"\n                  [selected]=\"childLevel2.isSelected\"\n                >\n                  <div>{{ childLevel2.label }}</div>\n                  @for (\n                    childLevel3 of childLevel2.children;\n                    track childLevel3.value\n                  ) {\n                    <igx-tree-node\n                      [data]=\"childLevel3\"\n                      [selected]=\"childLevel3.isSelected\"\n                    >\n                      <div>{{ childLevel3.label }}</div>\n                      @for (\n                        childLevel4 of childLevel3.children;\n                        track childLevel4.value\n                      ) {\n                        <igx-tree-node\n                          [data]=\"childLevel4\"\n                          [selected]=\"childLevel4.isSelected\"\n                        >\n                          <div>{{ childLevel4.label }}</div>\n                          @for (\n                            childLevel5 of childLevel4.children;\n                            track childLevel5.value\n                          ) {\n                            <igx-tree-node\n                              [data]=\"childLevel5\"\n                              [selected]=\"childLevel5.isSelected\"\n                            >\n                              <div>{{ childLevel5.label }}</div>\n                              @for (\n                                childLevel6 of childLevel5.children;\n                                track childLevel6.value\n                              ) {\n                                <igx-tree-node\n                                  [data]=\"childLevel6\"\n                                  [selected]=\"childLevel6.isSelected\"\n                                >\n                                  <div>{{ childLevel6.label }}</div>\n                                  @for (\n                                    childLevel7 of childLevel6.children;\n                                    track childLevel7.value\n                                  ) {\n                                    <igx-tree-node\n                                      [data]=\"childLevel7\"\n                                      [selected]=\"childLevel7.isSelected\"\n                                    >\n                                      <div>{{ childLevel7.label }}</div>\n                                      @for (\n                                        childLevel8 of childLevel7.children;\n                                        track childLevel8.value\n                                      ) {\n                                        <igx-tree-node\n                                          [data]=\"childLevel8\"\n                                          [selected]=\"childLevel8.isSelected\"\n                                        >\n                                          <div>{{ childLevel8.label }}</div>\n                                          @for (\n                                            childLevel9 of childLevel8.children;\n                                            track childLevel9.value\n                                          ) {\n                                            <igx-tree-node\n                                              [data]=\"childLevel9\"\n                                              [selected]=\"\n                                                childLevel9.isSelected\n                                              \"\n                                            >\n                                              <div>{{ childLevel9.label }}</div>\n                                            </igx-tree-node>\n                                          }\n                                        </igx-tree-node>\n                                      }\n                                    </igx-tree-node>\n                                  }\n                                </igx-tree-node>\n                              }\n                            </igx-tree-node>\n                          }\n                        </igx-tree-node>\n                      }\n                    </igx-tree-node>\n                  }\n                </igx-tree-node>\n              }\n            </igx-tree-node>\n          }\n        </igx-tree-node>\n      }\n    </igx-tree>\n    <ng-template igxDataLoading>\n      <div class=\"igx-excel-filter__loading\">\n        <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\"> </ng-container>\n      </div>\n    </ng-template>\n    @if (isTreeEmpty()) {\n      <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    }\n  </div>\n}\n\n<ng-template #emptySearch>\n  <div class=\"igx-excel-filter__empty\">\n    {{ esf.grid?.resourceStrings.igx_grid_excel_no_matches }}\n  </div>\n</ng-template>\n\n<ng-template #defaultExcelStyleLoadingValuesTemplate>\n  <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n</ng-template>\n\n<footer class=\"igx-excel-filter__menu-footer\">\n  <div class=\"igx-excel-filter__cancel\">\n    <button type=\"button\" #cancelButton igxButton=\"flat\" (click)=\"esf.cancel()\">\n      {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n    </button>\n  </div>\n  <div class=\"igx-excel-filter__apply\">\n    <button\n      type=\"button\"\n      igxButton=\"contained\"\n      [disabled]=\"applyButtonDisabled\"\n      (click)=\"applyFilter()\"\n    >\n      {{ esf.grid?.resourceStrings.igx_grid_excel_apply }}\n    </button>\n  </div>\n</footer>\n" }]
         }], ctorParameters: () => [], propDecorators: { defaultClass: [{
                 type: HostBinding,
                 args: ['class.igx-excel-filter__menu-main']
@@ -9372,11 +9083,11 @@ class IgxExcelStyleSelectingComponent {
         this.esf = inject(BaseFilteringComponent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleSelectingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxExcelStyleSelectingComponent, isStandalone: true, selector: "igx-excel-style-selecting", ngImport: i0, template: "@if (esf.column) {\n    <div\n        [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n        tabindex=\"0\"\n        (click)=\"esf.onSelect()\"\n        role=\"button\"\n        [attr.aria-pressed]=\"esf.column.selected\">\n        <span>{{esf.grid.resourceStrings.igx_grid_excel_select }}</span>\n        <igx-icon family=\"default\" name=\"selected\"></igx-icon>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxExcelStyleSelectingComponent, isStandalone: true, selector: "igx-excel-style-selecting", ngImport: i0, template: "@if (esf.column) {\n    <div\n        [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n        tabindex=\"0\"\n        (click)=\"esf.onSelect($event)\"\n        role=\"button\"\n        [attr.aria-pressed]=\"esf.column.selected\">\n        <span>{{esf.grid.resourceStrings.igx_grid_excel_select }}</span>\n        <igx-icon family=\"default\" name=\"selected\"></igx-icon>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxExcelStyleSelectingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-excel-style-selecting', changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, IgxIconComponent], template: "@if (esf.column) {\n    <div\n        [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n        tabindex=\"0\"\n        (click)=\"esf.onSelect()\"\n        role=\"button\"\n        [attr.aria-pressed]=\"esf.column.selected\">\n        <span>{{esf.grid.resourceStrings.igx_grid_excel_select }}</span>\n        <igx-icon family=\"default\" name=\"selected\"></igx-icon>\n    </div>\n}\n" }]
+            args: [{ selector: 'igx-excel-style-selecting', changeDetection: ChangeDetectionStrategy.Eager, imports: [NgClass, IgxIconComponent], template: "@if (esf.column) {\n    <div\n        [ngClass]=\"esf.column.selected ? 'igx-excel-filter__actions-selected' : 'igx-excel-filter__actions-select'\"\n        tabindex=\"0\"\n        (click)=\"esf.onSelect($event)\"\n        role=\"button\"\n        [attr.aria-pressed]=\"esf.column.selected\">\n        <span>{{esf.grid.resourceStrings.igx_grid_excel_select }}</span>\n        <igx-icon family=\"default\" name=\"selected\"></igx-icon>\n    </div>\n}\n" }]
         }] });
 
 /**
@@ -9578,6 +9289,7 @@ class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent {
         if (this._minHeight || this._minHeight === 0) {
             return this._minHeight;
         }
+        return undefined;
     }
     /**
      * Sets the minimum height.
@@ -9602,6 +9314,7 @@ class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent {
         if (this._maxHeight) {
             return this._maxHeight;
         }
+        return undefined;
     }
     /**
      * Sets the maximum height.
@@ -9620,7 +9333,7 @@ class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent {
      */
     ngOnDestroy() {
         this.subscriptions?.unsubscribe();
-        delete this.overlayComponentId;
+        this.overlayComponentId = '';
     }
     /**
      * @hidden @internal
@@ -9659,12 +9372,12 @@ class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent {
     /**
      * @hidden @internal
      */
-    onSelect() {
+    onSelect(event) {
         if (!this.column.selected) {
-            this.grid.selectionService.selectColumn(this.column.field, this.grid.columnSelection === GridSelectionMode.single);
+            this.grid.selectionService.selectColumn(this.column.field, this.grid.columnSelection === GridSelectionMode.single, false, event);
         }
         else {
-            this.grid.selectionService.deselectColumn(this.column.field);
+            this.grid.selectionService.deselectColumn(this.column.field, event);
         }
         this.grid.notifyChanges();
     }
@@ -9786,7 +9499,7 @@ class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent {
         this.loadingStart.emit();
         const expressionsTree = this.getColumnFilterExpressionsTree();
         const prevColumn = this.column;
-        this.grid.uniqueColumnValuesStrategy(this.column, expressionsTree, (values) => {
+        this.grid.uniqueColumnValuesStrategy?.(this.column, expressionsTree, (values) => {
             if (!this.column || this.column !== prevColumn) {
                 return;
             }
@@ -10314,7 +10027,7 @@ class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective {
      */
     get disabled() {
         if (!this.isRow(this.strip.context)) {
-            return;
+            return undefined;
         }
         return this.strip.context.disabled;
     }
@@ -10457,7 +10170,7 @@ class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective {
      */
     get pinned() {
         if (!this.isRow(this.strip.context)) {
-            return;
+            return undefined;
         }
         const context = this.strip.context;
         if (context && !this.iconsRendered) {
@@ -10474,7 +10187,7 @@ class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective {
      */
     get inPinnedArea() {
         if (!this.isRow(this.strip.context)) {
-            return;
+            return undefined;
         }
         const context = this.strip.context;
         return this.pinned && !context.disabled;
@@ -10487,7 +10200,7 @@ class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective {
      */
     get pinnedTop() {
         if (!this.isRow(this.strip.context)) {
-            return;
+            return undefined;
         }
         return this.strip.context.grid.isRowPinningToTop;
     }
@@ -10604,7 +10317,7 @@ class IgxColumnMovingDragDirective extends IgxDragDirective {
         this._unsubscribe();
         super.ngOnDestroy();
     }
-    onEscape(event) {
+    cancelMove(event) {
         this.cms.cancelDrop = true;
         this.onPointerUp(event);
     }
@@ -10625,7 +10338,7 @@ class IgxColumnMovingDragDirective extends IgxDragDirective {
             this.column.grid.columnMovingStart.emit(movingStartArgs);
             this.subscription$ = fromEvent(this.column.grid.document.defaultView, 'keydown').pipe(takeUntil(this._destroy)).subscribe((ev) => {
                 if (ev.key === this.platformUtil.KEYMAP.ESCAPE) {
-                    this.onEscape(ev);
+                    this.cancelMove(event);
                 }
             });
         }
@@ -10641,7 +10354,7 @@ class IgxColumnMovingDragDirective extends IgxDragDirective {
             };
             this.column.grid.columnMoving.emit(args);
             if (args.cancel) {
-                this.onEscape(event);
+                this.cancelMove(event);
             }
         }
     }
@@ -11096,7 +10809,7 @@ class IgxGroupAreaDropDirective extends IgxDropDirective {
         if (!this.columnBelongsToGrid(column)) {
             return;
         }
-        event.detail.owner.icon.innerText = 'block';
+        drag.icon.innerText = 'block';
         this.hovered = false;
     }
     closestParentByAttr(elem, attr) {
@@ -11288,7 +11001,7 @@ class IgxColumnResizingService {
             let newCombinedSpan = updatedCombinedSpan;
             const newColsToResize = [];
             columnsToResize.forEach((col) => {
-                const currentResizeWidth = parseFloat(col.target.calcWidth);
+                const currentResizeWidth = parseFloat(col.target.calcWidth?.toString() || col.target.defaultWidth);
                 const resizeScaled = (diff / updatedCombinedSpan) * col.target.gridColumnSpan;
                 const colWidth = col.target.width;
                 const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
@@ -11607,7 +11320,7 @@ class IgxGridHeaderComponent {
     triggerSort() {
         const groupingExpr = this.grid.groupingExpressions ?
             this.grid.groupingExpressions.find((expr) => expr.fieldName === this.column.field) :
-            this.grid.groupArea?.expressions ? this.grid.groupArea?.expressions.find((expr) => expr.fieldName === this.column.field) : null;
+            this.grid.groupArea?.expressions ? this.grid.groupArea?.expressions.find(expr => expr.fieldName === this.column.field) : null;
         const sortDir = groupingExpr ?
             this.sortDirection + 1 > SortingDirection.Desc ? SortingDirection.Asc : SortingDirection.Desc
             : this.sortDirection + 1 > SortingDirection.Desc ? SortingDirection.None : this.sortDirection + 1;
@@ -11758,7 +11471,7 @@ class IgxFilteringService {
             ...{ target: filterIconTarget }
         });
         this._overlayService.opening
-            .pipe(first$1(overlay => overlay.id === id), takeUntil(this.destroy$))
+            .pipe(first(overlay => overlay.id === id), takeUntil(this.destroy$))
             .subscribe((event) => {
             if (event.componentRef) {
                 event.componentRef.instance.initialize(column, this._overlayService);
@@ -11766,13 +11479,13 @@ class IgxFilteringService {
             }
             this.lastActiveNode = this.grid.navigation.activeNode;
         });
-        this._overlayService.opened.pipe(first$1(overlay => overlay.id === id), takeUntil(this.destroy$)).subscribe((event) => {
+        this._overlayService.opened.pipe(first(overlay => overlay.id === id), takeUntil(this.destroy$)).subscribe((event) => {
             if (event.componentRef) {
                 event.componentRef.instance.populateData();
             }
         });
         this._overlayService.closed
-            .pipe(first$1(overlay => overlay.id === id), takeUntil(this.destroy$))
+            .pipe(first(overlay => overlay.id === id), takeUntil(this.destroy$))
             .subscribe(() => {
             this._overlayService.detach(id);
             this.grid.navigation.activeNode = this.lastActiveNode;
@@ -12189,7 +11902,7 @@ class IgxFilteringService {
         let count = 0;
         let operand;
         for (let i = 0; i < expressions.filteringOperands.length; i++) {
-            operand = expressions[i];
+            operand = expressions.filteringOperands[i];
             if (operand && isTree(operand)) {
                 if (operand.operator === FilteringLogic.And) {
                     count++;
@@ -12381,7 +12094,7 @@ class IgxGridFilteringCellComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridFilteringCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridFilteringCellComponent, isStandalone: true, selector: "igx-grid-filtering-cell", inputs: { column: "column" }, host: { properties: { "class": "this.styleClasses", "class.igx-grid-th--pinned": "this.pinnedCss", "class.igx-grid-th--pinned-last": "this.pinnedLastCss", "class.igx-grid-th--pinned-first": "this.pinnedFirstCSS", "attr.role": "this.role" } }, viewQueries: [{ propertyName: "emptyFilter", first: true, predicate: ["emptyFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultFilter", first: true, predicate: ["defaultFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexFilter", first: true, predicate: ["complexFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent }, { propertyName: "moreIcon", first: true, predicate: ["moreIcon"], descendants: true, read: ElementRef }, { propertyName: "ghostChip", first: true, predicate: ["ghostChip"], descendants: true, read: IgxChipComponent }, { propertyName: "complexChip", first: true, predicate: ["complexChip"], descendants: true, read: IgxChipComponent }], ngImport: i0, template: "<ng-template #emptyFilter>\n    <igx-chips-area [attr.draggable]=\"false\" class=\"igx-filtering-chips\">\n        <igx-chip #ghostChip [attr.draggable]=\"false\" (click)=\"onChipClicked()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon\n                [attr.draggable]=\"false\"\n                igxPrefix\n                family=\"default\"\n                name=\"filter_list\"\n            ></igx-icon>\n            <span [attr.draggable]=\"false\">{{filteringService.grid.resourceStrings.igx_grid_filter}}</span>\n        </igx-chip>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #defaultFilter>\n    <igx-chips-area #chipsArea class=\"igx-filtering-chips\">\n        <!-- expressionsList items re-created on refreshExpressions(), track stable expression -->\n        @for (item of expressionsList; track item.expression; let last = $last; let index = $index) {\n            @if (isChipVisible(index)) {\n                <igx-chip\n                    [removable]=\"true\"\n                    [tabIndex]=\"-1\"\n                    [style.--ig-size]=\"filteringElementsSize\"\n                    (click)=\"onChipClicked(item.expression)\"\n                    (remove)=\"onChipRemoved($event, item)\">\n                    <igx-icon igxPrefix\n                        family=\"default\"\n                        [name]=\"item.expression.condition.iconName\">\n                    </igx-icon>\n                    <span #label>\n                        {{filteringService.getChipLabel(item.expression)}}\n                    </span>\n                </igx-chip>\n            }\n            @if (!last && isChipVisible(index + 1)) {\n                <span class=\"igx-filtering-chips__connector\">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n            }\n        }\n        <div #moreIcon [ngClass]=\"filteringIndicatorClass()\" (click)=\"onChipClicked()\">\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n            <igx-badge [value]=\"moreFiltersCount\"></igx-badge>\n        </div>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #complexFilter>\n    <igx-chip #complexChip [removable]=\"true\" (remove)=\"clearFiltering()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n        <igx-icon igxPrefix family=\"default\" name=\"filter_list\"></igx-icon>\n        <span>{{filteringService.grid.resourceStrings.igx_grid_complex_filter}}</span>\n    </igx-chip>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "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: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined", "dot"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridFilteringCellComponent, isStandalone: true, selector: "igx-grid-filtering-cell", inputs: { column: "column" }, host: { properties: { "class": "this.styleClasses", "class.igx-grid-th--pinned": "this.pinnedCss", "class.igx-grid-th--pinned-last": "this.pinnedLastCss", "class.igx-grid-th--pinned-first": "this.pinnedFirstCSS", "attr.role": "this.role" } }, viewQueries: [{ propertyName: "emptyFilter", first: true, predicate: ["emptyFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultFilter", first: true, predicate: ["defaultFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexFilter", first: true, predicate: ["complexFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent }, { propertyName: "moreIcon", first: true, predicate: ["moreIcon"], descendants: true, read: ElementRef }, { propertyName: "ghostChip", first: true, predicate: ["ghostChip"], descendants: true, read: IgxChipComponent }, { propertyName: "complexChip", first: true, predicate: ["complexChip"], descendants: true, read: IgxChipComponent }], ngImport: i0, template: "<ng-template #emptyFilter>\n    <igx-chips-area [attr.draggable]=\"false\" class=\"igx-filtering-chips\">\n        <igx-chip #ghostChip [attr.draggable]=\"false\" (click)=\"onChipClicked()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon\n                [attr.draggable]=\"false\"\n                igxPrefix\n                family=\"default\"\n                name=\"filter_list\"\n            ></igx-icon>\n            <span [attr.draggable]=\"false\">{{filteringService.grid.resourceStrings.igx_grid_filter}}</span>\n        </igx-chip>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #defaultFilter>\n    <igx-chips-area #chipsArea class=\"igx-filtering-chips\">\n        <!-- expressionsList items re-created on refreshExpressions(), track stable expression -->\n        @for (item of expressionsList; track item.expression; let last = $last; let index = $index) {\n            @if (isChipVisible(index)) {\n                <igx-chip\n                    [removable]=\"true\"\n                    [tabIndex]=\"-1\"\n                    [style.--ig-size]=\"filteringElementsSize\"\n                    (click)=\"onChipClicked(item.expression)\"\n                    (remove)=\"onChipRemoved($event, item)\">\n                    <igx-icon igxPrefix\n                        family=\"default\"\n                        [name]=\"item.expression.condition!.iconName\">\n                    </igx-icon>\n                    <span #label>\n                        {{filteringService.getChipLabel(item.expression)}}\n                    </span>\n                </igx-chip>\n            }\n            @if (!last && isChipVisible(index + 1)) {\n                <span class=\"igx-filtering-chips__connector\">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n            }\n        }\n        <div #moreIcon [ngClass]=\"filteringIndicatorClass()\" (click)=\"onChipClicked()\">\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n            <igx-badge [value]=\"moreFiltersCount\"></igx-badge>\n        </div>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #complexFilter>\n    <igx-chip #complexChip [removable]=\"true\" (remove)=\"clearFiltering()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n        <igx-icon igxPrefix family=\"default\" name=\"filter_list\"></igx-icon>\n        <span>{{filteringService.grid.resourceStrings.igx_grid_complex_filter}}</span>\n    </igx-chip>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "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: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined", "dot"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridFilteringCellComponent, decorators: [{
             type: Component,
@@ -12393,7 +12106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         NgClass,
                         IgxBadgeComponent,
                         NgTemplateOutlet
-                    ], template: "<ng-template #emptyFilter>\n    <igx-chips-area [attr.draggable]=\"false\" class=\"igx-filtering-chips\">\n        <igx-chip #ghostChip [attr.draggable]=\"false\" (click)=\"onChipClicked()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon\n                [attr.draggable]=\"false\"\n                igxPrefix\n                family=\"default\"\n                name=\"filter_list\"\n            ></igx-icon>\n            <span [attr.draggable]=\"false\">{{filteringService.grid.resourceStrings.igx_grid_filter}}</span>\n        </igx-chip>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #defaultFilter>\n    <igx-chips-area #chipsArea class=\"igx-filtering-chips\">\n        <!-- expressionsList items re-created on refreshExpressions(), track stable expression -->\n        @for (item of expressionsList; track item.expression; let last = $last; let index = $index) {\n            @if (isChipVisible(index)) {\n                <igx-chip\n                    [removable]=\"true\"\n                    [tabIndex]=\"-1\"\n                    [style.--ig-size]=\"filteringElementsSize\"\n                    (click)=\"onChipClicked(item.expression)\"\n                    (remove)=\"onChipRemoved($event, item)\">\n                    <igx-icon igxPrefix\n                        family=\"default\"\n                        [name]=\"item.expression.condition.iconName\">\n                    </igx-icon>\n                    <span #label>\n                        {{filteringService.getChipLabel(item.expression)}}\n                    </span>\n                </igx-chip>\n            }\n            @if (!last && isChipVisible(index + 1)) {\n                <span class=\"igx-filtering-chips__connector\">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n            }\n        }\n        <div #moreIcon [ngClass]=\"filteringIndicatorClass()\" (click)=\"onChipClicked()\">\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n            <igx-badge [value]=\"moreFiltersCount\"></igx-badge>\n        </div>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #complexFilter>\n    <igx-chip #complexChip [removable]=\"true\" (remove)=\"clearFiltering()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n        <igx-icon igxPrefix family=\"default\" name=\"filter_list\"></igx-icon>\n        <span>{{filteringService.grid.resourceStrings.igx_grid_complex_filter}}</span>\n    </igx-chip>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n" }]
+                    ], template: "<ng-template #emptyFilter>\n    <igx-chips-area [attr.draggable]=\"false\" class=\"igx-filtering-chips\">\n        <igx-chip #ghostChip [attr.draggable]=\"false\" (click)=\"onChipClicked()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon\n                [attr.draggable]=\"false\"\n                igxPrefix\n                family=\"default\"\n                name=\"filter_list\"\n            ></igx-icon>\n            <span [attr.draggable]=\"false\">{{filteringService.grid.resourceStrings.igx_grid_filter}}</span>\n        </igx-chip>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #defaultFilter>\n    <igx-chips-area #chipsArea class=\"igx-filtering-chips\">\n        <!-- expressionsList items re-created on refreshExpressions(), track stable expression -->\n        @for (item of expressionsList; track item.expression; let last = $last; let index = $index) {\n            @if (isChipVisible(index)) {\n                <igx-chip\n                    [removable]=\"true\"\n                    [tabIndex]=\"-1\"\n                    [style.--ig-size]=\"filteringElementsSize\"\n                    (click)=\"onChipClicked(item.expression)\"\n                    (remove)=\"onChipRemoved($event, item)\">\n                    <igx-icon igxPrefix\n                        family=\"default\"\n                        [name]=\"item.expression.condition!.iconName\">\n                    </igx-icon>\n                    <span #label>\n                        {{filteringService.getChipLabel(item.expression)}}\n                    </span>\n                </igx-chip>\n            }\n            @if (!last && isChipVisible(index + 1)) {\n                <span class=\"igx-filtering-chips__connector\">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n            }\n        }\n        <div #moreIcon [ngClass]=\"filteringIndicatorClass()\" (click)=\"onChipClicked()\">\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n            <igx-badge [value]=\"moreFiltersCount\"></igx-badge>\n        </div>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #complexFilter>\n    <igx-chip #complexChip [removable]=\"true\" (remove)=\"clearFiltering()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n        <igx-icon igxPrefix family=\"default\" name=\"filter_list\"></igx-icon>\n        <span>{{filteringService.grid.resourceStrings.igx_grid_complex_filter}}</span>\n    </igx-chip>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { column: [{
                 type: Input
             }], emptyFilter: [{
@@ -12456,9 +12169,9 @@ class IgxResizeHandleDirective {
     /**
      * @hidden
      */
-    onDoubleClick() {
+    onDoubleClick(event) {
         this._dblClick = true;
-        this.initResizeService();
+        this.initResizeService(event);
         this.colResizingService.autosizeColumnOnDblClick();
     }
     /**
@@ -12515,7 +12228,7 @@ class IgxResizeHandleDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxResizeHandleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxResizeHandleDirective, isStandalone: true, selector: "[igxResizeHandle]", inputs: { column: ["igxResizeHandle", "column"] }, host: { listeners: { "dblclick": "onDoubleClick()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxResizeHandleDirective, isStandalone: true, selector: "[igxResizeHandle]", inputs: { column: ["igxResizeHandle", "column"] }, host: { listeners: { "dblclick": "onDoubleClick($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxResizeHandleDirective, decorators: [{
             type: Directive,
@@ -12528,7 +12241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 args: ['igxResizeHandle']
             }], onDoubleClick: [{
                 type: HostListener,
-                args: ['dblclick']
+                args: ['dblclick', ['$event']]
             }] } });
 
 class IgxColumnMovingDropDirective extends IgxDropDirective {
@@ -12853,7 +12566,7 @@ class IgxGridHeaderGroupComponent {
             }
             else {
                 const selectedFields = this.grid.selectionService.getSelectedColumns();
-                if ((selectedFields.length === columnsToSelect.length) && selectedFields.every(el => columnsToSelect.includes(el))
+                if ((selectedFields.length === columnsToSelect.length) && selectedFields.every((el) => columnsToSelect.includes(el))
                     || !clearSelection) {
                     this.grid.selectionService.deselectColumns(columnsToSelect, event);
                 }
@@ -13209,13 +12922,15 @@ class IgxGridFilteringRowComponent {
         if (!eventArgs) {
             return;
         }
-        // The 'iskeyPressed' flag is needed for a case in IE, because the input event is fired on focus and for some reason,
-        // when you have a japanese character as a placeholder, on init the value here is empty string .
-        const target = eventArgs.target;
+        // DateTime editors are bound to igxDateTimeEditor's (valueChange), which emits the
+        // parsed Date rather than a DOM InputEvent.
         if (this.column.dataType === GridColumnDataType.DateTime) {
             this.value = eventArgs;
             return;
         }
+        // The 'iskeyPressed' flag is needed for a case in IE, because the input event is fired on focus and for some reason,
+        // when you have a japanese character as a placeholder, on init the value here is empty string .
+        const target = eventArgs.target;
         if (this.platform.isEdge && target.type !== 'number'
             || this.isKeyPressed || target.value || target.checkValidity()) {
             this.value = target.value;
@@ -13676,7 +13391,7 @@ class IgxGridFilteringRowComponent {
         return this.nativeElement.offsetWidth < this.NARROW_WIDTH_THRESHOLD;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridFilteringRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridFilteringRowComponent, isStandalone: true, selector: "igx-grid-filtering-row", inputs: { column: "column", value: "value" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, properties: { "class.igx-grid__filtering-row": "this.defaultCSSClass" } }, viewQueries: [{ propertyName: "defaultFilterUI", first: true, predicate: ["defaultFilterUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateUI", first: true, predicate: ["defaultDateUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultTimeUI", first: true, predicate: ["defaultTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateTimeUI", first: true, predicate: ["defaultDateTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }, { propertyName: "dropDownConditions", first: true, predicate: ["inputGroupConditions"], descendants: true, read: IgxDropDownComponent, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent, static: true }, { propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "inputGroupPrefix", first: true, predicate: ["inputGroupPrefix"], descendants: true, read: ElementRef }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "operand", first: true, predicate: ["operand"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, static: true }, { propertyName: "dropDownOperators", predicate: ["operators"], descendants: true, read: IgxDropDownComponent }], ngImport: i0, template: "<!-- Have to apply styles inline because of the overlay outlet ... -->\n<igx-drop-down\n  #inputGroupConditions\n  [style.--ig-size]=\"filteringElementsSize\"\n  [height]=\"'200px'\"\n  (selectionChanging)=\"onConditionsChanged($event)\"\n>\n  @for (condition of conditions; track condition) {\n    <igx-drop-down-item\n      [value]=\"condition\"\n      [selected]=\"isConditionSelected(condition)\"\n    >\n      <div class=\"igx-grid__filtering-dropdown-items\">\n        <igx-icon\n          family=\"default\"\n          [name]=\"getCondition(condition).iconName\"\n        ></igx-icon>\n        <span class=\"igx-grid__filtering-dropdown-text\">{{\n          translateCondition(condition)\n        }}</span>\n      </div>\n    </igx-drop-down-item>\n  }\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n  <igx-input-group\n    #inputGroup\n    type=\"box\"\n    (focusout)=\"onInputGroupFocusout()\"\n    [style.--ig-size]=\"filteringElementsSize\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      tabindex=\"0\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n    </igx-prefix>\n    <input\n      #input\n      igxInput\n      tabindex=\"0\"\n      [placeholder]=\"placeholder\"\n      autocomplete=\"off\"\n      [value]=\"value\"\n      (input)=\"onInput($event)\"\n      [type]=\"type\"\n      [readonly]=\"isUnaryCondition\"\n      (click)=\"onInputClick()\"\n      (compositionstart)=\"onCompositionStart()\"\n      (compositionend)=\"onCompositionEnd()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      (keyup)=\"onInputKeyUp()\"\n    />\n    @if (value || value === 0) {\n      <igx-suffix>\n        @if (column.dataType === 'percent') {\n          <span class=\"igx-grid__filtering-row-percent-hint\">{{\n            value\n              | percent\n                : column.pipeArgs.digitsInfo\n                : filteringService.grid.locale\n          }}</span>\n        }\n        <igx-icon\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"onClearClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n  </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n  <igx-date-picker\n    #picker\n    [(value)]=\"value\"\n    [locale]=\"filteringService.grid.locale\"\n    (click)=\"expression.condition.isUnary ? null : picker.open()\"\n    type=\"box\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [placeholder]=\"placeholder\"\n    [weekStart]=\"column.pipeArgs.weekStart\"\n    (keydown)=\"onInputKeyDown($event)\"\n    (focusout)=\"onInputGroupFocusout()\"\n    (closed)=\"focusEditElement()\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      tabindex=\"0\"\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"expression.condition.iconName\"\n      ></igx-icon>\n    </igx-prefix>\n    @if (value) {\n      <igx-suffix>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick($event)\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"clearInput($event)\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n  </igx-date-picker>\n</ng-template>\n\n<ng-template #defaultTimeUI>\n  <igx-time-picker\n    #picker\n    [(value)]=\"value\"\n    [inputFormat]=\"\n      $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n    \"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [locale]=\"filteringService.grid.locale\"\n    [formatter]=\"column.formatter\"\n    type=\"box\"\n    [style.--ig-size]=\"filteringElementsSize\"\n    [placeholder]=\"placeholder\"\n    (closed)=\"focusEditElement()\"\n    (focusout)=\"onInputGroupFocusout()\"\n    (keydown)=\"onInputKeyDown($event)\"\n    (click)=\"expression.condition.isUnary ? null : picker.open()\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      tabindex=\"0\"\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"expression.condition.iconName\"\n      ></igx-icon>\n    </igx-prefix>\n    @if (value) {\n      <igx-suffix>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick($event)\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"clearInput($event)\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n  </igx-time-picker>\n</ng-template>\n\n<ng-template #defaultDateTimeUI>\n  <igx-input-group\n    #inputGroup\n    type=\"box\"\n    (focusout)=\"onInputGroupFocusout()\"\n    [style.--ig-size]=\"filteringElementsSize\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      tabindex=\"0\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n    </igx-prefix>\n    <input\n      #input\n      igxInput\n      tabindex=\"0\"\n      [placeholder]=\"placeholder\"\n      [locale]=\"filteringService.grid.locale\"\n      [displayFormat]=\"column.pipeArgs.format\"\n      [igxDateTimeEditor]=\"\n        $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n      \"\n      defaultFormatType=\"dateTime\"\n      [value]=\"value\"\n      (valueChange)=\"onInput($event)\"\n      [readonly]=\"isUnaryCondition\"\n      (click)=\"onInputClick()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      (keyup)=\"onInputKeyUp()\"\n    />\n    @if (value || value === 0) {\n      <igx-suffix>\n        <igx-icon\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"onClearClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n  </igx-input-group>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n></ng-container>\n\n@if (showArrows) {\n  <button\n    igxIconButton=\"flat\"\n    type=\"button\"\n    class=\"igx-grid__filtering-row-scroll-start\"\n    (keydown)=\"onLeftArrowKeyDown($event)\"\n    (click)=\"scrollChipsOnArrowPress('left')\"\n  >\n    <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n  </button>\n}\n\n<div #container class=\"igx-grid__filtering-row-main\">\n  <div>\n    <igx-chips-area #chipsArea>\n      <!-- expressionsList items re-created on refreshExpressions(), track stable expression -->\n      @for (\n        item of expressionsList;\n        track item.expression;\n        let i = $index;\n        let last = $last\n      ) {\n        <ng-container tabindex=\"0\">\n          <igx-chip\n            #chip\n            id=\"chip\"\n            (pointerdown)=\"onChipPointerdown($event, chip)\"\n            (click)=\"onChipClick($event, item)\"\n            (keydown)=\"onChipKeyDown($event, item)\"\n            (remove)=\"onChipRemoved($event, item)\"\n            [selectable]=\"false\"\n            [selected]=\"item.isSelected\"\n            [style.--ig-size]=\"filteringElementsSize\"\n            [removable]=\"true\"\n          >\n            <igx-icon\n              igxPrefix\n              family=\"default\"\n              [name]=\"item.expression.condition.iconName\"\n            >\n            </igx-icon>\n            <span>{{ filteringService.getChipLabel(item.expression) }}</span>\n          </igx-chip>\n          @if (!last) {\n            <span id=\"operand\">\n              <button\n                igxButton\n                type=\"button\"\n                (click)=\"toggleOperatorsDropDown($event, i)\"\n                [igxDropDownItemNavigation]=\"operators\"\n                [style.--ig-size]=\"filteringElementsSize\"\n              >\n                <igx-icon family=\"default\" name=\"expand_more\"></igx-icon>\n                <span>{{\n                  filteringService.getOperatorAsString(item.afterOperator)\n                }}</span>\n              </button>\n              <igx-drop-down\n                #operators\n                (selectionChanging)=\"onLogicOperatorChanged($event, item)\"\n              >\n                <igx-drop-down-item\n                  [value]=\"0\"\n                  [selected]=\"item.afterOperator === 0\"\n                  >{{\n                    filteringService.grid.resourceStrings\n                      .igx_grid_filter_operator_and\n                  }}</igx-drop-down-item\n                >\n                <igx-drop-down-item\n                  [value]=\"1\"\n                  [selected]=\"item.afterOperator === 1\"\n                  >{{\n                    filteringService.grid.resourceStrings\n                      .igx_grid_filter_operator_or\n                  }}</igx-drop-down-item\n                >\n              </igx-drop-down>\n            </span>\n          }\n        </ng-container>\n      }\n    </igx-chips-area>\n  </div>\n</div>\n\n@if (showArrows) {\n  <button\n    igxIconButton=\"flat\"\n    type=\"button\"\n    class=\"igx-grid__filtering-row-scroll-end\"\n    (click)=\"scrollChipsOnArrowPress('right')\"\n  >\n    <igx-icon family=\"default\" name=\"next\"></igx-icon>\n  </button>\n}\n\n<div\n  #buttonsContainer\n  [ngClass]=\"\n    isNarrowWidth\n      ? 'igx-grid__filtering-row-editing-buttons--small'\n      : 'igx-grid__filtering-row-editing-buttons'\n  \"\n>\n  @if (!isNarrowWidth) {\n    <button\n      igxButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"clearFiltering()\"\n      [disabled]=\"disabled\"\n      [tabindex]=\"disabled\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n      <span>{{\n        filteringService.grid.resourceStrings.igx_grid_filter_row_reset\n      }}</span>\n    </button>\n    <button\n      #closeButton\n      igxButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"close()\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"close\"></igx-icon>\n      <span>{{\n        filteringService.grid.resourceStrings.igx_grid_filter_row_close\n      }}</span>\n    </button>\n  }\n  @if (isNarrowWidth) {\n    <button\n      igxIconButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"clearFiltering()\"\n      [disabled]=\"disabled\"\n      [tabindex]=\"disabled\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n    </button>\n    <button\n      #closeButton\n      igxIconButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"close()\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"close\"></igx-icon>\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy", "role"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "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: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridFilteringRowComponent, isStandalone: true, selector: "igx-grid-filtering-row", inputs: { column: "column", value: "value" }, host: { listeners: { "keydown": "onKeydownHandler($event)" }, properties: { "class.igx-grid__filtering-row": "this.defaultCSSClass" } }, viewQueries: [{ propertyName: "defaultFilterUI", first: true, predicate: ["defaultFilterUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateUI", first: true, predicate: ["defaultDateUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultTimeUI", first: true, predicate: ["defaultTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultDateTimeUI", first: true, predicate: ["defaultDateTimeUI"], descendants: true, read: TemplateRef, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }, { propertyName: "dropDownConditions", first: true, predicate: ["inputGroupConditions"], descendants: true, read: IgxDropDownComponent, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent, static: true }, { propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "inputGroupPrefix", first: true, predicate: ["inputGroupPrefix"], descendants: true, read: ElementRef }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "operand", first: true, predicate: ["operand"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, static: true }, { propertyName: "dropDownOperators", predicate: ["operators"], descendants: true, read: IgxDropDownComponent }], ngImport: i0, template: "<!-- Have to apply styles inline because of the overlay outlet ... -->\n<igx-drop-down\n  #inputGroupConditions\n  [style.--ig-size]=\"filteringElementsSize\"\n  [height]=\"'200px'\"\n  (selectionChanging)=\"onConditionsChanged($event)\"\n>\n  @for (condition of conditions; track condition) {\n    <igx-drop-down-item\n      [value]=\"condition\"\n      [selected]=\"isConditionSelected(condition)\"\n    >\n      <div class=\"igx-grid__filtering-dropdown-items\">\n        <igx-icon\n          family=\"default\"\n          [name]=\"getCondition(condition).iconName\"\n        ></igx-icon>\n        <span class=\"igx-grid__filtering-dropdown-text\">{{\n          translateCondition(condition)\n        }}</span>\n      </div>\n    </igx-drop-down-item>\n  }\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n  <igx-input-group\n    #inputGroup\n    type=\"box\"\n    (focusout)=\"onInputGroupFocusout()\"\n    [style.--ig-size]=\"filteringElementsSize\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      tabindex=\"0\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n    </igx-prefix>\n    <input\n      #input\n      igxInput\n      tabindex=\"0\"\n      [placeholder]=\"placeholder\"\n      autocomplete=\"off\"\n      [value]=\"value\"\n      (input)=\"onInput($event)\"\n      [type]=\"type\"\n      [readonly]=\"isUnaryCondition\"\n      (click)=\"onInputClick()\"\n      (compositionstart)=\"onCompositionStart()\"\n      (compositionend)=\"onCompositionEnd()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      (keyup)=\"onInputKeyUp()\"\n    />\n    @if (value || value === 0) {\n      <igx-suffix>\n        @if (column.dataType === 'percent') {\n          <span class=\"igx-grid__filtering-row-percent-hint\">{{\n            value\n              | percent\n                : column.pipeArgs.digitsInfo\n                : filteringService.grid.locale\n          }}</span>\n        }\n        <igx-icon\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"onClearClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n  </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n  <igx-date-picker\n    #picker\n    [(value)]=\"value\"\n    [locale]=\"filteringService.grid.locale\"\n    (click)=\"expression.condition!.isUnary ? null : picker.open()\"\n    type=\"box\"\n    [displayFormat]=\"column.pipeArgs.format!\"\n    [formatter]=\"column.formatter!\"\n    [placeholder]=\"placeholder\"\n    [weekStart]=\"column.pipeArgs.weekStart!\"\n    (keydown)=\"onInputKeyDown($event)\"\n    (focusout)=\"onInputGroupFocusout()\"\n    (closed)=\"focusEditElement()\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      tabindex=\"0\"\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"expression.condition!.iconName\"\n      ></igx-icon>\n    </igx-prefix>\n    @if (value) {\n      <igx-suffix>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick($event)\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"clearInput($event)\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n  </igx-date-picker>\n</ng-template>\n\n<ng-template #defaultTimeUI>\n  <igx-time-picker\n    #picker\n    [(value)]=\"value\"\n    [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n    [displayFormat]=\"column.pipeArgs.format!\"\n    [locale]=\"filteringService.grid.locale\"\n    [formatter]=\"column.formatter!\"\n    type=\"box\"\n    [style.--ig-size]=\"filteringElementsSize\"\n    [placeholder]=\"placeholder\"\n    (closed)=\"focusEditElement()\"\n    (focusout)=\"onInputGroupFocusout()\"\n    (keydown)=\"onInputKeyDown($event)\"\n    (click)=\"expression.condition!.isUnary ? null : picker.open()\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      tabindex=\"0\"\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"expression.condition!.iconName\"\n      ></igx-icon>\n    </igx-prefix>\n    @if (value) {\n      <igx-suffix>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick($event)\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"clearInput($event)\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n  </igx-time-picker>\n</ng-template>\n\n<ng-template #defaultDateTimeUI>\n  <igx-input-group\n    #inputGroup\n    type=\"box\"\n    (focusout)=\"onInputGroupFocusout()\"\n    [style.--ig-size]=\"filteringElementsSize\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      tabindex=\"0\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n    </igx-prefix>\n    <input\n      #input\n      igxInput\n      tabindex=\"0\"\n      [placeholder]=\"placeholder\"\n      [locale]=\"filteringService.grid.locale\"\n      [displayFormat]=\"column.pipeArgs.format!\"\n      [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat!\"\n      defaultFormatType=\"dateTime\"\n      [value]=\"value\"\n      (valueChange)=\"onInput($event)\"\n      [readonly]=\"isUnaryCondition\"\n      (click)=\"onInputClick()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      (keyup)=\"onInputKeyUp()\"\n    />\n    @if (value || value === 0) {\n      <igx-suffix>\n        <igx-icon\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"onClearClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n  </igx-input-group>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n></ng-container>\n\n@if (showArrows) {\n  <button\n    igxIconButton=\"flat\"\n    type=\"button\"\n    class=\"igx-grid__filtering-row-scroll-start\"\n    (keydown)=\"onLeftArrowKeyDown($event)\"\n    (click)=\"scrollChipsOnArrowPress('left')\"\n  >\n    <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n  </button>\n}\n\n<div #container class=\"igx-grid__filtering-row-main\">\n  <div>\n    <igx-chips-area #chipsArea>\n      <!-- expressionsList items re-created on refreshExpressions(), track stable expression -->\n      @for (\n        item of expressionsList;\n        track item.expression;\n        let i = $index;\n        let last = $last\n      ) {\n        <ng-container tabindex=\"0\">\n          <igx-chip\n            #chip\n            id=\"chip\"\n            (pointerdown)=\"onChipPointerdown($event, chip)\"\n            (click)=\"onChipClick($event, item)\"\n            (keydown)=\"onChipKeyDown($event, item)\"\n            (remove)=\"onChipRemoved($event, item)\"\n            [selectable]=\"false\"\n            [selected]=\"item.isSelected\"\n            [style.--ig-size]=\"filteringElementsSize\"\n            [removable]=\"true\"\n          >\n            <igx-icon\n              igxPrefix\n              family=\"default\"\n              [name]=\"item.expression.condition!.iconName\"\n            >\n            </igx-icon>\n            <span>{{ filteringService.getChipLabel(item.expression) }}</span>\n          </igx-chip>\n          @if (!last) {\n            <span id=\"operand\">\n              <button\n                igxButton\n                type=\"button\"\n                (click)=\"toggleOperatorsDropDown($event, i)\"\n                [igxDropDownItemNavigation]=\"operators\"\n                [style.--ig-size]=\"filteringElementsSize\"\n              >\n                <igx-icon family=\"default\" name=\"expand_more\"></igx-icon>\n                <span>{{\n                  filteringService.getOperatorAsString(item.afterOperator)\n                }}</span>\n              </button>\n              <igx-drop-down\n                #operators\n                (selectionChanging)=\"onLogicOperatorChanged($event, item)\"\n              >\n                <igx-drop-down-item\n                  [value]=\"0\"\n                  [selected]=\"item.afterOperator === 0\"\n                  >{{\n                    filteringService.grid.resourceStrings\n                      .igx_grid_filter_operator_and\n                  }}</igx-drop-down-item\n                >\n                <igx-drop-down-item\n                  [value]=\"1\"\n                  [selected]=\"item.afterOperator === 1\"\n                  >{{\n                    filteringService.grid.resourceStrings\n                      .igx_grid_filter_operator_or\n                  }}</igx-drop-down-item\n                >\n              </igx-drop-down>\n            </span>\n          }\n        </ng-container>\n      }\n    </igx-chips-area>\n  </div>\n</div>\n\n@if (showArrows) {\n  <button\n    igxIconButton=\"flat\"\n    type=\"button\"\n    class=\"igx-grid__filtering-row-scroll-end\"\n    (click)=\"scrollChipsOnArrowPress('right')\"\n  >\n    <igx-icon family=\"default\" name=\"next\"></igx-icon>\n  </button>\n}\n\n<div\n  #buttonsContainer\n  [ngClass]=\"\n    isNarrowWidth\n      ? 'igx-grid__filtering-row-editing-buttons--small'\n      : 'igx-grid__filtering-row-editing-buttons'\n  \"\n>\n  @if (!isNarrowWidth) {\n    <button\n      igxButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"clearFiltering()\"\n      [disabled]=\"disabled\"\n      [tabindex]=\"disabled\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n      <span>{{\n        filteringService.grid.resourceStrings.igx_grid_filter_row_reset\n      }}</span>\n    </button>\n    <button\n      #closeButton\n      igxButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"close()\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"close\"></igx-icon>\n      <span>{{\n        filteringService.grid.resourceStrings.igx_grid_filter_row_close\n      }}</span>\n    </button>\n  }\n  @if (isNarrowWidth) {\n    <button\n      igxIconButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"clearFiltering()\"\n      [disabled]=\"disabled\"\n      [tabindex]=\"disabled\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n    </button>\n    <button\n      #closeButton\n      igxIconButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"close()\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"close\"></igx-icon>\n    </button>\n  }\n</div>\n", dependencies: [{ kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy", "role"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "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: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridFilteringRowComponent, decorators: [{
             type: Component,
@@ -13702,7 +13417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         IgxRippleDirective,
                         IgxIconButtonDirective,
                         IgxPercentFormatterPipe
-                    ], template: "<!-- Have to apply styles inline because of the overlay outlet ... -->\n<igx-drop-down\n  #inputGroupConditions\n  [style.--ig-size]=\"filteringElementsSize\"\n  [height]=\"'200px'\"\n  (selectionChanging)=\"onConditionsChanged($event)\"\n>\n  @for (condition of conditions; track condition) {\n    <igx-drop-down-item\n      [value]=\"condition\"\n      [selected]=\"isConditionSelected(condition)\"\n    >\n      <div class=\"igx-grid__filtering-dropdown-items\">\n        <igx-icon\n          family=\"default\"\n          [name]=\"getCondition(condition).iconName\"\n        ></igx-icon>\n        <span class=\"igx-grid__filtering-dropdown-text\">{{\n          translateCondition(condition)\n        }}</span>\n      </div>\n    </igx-drop-down-item>\n  }\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n  <igx-input-group\n    #inputGroup\n    type=\"box\"\n    (focusout)=\"onInputGroupFocusout()\"\n    [style.--ig-size]=\"filteringElementsSize\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      tabindex=\"0\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n    </igx-prefix>\n    <input\n      #input\n      igxInput\n      tabindex=\"0\"\n      [placeholder]=\"placeholder\"\n      autocomplete=\"off\"\n      [value]=\"value\"\n      (input)=\"onInput($event)\"\n      [type]=\"type\"\n      [readonly]=\"isUnaryCondition\"\n      (click)=\"onInputClick()\"\n      (compositionstart)=\"onCompositionStart()\"\n      (compositionend)=\"onCompositionEnd()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      (keyup)=\"onInputKeyUp()\"\n    />\n    @if (value || value === 0) {\n      <igx-suffix>\n        @if (column.dataType === 'percent') {\n          <span class=\"igx-grid__filtering-row-percent-hint\">{{\n            value\n              | percent\n                : column.pipeArgs.digitsInfo\n                : filteringService.grid.locale\n          }}</span>\n        }\n        <igx-icon\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"onClearClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n  </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n  <igx-date-picker\n    #picker\n    [(value)]=\"value\"\n    [locale]=\"filteringService.grid.locale\"\n    (click)=\"expression.condition.isUnary ? null : picker.open()\"\n    type=\"box\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [placeholder]=\"placeholder\"\n    [weekStart]=\"column.pipeArgs.weekStart\"\n    (keydown)=\"onInputKeyDown($event)\"\n    (focusout)=\"onInputGroupFocusout()\"\n    (closed)=\"focusEditElement()\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      tabindex=\"0\"\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"expression.condition.iconName\"\n      ></igx-icon>\n    </igx-prefix>\n    @if (value) {\n      <igx-suffix>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick($event)\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"clearInput($event)\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n  </igx-date-picker>\n</ng-template>\n\n<ng-template #defaultTimeUI>\n  <igx-time-picker\n    #picker\n    [(value)]=\"value\"\n    [inputFormat]=\"\n      $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n    \"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [locale]=\"filteringService.grid.locale\"\n    [formatter]=\"column.formatter\"\n    type=\"box\"\n    [style.--ig-size]=\"filteringElementsSize\"\n    [placeholder]=\"placeholder\"\n    (closed)=\"focusEditElement()\"\n    (focusout)=\"onInputGroupFocusout()\"\n    (keydown)=\"onInputKeyDown($event)\"\n    (click)=\"expression.condition.isUnary ? null : picker.open()\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      tabindex=\"0\"\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"expression.condition.iconName\"\n      ></igx-icon>\n    </igx-prefix>\n    @if (value) {\n      <igx-suffix>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick($event)\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"clearInput($event)\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n  </igx-time-picker>\n</ng-template>\n\n<ng-template #defaultDateTimeUI>\n  <igx-input-group\n    #inputGroup\n    type=\"box\"\n    (focusout)=\"onInputGroupFocusout()\"\n    [style.--ig-size]=\"filteringElementsSize\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      tabindex=\"0\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n    </igx-prefix>\n    <input\n      #input\n      igxInput\n      tabindex=\"0\"\n      [placeholder]=\"placeholder\"\n      [locale]=\"filteringService.grid.locale\"\n      [displayFormat]=\"column.pipeArgs.format\"\n      [igxDateTimeEditor]=\"\n        $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n      \"\n      defaultFormatType=\"dateTime\"\n      [value]=\"value\"\n      (valueChange)=\"onInput($event)\"\n      [readonly]=\"isUnaryCondition\"\n      (click)=\"onInputClick()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      (keyup)=\"onInputKeyUp()\"\n    />\n    @if (value || value === 0) {\n      <igx-suffix>\n        <igx-icon\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"onClearClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n  </igx-input-group>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n></ng-container>\n\n@if (showArrows) {\n  <button\n    igxIconButton=\"flat\"\n    type=\"button\"\n    class=\"igx-grid__filtering-row-scroll-start\"\n    (keydown)=\"onLeftArrowKeyDown($event)\"\n    (click)=\"scrollChipsOnArrowPress('left')\"\n  >\n    <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n  </button>\n}\n\n<div #container class=\"igx-grid__filtering-row-main\">\n  <div>\n    <igx-chips-area #chipsArea>\n      <!-- expressionsList items re-created on refreshExpressions(), track stable expression -->\n      @for (\n        item of expressionsList;\n        track item.expression;\n        let i = $index;\n        let last = $last\n      ) {\n        <ng-container tabindex=\"0\">\n          <igx-chip\n            #chip\n            id=\"chip\"\n            (pointerdown)=\"onChipPointerdown($event, chip)\"\n            (click)=\"onChipClick($event, item)\"\n            (keydown)=\"onChipKeyDown($event, item)\"\n            (remove)=\"onChipRemoved($event, item)\"\n            [selectable]=\"false\"\n            [selected]=\"item.isSelected\"\n            [style.--ig-size]=\"filteringElementsSize\"\n            [removable]=\"true\"\n          >\n            <igx-icon\n              igxPrefix\n              family=\"default\"\n              [name]=\"item.expression.condition.iconName\"\n            >\n            </igx-icon>\n            <span>{{ filteringService.getChipLabel(item.expression) }}</span>\n          </igx-chip>\n          @if (!last) {\n            <span id=\"operand\">\n              <button\n                igxButton\n                type=\"button\"\n                (click)=\"toggleOperatorsDropDown($event, i)\"\n                [igxDropDownItemNavigation]=\"operators\"\n                [style.--ig-size]=\"filteringElementsSize\"\n              >\n                <igx-icon family=\"default\" name=\"expand_more\"></igx-icon>\n                <span>{{\n                  filteringService.getOperatorAsString(item.afterOperator)\n                }}</span>\n              </button>\n              <igx-drop-down\n                #operators\n                (selectionChanging)=\"onLogicOperatorChanged($event, item)\"\n              >\n                <igx-drop-down-item\n                  [value]=\"0\"\n                  [selected]=\"item.afterOperator === 0\"\n                  >{{\n                    filteringService.grid.resourceStrings\n                      .igx_grid_filter_operator_and\n                  }}</igx-drop-down-item\n                >\n                <igx-drop-down-item\n                  [value]=\"1\"\n                  [selected]=\"item.afterOperator === 1\"\n                  >{{\n                    filteringService.grid.resourceStrings\n                      .igx_grid_filter_operator_or\n                  }}</igx-drop-down-item\n                >\n              </igx-drop-down>\n            </span>\n          }\n        </ng-container>\n      }\n    </igx-chips-area>\n  </div>\n</div>\n\n@if (showArrows) {\n  <button\n    igxIconButton=\"flat\"\n    type=\"button\"\n    class=\"igx-grid__filtering-row-scroll-end\"\n    (click)=\"scrollChipsOnArrowPress('right')\"\n  >\n    <igx-icon family=\"default\" name=\"next\"></igx-icon>\n  </button>\n}\n\n<div\n  #buttonsContainer\n  [ngClass]=\"\n    isNarrowWidth\n      ? 'igx-grid__filtering-row-editing-buttons--small'\n      : 'igx-grid__filtering-row-editing-buttons'\n  \"\n>\n  @if (!isNarrowWidth) {\n    <button\n      igxButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"clearFiltering()\"\n      [disabled]=\"disabled\"\n      [tabindex]=\"disabled\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n      <span>{{\n        filteringService.grid.resourceStrings.igx_grid_filter_row_reset\n      }}</span>\n    </button>\n    <button\n      #closeButton\n      igxButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"close()\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"close\"></igx-icon>\n      <span>{{\n        filteringService.grid.resourceStrings.igx_grid_filter_row_close\n      }}</span>\n    </button>\n  }\n  @if (isNarrowWidth) {\n    <button\n      igxIconButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"clearFiltering()\"\n      [disabled]=\"disabled\"\n      [tabindex]=\"disabled\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n    </button>\n    <button\n      #closeButton\n      igxIconButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"close()\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"close\"></igx-icon>\n    </button>\n  }\n</div>\n" }]
+                    ], template: "<!-- Have to apply styles inline because of the overlay outlet ... -->\n<igx-drop-down\n  #inputGroupConditions\n  [style.--ig-size]=\"filteringElementsSize\"\n  [height]=\"'200px'\"\n  (selectionChanging)=\"onConditionsChanged($event)\"\n>\n  @for (condition of conditions; track condition) {\n    <igx-drop-down-item\n      [value]=\"condition\"\n      [selected]=\"isConditionSelected(condition)\"\n    >\n      <div class=\"igx-grid__filtering-dropdown-items\">\n        <igx-icon\n          family=\"default\"\n          [name]=\"getCondition(condition).iconName\"\n        ></igx-icon>\n        <span class=\"igx-grid__filtering-dropdown-text\">{{\n          translateCondition(condition)\n        }}</span>\n      </div>\n    </igx-drop-down-item>\n  }\n</igx-drop-down>\n\n<ng-template #defaultFilterUI>\n  <igx-input-group\n    #inputGroup\n    type=\"box\"\n    (focusout)=\"onInputGroupFocusout()\"\n    [style.--ig-size]=\"filteringElementsSize\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      tabindex=\"0\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n    </igx-prefix>\n    <input\n      #input\n      igxInput\n      tabindex=\"0\"\n      [placeholder]=\"placeholder\"\n      autocomplete=\"off\"\n      [value]=\"value\"\n      (input)=\"onInput($event)\"\n      [type]=\"type\"\n      [readonly]=\"isUnaryCondition\"\n      (click)=\"onInputClick()\"\n      (compositionstart)=\"onCompositionStart()\"\n      (compositionend)=\"onCompositionEnd()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      (keyup)=\"onInputKeyUp()\"\n    />\n    @if (value || value === 0) {\n      <igx-suffix>\n        @if (column.dataType === 'percent') {\n          <span class=\"igx-grid__filtering-row-percent-hint\">{{\n            value\n              | percent\n                : column.pipeArgs.digitsInfo\n                : filteringService.grid.locale\n          }}</span>\n        }\n        <igx-icon\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"onClearClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n  </igx-input-group>\n</ng-template>\n\n<ng-template #defaultDateUI>\n  <igx-date-picker\n    #picker\n    [(value)]=\"value\"\n    [locale]=\"filteringService.grid.locale\"\n    (click)=\"expression.condition!.isUnary ? null : picker.open()\"\n    type=\"box\"\n    [displayFormat]=\"column.pipeArgs.format!\"\n    [formatter]=\"column.formatter!\"\n    [placeholder]=\"placeholder\"\n    [weekStart]=\"column.pipeArgs.weekStart!\"\n    (keydown)=\"onInputKeyDown($event)\"\n    (focusout)=\"onInputGroupFocusout()\"\n    (closed)=\"focusEditElement()\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      tabindex=\"0\"\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"expression.condition!.iconName\"\n      ></igx-icon>\n    </igx-prefix>\n    @if (value) {\n      <igx-suffix>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick($event)\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"clearInput($event)\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n  </igx-date-picker>\n</ng-template>\n\n<ng-template #defaultTimeUI>\n  <igx-time-picker\n    #picker\n    [(value)]=\"value\"\n    [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n    [displayFormat]=\"column.pipeArgs.format!\"\n    [locale]=\"filteringService.grid.locale\"\n    [formatter]=\"column.formatter!\"\n    type=\"box\"\n    [style.--ig-size]=\"filteringElementsSize\"\n    [placeholder]=\"placeholder\"\n    (closed)=\"focusEditElement()\"\n    (focusout)=\"onInputGroupFocusout()\"\n    (keydown)=\"onInputKeyDown($event)\"\n    (click)=\"expression.condition!.isUnary ? null : picker.open()\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      tabindex=\"0\"\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon\n        family=\"default\"\n        [name]=\"expression.condition!.iconName\"\n      ></igx-icon>\n    </igx-prefix>\n    @if (value) {\n      <igx-suffix>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick($event)\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          tabindex=\"0\"\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"clearInput($event)\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n    <!-- disable default icons -->\n    <igx-picker-toggle></igx-picker-toggle>\n    <igx-picker-clear></igx-picker-clear>\n  </igx-time-picker>\n</ng-template>\n\n<ng-template #defaultDateTimeUI>\n  <igx-input-group\n    #inputGroup\n    type=\"box\"\n    (focusout)=\"onInputGroupFocusout()\"\n    [style.--ig-size]=\"filteringElementsSize\"\n  >\n    <igx-prefix\n      #inputGroupPrefix\n      (click)=\"inputGroupPrefixClick($event)\"\n      (keydown)=\"onPrefixKeyDown($event)\"\n      tabindex=\"0\"\n      [igxDropDownItemNavigation]=\"inputGroupConditions\"\n    >\n      <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n    </igx-prefix>\n    <input\n      #input\n      igxInput\n      tabindex=\"0\"\n      [placeholder]=\"placeholder\"\n      [locale]=\"filteringService.grid.locale\"\n      [displayFormat]=\"column.pipeArgs.format!\"\n      [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat!\"\n      defaultFormatType=\"dateTime\"\n      [value]=\"value\"\n      (valueChange)=\"onInput($event)\"\n      [readonly]=\"isUnaryCondition\"\n      (click)=\"onInputClick()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      (keyup)=\"onInputKeyUp()\"\n    />\n    @if (value || value === 0) {\n      <igx-suffix>\n        <igx-icon\n          (keydown)=\"onCommitKeyDown($event)\"\n          (click)=\"onCommitClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"confirm\"\n        >\n        </igx-icon>\n        <igx-icon\n          (keydown)=\"onClearKeyDown($event)\"\n          (click)=\"onClearClick()\"\n          tabindex=\"0\"\n          family=\"default\"\n          name=\"input_clear\"\n        >\n        </igx-icon>\n      </igx-suffix>\n    }\n  </igx-input-group>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"template; context: { $implicit: this }\"\n></ng-container>\n\n@if (showArrows) {\n  <button\n    igxIconButton=\"flat\"\n    type=\"button\"\n    class=\"igx-grid__filtering-row-scroll-start\"\n    (keydown)=\"onLeftArrowKeyDown($event)\"\n    (click)=\"scrollChipsOnArrowPress('left')\"\n  >\n    <igx-icon family=\"default\" name=\"prev\"></igx-icon>\n  </button>\n}\n\n<div #container class=\"igx-grid__filtering-row-main\">\n  <div>\n    <igx-chips-area #chipsArea>\n      <!-- expressionsList items re-created on refreshExpressions(), track stable expression -->\n      @for (\n        item of expressionsList;\n        track item.expression;\n        let i = $index;\n        let last = $last\n      ) {\n        <ng-container tabindex=\"0\">\n          <igx-chip\n            #chip\n            id=\"chip\"\n            (pointerdown)=\"onChipPointerdown($event, chip)\"\n            (click)=\"onChipClick($event, item)\"\n            (keydown)=\"onChipKeyDown($event, item)\"\n            (remove)=\"onChipRemoved($event, item)\"\n            [selectable]=\"false\"\n            [selected]=\"item.isSelected\"\n            [style.--ig-size]=\"filteringElementsSize\"\n            [removable]=\"true\"\n          >\n            <igx-icon\n              igxPrefix\n              family=\"default\"\n              [name]=\"item.expression.condition!.iconName\"\n            >\n            </igx-icon>\n            <span>{{ filteringService.getChipLabel(item.expression) }}</span>\n          </igx-chip>\n          @if (!last) {\n            <span id=\"operand\">\n              <button\n                igxButton\n                type=\"button\"\n                (click)=\"toggleOperatorsDropDown($event, i)\"\n                [igxDropDownItemNavigation]=\"operators\"\n                [style.--ig-size]=\"filteringElementsSize\"\n              >\n                <igx-icon family=\"default\" name=\"expand_more\"></igx-icon>\n                <span>{{\n                  filteringService.getOperatorAsString(item.afterOperator)\n                }}</span>\n              </button>\n              <igx-drop-down\n                #operators\n                (selectionChanging)=\"onLogicOperatorChanged($event, item)\"\n              >\n                <igx-drop-down-item\n                  [value]=\"0\"\n                  [selected]=\"item.afterOperator === 0\"\n                  >{{\n                    filteringService.grid.resourceStrings\n                      .igx_grid_filter_operator_and\n                  }}</igx-drop-down-item\n                >\n                <igx-drop-down-item\n                  [value]=\"1\"\n                  [selected]=\"item.afterOperator === 1\"\n                  >{{\n                    filteringService.grid.resourceStrings\n                      .igx_grid_filter_operator_or\n                  }}</igx-drop-down-item\n                >\n              </igx-drop-down>\n            </span>\n          }\n        </ng-container>\n      }\n    </igx-chips-area>\n  </div>\n</div>\n\n@if (showArrows) {\n  <button\n    igxIconButton=\"flat\"\n    type=\"button\"\n    class=\"igx-grid__filtering-row-scroll-end\"\n    (click)=\"scrollChipsOnArrowPress('right')\"\n  >\n    <igx-icon family=\"default\" name=\"next\"></igx-icon>\n  </button>\n}\n\n<div\n  #buttonsContainer\n  [ngClass]=\"\n    isNarrowWidth\n      ? 'igx-grid__filtering-row-editing-buttons--small'\n      : 'igx-grid__filtering-row-editing-buttons'\n  \"\n>\n  @if (!isNarrowWidth) {\n    <button\n      igxButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"clearFiltering()\"\n      [disabled]=\"disabled\"\n      [tabindex]=\"disabled\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n      <span>{{\n        filteringService.grid.resourceStrings.igx_grid_filter_row_reset\n      }}</span>\n    </button>\n    <button\n      #closeButton\n      igxButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"close()\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"close\"></igx-icon>\n      <span>{{\n        filteringService.grid.resourceStrings.igx_grid_filter_row_close\n      }}</span>\n    </button>\n  }\n  @if (isNarrowWidth) {\n    <button\n      igxIconButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"clearFiltering()\"\n      [disabled]=\"disabled\"\n      [tabindex]=\"disabled\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"refresh\"></igx-icon>\n    </button>\n    <button\n      #closeButton\n      igxIconButton=\"flat\"\n      type=\"button\"\n      igxRipple\n      (click)=\"close()\"\n      [style.--ig-size]=\"filteringElementsSize\"\n    >\n      <igx-icon family=\"default\" name=\"close\"></igx-icon>\n    </button>\n  }\n</div>\n" }]
         }], propDecorators: { column: [{
                 type: Input
             }], value: [{
@@ -13962,7 +13677,7 @@ class BaseRow {
      */
     update(value) {
         const crudService = this.grid.crudService;
-        if (crudService.cellInEditMode && crudService.cell.id.rowID === this.key) {
+        if (crudService.cellInEditMode && crudService.cell?.id.rowID === this.key) {
             this.grid.transactions.endPending(false);
         }
         const row = new IgxEditRow(this.key, this.index, this.data, this.grid);
@@ -14931,6 +14646,7 @@ class IgxGridHeaderRowComponent {
         if (row && row.cells) {
             return row.cells.map(cell => cell.column);
         }
+        return undefined;
     }
     /**
     * @hidden
@@ -15002,11 +14718,11 @@ class IgxGridHeaderRowComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridHeaderRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridHeaderRowComponent, isStandalone: true, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedStartColumnCollection: "pinnedStartColumnCollection", pinnedEndColumnCollection: "pinnedEndColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", hasMRL: ["hasMRL", "hasMRL", booleanAttribute], width: "width" }, host: { properties: { "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant" } }, 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 class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [attr.aria-rowindex]=\"1\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        @if (grid.moving && grid.columnInDrag && pinnedStartColumnCollection.length <= 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedStartWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n        @if (grid.moving && grid.columnInDrag && pinnedStartColumnCollection.length > 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedStartWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n\n        <!-- Row dragging area -->\n        @if (grid.rowDraggable) {\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" role=\"columnheader\" (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        }\n\n        <!-- Row selectors area -->\n        @if (grid.showRowSelectors) {\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\" role=\"columnheader\"\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        }\n\n        <!-- Hierarchical grids expand all area -->\n        @if (isHierarchicalGrid) {\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                role=\"columnheader\"\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        }\n\n\n        <!-- Grouping icon toggle area -->\n        @if (grid?.groupingExpressions?.length) {\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                role=\"columnheader\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n        <!-- Pinned columns collection from the start -->\n        @if (pinnedStartColumnCollection.length) {\n            @for (column of pinnedStartColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\">\n                </igx-grid-header-group>\n            }\n        }\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            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        @if (pinnedEndColumnCollection.length) {\n            @for (column of pinnedEndColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\">\n                </igx-grid-header-group>\n            }\n        }\n    </div>\n\n    <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n    @if (grid.hasColumnGroups) {\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\n            }\n        </div>\n    }\n\n    <!-- Filter row area -->\n    @if (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    }\n\n    <!-- Right column moving area -->\n    @if (grid.moving && grid.columnInDrag) {\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    }\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 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridHeaderRowComponent, isStandalone: true, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedStartColumnCollection: "pinnedStartColumnCollection", pinnedEndColumnCollection: "pinnedEndColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", hasMRL: ["hasMRL", "hasMRL", booleanAttribute], width: "width" }, host: { properties: { "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant" } }, 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 class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [attr.aria-rowindex]=\"1\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        @if (grid.moving && grid.columnInDrag && pinnedStartColumnCollection.length <= 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedStartWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n        @if (grid.moving && grid.columnInDrag && pinnedStartColumnCollection.length > 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedStartWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n\n        <!-- Row dragging area -->\n        @if (grid.rowDraggable) {\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" role=\"columnheader\" (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        }\n\n        <!-- Row selectors area -->\n        @if (grid.showRowSelectors) {\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\" role=\"columnheader\"\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        }\n\n        <!-- Hierarchical grids expand all area -->\n        @if (isHierarchicalGrid) {\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll!()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                role=\"columnheader\"\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        }\n\n\n        <!-- Grouping icon toggle area -->\n        @if (grid?.groupingExpressions?.length) {\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid!.toggleAllGroupRows!()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                role=\"columnheader\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n        <!-- Pinned columns collection from the start -->\n        @if (pinnedStartColumnCollection.length) {\n            @for (column of pinnedStartColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\">\n                </igx-grid-header-group>\n            }\n        }\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            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        @if (pinnedEndColumnCollection.length) {\n            @for (column of pinnedEndColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\">\n                </igx-grid-header-group>\n            }\n        }\n    </div>\n\n    <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n    @if (grid.hasColumnGroups) {\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\n            }\n        </div>\n    }\n\n    <!-- Filter row area -->\n    @if (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    }\n\n    <!-- Right column moving area -->\n    @if (grid.moving && grid.columnInDrag) {\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    }\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 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridHeaderRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-row', imports: [IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupStylePipe], template: "<div class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [attr.aria-rowindex]=\"1\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        @if (grid.moving && grid.columnInDrag && pinnedStartColumnCollection.length <= 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedStartWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n        @if (grid.moving && grid.columnInDrag && pinnedStartColumnCollection.length > 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedStartWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n\n        <!-- Row dragging area -->\n        @if (grid.rowDraggable) {\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" role=\"columnheader\" (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        }\n\n        <!-- Row selectors area -->\n        @if (grid.showRowSelectors) {\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\" role=\"columnheader\"\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        }\n\n        <!-- Hierarchical grids expand all area -->\n        @if (isHierarchicalGrid) {\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                role=\"columnheader\"\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        }\n\n\n        <!-- Grouping icon toggle area -->\n        @if (grid?.groupingExpressions?.length) {\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                role=\"columnheader\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n        <!-- Pinned columns collection from the start -->\n        @if (pinnedStartColumnCollection.length) {\n            @for (column of pinnedStartColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\">\n                </igx-grid-header-group>\n            }\n        }\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            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        @if (pinnedEndColumnCollection.length) {\n            @for (column of pinnedEndColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\">\n                </igx-grid-header-group>\n            }\n        }\n    </div>\n\n    <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n    @if (grid.hasColumnGroups) {\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\n            }\n        </div>\n    }\n\n    <!-- Filter row area -->\n    @if (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    }\n\n    <!-- Right column moving area -->\n    @if (grid.moving && grid.columnInDrag) {\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    }\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 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\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', imports: [IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupStylePipe], template: "<div class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [attr.aria-rowindex]=\"1\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        @if (grid.moving && grid.columnInDrag && pinnedStartColumnCollection.length <= 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedStartWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n        @if (grid.moving && grid.columnInDrag && pinnedStartColumnCollection.length > 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedStartWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n\n        <!-- Row dragging area -->\n        @if (grid.rowDraggable) {\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" role=\"columnheader\" (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        }\n\n        <!-- Row selectors area -->\n        @if (grid.showRowSelectors) {\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\" role=\"columnheader\"\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        }\n\n        <!-- Hierarchical grids expand all area -->\n        @if (isHierarchicalGrid) {\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll!()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                role=\"columnheader\"\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        }\n\n\n        <!-- Grouping icon toggle area -->\n        @if (grid?.groupingExpressions?.length) {\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid!.toggleAllGroupRows!()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                role=\"columnheader\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n        <!-- Pinned columns collection from the start -->\n        @if (pinnedStartColumnCollection.length) {\n            @for (column of pinnedStartColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\">\n                </igx-grid-header-group>\n            }\n        }\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            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        @if (pinnedEndColumnCollection.length) {\n            @for (column of pinnedEndColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\">\n                </igx-grid-header-group>\n            }\n        }\n    </div>\n\n    <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n    @if (grid.hasColumnGroups) {\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\n            }\n        </div>\n    }\n\n    <!-- Filter row area -->\n    @if (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    }\n\n    <!-- Right column moving area -->\n    @if (grid.moving && grid.columnInDrag) {\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    }\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 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n" }]
         }], propDecorators: { grid: [{
                 type: Input
             }], pinnedStartColumnCollection: [{
@@ -15499,6 +15215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
 //     }
 // },
 class IgxPivotDateDimension {
+    /* treatAsRef */
     /**
      * Gets/Sets the resource strings.
      *
@@ -15905,9 +15622,9 @@ class IgxGridStateBaseDirective {
                     const childGridStates = [];
                     const rowIslands = context.currGrid.allLayoutList;
                     if (rowIslands) {
-                        rowIslands.forEach(rowIsland => {
+                        rowIslands.forEach((rowIsland) => {
                             const childGrids = rowIsland.rowIslandAPI.getChildGrids();
-                            childGrids.forEach(chGrid => {
+                            childGrids.forEach((chGrid) => {
                                 const parentRowID = this.getParentRowID(chGrid);
                                 context.currGrid = chGrid;
                                 if (context.currGrid) {
@@ -15923,12 +15640,12 @@ class IgxGridStateBaseDirective {
                 restoreFeatureState(context, state) {
                     const rowIslands = context.currGrid.allLayoutList;
                     if (rowIslands) {
-                        rowIslands.forEach(rowIsland => {
+                        rowIslands.forEach((rowIsland) => {
                             const childGrids = rowIsland.rowIslandAPI.getChildGrids();
-                            childGrids.forEach(chGrid => {
+                            childGrids.forEach((chGrid) => {
                                 const parentRowID = this.getParentRowID(chGrid);
                                 context.currGrid = chGrid;
-                                const childGridState = state.find(st => st.id === rowIsland.id && st.parentRowID === parentRowID);
+                                const childGridState = state.find((st) => st.id === rowIsland.id && st.parentRowID === parentRowID);
                                 if (childGridState && context.currGrid) {
                                     context.restoreGridState(childGridState.state, context.featureKeys);
                                 }
@@ -16018,7 +15735,7 @@ class IgxGridStateBaseDirective {
     getStateInternal(serialize = true, features) {
         let state;
         this.currGrid = this.grid;
-        this.state = state = this.buildState(features);
+        state = this.buildState(features);
         if (serialize) {
             state = JSON.stringify(state, this.stringifyCallback);
         }
@@ -16039,7 +15756,6 @@ class IgxGridStateBaseDirective {
      * ```
      */
     setStateInternal(state, features) {
-        this.state = state;
         this.currGrid = this.grid;
         this.restoreGridState(state, features);
         this.grid.cdr.detectChanges(); // TODO
@@ -16104,7 +15820,7 @@ class IgxGridStateBaseDirective {
     restoreDimensions(config) {
         const collections = [config.rows, config.columns, config.filters];
         for (const collection of collections) {
-            for (let index = 0; index < collection?.length; index++) {
+            for (let index = 0; index < (collection?.length ?? 0); index++) {
                 const dim = collection[index];
                 if (this.isDateDimension(dim)) {
                     this.restoreDateDimension(dim);
@@ -16179,7 +15895,7 @@ class IgxGridStateBaseDirective {
             return null;
         }
         if (this.currGrid.type === 'pivot') {
-            return recreateTreeFromFields(exprTreeObject, this.currGrid.allDimensions.map(d => ({ dataType: d.dataType, field: d.memberName })));
+            return recreateTreeFromFields(exprTreeObject, this.currGrid.allDimensions.map((d) => ({ dataType: d.dataType, field: d.memberName })));
         }
         return recreateTreeFromFields(exprTreeObject, this.currGrid.columns);
     }
@@ -16499,7 +16215,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
 /* wcElementTag: igc-grid-toolbar */
 /* blazorIndirectRender */
 /* singleInstanceIdentifier */
-/* contentParent: GridBaseDirective */
+/* contentParent: Grid */
+/* contentParent: TreeGrid */
 /* contentParent: RowIsland */
 /* contentParent: HierarchicalGrid */
 /* jsonAPIManageItemInMarkup */
@@ -16663,7 +16380,7 @@ class BaseToolbarDirective {
                 ? actions.columnsAreaMaxHeight :
                 this.columnListHeight ??
                     `${Math.max(this.grid.calcHeight * 0.5, 200)}px`;
-            toggleRef.opening.pipe(first$1()).subscribe(setHeight);
+            toggleRef.opening.pipe(first()).subscribe(setHeight);
         }
         toggleRef.toggle({
             ...this.overlaySettings, ...{
@@ -16684,12 +16401,12 @@ class BaseToolbarDirective {
         }
         /** The if statement prevents emitting open and close events twice  */
         if (toggleRef.collapsed) {
-            toggleRef.opening.pipe(first$1(), takeUntil(this.$destroy)).subscribe((event) => this.opening.emit(event));
-            toggleRef.opened.pipe(first$1(), takeUntil(this.$destroy)).subscribe((event) => this.opened.emit(event));
+            toggleRef.opening.pipe(first(), takeUntil(this.$destroy)).subscribe((event) => this.opening.emit(event));
+            toggleRef.opened.pipe(first(), takeUntil(this.$destroy)).subscribe((event) => this.opened.emit(event));
         }
         else {
-            toggleRef.closing.pipe(first$1(), takeUntil(this.$destroy)).subscribe((event) => this.closing.emit(event));
-            toggleRef.closed.pipe(first$1(), takeUntil(this.$destroy)).subscribe((event) => this.closed.emit(event));
+            toggleRef.closing.pipe(first(), takeUntil(this.$destroy)).subscribe((event) => this.closing.emit(event));
+            toggleRef.closed.pipe(first(), takeUntil(this.$destroy)).subscribe((event) => this.closed.emit(event));
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: BaseToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -17546,7 +17263,7 @@ class IgxBaseExporter {
             this.pivotGridColumns = [];
             this.isPivotGridExport = true;
             this.pivotGridRowDimensionsMap = new Map();
-            grid.visibleRowDimensions.filter(r => r.enabled).forEach(rowDimension => {
+            grid.visibleRowDimensions.filter(r => r.enabled).forEach((rowDimension) => {
                 this.addToRowDimensionsMap(rowDimension, rowDimension.memberName);
             });
             this._ownersMap.set(DEFAULT_OWNER, columnList);
@@ -17559,8 +17276,10 @@ class IgxBaseExporter {
         this.addLevelColumns();
         this.prepareData(grid);
         this.addLevelData();
-        this.addPivotGridColumns(grid);
-        this.addPivotRowHeaders(grid);
+        if (grid.type === 'pivot') {
+            this.addPivotGridColumns(grid);
+            this.addPivotRowHeaders(grid);
+        }
         this.exportGridRecordsData(this.flatRecords, grid);
     }
     /**
@@ -17687,7 +17406,7 @@ class IgxBaseExporter {
         }
         const targetCol = mapRecord.columns.filter(c => column.columnGroupParent !== null && column.columnGroupParent !== undefined && c.columnGroup === column.columnGroupParent)[0];
         if (targetCol !== undefined) {
-            targetCol.columnSpan -= span;
+            targetCol.columnSpan = targetCol.columnSpan - span;
             if (targetCol.columnGroupParent !== null) {
                 this.calculateColumnSpans(targetCol, mapRecord, span);
             }
@@ -17878,7 +17597,7 @@ class IgxBaseExporter {
                 hierarchicalOwner: GRID_PARENT
             };
             this.flatRecords.push(hierarchicalGridRecord);
-            for (const island of childLayoutList) {
+            for (const island of childLayoutList ?? []) {
                 const path = {
                     rowID: grid.primaryKey ? entry[grid.primaryKey] : entry,
                     rowKey: grid.primaryKey ? entry[grid.primaryKey] : entry,
@@ -18337,7 +18056,7 @@ class IgxBaseExporter {
         let keyData;
         if (island.autoGenerate) {
             keyData = gridData && gridData[island.key] ? gridData[island.key] : undefined;
-            const islandKeys = island.children && island.children.length > 0 ? island.children.map(i => i.key) : [];
+            const islandKeys = island.children && island.children.length > 0 ? island.children.map((i) => i.key) : [];
             if (keyData && Array.isArray(keyData) && keyData.length > 0) {
                 const islandData = keyData.map(i => {
                     const newItem = {};
@@ -18397,9 +18116,9 @@ class IgxBaseExporter {
     addPivotRowHeaders(grid) {
         if (grid?.pivotUI?.showRowHeaders) {
             const headersList = this._ownersMap.get(DEFAULT_OWNER);
-            const enabledRows = grid.visibleRowDimensions.filter(r => r.enabled).map((r, index) => ({ name: r.displayName || r.memberName, level: index }));
+            const enabledRows = grid.visibleRowDimensions.filter((r) => r.enabled).map((r, index) => ({ name: r.displayName || r.memberName, level: index }));
             let startIndex = 0;
-            enabledRows.forEach(x => {
+            enabledRows.forEach((x) => {
                 headersList.columns.unshift({
                     rowSpan: headersList.maxLevel + 1,
                     field: x.name,
@@ -18417,9 +18136,6 @@ class IgxBaseExporter {
         }
     }
     addPivotGridColumns(grid) {
-        if (grid.type !== 'pivot') {
-            return;
-        }
         const enabledRows = grid.visibleRowDimensions.map((r, i) => ({ name: r.memberName, level: i }));
         this.preparePivotGridColumns(enabledRows);
         this.pivotGridFilterFieldsCount = enabledRows.length;
@@ -19033,6 +18749,7 @@ class WorksheetFile {
                 // TODO: get date format from locale
                 return `"Latest: "&amp;_xlfn.TEXT(_xlfn.MAX(_xlfn.IF(${levelDimensions.startCoordinate}:${levelDimensions.endCoordinate}=${recordLevel}, ${dimensions.startCoordinate}:${dimensions.endCoordinate})), "m/d/yyyy")`;
         }
+        return undefined;
     }
     setRootSummaryStartCoordinate(column, key) {
         const firstDataRecordColName = ExcelStrings.getExcelColumn(column) + (this.firstDataRow);
@@ -20928,7 +20645,7 @@ class IgxGridToolbarExporterComponent extends BaseToolbarDirective {
         }
         this.isExporting = true;
         this.toolbar.showProgress = true;
-        exporter.exportEnded.pipe(first$1()).subscribe(() => {
+        exporter.exportEnded.pipe(first()).subscribe(() => {
             this.exportEnded.emit();
             this.isExporting = false;
             this.toolbar.showProgress = false;
@@ -20980,11 +20697,11 @@ class IgxGridToolbarHidingComponent extends BaseToolbarColumnActionsDirective {
         this.columnActionsUI = content;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarHidingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridToolbarHidingComponent, isStandalone: true, selector: "igx-grid-toolbar-hiding", viewQueries: [{ propertyName: "content", first: true, predicate: IgxColumnHidingDirective, descendants: true, read: IgxColumnActionsComponent }], usesInheritance: true, ngImport: i0, template: "@if (grid.rendered$ | async) {\n  <button\n    [title]=\"\n      $safeNavigationMigration(\n        grid?.resourceStrings.igx_grid_toolbar_hiding_button_tooltip\n      )\n    \"\n    #btn\n    igxButton=\"outlined\"\n    type=\"button\"\n    name=\"btnColumnHiding\"\n    (click)=\"toggle(btn, ref, actions)\"\n  >\n    <igx-icon\n      family=\"default\"\n      [name]=\"!grid.hiddenColumnsCount ? 'show' : 'hide'\"\n    >\n    </igx-icon>\n    <span>{{ grid.hiddenColumnsCount }}</span>\n    <span>{{ buttonText }}</span>\n  </button>\n  <igx-column-actions\n    #actions\n    igxColumnHiding\n    igxToggle\n    (opened)=\"focusSearch(ref.element)\"\n    #ref=\"toggle\"\n    [grid]=\"grid\"\n    [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_hiding_title\"\n    [filterColumnsPrompt]=\"\n      prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\n    \"\n    [hideFilter]=\"hideFilter\"\n    [filterCriteria]=\"filterCriteria\"\n    [columnDisplayOrder]=\"columnDisplayOrder\"\n    [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n    [uncheckAllText]=\"uncheckAllText\"\n    [checkAllText]=\"checkAllText\"\n    [indentation]=\"indentetion\"\n  >\n  </igx-column-actions>\n}\n", dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxColumnActionsComponent, selector: "igx-column-actions", inputs: ["grid", "indentation", "columnsAreaMaxHeight", "hideFilter", "title", "filterColumnsPrompt", "filterCriteria", "columnDisplayOrder", "uncheckAllText", "checkAllText", "id"], outputs: ["columnToggled"] }, { kind: "directive", type: IgxColumnHidingDirective, selector: "[igxColumnHiding]" }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridToolbarHidingComponent, isStandalone: true, selector: "igx-grid-toolbar-hiding", viewQueries: [{ propertyName: "content", first: true, predicate: IgxColumnHidingDirective, descendants: true, read: IgxColumnActionsComponent }], usesInheritance: true, ngImport: i0, template: "@if (grid.rendered$ | async) {\n  <button\n    [title]=\"grid?.resourceStrings.igx_grid_toolbar_hiding_button_tooltip\"\n    #btn\n    igxButton=\"outlined\"\n    type=\"button\"\n    name=\"btnColumnHiding\"\n    (click)=\"toggle(btn, ref, actions)\"\n  >\n    <igx-icon\n      family=\"default\"\n      [name]=\"!grid.hiddenColumnsCount ? 'show' : 'hide'\"\n    >\n    </igx-icon>\n    <span>{{ grid.hiddenColumnsCount }}</span>\n    <span>{{ buttonText }}</span>\n  </button>\n  <igx-column-actions\n    #actions\n    igxColumnHiding\n    igxToggle\n    (opened)=\"focusSearch(ref.element)\"\n    #ref=\"toggle\"\n    [grid]=\"grid\"\n    [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_hiding_title!\"\n    [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt!\n\"\n    [hideFilter]=\"hideFilter\"\n    [filterCriteria]=\"filterCriteria\"\n    [columnDisplayOrder]=\"columnDisplayOrder\"\n    [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n    [uncheckAllText]=\"uncheckAllText\"\n    [checkAllText]=\"checkAllText\"\n    [indentation]=\"indentetion\"\n  >\n  </igx-column-actions>\n}\n", dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxColumnActionsComponent, selector: "igx-column-actions", inputs: ["grid", "indentation", "columnsAreaMaxHeight", "hideFilter", "title", "filterColumnsPrompt", "filterCriteria", "columnDisplayOrder", "uncheckAllText", "checkAllText", "id"], outputs: ["columnToggled"] }, { kind: "directive", type: IgxColumnHidingDirective, selector: "[igxColumnHiding]" }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarHidingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-grid-toolbar-hiding', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxIconComponent, IgxColumnActionsComponent, IgxColumnHidingDirective, IgxToggleDirective, AsyncPipe], template: "@if (grid.rendered$ | async) {\n  <button\n    [title]=\"\n      $safeNavigationMigration(\n        grid?.resourceStrings.igx_grid_toolbar_hiding_button_tooltip\n      )\n    \"\n    #btn\n    igxButton=\"outlined\"\n    type=\"button\"\n    name=\"btnColumnHiding\"\n    (click)=\"toggle(btn, ref, actions)\"\n  >\n    <igx-icon\n      family=\"default\"\n      [name]=\"!grid.hiddenColumnsCount ? 'show' : 'hide'\"\n    >\n    </igx-icon>\n    <span>{{ grid.hiddenColumnsCount }}</span>\n    <span>{{ buttonText }}</span>\n  </button>\n  <igx-column-actions\n    #actions\n    igxColumnHiding\n    igxToggle\n    (opened)=\"focusSearch(ref.element)\"\n    #ref=\"toggle\"\n    [grid]=\"grid\"\n    [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_hiding_title\"\n    [filterColumnsPrompt]=\"\n      prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\n    \"\n    [hideFilter]=\"hideFilter\"\n    [filterCriteria]=\"filterCriteria\"\n    [columnDisplayOrder]=\"columnDisplayOrder\"\n    [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n    [uncheckAllText]=\"uncheckAllText\"\n    [checkAllText]=\"checkAllText\"\n    [indentation]=\"indentetion\"\n  >\n  </igx-column-actions>\n}\n" }]
+            args: [{ selector: 'igx-grid-toolbar-hiding', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxIconComponent, IgxColumnActionsComponent, IgxColumnHidingDirective, IgxToggleDirective, AsyncPipe], template: "@if (grid.rendered$ | async) {\n  <button\n    [title]=\"grid?.resourceStrings.igx_grid_toolbar_hiding_button_tooltip\"\n    #btn\n    igxButton=\"outlined\"\n    type=\"button\"\n    name=\"btnColumnHiding\"\n    (click)=\"toggle(btn, ref, actions)\"\n  >\n    <igx-icon\n      family=\"default\"\n      [name]=\"!grid.hiddenColumnsCount ? 'show' : 'hide'\"\n    >\n    </igx-icon>\n    <span>{{ grid.hiddenColumnsCount }}</span>\n    <span>{{ buttonText }}</span>\n  </button>\n  <igx-column-actions\n    #actions\n    igxColumnHiding\n    igxToggle\n    (opened)=\"focusSearch(ref.element)\"\n    #ref=\"toggle\"\n    [grid]=\"grid\"\n    [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_hiding_title!\"\n    [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt!\n\"\n    [hideFilter]=\"hideFilter\"\n    [filterCriteria]=\"filterCriteria\"\n    [columnDisplayOrder]=\"columnDisplayOrder\"\n    [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n    [uncheckAllText]=\"uncheckAllText\"\n    [checkAllText]=\"checkAllText\"\n    [indentation]=\"indentetion\"\n  >\n  </igx-column-actions>\n}\n" }]
         }], propDecorators: { content: [{
                 type: ViewChild,
                 args: [IgxColumnHidingDirective, { read: IgxColumnActionsComponent }]
@@ -21012,11 +20729,11 @@ class IgxGridToolbarPinningComponent extends BaseToolbarColumnActionsDirective {
         this.columnActionsUI = content;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarPinningComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridToolbarPinningComponent, isStandalone: true, selector: "igx-grid-toolbar-pinning", viewQueries: [{ propertyName: "content", first: true, predicate: IgxColumnPinningDirective, descendants: true, read: IgxColumnActionsComponent }], usesInheritance: true, ngImport: i0, template: "@if (grid.rendered$ | async) {\n  <button\n    [title]=\"\n      $safeNavigationMigration(\n        grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip\n      )\n    \"\n    #btn\n    igxButton=\"outlined\"\n    type=\"button\"\n    name=\"btnColumnPinning\"\n    (click)=\"toggle(btn, ref, actions)\"\n  >\n    <igx-icon\n      family=\"default\"\n      [name]=\"!grid.pinnedColumnsCount ? 'unpin' : 'pin'\"\n    >\n    </igx-icon>\n    <span>{{ grid.pinnedColumnsCount }}</span>\n    <span>{{ buttonText }}</span>\n  </button>\n  <igx-column-actions\n    #actions\n    igxColumnPinning\n    igxToggle\n    (opened)=\"focusSearch(ref.element)\"\n    #ref=\"toggle\"\n    [grid]=\"grid\"\n    [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_pinning_title\"\n    [filterColumnsPrompt]=\"\n      prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\n    \"\n    [hideFilter]=\"hideFilter\"\n    [filterCriteria]=\"filterCriteria\"\n    [columnDisplayOrder]=\"columnDisplayOrder\"\n    [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n    [uncheckAllText]=\"uncheckAllText\"\n    [checkAllText]=\"checkAllText\"\n    [indentation]=\"indentetion\"\n  >\n  </igx-column-actions>\n}\n", dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxColumnActionsComponent, selector: "igx-column-actions", inputs: ["grid", "indentation", "columnsAreaMaxHeight", "hideFilter", "title", "filterColumnsPrompt", "filterCriteria", "columnDisplayOrder", "uncheckAllText", "checkAllText", "id"], outputs: ["columnToggled"] }, { kind: "directive", type: IgxColumnPinningDirective, selector: "[igxColumnPinning]" }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridToolbarPinningComponent, isStandalone: true, selector: "igx-grid-toolbar-pinning", viewQueries: [{ propertyName: "content", first: true, predicate: IgxColumnPinningDirective, descendants: true, read: IgxColumnActionsComponent }], usesInheritance: true, ngImport: i0, template: "@if (grid.rendered$ | async) {\n  <button\n    [title]=\"\n      $safeNavigationMigration(\n        grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip\n      )\n    \"\n    #btn\n    igxButton=\"outlined\"\n    type=\"button\"\n    name=\"btnColumnPinning\"\n    (click)=\"toggle(btn, ref, actions)\"\n  >\n    <igx-icon\n      family=\"default\"\n      [name]=\"!grid.pinnedColumnsCount ? 'unpin' : 'pin'\"\n    >\n    </igx-icon>\n    <span>{{ grid.pinnedColumnsCount }}</span>\n    <span>{{ buttonText }}</span>\n  </button>\n  <igx-column-actions\n    #actions\n    igxColumnPinning\n    igxToggle\n    (opened)=\"focusSearch(ref.element)\"\n    #ref=\"toggle\"\n    [grid]=\"grid\"\n    [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_pinning_title!\"\n    [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt!\"\n    [hideFilter]=\"hideFilter\"\n    [filterCriteria]=\"filterCriteria\"\n    [columnDisplayOrder]=\"columnDisplayOrder\"\n    [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n    [uncheckAllText]=\"uncheckAllText\"\n    [checkAllText]=\"checkAllText\"\n    [indentation]=\"indentetion\"\n  >\n  </igx-column-actions>\n}\n", dependencies: [{ kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxColumnActionsComponent, selector: "igx-column-actions", inputs: ["grid", "indentation", "columnsAreaMaxHeight", "hideFilter", "title", "filterColumnsPrompt", "filterCriteria", "columnDisplayOrder", "uncheckAllText", "checkAllText", "id"], outputs: ["columnToggled"] }, { kind: "directive", type: IgxColumnPinningDirective, selector: "[igxColumnPinning]" }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridToolbarPinningComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-grid-toolbar-pinning', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxIconComponent, IgxColumnActionsComponent, IgxColumnPinningDirective, IgxToggleDirective, AsyncPipe], template: "@if (grid.rendered$ | async) {\n  <button\n    [title]=\"\n      $safeNavigationMigration(\n        grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip\n      )\n    \"\n    #btn\n    igxButton=\"outlined\"\n    type=\"button\"\n    name=\"btnColumnPinning\"\n    (click)=\"toggle(btn, ref, actions)\"\n  >\n    <igx-icon\n      family=\"default\"\n      [name]=\"!grid.pinnedColumnsCount ? 'unpin' : 'pin'\"\n    >\n    </igx-icon>\n    <span>{{ grid.pinnedColumnsCount }}</span>\n    <span>{{ buttonText }}</span>\n  </button>\n  <igx-column-actions\n    #actions\n    igxColumnPinning\n    igxToggle\n    (opened)=\"focusSearch(ref.element)\"\n    #ref=\"toggle\"\n    [grid]=\"grid\"\n    [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_pinning_title\"\n    [filterColumnsPrompt]=\"\n      prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt\n    \"\n    [hideFilter]=\"hideFilter\"\n    [filterCriteria]=\"filterCriteria\"\n    [columnDisplayOrder]=\"columnDisplayOrder\"\n    [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n    [uncheckAllText]=\"uncheckAllText\"\n    [checkAllText]=\"checkAllText\"\n    [indentation]=\"indentetion\"\n  >\n  </igx-column-actions>\n}\n" }]
+            args: [{ selector: 'igx-grid-toolbar-pinning', changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxButtonDirective, IgxIconComponent, IgxColumnActionsComponent, IgxColumnPinningDirective, IgxToggleDirective, AsyncPipe], template: "@if (grid.rendered$ | async) {\n  <button\n    [title]=\"\n      $safeNavigationMigration(\n        grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip\n      )\n    \"\n    #btn\n    igxButton=\"outlined\"\n    type=\"button\"\n    name=\"btnColumnPinning\"\n    (click)=\"toggle(btn, ref, actions)\"\n  >\n    <igx-icon\n      family=\"default\"\n      [name]=\"!grid.pinnedColumnsCount ? 'unpin' : 'pin'\"\n    >\n    </igx-icon>\n    <span>{{ grid.pinnedColumnsCount }}</span>\n    <span>{{ buttonText }}</span>\n  </button>\n  <igx-column-actions\n    #actions\n    igxColumnPinning\n    igxToggle\n    (opened)=\"focusSearch(ref.element)\"\n    #ref=\"toggle\"\n    [grid]=\"grid\"\n    [title]=\"title || grid?.resourceStrings.igx_grid_toolbar_pinning_title!\"\n    [filterColumnsPrompt]=\"prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt!\"\n    [hideFilter]=\"hideFilter\"\n    [filterCriteria]=\"filterCriteria\"\n    [columnDisplayOrder]=\"columnDisplayOrder\"\n    [columnsAreaMaxHeight]=\"columnsAreaMaxHeight\"\n    [uncheckAllText]=\"uncheckAllText\"\n    [checkAllText]=\"checkAllText\"\n    [indentation]=\"indentetion\"\n  >\n  </igx-column-actions>\n}\n" }]
         }], propDecorators: { content: [{
                 type: ViewChild,
                 args: [IgxColumnPinningDirective, { read: IgxColumnActionsComponent }]
@@ -21136,12 +20853,14 @@ class IgxRowEditTabStopDirective {
     move(event) {
         event.preventDefault();
         this.currentCellIndex = event.shiftKey ? this.grid.lastEditableColumnIndex : this.grid.firstEditableColumnIndex;
-        this.grid.navigation.activeNode.row = this.grid.crudService.rowInEditMode.index;
+        this.grid.navigation.activeNode.row = this.grid.crudService.rowInEditMode?.index;
         this.grid.navigation.activeNode.column = this.currentCellIndex;
-        this.grid.navigateTo(this.grid.crudService.rowInEditMode.index, this.currentCellIndex, (obj) => {
-            obj.target.activate(event);
-            this.grid.cdr.detectChanges();
-        });
+        if (this.grid.crudService.rowInEditMode) {
+            this.grid.navigateTo(this.grid.crudService.rowInEditMode.index, this.currentCellIndex, (obj) => {
+                obj.target.activate(event);
+                this.grid.cdr.detectChanges();
+            });
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxRowEditTabStopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: IgxRowEditTabStopDirective, isStandalone: true, selector: "[igxRowEditTabStop]", host: { listeners: { "keydown.tab": "handleTab($event)", "keydown.shift.tab": "handleTab($event)", "keydown.escape": "handleEscape($event)", "keydown.enter": "handleEnter($event)" } }, ngImport: i0 }); }
@@ -21166,12 +20885,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 args: ['keydown.enter', ['$event']]
             }] } });
 
-/**
- * Injection token for accessing the grid transaction object.
- * This allows injecting the grid transaction object into components or services.
- */
-const IgxGridTransaction = /*@__PURE__*/ new InjectionToken('IgxGridTransaction');
-
 /* csSuppress */
 class NoopPivotDimensionsStrategy {
     static { this._instance = null; }
@@ -21278,14 +20991,17 @@ class DimensionValuesFilteringStrategy extends FilteringStrategy {
         const allDimensions = grid.allDimensions;
         const enabledDimensions = allDimensions.filter(x => x && x.enabled);
         const dim = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === fieldName);
+        if (!dim) {
+            return undefined;
+        }
         const value = dim.childLevel ? this._getDimensionValueHierarchy(dim, rec).map(x => `[` + x + `]`).join('.') : PivotUtil.extractValueFromDimension(dim, rec);
         return value;
     }
     getFilterItems(column, tree) {
         const grid = column.grid;
-        const enabledDimensions = grid.allDimensions.filter(x => x && x.enabled);
+        const enabledDimensions = grid.allDimensions.filter((x) => x && x.enabled);
         const data = column.grid.gridAPI.filterDataByExpressions(tree);
-        const dim = enabledDimensions.find(x => x.memberName === column.field);
+        const dim = enabledDimensions.find((x) => x.memberName === column.field);
         const allValuesHierarchy = PivotUtil.getFieldsHierarchy(data, [dim], PivotDimensionType.Column, grid.pivotKeys, grid.pivotValueCloneStrategy);
         const isNoop = grid.pivotConfiguration.columnStrategy instanceof NoopPivotDimensionsStrategy || grid.pivotConfiguration.rowStrategy instanceof NoopPivotDimensionsStrategy;
         const items = !isNoop ? this._getFilterItems(allValuesHierarchy, grid.pivotKeys) : [{ value: '' }];
@@ -21296,7 +21012,7 @@ class DimensionValuesFilteringStrategy extends FilteringStrategy {
         hierarchy.forEach((value) => {
             const val = value.value;
             const path = val.split(pivotKeys.columnDimensionSeparator);
-            const hierarchicalValue = path.length > 1 ? path.map(x => `[` + x + `]`).join('.') : val;
+            const hierarchicalValue = path.length > 1 ? path.map((x) => `[` + x + `]`).join('.') : val;
             const text = path[path.length - 1];
             items.push({
                 value: hierarchicalValue,
@@ -21344,12 +21060,12 @@ class IgxGridSummaryService {
             }
             return;
         }
-        if (args.data) {
-            const rowID = this.grid.primaryKey ? args.data[this.grid.primaryKey] : args.data;
+        if (args.rowData) {
+            const rowID = this.grid.primaryKey ? args.rowData[this.grid.primaryKey] : args.rowData;
             this.removeSummaries(rowID);
         }
         if (args.rowID !== undefined && args.rowID !== null) {
-            let columnName = args.cellID ? this.grid.columns.find(col => col.index === args.cellID.columnID).field : undefined;
+            let columnName = args.cellID ? this.grid.columns.find(col => col.index === args.cellID.columnID)?.field : undefined;
             if (columnName && this.grid.rowEditable) {
                 return;
             }
@@ -21409,7 +21125,7 @@ class IgxGridSummaryService {
         this.grid.columns.filter((col) => col.hasSummary && !col.hidden).forEach((column) => {
             const getCurrentSummary = column.summaries.operate([], [], column.field);
             const getCurrentSummaryColumn = column.disabledSummaries.length > 0
-                ? getCurrentSummary.filter(s => !column.disabledSummaries.includes(s.key)).length
+                ? getCurrentSummary.filter((s) => !column.disabledSummaries.includes(s.key)).length
                 : getCurrentSummary.length;
             if (maxSummaryLength < getCurrentSummaryColumn) {
                 maxSummaryLength = getCurrentSummaryColumn;
@@ -21432,7 +21148,7 @@ class IgxGridSummaryService {
         const columnPathParts = columns.map(col => columnFieldPath(col.field));
         for (const [idx, column] of columns.entries()) {
             if (!rowSummaries.get(column.field)) {
-                let summaryResult = column.summaries.operate(data.map(r => resolveNestedPath(r, columnPathParts[idx])), data, column.field, groupRecord, this.grid.locale, column.pipeArgs);
+                let summaryResult = column.summaries.operate(data.map((r) => resolveNestedPath(r, columnPathParts[idx])), data, column.field, groupRecord);
                 summaryResult = column.disabledSummaries.length > 0
                     ? summaryResult.filter(s => !column.disabledSummaries.includes(s.key))
                     : summaryResult;
@@ -21456,16 +21172,16 @@ class IgxGridSummaryService {
             return;
         }
         if (this.groupingExpressions.length === 0) {
-            this.groupingExpressions = groupingArgs.expressions.map(record => record.fieldName);
+            this.groupingExpressions = groupingArgs.expressions instanceof Array ? groupingArgs.expressions.map((record) => record.fieldName) : [];
             return;
         }
-        if (groupingArgs.length === 0) {
+        if (groupingArgs.expressions instanceof Array && groupingArgs.expressions.length === 0) {
             this.groupingExpressions = [];
             this.clearSummaryCache();
             return;
         }
         this.compareGroupingExpressions(this.groupingExpressions, groupingArgs);
-        this.groupingExpressions = groupingArgs.expressions.map(record => record.fieldName);
+        this.groupingExpressions = groupingArgs.expressions instanceof Array ? groupingArgs.expressions.map((record) => record.fieldName) : [];
     }
     get hasSummarizedColumns() {
         const summarizedColumns = this.grid.columns.filter(col => col.hasSummary && !col.hidden);
@@ -21523,7 +21239,7 @@ class IgxGridSummaryService {
     // private removeChildRowSummaries(rowID, columnName?) {
     // }
     compareGroupingExpressions(current, groupingArgs) {
-        const newExpressions = groupingArgs.expressions.map(record => record.fieldName);
+        const newExpressions = groupingArgs.expressions instanceof Array ? groupingArgs.expressions.map((record) => record.fieldName) : [];
         const removedCols = groupingArgs.ungroupedColumns;
         if (current.length <= newExpressions.length) {
             const newExpr = newExpressions.slice(0, current.length).toString();
@@ -21537,7 +21253,7 @@ class IgxGridSummaryService {
                 this.clearSummaryCache();
                 return;
             }
-            removedCols.map(col => col.field).forEach(colName => {
+            removedCols instanceof Array && removedCols.map(col => col.field).forEach(colName => {
                 this.summaryCacheMap.forEach((_cache, id) => {
                     if (id.indexOf(colName) !== -1) {
                         this.summaryCacheMap.delete(id);
@@ -21766,11 +21482,11 @@ class IgxSummaryRowComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxSummaryRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxSummaryRowComponent, isStandalone: true, selector: "igx-grid-summary-row", inputs: { summaries: "summaries", gridID: "gridID", index: "index", firstCellIndentation: "firstCellIndentation" }, host: { properties: { "attr.data-rowIndex": "this.dataRowIndex" } }, providers: [IgxForOfSyncService], viewQueries: [{ propertyName: "virtDirRow", first: true, predicate: ["igxDirRef"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "_summaryCells", predicate: IgxSummaryCellComponent, descendants: true, read: IgxSummaryCellComponent }], ngImport: i0, template: "@if (summaries.size) {\n    @if (grid.summariesMargin) {\n        <div\n            class=\"igx-grid__summaries-patch\"\n            [style.min-width.px]=\"grid.summariesMargin\"\n            [style.flex-basis.px]=\"grid.summariesMargin\"\n            (pointerdown)=\"$event.preventDefault()\"\n        ></div>\n    }\n    @if (pinnedStartColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedStartColumns)\"></ng-container>\n    }\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\" [igxForSizePropName]='\"calcPixelWidth\"' #igxDirRef>\n        <igx-grid-summary-cell\n            class=\"igx-grid-summary igx-grid-summary--fw\"\n            role=\"cell\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\n            [rowIndex]=\"index\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [summaryFormatter]=\"col.summaryFormatter\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    </ng-template>\n    @if (pinnedEndColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedEndColumns)\"></ng-container>\n    }\n}\n\n<ng-template #summaryCellTemplate let-col let-columns=\"columns\">\n    @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n        <igx-grid-summary-cell\n            role=\"cell\"\n            class=\"igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-first]=\"col.isFirstPinned\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [rowIndex]=\"index\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    }\n</ng-template>\n", styles: ["@layer ig.base{.igx-grid-summary{position:relative;display:flex;flex-direction:column;flex:1 1 0%;padding-block:0;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));background:var(--background-color, inherit);overflow:hidden;outline-style:none;border-inline-end:var(--border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{display:flex;align-items:center;position:relative;padding-block:max(var(--is-large, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0rem,-1 * 0rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));padding-inline:0;font-size:.75rem}.igx-grid-summary__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--label-color);min-width:1.875rem;margin-inline-end:.1875rem}.igx-grid-summary__label:hover{color:var(--label-hover-color)}.igx-grid-summary__result{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--result-color);font-weight:600;flex:1 1 auto;text-align:end}.igx-grid-summary--pinned{position:relative;z-index:1}.igx-grid-summary--active.igx-grid-summary--pinned:after{width:calc(100% - .0625rem)}.igx-grid-summary--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-first:dir(ltr){border-inline-start:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-first:dir(rtl){border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}@media print{.igx-grid-summary--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-last:after{inset-inline-start:.0625rem}@media print{.igx-grid-summary--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--fw{flex-grow:0}.igx-grid-summary:after{content:\"\";position:absolute;inset:0;pointer-events:none}.igx-grid-summary--active:after{width:100%;height:100%;box-shadow:inset 0 0 0 .0625rem var(--cell-active-border-color);pointer-events:none}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid-summary{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-top:var(--border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{min-height:max(var(--is-large, 1)*max(2.25rem,-1 * 2.25rem),var(--is-medium, 1)*max(1.875rem,-1 * 1.875rem),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem));font-size:initial}.igx-grid-summary__label{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin-inline-end:initial}.igx-grid-summary__result{font-family:var(--ig-detail-2-font-family, var(--ig-font-family));font-size:var(--ig-detail-2-font-size);font-weight:var(--ig-detail-2-font-weight);font-style:var(--ig-detail-2-font-style);line-height:var(--ig-detail-2-line-height);letter-spacing:var(--ig-detail-2-letter-spacing);text-transform:var(--ig-detail-2-text-transform);margin-top:var(--ig-detail-2-margin-top);margin-bottom:var(--ig-detail-2-margin-bottom)}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxSummaryCellComponent, selector: "igx-grid-summary-cell", inputs: ["summaryResults", "column", "firstCellIndentation", "hasSummary", "summaryFormatter", "summaryTemplate", "locale", "gridResourceStrings", "active", "rowIndex"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxSummaryRowComponent, isStandalone: true, selector: "igx-grid-summary-row", inputs: { summaries: "summaries", gridID: "gridID", index: "index", firstCellIndentation: "firstCellIndentation" }, host: { properties: { "attr.data-rowIndex": "this.dataRowIndex" } }, providers: [IgxForOfSyncService], viewQueries: [{ propertyName: "virtDirRow", first: true, predicate: ["igxDirRef"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "_summaryCells", predicate: IgxSummaryCellComponent, descendants: true, read: IgxSummaryCellComponent }], ngImport: i0, template: "@if (summaries.size) {\n    @if (grid.summariesMargin) {\n        <div\n            class=\"igx-grid__summaries-patch\"\n            [style.min-width.px]=\"grid.summariesMargin\"\n            [style.flex-basis.px]=\"grid.summariesMargin\"\n            (pointerdown)=\"$event.preventDefault()\"\n        ></div>\n    }\n    @if (pinnedStartColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedStartColumns)\"></ng-container>\n    }\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\" [igxForSizePropName]='\"calcPixelWidth\"' #igxDirRef>\n        <igx-grid-summary-cell\n            class=\"igx-grid-summary igx-grid-summary--fw\"\n            role=\"cell\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\n            [rowIndex]=\"index\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [summaryResults]=\"getColumnSummaries(col.field)!\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [summaryFormatter]=\"col.summaryFormatter\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    </ng-template>\n    @if (pinnedEndColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedEndColumns)\"></ng-container>\n    }\n}\n\n<ng-template #summaryCellTemplate let-col let-columns=\"columns\">\n    @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n        <igx-grid-summary-cell\n            role=\"cell\"\n            class=\"igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-first]=\"col.isFirstPinned\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [rowIndex]=\"index\"\n            [summaryResults]=\"getColumnSummaries(col.field)!\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    }\n</ng-template>\n", styles: ["@layer ig.base{.igx-grid-summary{position:relative;display:flex;flex-direction:column;flex:1 1 0%;padding-block:0;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));background:var(--background-color, inherit);overflow:hidden;outline-style:none;border-inline-end:var(--border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{display:flex;align-items:center;position:relative;padding-block:max(var(--is-large, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0rem,-1 * 0rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));padding-inline:0;font-size:.75rem}.igx-grid-summary__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--label-color);min-width:1.875rem;margin-inline-end:.1875rem}.igx-grid-summary__label:hover{color:var(--label-hover-color)}.igx-grid-summary__result{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--result-color);font-weight:600;flex:1 1 auto;text-align:end}.igx-grid-summary--pinned{position:relative;z-index:1}.igx-grid-summary--active.igx-grid-summary--pinned:after{width:calc(100% - .0625rem)}.igx-grid-summary--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-first:dir(ltr){border-inline-start:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-first:dir(rtl){border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}@media print{.igx-grid-summary--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-last:after{inset-inline-start:.0625rem}@media print{.igx-grid-summary--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--fw{flex-grow:0}.igx-grid-summary:after{content:\"\";position:absolute;inset:0;pointer-events:none}.igx-grid-summary--active:after{width:100%;height:100%;box-shadow:inset 0 0 0 .0625rem var(--cell-active-border-color);pointer-events:none}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid-summary{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-top:var(--border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{min-height:max(var(--is-large, 1)*max(2.25rem,-1 * 2.25rem),var(--is-medium, 1)*max(1.875rem,-1 * 1.875rem),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem));font-size:initial}.igx-grid-summary__label{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin-inline-end:initial}.igx-grid-summary__result{font-family:var(--ig-detail-2-font-family, var(--ig-font-family));font-size:var(--ig-detail-2-font-size);font-weight:var(--ig-detail-2-font-weight);font-style:var(--ig-detail-2-font-style);line-height:var(--ig-detail-2-line-height);letter-spacing:var(--ig-detail-2-letter-spacing);text-transform:var(--ig-detail-2-text-transform);margin-top:var(--ig-detail-2-margin-top);margin-bottom:var(--ig-detail-2-margin-bottom)}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxSummaryCellComponent, selector: "igx-grid-summary-cell", inputs: ["summaryResults", "column", "firstCellIndentation", "hasSummary", "summaryFormatter", "summaryTemplate", "locale", "gridResourceStrings", "active", "rowIndex"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxSummaryRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-summary-row', encapsulation: ViewEncapsulation.None, providers: [IgxForOfSyncService], imports: [NgTemplateOutlet, IgxGridForOfDirective, IgxSummaryCellComponent, IgxGridNotGroupedPipe], template: "@if (summaries.size) {\n    @if (grid.summariesMargin) {\n        <div\n            class=\"igx-grid__summaries-patch\"\n            [style.min-width.px]=\"grid.summariesMargin\"\n            [style.flex-basis.px]=\"grid.summariesMargin\"\n            (pointerdown)=\"$event.preventDefault()\"\n        ></div>\n    }\n    @if (pinnedStartColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedStartColumns)\"></ng-container>\n    }\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\" [igxForSizePropName]='\"calcPixelWidth\"' #igxDirRef>\n        <igx-grid-summary-cell\n            class=\"igx-grid-summary igx-grid-summary--fw\"\n            role=\"cell\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\n            [rowIndex]=\"index\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [summaryFormatter]=\"col.summaryFormatter\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    </ng-template>\n    @if (pinnedEndColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedEndColumns)\"></ng-container>\n    }\n}\n\n<ng-template #summaryCellTemplate let-col let-columns=\"columns\">\n    @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n        <igx-grid-summary-cell\n            role=\"cell\"\n            class=\"igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-first]=\"col.isFirstPinned\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [rowIndex]=\"index\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    }\n</ng-template>\n", styles: ["@layer ig.base{.igx-grid-summary{position:relative;display:flex;flex-direction:column;flex:1 1 0%;padding-block:0;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));background:var(--background-color, inherit);overflow:hidden;outline-style:none;border-inline-end:var(--border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{display:flex;align-items:center;position:relative;padding-block:max(var(--is-large, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0rem,-1 * 0rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));padding-inline:0;font-size:.75rem}.igx-grid-summary__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--label-color);min-width:1.875rem;margin-inline-end:.1875rem}.igx-grid-summary__label:hover{color:var(--label-hover-color)}.igx-grid-summary__result{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--result-color);font-weight:600;flex:1 1 auto;text-align:end}.igx-grid-summary--pinned{position:relative;z-index:1}.igx-grid-summary--active.igx-grid-summary--pinned:after{width:calc(100% - .0625rem)}.igx-grid-summary--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-first:dir(ltr){border-inline-start:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-first:dir(rtl){border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}@media print{.igx-grid-summary--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-last:after{inset-inline-start:.0625rem}@media print{.igx-grid-summary--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--fw{flex-grow:0}.igx-grid-summary:after{content:\"\";position:absolute;inset:0;pointer-events:none}.igx-grid-summary--active:after{width:100%;height:100%;box-shadow:inset 0 0 0 .0625rem var(--cell-active-border-color);pointer-events:none}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid-summary{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-top:var(--border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{min-height:max(var(--is-large, 1)*max(2.25rem,-1 * 2.25rem),var(--is-medium, 1)*max(1.875rem,-1 * 1.875rem),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem));font-size:initial}.igx-grid-summary__label{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin-inline-end:initial}.igx-grid-summary__result{font-family:var(--ig-detail-2-font-family, var(--ig-font-family));font-size:var(--ig-detail-2-font-size);font-weight:var(--ig-detail-2-font-weight);font-style:var(--ig-detail-2-font-style);line-height:var(--ig-detail-2-line-height);letter-spacing:var(--ig-detail-2-letter-spacing);text-transform:var(--ig-detail-2-text-transform);margin-top:var(--ig-detail-2-margin-top);margin-bottom:var(--ig-detail-2-margin-bottom)}}}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-summary-row', encapsulation: ViewEncapsulation.None, providers: [IgxForOfSyncService], imports: [NgTemplateOutlet, IgxGridForOfDirective, IgxSummaryCellComponent, IgxGridNotGroupedPipe], template: "@if (summaries.size) {\n    @if (grid.summariesMargin) {\n        <div\n            class=\"igx-grid__summaries-patch\"\n            [style.min-width.px]=\"grid.summariesMargin\"\n            [style.flex-basis.px]=\"grid.summariesMargin\"\n            (pointerdown)=\"$event.preventDefault()\"\n        ></div>\n    }\n    @if (pinnedStartColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedStartColumns)\"></ng-container>\n    }\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\" [igxForSizePropName]='\"calcPixelWidth\"' #igxDirRef>\n        <igx-grid-summary-cell\n            class=\"igx-grid-summary igx-grid-summary--fw\"\n            role=\"cell\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\n            [rowIndex]=\"index\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [summaryResults]=\"getColumnSummaries(col.field)!\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [summaryFormatter]=\"col.summaryFormatter\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    </ng-template>\n    @if (pinnedEndColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedEndColumns)\"></ng-container>\n    }\n}\n\n<ng-template #summaryCellTemplate let-col let-columns=\"columns\">\n    @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n        <igx-grid-summary-cell\n            role=\"cell\"\n            class=\"igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-first]=\"col.isFirstPinned\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [rowIndex]=\"index\"\n            [summaryResults]=\"getColumnSummaries(col.field)!\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    }\n</ng-template>\n", styles: ["@layer ig.base{.igx-grid-summary{position:relative;display:flex;flex-direction:column;flex:1 1 0%;padding-block:0;padding-inline:max(var(--is-large, 1)*max(1.5rem,-1 * 1.5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));background:var(--background-color, inherit);overflow:hidden;outline-style:none;border-inline-end:var(--border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{display:flex;align-items:center;position:relative;padding-block:max(var(--is-large, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-large, var(--ig-spacing, var(--ig-spacing))),var(--is-medium, 1)*max(.125rem,-1 * .125rem)*var(--ig-spacing-medium, var(--ig-spacing, var(--ig-spacing))),var(--is-small, 1)*max(0rem,-1 * 0rem)*var(--ig-spacing-small, var(--ig-spacing, var(--ig-spacing))));padding-inline:0;font-size:.75rem}.igx-grid-summary__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--label-color);min-width:1.875rem;margin-inline-end:.1875rem}.igx-grid-summary__label:hover{color:var(--label-hover-color)}.igx-grid-summary__result{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--result-color);font-weight:600;flex:1 1 auto;text-align:end}.igx-grid-summary--pinned{position:relative;z-index:1}.igx-grid-summary--active.igx-grid-summary--pinned:after{width:calc(100% - .0625rem)}.igx-grid-summary--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-first:dir(ltr){border-inline-start:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-first:dir(rtl){border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}@media print{.igx-grid-summary--pinned-first{border-inline-start:var(--pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) var(--pinned-border-color)}.igx-grid-summary--pinned-last:after{inset-inline-start:.0625rem}@media print{.igx-grid-summary--pinned-last{border-inline-end:var(--pinned-border-width) var(--pinned-border-style) #999}}.igx-grid-summary--fw{flex-grow:0}.igx-grid-summary:after{content:\"\";position:absolute;inset:0;pointer-events:none}.igx-grid-summary--active:after{width:100%;height:100%;box-shadow:inset 0 0 0 .0625rem var(--cell-active-border-color);pointer-events:none}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-grid-summary{padding-inline:max(var(--is-large, 1)*max(1rem,-1 * 1rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.75rem,-1 * .75rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))));border-top:var(--border-width) var(--border-style) var(--border-color)}.igx-grid-summary__item{min-height:max(var(--is-large, 1)*max(2.25rem,-1 * 2.25rem),var(--is-medium, 1)*max(1.875rem,-1 * 1.875rem),var(--is-small, 1)*max(1.5rem,-1 * 1.5rem));font-size:initial}.igx-grid-summary__label{font-family:var(--ig-caption-font-family, var(--ig-font-family));font-size:var(--ig-caption-font-size);font-weight:var(--ig-caption-font-weight);font-style:var(--ig-caption-font-style);line-height:var(--ig-caption-line-height);letter-spacing:var(--ig-caption-letter-spacing);text-transform:var(--ig-caption-text-transform);margin-top:var(--ig-caption-margin-top);margin-bottom:var(--ig-caption-margin-bottom);margin-inline-end:initial}.igx-grid-summary__result{font-family:var(--ig-detail-2-font-family, var(--ig-font-family));font-size:var(--ig-detail-2-font-size);font-weight:var(--ig-detail-2-font-weight);font-style:var(--ig-detail-2-font-style);line-height:var(--ig-detail-2-line-height);letter-spacing:var(--ig-detail-2-letter-spacing);text-transform:var(--ig-detail-2-text-transform);margin-top:var(--ig-detail-2-margin-top);margin-bottom:var(--ig-detail-2-margin-bottom)}}}\n"] }]
         }], propDecorators: { summaries: [{
                 type: Input
             }], gridID: [{
@@ -22245,7 +21961,7 @@ class IgxGridNavigationService {
         // this is workaround: endTopOffset - containerHeight > 5 and should be replaced with: containerHeight < endTopOffset
         // when the page is zoomed the grid does not scroll the row completely in the view
         return !targetRow || targetRow.offsetTop < Math.abs(this.containerTopOffset)
-            || containerHeight && endTopOffset - containerHeight > 5;
+            || (containerHeight && endTopOffset - containerHeight > 5);
     }
     shouldNotifyVirtualizedKeyboardSelection(key, rowIndex, visibleColIndex) {
         // Any navigation key that ends up scrolling activates the target cell from the
@@ -22269,7 +21985,7 @@ class IgxGridNavigationService {
             rowIndex - this.grid.pinnedDataView.length : rowIndex;
         this.grid.verticalScrollContainer.scrollTo(scrollRowIndex);
         this.grid.verticalScrollContainer.chunkLoad
-            .pipe(first$1()).subscribe(() => {
+            .pipe(first()).subscribe(() => {
             this.pendingNavigation = false;
             if (cb) {
                 cb();
@@ -22277,7 +21993,7 @@ class IgxGridNavigationService {
         });
     }
     performHorizontalScrollToCell(visibleColumnIndex, cb) {
-        if (this.grid.rowList < 1 && this.grid.summariesRowList.length < 1 && this.grid.hasColumnGroups) {
+        if (this.grid.rowList.length < 1 && this.grid.summariesRowList.length < 1 && this.grid.hasColumnGroups) {
             let column = this.grid.getColumnByVisibleIndex(visibleColumnIndex);
             while (column.parent) {
                 column = column.parent;
@@ -22289,7 +22005,7 @@ class IgxGridNavigationService {
         }
         this.pendingNavigation = true;
         this.grid.parentVirtDir.chunkLoad
-            .pipe(first$1())
+            .pipe(first())
             .subscribe(() => {
             this.pendingNavigation = false;
             if (cb) {
@@ -22400,7 +22116,7 @@ class IgxGridNavigationService {
                 }
                 const editCell = this.grid.crudService.cell;
                 this.grid.verticalScrollContainer.chunkLoad
-                    .pipe(first$1()).subscribe(() => {
+                    .pipe(first()).subscribe(() => {
                     if (editCell && this.grid.rowList.map(r => r.index).indexOf(editCell.rowIndex) < 0) {
                         this.grid.tbody.nativeElement.focus({ preventScroll: true });
                     }
@@ -22628,7 +22344,7 @@ class IgxGridNavigationService {
         this.grid.navigateTo(rowIndex, visibleColIndex, cb);
     }
     emitKeyDown(type, rowIndex, event) {
-        const row = this.grid.summariesRowList.toArray().concat(this.grid.rowList.toArray()).find(r => r.index === rowIndex);
+        const row = this.grid.summariesRowList.find((r) => r.index === rowIndex) || this.grid.rowList.find((r) => r.index === rowIndex);
         if (!row) {
             return;
         }
@@ -22660,6 +22376,7 @@ class IgxGridNavigationService {
                 return i;
             }
         }
+        return undefined;
     }
     getRowElementByIndex(index) {
         if (this.grid.hasDetails) {
@@ -22668,7 +22385,7 @@ class IgxGridNavigationService {
                 return detail;
             }
         }
-        return this.grid.rowList.toArray().concat(this.grid.summariesRowList.toArray()).find(r => r.index === index)?.nativeElement;
+        return this.grid.rowList.find((r) => r.index === index)?.nativeElement || this.grid.summariesRowList.find((r) => r.index === index)?.nativeElement || null;
     }
     isValidPosition(rowIndex, colIndex) {
         const length = this.grid.totalItemCount ?? this.grid.dataView.length;
@@ -22734,7 +22451,7 @@ class IgxGridNavigationService {
             this.grid.visibleColumns.sort((c1, c2) => c1.visibleIndex - c2.visibleIndex)
                 .find(c => this.isColumnFullyVisible(c.visibleIndex))?.visibleIndex;
         const column = this.grid.visibleColumns.find((col) => !col.columnLayout && col.visibleIndex === colIndex);
-        const rowInd = rowIndex ? rowIndex : this.grid.rowList.find(r => !this.shouldPerformVerticalScroll(r.index, colIndex))?.index;
+        const rowInd = rowIndex ? rowIndex : this.grid.rowList.find((r) => !this.shouldPerformVerticalScroll(r.index, colIndex))?.index;
         const node = {
             row: rowInd ?? 0,
             column: column?.visibleIndex ?? 0, level: column?.level ?? 0,
@@ -22801,7 +22518,7 @@ class IgxGridNavigationService {
         }
         const clearSelection = this.grid.columnSelection === GridSelectionMode.single;
         const columnsToSelect = !column.children ? [column.field] :
-            column.allChildren.filter(c => !c.hidden && c.selectable && !c.columnGroup).map(c => c.field);
+            column.allChildren.filter((c) => !c.hidden && c.selectable && !c.columnGroup).map((c) => c.field);
         if (column.selected) {
             this.grid.selectionService.deselectColumns(columnsToSelect, event);
         }
@@ -22929,14 +22646,14 @@ class IgxGridValidationService {
      */
     isFieldInvalid(formGroup, fieldName) {
         const path = this.getFormControlPath(fieldName);
-        return formGroup.get(path)?.invalid && formGroup.get(path)?.touched;
+        return (formGroup.get(path)?.invalid && formGroup.get(path)?.touched);
     }
     /**
      * Checks the validity of the native ngControl after edit
      */
     isFieldValidAfterEdit(formGroup, fieldName) {
         const path = this.getFormControlPath(fieldName);
-        return !formGroup.get(path)?.invalid && formGroup.get(path)?.dirty;
+        return (!formGroup.get(path)?.invalid && formGroup.get(path)?.dirty);
     }
     /**
      * @hidden
@@ -23274,9 +22991,9 @@ class IgxGridCellComponent {
                 const scrollOffset = this.grid.verticalScrollContainer.scrollPosition + (event.y - this.grid.tbody.nativeElement.getBoundingClientRect().y);
                 const targetRowIndex = this.grid.verticalScrollContainer.getIndexAtScroll(scrollOffset);
                 if (targetRowIndex != this.rowIndex) {
-                    const row = this.grid.rowList.toArray().find(x => x.index === targetRowIndex);
-                    const actualTarget = row.cells.find(x => x.column === this.column);
-                    actualTarget.pointerdown(event);
+                    const row = this.grid.rowList.find((x) => x.index === targetRowIndex);
+                    const actualTarget = row?.cells?.find((x) => x.column === this.column);
+                    actualTarget?.pointerdown(event);
                     return;
                 }
             }
@@ -23939,7 +23656,7 @@ class IgxGridCellComponent {
         if (this.isInvalid && !isTargetErrorIcon) {
             this.cdr.detectChanges();
             this.openErrorTooltip();
-            this.grid.activeNodeChange.pipe(first$1()).subscribe(() => {
+            this.grid.activeNodeChange.pipe(first()).subscribe(() => {
                 this.closeErrorTooltip();
             });
         }
@@ -24020,7 +23737,7 @@ class IgxGridCellComponent {
                  * Also we need to keep the notifyChanges below, because of the current
                  * change detection cycle when we have editing with enabled transactions
                  */
-                if (this.grid.sortingExpressions.length && this.grid.sortingExpressions.indexOf(editableCell.column.field)) {
+                if (this.grid.sortingExpressions.length && this.grid.sortingExpressions.indexOf(editableCell.column.field) !== -1) {
                     this.grid.cdr.detectChanges();
                 }
                 if (editableArgs && editableArgs.cancel) {
@@ -24061,7 +23778,7 @@ class IgxGridCellComponent {
         return new IgxGridCell(this.grid, rowID, this.column);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridCellComponent, isStandalone: true, selector: "igx-grid-cell", inputs: { column: "column", isPlaceholder: "isPlaceholder", isMerged: "isMerged", intRow: "intRow", row: "row", rowData: "rowData", columnData: "columnData", cellTemplate: "cellTemplate", cellValidationErrorTemplate: "cellValidationErrorTemplate", pinnedIndicator: "pinnedIndicator", value: "value", formatter: "formatter", visibleColumnIndex: "visibleColumnIndex", cellSelectionMode: "cellSelectionMode", lastSearchInfo: "lastSearchInfo", lastPinned: "lastPinned", firstPinned: "firstPinned", editMode: ["editMode", "editMode", booleanAttribute], width: "width", active: "active", displayPinnedChip: "displayPinnedChip" }, host: { listeners: { "dblclick": "onDoubleClick($event)", "click": "onClick($event)" }, properties: { "class.igx-grid__td--new": "this.isEmptyAddRowCell", "attr.data-rowIndex": "this.rowIndex", "attr.data-visibleIndex": "this.visibleColumnIndex", "attr.id": "this.attrCellID", "attr.title": "this.title", "class.igx-grid__td--bool-true": "this.booleanClass", "class.igx-grid__td--pinned-last": "this.lastPinned", "class.igx-grid__td--pinned-first": "this.firstPinned", "class.igx-grid__td--editing": "this.editMode", "attr.role": "this.role", "attr.aria-readonly": "this.readonly", "attr.aria-describedby": "this.ariaDescribeBy", "class.igx-grid__td--invalid": "this.isInvalid", "attr.aria-invalid": "this.isInvalid", "class.igx-grid__td--valid": "this.isValidAfterEdit", "class.igx-grid__td--active": "this.active", "attr.aria-selected": "this.ariaSelected", "class.igx-grid__td--selected": "this.selected", "class.igx-grid__td--column-selected": "this.columnSelected", "class.igx-grid__td--row-pinned-first": "this.displayPinnedChip", "style.min-height.px": "this.minHeight", "attr.aria-rowindex": "this.ariaRowIndex", "attr.aria-colindex": "this.ariaColIndex" } }, viewQueries: [{ propertyName: "errorIcon", first: true, predicate: ["errorIcon"], descendants: true, read: IgxIconComponent }, { propertyName: "defaultErrorTemplate", first: true, predicate: ["defaultError"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCellTemplate", first: true, predicate: ["defaultCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyCellTemplate", first: true, predicate: ["emptyCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultPinnedIndicator", first: true, predicate: ["defaultPinnedIndicator"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inlineEditorTemplate", first: true, predicate: ["inlineEditor"], descendants: true, read: TemplateRef, static: true }, { propertyName: "addRowCellTemplate", first: true, predicate: ["addRowCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "highlight", first: true, predicate: IgxTextHighlightDirective, descendants: true, read: IgxTextHighlightDirective }, { propertyName: "errorTooltip", predicate: ["error"], descendants: true, read: IgxTooltipDirective }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n  @if (displayPinnedChip) {\n    <igx-chip\n      class=\"igx-grid__td--pinned-chip\"\n      [disabled]=\"true\"\n      [style.--ig-size]=\"1\"\n      >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n    >\n  }\n</ng-template>\n<ng-template #defaultCell>\n  @if (\n    (column.dataType !== 'boolean' && column.dataType !== 'image') ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData : columnData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{\n        formatter\n          ? (value | columnFormatter: formatter : rowData : columnData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      }}\n    </div>\n  }\n  @if (column.dataType === 'boolean' && !this.formatter) {\n    <igx-icon\n      family=\"default\"\n      [name]=\"value ? 'confirm' : 'close'\"\n      [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n    >\n    </igx-icon>\n  }\n  @if (column.dataType === 'image') {\n    <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n  }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n  @if (\n    column.dataType !== 'boolean' ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{ !isEmptyAddRowCell ? value : column.header || column.field }}\n    </div>\n  }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n  @if (column.dataType === 'string' || column.dataType === 'image') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-input-group>\n        <input\n          igxInput\n          [attr.aria-describedby]=\"ariaDescribeBy\"\n          [attr.aria-invalid]=\"isInvalid\"\n          [igxFocus]=\"true\"\n          [igxTextSelection]=\"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  }\n  @if (column.dataType === 'number') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [igxTextSelection]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [formControl]=\"formControl\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'boolean') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-checkbox\n        [checked]=\"editValue\"\n        [igxFocus]=\"true\"\n        [disableRipple]=\"true\"\n        [formControl]=\"formControl\"\n      ></igx-checkbox>\n    </ng-container>\n  }\n  @if (column.dataType === 'date') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-date-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [weekStart]=\"column.pipeArgs.weekStart\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n        [inputFormat]=\"\n          $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n        \"\n        [displayFormat]=\"column.pipeArgs.format\"\n      >\n      </igx-date-picker>\n    </ng-container>\n  }\n  @if (column.dataType === 'time') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-time-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [inputFormat]=\"\n          $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n        \"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n      ></igx-time-picker>\n    </ng-container>\n  }\n  @if (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        [locale]=\"grid.locale\"\n        [igxDateTimeEditor]=\"\n          $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n        \"\n        [defaultFormatType]=\"column.dataType\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [igxFocus]=\"true\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'currency') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      @if (grid.currencyPositionLeft) {\n        <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n      }\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [igxTextSelection]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [formControl]=\"formControl\"\n      />\n      @if (!grid.currencyPositionLeft) {\n        <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n      }\n    </igx-input-group>\n  }\n  @if (column.dataType === 'percent') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [igxTextSelection]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [formControl]=\"formControl\"\n      />\n      <igx-suffix>\n        {{ editValue | percent: column.pipeArgs.digitsInfo : grid.locale }}\n      </igx-suffix>\n    </igx-input-group>\n  }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n  <igx-icon\n    family=\"default\"\n    name=\"error\"\n    #errorIcon\n    [igxTooltipTarget]=\"tooltipRef\"\n    (mouseover)=\"errorShowing = true\"\n    (mouseout)=\"errorShowing = false\"\n  >\n  </igx-icon>\n  <div [id]=\"ariaErrorMessage\" igxTooltip #error #tooltipRef=\"tooltip\">\n    <div [style.width]=\"'max-content'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          cellValidationErrorTemplate || defaultError;\n          context: context\n        \"\n      ></ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultError>\n  @let errors = formControl.errors;\n  @if (errors?.['required']) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_required_validation_error }}\n    </div>\n  }\n  @if (errors?.['minlength']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_length_validation_error\n          | igxStringReplace: '{0}' : errors.minlength.requiredLength\n      }}\n    </div>\n  }\n  @if (errors?.['maxlength']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_length_validation_error\n          | igxStringReplace: '{0}' : errors.maxlength.requiredLength\n      }}\n    </div>\n  }\n  @if (errors?.['min']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_validation_error\n          | igxStringReplace: '{0}' : errors.min.min\n      }}\n    </div>\n  }\n  @if (errors?.['max']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_validation_error\n          | igxStringReplace: '{0}' : errors.max.max\n      }}\n    </div>\n  }\n  @if (errors?.['email']) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n  }\n  @if (errors?.['pattern']) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_pattern_validation_error }}\n    </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "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: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { 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: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "showTriggers", "hideTriggers", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IgxGridCellComponent, isStandalone: true, selector: "igx-grid-cell", inputs: { column: "column", isPlaceholder: "isPlaceholder", isMerged: "isMerged", intRow: "intRow", row: "row", rowData: "rowData", columnData: "columnData", cellTemplate: "cellTemplate", cellValidationErrorTemplate: "cellValidationErrorTemplate", pinnedIndicator: "pinnedIndicator", value: "value", formatter: "formatter", visibleColumnIndex: "visibleColumnIndex", cellSelectionMode: "cellSelectionMode", lastSearchInfo: "lastSearchInfo", lastPinned: "lastPinned", firstPinned: "firstPinned", editMode: ["editMode", "editMode", booleanAttribute], width: "width", active: "active", displayPinnedChip: "displayPinnedChip" }, host: { listeners: { "dblclick": "onDoubleClick($event)", "click": "onClick($event)" }, properties: { "class.igx-grid__td--new": "this.isEmptyAddRowCell", "attr.data-rowIndex": "this.rowIndex", "attr.data-visibleIndex": "this.visibleColumnIndex", "attr.id": "this.attrCellID", "attr.title": "this.title", "class.igx-grid__td--bool-true": "this.booleanClass", "class.igx-grid__td--pinned-last": "this.lastPinned", "class.igx-grid__td--pinned-first": "this.firstPinned", "class.igx-grid__td--editing": "this.editMode", "attr.role": "this.role", "attr.aria-readonly": "this.readonly", "attr.aria-describedby": "this.ariaDescribeBy", "class.igx-grid__td--invalid": "this.isInvalid", "attr.aria-invalid": "this.isInvalid", "class.igx-grid__td--valid": "this.isValidAfterEdit", "class.igx-grid__td--active": "this.active", "attr.aria-selected": "this.ariaSelected", "class.igx-grid__td--selected": "this.selected", "class.igx-grid__td--column-selected": "this.columnSelected", "class.igx-grid__td--row-pinned-first": "this.displayPinnedChip", "style.min-height.px": "this.minHeight", "attr.aria-rowindex": "this.ariaRowIndex", "attr.aria-colindex": "this.ariaColIndex" } }, viewQueries: [{ propertyName: "errorIcon", first: true, predicate: ["errorIcon"], descendants: true, read: IgxIconComponent }, { propertyName: "defaultErrorTemplate", first: true, predicate: ["defaultError"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCellTemplate", first: true, predicate: ["defaultCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyCellTemplate", first: true, predicate: ["emptyCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultPinnedIndicator", first: true, predicate: ["defaultPinnedIndicator"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inlineEditorTemplate", first: true, predicate: ["inlineEditor"], descendants: true, read: TemplateRef, static: true }, { propertyName: "addRowCellTemplate", first: true, predicate: ["addRowCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "highlight", first: true, predicate: IgxTextHighlightDirective, descendants: true, read: IgxTextHighlightDirective }, { propertyName: "errorTooltip", predicate: ["error"], descendants: true, read: IgxTooltipDirective }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n  @if (displayPinnedChip) {\n    <igx-chip\n      class=\"igx-grid__td--pinned-chip\"\n      [disabled]=\"true\"\n      [style.--ig-size]=\"1\"\n      >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n    >\n  }\n</ng-template>\n<ng-template #defaultCell>\n  @if (\n    (column.dataType !== 'boolean' && column.dataType !== 'image') ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData : columnData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{\n        formatter\n          ? (value | columnFormatter: formatter : rowData : columnData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      }}\n    </div>\n  }\n  @if (column.dataType === 'boolean' && !this.formatter) {\n    <igx-icon\n      family=\"default\"\n      [name]=\"value ? 'confirm' : 'close'\"\n      [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n    >\n    </igx-icon>\n  }\n  @if (column.dataType === 'image') {\n    <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n  }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n  @if (\n    column.dataType !== 'boolean' ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{ !isEmptyAddRowCell ? value : column.header || column.field }}\n    </div>\n  }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n  @if (column.dataType === 'string' || column.dataType === 'image') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-input-group>\n        <input\n          igxInput\n          [attr.aria-describedby]=\"ariaDescribeBy\"\n          [attr.aria-invalid]=\"isInvalid\"\n          [igxFocus]=\"true\"\n          [igxTextSelection]=\"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  }\n  @if (column.dataType === 'number') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [igxTextSelection]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [formControl]=\"formControl\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'boolean') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-checkbox\n        [checked]=\"editValue\"\n        [igxFocus]=\"true\"\n        [disableRipple]=\"true\"\n        [formControl]=\"formControl\"\n      ></igx-checkbox>\n    </ng-container>\n  }\n  @if (column.dataType === 'date') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-date-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [weekStart]=\"column.pipeArgs.weekStart!\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n        [displayFormat]=\"column.pipeArgs.format!\"\n      >\n      </igx-date-picker>\n    </ng-container>\n  }\n  @if (column.dataType === 'time') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-time-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n        [displayFormat]=\"column.pipeArgs.format!\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n      ></igx-time-picker>\n    </ng-container>\n  }\n  @if (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        [locale]=\"grid.locale\"\n        [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat!\"\n        [defaultFormatType]=\"column.dataType\"\n        [displayFormat]=\"column.pipeArgs.format!\"\n        [igxFocus]=\"true\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'currency') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      @if (grid.currencyPositionLeft) {\n        <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n      }\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [igxTextSelection]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [formControl]=\"formControl\"\n      />\n      @if (!grid.currencyPositionLeft) {\n        <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n      }\n    </igx-input-group>\n  }\n  @if (column.dataType === 'percent') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [igxTextSelection]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [formControl]=\"formControl\"\n      />\n      <igx-suffix>\n        {{ editValue | percent: column.pipeArgs.digitsInfo : grid.locale }}\n      </igx-suffix>\n    </igx-input-group>\n  }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n  <igx-icon\n    family=\"default\"\n    name=\"error\"\n    #errorIcon\n    [igxTooltipTarget]=\"tooltipRef\"\n    (mouseover)=\"errorShowing = true\"\n    (mouseout)=\"errorShowing = false\"\n  >\n  </igx-icon>\n  <div [id]=\"ariaErrorMessage\" igxTooltip #error #tooltipRef=\"tooltip\">\n    <div [style.width]=\"'max-content'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          cellValidationErrorTemplate || defaultError;\n          context: context\n        \"\n      ></ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultError>\n  @let errors = formControl.errors;\n  @if (errors?.['required']) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_required_validation_error }}\n    </div>\n  }\n  @if (errors?.['minlength']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_length_validation_error!\n          | igxStringReplace: '{0}' : errors.minlength.requiredLength\n      }}\n    </div>\n  }\n  @if (errors?.['maxlength']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_length_validation_error!\n          | igxStringReplace: '{0}' : errors.maxlength.requiredLength\n      }}\n    </div>\n  }\n  @if (errors?.['min']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_validation_error!\n          | igxStringReplace: '{0}' : errors.min.min\n      }}\n    </div>\n  }\n  @if (errors?.['max']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_validation_error!\n          | igxStringReplace: '{0}' : errors.max.max\n      }}\n    </div>\n  }\n  @if (errors?.['email']) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n  }\n  @if (errors?.['pattern']) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_pattern_validation_error }}\n    </div>\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "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: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { 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: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "directive", type: IgxSuffixDirective, selector: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "showTriggers", "hideTriggers", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IgxGridCellComponent, decorators: [{
             type: Component,
@@ -24091,7 +23808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         IgxGridCellImageAltPipe,
                         IgxStringReplacePipe,
                         IgxColumnFormatterPipe
-                    ], template: "<ng-template #defaultPinnedIndicator>\n  @if (displayPinnedChip) {\n    <igx-chip\n      class=\"igx-grid__td--pinned-chip\"\n      [disabled]=\"true\"\n      [style.--ig-size]=\"1\"\n      >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n    >\n  }\n</ng-template>\n<ng-template #defaultCell>\n  @if (\n    (column.dataType !== 'boolean' && column.dataType !== 'image') ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData : columnData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{\n        formatter\n          ? (value | columnFormatter: formatter : rowData : columnData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      }}\n    </div>\n  }\n  @if (column.dataType === 'boolean' && !this.formatter) {\n    <igx-icon\n      family=\"default\"\n      [name]=\"value ? 'confirm' : 'close'\"\n      [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n    >\n    </igx-icon>\n  }\n  @if (column.dataType === 'image') {\n    <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n  }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n  @if (\n    column.dataType !== 'boolean' ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{ !isEmptyAddRowCell ? value : column.header || column.field }}\n    </div>\n  }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n  @if (column.dataType === 'string' || column.dataType === 'image') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-input-group>\n        <input\n          igxInput\n          [attr.aria-describedby]=\"ariaDescribeBy\"\n          [attr.aria-invalid]=\"isInvalid\"\n          [igxFocus]=\"true\"\n          [igxTextSelection]=\"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  }\n  @if (column.dataType === 'number') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [igxTextSelection]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [formControl]=\"formControl\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'boolean') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-checkbox\n        [checked]=\"editValue\"\n        [igxFocus]=\"true\"\n        [disableRipple]=\"true\"\n        [formControl]=\"formControl\"\n      ></igx-checkbox>\n    </ng-container>\n  }\n  @if (column.dataType === 'date') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-date-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [weekStart]=\"column.pipeArgs.weekStart\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n        [inputFormat]=\"\n          $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n        \"\n        [displayFormat]=\"column.pipeArgs.format\"\n      >\n      </igx-date-picker>\n    </ng-container>\n  }\n  @if (column.dataType === 'time') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-time-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [inputFormat]=\"\n          $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n        \"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n      ></igx-time-picker>\n    </ng-container>\n  }\n  @if (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        [locale]=\"grid.locale\"\n        [igxDateTimeEditor]=\"\n          $safeNavigationMigration(column.editorOptions?.dateTimeFormat)\n        \"\n        [defaultFormatType]=\"column.dataType\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [igxFocus]=\"true\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'currency') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      @if (grid.currencyPositionLeft) {\n        <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n      }\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [igxTextSelection]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [formControl]=\"formControl\"\n      />\n      @if (!grid.currencyPositionLeft) {\n        <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n      }\n    </igx-input-group>\n  }\n  @if (column.dataType === 'percent') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [igxTextSelection]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [formControl]=\"formControl\"\n      />\n      <igx-suffix>\n        {{ editValue | percent: column.pipeArgs.digitsInfo : grid.locale }}\n      </igx-suffix>\n    </igx-input-group>\n  }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n  <igx-icon\n    family=\"default\"\n    name=\"error\"\n    #errorIcon\n    [igxTooltipTarget]=\"tooltipRef\"\n    (mouseover)=\"errorShowing = true\"\n    (mouseout)=\"errorShowing = false\"\n  >\n  </igx-icon>\n  <div [id]=\"ariaErrorMessage\" igxTooltip #error #tooltipRef=\"tooltip\">\n    <div [style.width]=\"'max-content'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          cellValidationErrorTemplate || defaultError;\n          context: context\n        \"\n      ></ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultError>\n  @let errors = formControl.errors;\n  @if (errors?.['required']) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_required_validation_error }}\n    </div>\n  }\n  @if (errors?.['minlength']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_length_validation_error\n          | igxStringReplace: '{0}' : errors.minlength.requiredLength\n      }}\n    </div>\n  }\n  @if (errors?.['maxlength']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_length_validation_error\n          | igxStringReplace: '{0}' : errors.maxlength.requiredLength\n      }}\n    </div>\n  }\n  @if (errors?.['min']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_validation_error\n          | igxStringReplace: '{0}' : errors.min.min\n      }}\n    </div>\n  }\n  @if (errors?.['max']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_validation_error\n          | igxStringReplace: '{0}' : errors.max.max\n      }}\n    </div>\n  }\n  @if (errors?.['email']) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n  }\n  @if (errors?.['pattern']) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_pattern_validation_error }}\n    </div>\n  }\n</ng-template>\n" }]
+                    ], template: "<ng-template #defaultPinnedIndicator>\n  @if (displayPinnedChip) {\n    <igx-chip\n      class=\"igx-grid__td--pinned-chip\"\n      [disabled]=\"true\"\n      [style.--ig-size]=\"1\"\n      >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip\n    >\n  }\n</ng-template>\n<ng-template #defaultCell>\n  @if (\n    (column.dataType !== 'boolean' && column.dataType !== 'image') ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData : columnData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{\n        formatter\n          ? (value | columnFormatter: formatter : rowData : columnData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      }}\n    </div>\n  }\n  @if (column.dataType === 'boolean' && !this.formatter) {\n    <igx-icon\n      family=\"default\"\n      [name]=\"value ? 'confirm' : 'close'\"\n      [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\"\n    >\n    </igx-icon>\n  }\n  @if (column.dataType === 'image') {\n    <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n  }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n  @if (\n    column.dataType !== 'boolean' ||\n    (column.dataType === 'boolean' && this.formatter)\n  ) {\n    <div\n      igxTextHighlight\n      class=\"igx-grid__td-text\"\n      [cssClass]=\"highlightClass\"\n      [activeCssClass]=\"activeHighlightClass\"\n      [groupName]=\"gridID\"\n      [value]=\"\n        formatter\n          ? (value | columnFormatter: formatter : rowData)\n          : column.dataType === 'number'\n            ? (value | number: column.pipeArgs.digitsInfo : grid.locale)\n            : column.dataType === 'date' ||\n                column.dataType === 'time' ||\n                column.dataType === 'dateTime'\n              ? (value\n                | date\n                  : column.pipeArgs.format\n                  : column.pipeArgs.timezone\n                  : grid.locale)\n              : column.dataType === 'currency'\n                ? (value\n                  | currency\n                    : currencyCode\n                    : column.pipeArgs.display\n                    : column.pipeArgs.digitsInfo\n                    : grid.locale)\n                : column.dataType === 'percent'\n                  ? (value | percent: column.pipeArgs.digitsInfo : grid.locale)\n                  : value\n      \"\n      [row]=\"rowData\"\n      [column]=\"this.column.field\"\n      [containerClass]=\"'igx-grid__td-text'\"\n      [metadata]=\"searchMetadata\"\n    >\n      {{ !isEmptyAddRowCell ? value : column.header || column.field }}\n    </div>\n  }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n  @if (column.dataType === 'string' || column.dataType === 'image') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-input-group>\n        <input\n          igxInput\n          [attr.aria-describedby]=\"ariaDescribeBy\"\n          [attr.aria-invalid]=\"isInvalid\"\n          [igxFocus]=\"true\"\n          [igxTextSelection]=\"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  }\n  @if (column.dataType === 'number') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [igxTextSelection]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [formControl]=\"formControl\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'boolean') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-checkbox\n        [checked]=\"editValue\"\n        [igxFocus]=\"true\"\n        [disableRipple]=\"true\"\n        [formControl]=\"formControl\"\n      ></igx-checkbox>\n    </ng-container>\n  }\n  @if (column.dataType === 'date') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-date-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [weekStart]=\"column.pipeArgs.weekStart!\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n        [displayFormat]=\"column.pipeArgs.format!\"\n      >\n      </igx-date-picker>\n    </ng-container>\n  }\n  @if (column.dataType === 'time') {\n    <ng-container [formGroup]=\"formGroup\">\n      <igx-time-picker\n        [style.width.%]=\"100\"\n        mode=\"dropdown\"\n        [locale]=\"grid.locale\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat!\"\n        [displayFormat]=\"column.pipeArgs.format!\"\n        [(value)]=\"editValue\"\n        [igxFocus]=\"true\"\n        [formControl]=\"formControl\"\n      ></igx-time-picker>\n    </ng-container>\n  }\n  @if (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        [locale]=\"grid.locale\"\n        [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat!\"\n        [defaultFormatType]=\"column.dataType\"\n        [displayFormat]=\"column.pipeArgs.format!\"\n        [igxFocus]=\"true\"\n      />\n    </igx-input-group>\n  }\n  @if (column.dataType === 'currency') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      @if (grid.currencyPositionLeft) {\n        <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n      }\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [igxTextSelection]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [formControl]=\"formControl\"\n      />\n      @if (!grid.currencyPositionLeft) {\n        <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n      }\n    </igx-input-group>\n  }\n  @if (column.dataType === 'percent') {\n    <igx-input-group [formGroup]=\"formGroup\">\n      <input\n        igxInput\n        [attr.aria-describedby]=\"ariaDescribeBy\"\n        [attr.aria-invalid]=\"isInvalid\"\n        [igxFocus]=\"true\"\n        [igxTextSelection]=\"true\"\n        [step]=\"step\"\n        type=\"number\"\n        [formControl]=\"formControl\"\n      />\n      <igx-suffix>\n        {{ editValue | percent: column.pipeArgs.digitsInfo : grid.locale }}\n      </igx-suffix>\n    </igx-input-group>\n  }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n  <igx-icon\n    family=\"default\"\n    name=\"error\"\n    #errorIcon\n    [igxTooltipTarget]=\"tooltipRef\"\n    (mouseover)=\"errorShowing = true\"\n    (mouseout)=\"errorShowing = false\"\n  >\n  </igx-icon>\n  <div [id]=\"ariaErrorMessage\" igxTooltip #error #tooltipRef=\"tooltip\">\n    <div [style.width]=\"'max-content'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          cellValidationErrorTemplate || defaultError;\n          context: context\n        \"\n      ></ng-container>\n    </div>\n  </div>\n}\n\n<ng-template #defaultError>\n  @let errors = formControl.errors;\n  @if (errors?.['required']) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_required_validation_error }}\n    </div>\n  }\n  @if (errors?.['minlength']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_length_validation_error!\n          | igxStringReplace: '{0}' : errors.minlength.requiredLength\n      }}\n    </div>\n  }\n  @if (errors?.['maxlength']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_length_validation_error!\n          | igxStringReplace: '{0}' : errors.maxlength.requiredLength\n      }}\n    </div>\n  }\n  @if (errors?.['min']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_min_validation_error!\n          | igxStringReplace: '{0}' : errors.min.min\n      }}\n    </div>\n  }\n  @if (errors?.['max']) {\n    <div>\n      {{\n        grid.resourceStrings.igx_grid_max_validation_error!\n          | igxStringReplace: '{0}' : errors.max.max\n      }}\n    </div>\n  }\n  @if (errors?.['email']) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n  }\n  @if (errors?.['pattern']) {\n    <div>\n      {{ grid.resourceStrings.igx_grid_pattern_validation_error }}\n    </div>\n  }\n</ng-template>\n" }]
         }], propDecorators: { isEmptyAddRowCell: [{
                 type: HostBinding,
                 args: ['class.igx-grid__td--new']
@@ -24292,7 +24009,7 @@ class IgxGridMRLNavigationService extends IgxGridNavigationService {
             scrollPos.leftScroll : scrollPos.rightScroll - this.displayContainerWidth;
         this.forOfDir().getScroll().scrollLeft = nextScroll;
         this.grid.parentVirtDir.chunkLoad
-            .pipe(first$1())
+            .pipe(first())
             .subscribe(() => {
             if (cb) {
                 cb();
@@ -24319,7 +24036,7 @@ class IgxGridMRLNavigationService extends IgxGridNavigationService {
             this.grid.verticalScrollContainer.addScrollTop(Math.abs(pos.rowBottom - this.scrollTop - containerHeight));
         }
         this.grid.verticalScrollContainer.chunkLoad
-            .pipe(first$1()).subscribe(() => {
+            .pipe(first()).subscribe(() => {
             if (cb) {
                 cb();
             }
@@ -24380,7 +24097,7 @@ class IgxGridMRLNavigationService extends IgxGridNavigationService {
             this.activeNode.column = col.visibleIndex;
             const layout = this.layout(this.activeNode.column);
             const nextLayout = { ...this.activeNode.layout, rowStart: layout.rowStart, rowEnd: layout.rowEnd };
-            this.setActiveNode({ row: this.activeNode.row, layout: nextLayout });
+            this.setActiveNode({ row: this.activeNode.row, column: this.activeNode.column, layout: nextLayout });
             return;
         }
         this.horizontalNav(event, key, -1, 'headerCell');
@@ -24637,7 +24354,7 @@ class GridBaseAPIService {
         }
     }
     get_row_by_index(rowIndex) {
-        return this.grid.rowList.find((row) => row.index === rowIndex);
+        return this.grid.rowList.find(row => row.index === rowIndex);
     }
     /**
      * Gets the rowID of the record at the specified data view index
@@ -24658,6 +24375,7 @@ class GridBaseAPIService {
         if (row && row.cells) {
             return row.cells.find((cell) => cell.column.field === field);
         }
+        return undefined;
     }
     get_cell_by_index(rowIndex, columnID) {
         const row = this.get_row_by_index(rowIndex);
@@ -24668,16 +24386,18 @@ class GridBaseAPIService {
         if (hasCells && typeof columnID === 'string') {
             return row.cells.find((cell) => cell.column.field === columnID);
         }
+        return undefined;
     }
     get_cell_by_visible_index(rowIndex, columnIndex) {
         const row = this.get_row_by_index(rowIndex);
         if (row && row.cells) {
             return row.cells.find((cell) => cell.visibleColumnIndex === columnIndex);
         }
+        return undefined;
     }
     update_cell(cell) {
         if (!cell) {
-            return;
+            return undefined;
         }
         const args = cell.createCellEditEventArgs(true);
         if (!this.grid.crudService.row) { // should not recalculate summaries when there is row in edit mode
@@ -25070,7 +24790,7 @@ class GridBaseAPIService {
         if (index === -1) {
             return;
         }
-        const eventArgs = this.get_pin_row_event_args(rowID, null, row, false);
+        const eventArgs = this.get_pin_row_event_args(rowID, undefined, row, false);
         grid.rowPinning.emit(eventArgs);
         if (eventArgs.cancel) {
             return;
@@ -25223,5 +24943,5 @@ const IGX_GRID_COMMON_DIRECTIVES = [
  * Generated bundle index. Do not edit.
  */
 
-export { ActiveElement, CharSeparatedValueData, ColumnDisplayOrder, CsvFileTypes, DEFAULT_OWNER, DEFAULT_PIVOT_KEYS, DimensionValuesFilteringStrategy, DropPosition, ExportHeaderType, ExportRecordType, ExportUtilities, ExpressionUI, FilterListItem, FilterMode, GRID_LEVEL_COL, GRID_PARENT, GRID_ROOT_SUMMARY, GridBaseAPIService, GridCellMergeMode, GridPagingMode, GridSelectionMode, GridSummaryPosition, HEADER_KEYS, HORIZONTAL_NAV_KEYS, IGX_GRID_BASE, IGX_GRID_COMMON_DIRECTIVES, IGX_GRID_SERVICE_BASE, IGX_GRID_VALIDATION_DIRECTIVES, INPUT_DEBOUNCE_TIME, INPUT_DEBOUNCE_TIME_DEFAULT, IgxAddRow, IgxAdvancedFilteringDialogComponent, IgxBaseExporter, IgxCSVTextDirective, IgxCell, IgxCellCrudState, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxCollapsibleIndicatorTemplateDirective, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnComponent, IgxColumnEmailValidatorDirective, IgxColumnFormatterPipe, IgxColumnGroupComponent, IgxColumnHidingDirective, IgxColumnLayoutComponent, IgxColumnMaxLengthValidatorDirective, IgxColumnMaxValidatorDirective, IgxColumnMinLengthValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxColumnMovingService, IgxColumnPatternValidatorDirective, IgxColumnPinningDirective, IgxColumnRequiredValidatorDirective, IgxColumnResizerDirective, IgxColumnResizingService, IgxCsvExporterOptions, IgxCsvExporterService, IgxDateSummaryOperand, IgxDragIndicatorIconDirective, IgxEditRow, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleDateExpressionComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExporterOptionsBase, IgxFilterCellTemplateDirective, IgxFilteringService, IgxGridActionButtonComponent, IgxGridActionsBaseDirective, IgxGridAddRowPipe, IgxGridBodyDirective, IgxGridCRUDService, IgxGridCell, IgxGridCellComponent, IgxGridCellImageAltPipe, IgxGridCellStyleClassesPipe, IgxGridCellStylesPipe, IgxGridColumnResizerComponent, IgxGridDataMapperPipe, IgxGridDetailTemplateDirective, IgxGridDragSelectDirective, IgxGridEditingActionsComponent, IgxGridEmptyTemplateDirective, IgxGridExcelStyleFilteringComponent, IgxGridFilterConditionPipe, IgxGridFilteringCellComponent, IgxGridFilteringRowComponent, IgxGridFooterComponent, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxGridHeaderRowComponent, IgxGridLoadingTemplateDirective, IgxGridMRLNavigationService, IgxGridNavigationService, IgxGridNotGroupedPipe, IgxGridPaginatorOptionsPipe, IgxGridPinningActionsComponent, IgxGridRow, IgxGridRowClassesPipe, IgxGridRowPinningPipe, IgxGridRowStylesPipe, IgxGridSelectionService, IgxGridStateBaseDirective, IgxGridStateDirective, IgxGridSummaryService, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridTopLevelColumns, IgxGridTransaction, IgxGridTransactionPipe, IgxGridTransactionStatePipe, IgxGridValidationService, IgxGroupAreaDropDirective, IgxGroupByAreaDirective, IgxGroupByMetaPipe, IgxGroupByRow, IgxGroupByRowSelectorDirective, IgxGroupByRowTemplateDirective, IgxHasVisibleColumnsPipe, IgxHeadSelectorDirective, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHeaderGroupStylePipe, IgxHierarchicalGridRow, IgxNumberSummaryOperand, IgxPdfExporterOptions, IgxPdfExporterService, IgxPdfTextDirective, IgxPivotAggregate, IgxPivotColumnResizingService, IgxPivotDateAggregate, IgxPivotDateDimension, IgxPivotGridColumnResizerComponent, IgxPivotNumericAggregate, IgxPivotResizeHandleDirective, IgxPivotTimeAggregate, IgxRowAddCrudState, IgxRowAddTextDirective, IgxRowCollapsedIndicatorDirective, IgxRowCrudState, IgxRowDirective, IgxRowDragDirective, IgxRowDragGhostDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective, IgxRowSelectorDirective, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxStringReplacePipe, IgxSummaryDataPipe, IgxSummaryFormatterPipe, IgxSummaryOperand, IgxSummaryRow, IgxSummaryRowComponent, IgxSummaryTemplateDirective, IgxTimeSummaryOperand, IgxToolbarToken, IgxTreeGridRow, NoopPivotDimensionsStrategy, PivotColumnDimensionsStrategy, PivotDimensionType, PivotRowDimensionsStrategy, PivotRowLayoutType, PivotSummaryPosition, PivotUtil, ROW_ADD_KEYS, ROW_COLLAPSE_KEYS, ROW_EXPAND_KEYS, RowEditPositionStrategy, RowPinningPosition, SUPPORTED_KEYS, SortingIndexPipe, WatchChanges, WatchColumnChanges, generateExpressionsList, getUUID, notifyChanges };
+export { ActiveElement, CharSeparatedValueData, ColumnDisplayOrder, CsvFileTypes, DEFAULT_OWNER, DEFAULT_PIVOT_KEYS, DimensionValuesFilteringStrategy, DropPosition, ExportHeaderType, ExportRecordType, ExportUtilities, ExpressionUI, FilterListItem, FilterMode, GRID_LEVEL_COL, GRID_PARENT, GRID_ROOT_SUMMARY, GridBaseAPIService, GridCellMergeMode, GridPagingMode, GridSelectionMode, GridSummaryPosition, HEADER_KEYS, HORIZONTAL_NAV_KEYS, IGX_GRID_BASE, IGX_GRID_COMMON_DIRECTIVES, IGX_GRID_SERVICE_BASE, IGX_GRID_VALIDATION_DIRECTIVES, INPUT_DEBOUNCE_TIME, INPUT_DEBOUNCE_TIME_DEFAULT, IgxAddRow, IgxAdvancedFilteringDialogComponent, IgxBaseExporter, IgxCSVTextDirective, IgxCell, IgxCellCrudState, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxCollapsibleIndicatorTemplateDirective, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnComponent, IgxColumnEmailValidatorDirective, IgxColumnFormatterPipe, IgxColumnGroupComponent, IgxColumnHidingDirective, IgxColumnLayoutComponent, IgxColumnMaxLengthValidatorDirective, IgxColumnMaxValidatorDirective, IgxColumnMinLengthValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxColumnMovingService, IgxColumnPatternValidatorDirective, IgxColumnPinningDirective, IgxColumnRequiredValidatorDirective, IgxColumnResizerDirective, IgxColumnResizingService, IgxCsvExporterOptions, IgxCsvExporterService, IgxDragIndicatorIconDirective, IgxEditRow, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleDateExpressionComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExporterOptionsBase, IgxFilterCellTemplateDirective, IgxFilteringService, IgxGridActionButtonComponent, IgxGridActionsBaseDirective, IgxGridAddRowPipe, IgxGridBodyDirective, IgxGridCRUDService, IgxGridCell, IgxGridCellComponent, IgxGridCellImageAltPipe, IgxGridCellStyleClassesPipe, IgxGridCellStylesPipe, IgxGridColumnResizerComponent, IgxGridDataMapperPipe, IgxGridDetailTemplateDirective, IgxGridDragSelectDirective, IgxGridEditingActionsComponent, IgxGridEmptyTemplateDirective, IgxGridExcelStyleFilteringComponent, IgxGridFilterConditionPipe, IgxGridFilteringCellComponent, IgxGridFilteringRowComponent, IgxGridFooterComponent, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxGridHeaderRowComponent, IgxGridLoadingTemplateDirective, IgxGridMRLNavigationService, IgxGridNavigationService, IgxGridNotGroupedPipe, IgxGridPaginatorOptionsPipe, IgxGridPinningActionsComponent, IgxGridRow, IgxGridRowClassesPipe, IgxGridRowPinningPipe, IgxGridRowStylesPipe, IgxGridSelectionService, IgxGridStateBaseDirective, IgxGridStateDirective, IgxGridSummaryService, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridTopLevelColumns, IgxGridTransactionPipe, IgxGridTransactionStatePipe, IgxGridValidationService, IgxGroupAreaDropDirective, IgxGroupByAreaDirective, IgxGroupByMetaPipe, IgxGroupByRow, IgxGroupByRowSelectorDirective, IgxGroupByRowTemplateDirective, IgxHasVisibleColumnsPipe, IgxHeadSelectorDirective, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHeaderGroupStylePipe, IgxHierarchicalGridRow, IgxPdfExporterOptions, IgxPdfExporterService, IgxPdfTextDirective, IgxPivotAggregate, IgxPivotColumnResizingService, IgxPivotDateAggregate, IgxPivotDateDimension, IgxPivotGridColumnResizerComponent, IgxPivotNumericAggregate, IgxPivotResizeHandleDirective, IgxPivotTimeAggregate, IgxRowAddCrudState, IgxRowAddTextDirective, IgxRowCollapsedIndicatorDirective, IgxRowCrudState, IgxRowDirective, IgxRowDragDirective, IgxRowDragGhostDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective, IgxRowSelectorDirective, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxStringReplacePipe, IgxSummaryDataPipe, IgxSummaryFormatterPipe, IgxSummaryRow, IgxSummaryRowComponent, IgxSummaryTemplateDirective, IgxToolbarToken, IgxTreeGridRow, NoopPivotDimensionsStrategy, PivotColumnDimensionsStrategy, PivotDimensionType, PivotRowDimensionsStrategy, PivotRowLayoutType, PivotSummaryPosition, PivotUtil, ROW_ADD_KEYS, ROW_COLLAPSE_KEYS, ROW_EXPAND_KEYS, RowEditPositionStrategy, RowPinningPosition, SUPPORTED_KEYS, SortingIndexPipe, WatchChanges, WatchColumnChanges, generateExpressionsList, getUUID, notifyChanges };
 //# sourceMappingURL=igniteui-angular-grids-core.mjs.map