igniteui-angular 18.1.7 → 18.1.9

package/fesm2022/igniteui-angular.mjs

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
 import { Injectable, Directive, Input, HostListener, EventEmitter, InjectionToken, isDevMode, inject, PLATFORM_ID, Inject, ElementRef, ViewContainerRef, createComponent, Output, HostBinding, Self, Optional, booleanAttribute, SecurityContext, Component, ContentChildren, ContentChild, RendererStyleFlags2, Pipe, ViewChild, LOCALE_ID, forwardRef, Host, QueryList, ViewChildren, TemplateRef, ChangeDetectionStrategy, SimpleChange, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, reflectComponentType, NgModule } from '@angular/core';
-import * as i1$1 from '@angular/forms';
+import * as i4 from '@angular/forms';
 import { NgModel, NgControl, FormControlName, NG_VALUE_ACCESSOR, Validators, NG_VALIDATORS, FormGroup, FormsModule, RequiredValidator, MinValidator, MaxValidator, EmailValidator, MinLengthValidator, MaxLengthValidator, PatternValidator, FormControl, ReactiveFormsModule } from '@angular/forms';
-import { Observable, Subject, fromEvent, BehaviorSubject, interval, animationFrameScheduler, noop, merge, Subscription, timer, pipe, take as take$1, timeout } from 'rxjs';
-import { takeUntil, filter, throttle, throttleTime, first as first$2, startWith, take, debounce, tap, switchMap, skipLast, debounceTime, map, shareReplay, takeWhile, pluck } from 'rxjs/operators';
+import { Observable, Subject, fromEvent, BehaviorSubject, interval, animationFrameScheduler, noop, merge, Subscription, timer, pipe } from 'rxjs';
+import { takeUntil, filter, throttle, throttleTime, first as first$2, startWith, take, debounce, tap, switchMap, skipLast, debounceTime, map, shareReplay, takeWhile, timeout, pluck } from 'rxjs/operators';
 import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, formatPercent, formatNumber, getLocaleCurrencyCode, DatePipe, getLocaleDateFormat, FormatWidth, getLocaleDateTimeFormat, DOCUMENT, NgTemplateOutlet, NgIf, NgClass, NgSwitch, NgSwitchCase, NgSwitchDefault, NgFor, TitleCasePipe, getLocaleFirstDayOfWeek, NgStyle, getLocaleCurrencySymbol, formatCurrency as formatCurrency$1, getLocaleNumberFormat, NumberFormatStyle, DecimalPipe, PercentPipe, getCurrencySymbol, AsyncPipe } from '@angular/common';
 import { mergeWith, isEqual as isEqual$1 } from 'lodash-es';
 import { strToU8, zip } from 'fflate';
 import { scaleInVerTop, scaleOutVerTop, AnimationUtil, fadeIn, fadeOut, slideInTop, slideOutTop, slideInBottom, slideOutBottom, scaleInHorRight, scaleOutHorRight, scaleInHorLeft, scaleOutHorLeft, scaleInVerBottom, scaleOutVerBottom, scaleInCenter, growVerIn, growVerOut, slideInLeft } from 'igniteui-angular/animations';
 import * as i1 from '@angular/animations';
 import { style, animate, useAnimation } from '@angular/animations';
-import * as i1$2 from '@angular/platform-browser';
+import * as i1$1 from '@angular/platform-browser';
 import { ɵgetDOM as _getDOM, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
 import * as i2 from '@angular/common/http';
 import { addRow, addChild, pinLeft, unpinLeft, jumpDown, jumpUp, caseSensitive, editor } from '@igniteui/material-icons-extended';
@@ -3910,9 +3910,30 @@ class WorksheetFile {
                 const level = worksheetData.isGroupedGrid ? worksheetData.maxLevel : fullRow.level;
                 summaryFunc = this.getSummaryFunction(cellValue.label, key, dimensionMapKey, level, targetCol);
                 if (!summaryFunc) {
-                    const cellStr = `${cellValue.label}: ${cellValue.value}`;
-                    const savedValue = dictionary.saveValue(cellStr, false);
-                    return `<c r="${columnName}" t="s" s="1"><v>${savedValue}</v></c>`;
+                    let summaryValue;
+                    const label = cellValue.label?.toString();
+                    const value = cellValue.value?.toString();
+                    if (label && value) {
+                        summaryValue = `${cellValue.label}: ${cellValue.value}`;
+                    }
+                    else if (label) {
+                        summaryValue = cellValue.label;
+                    }
+                    else if (value) {
+                        summaryValue = cellValue.value;
+                    }
+                    const savedValue = dictionary.saveValue(summaryValue, false);
+                    const isSavedAsString = savedValue !== -1;
+                    const isSavedAsDate = !isSavedAsString && summaryValue instanceof Date;
+                    if (isSavedAsDate) {
+                        const timeZoneOffset = summaryValue.getTimezoneOffset() * 60000;
+                        const isoString = (new Date(summaryValue - timeZoneOffset)).toISOString();
+                        summaryValue = isoString.substring(0, isoString.indexOf('.'));
+                    }
+                    const resolvedValue = isSavedAsString ? savedValue : summaryValue;
+                    const type = isSavedAsString ? `t="s"` : isSavedAsDate ? `t="d"` : '';
+                    const style = isSavedAsDate ? `s="2"` : `s="1"`;
+                    return `<c r="${columnName}" ${type} ${style}><v>${resolvedValue}</v></c>`;
                 }
                 return `<c r="${columnName}"><f t="array" ref="${columnName}">${summaryFunc}</f></c>`;
             }
@@ -3976,7 +3997,7 @@ class WorksheetFile {
         let funcType = '';
         let result = '';
         const currencyInfo = this.currencyStyleMap.get(col.currencyCode);
-        switch (type.toLowerCase()) {
+        switch (type?.toString().toLowerCase()) {
             case "count":
                 return `"Count: "&amp;_xlfn.COUNTIF(${levelDimensions.startCoordinate}:${levelDimensions.endCoordinate}, ${recordLevel})`;
             case "min":
@@ -8183,14 +8204,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                     exportAs: 'igxInput',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: IgxInputGroupBase }, { type: i1$1.NgModel, decorators: [{
+        }], ctorParameters: () => [{ type: IgxInputGroupBase }, { type: i4.NgModel, decorators: [{
                     type: Optional
                 }, {
                     type: Self
                 }, {
                     type: Inject,
                     args: [NgModel]
-                }] }, { type: i1$1.NgControl, decorators: [{
+                }] }, { type: i4.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -9409,7 +9430,7 @@ class IgxIconService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxIconService, deps: [{ token: i1$2.DomSanitizer, optional: true }, { token: i2.HttpClient, optional: true }, { token: PlatformUtil, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxIconService, deps: [{ token: i1$1.DomSanitizer, optional: true }, { token: i2.HttpClient, optional: true }, { token: PlatformUtil, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxIconService, providedIn: "root" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxIconService, decorators: [{
@@ -9417,7 +9438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
             args: [{
                     providedIn: "root",
                 }]
-        }], ctorParameters: () => [{ type: i1$2.DomSanitizer, decorators: [{
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer, decorators: [{
                     type: Optional
                 }] }, { type: i2.HttpClient, decorators: [{
                     type: Optional
@@ -10430,14 +10451,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                     exportAs: 'igxAutocomplete',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$1.NgModel, decorators: [{
+        }], ctorParameters: () => [{ type: i4.NgModel, decorators: [{
                     type: Self
                 }, {
                     type: Optional
                 }, {
                     type: Inject,
                     args: [NgModel]
-                }] }, { type: i1$1.FormControlName, decorators: [{
+                }] }, { type: i4.FormControlName, decorators: [{
                     type: Self
                 }, {
                     type: Optional
@@ -16511,7 +16532,7 @@ class IgxCheckboxComponent {
             this.invalid = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.5", type: IgxCheckboxComponent, isStandalone: true, selector: "igx-checkbox", inputs: { id: "id", labelId: "labelId", value: "value", name: "name", tabindex: "tabindex", labelPosition: "labelPosition", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], required: ["required", "required", booleanAttribute], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"], ariaLabel: ["aria-label", "ariaLabel"], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], checked: ["checked", "checked", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], invalid: ["invalid", "invalid", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], disableTransitions: ["disableTransitions", "disableTransitions", booleanAttribute] }, outputs: { change: "change" }, host: { listeners: { "keyup": "onKeyUp($event)", "click": "_onCheckboxClick($event)", "blur": "onBlur()" }, properties: { "attr.id": "this.id", "class.igx-checkbox": "this.cssClass", "class.igx-checkbox--focused": "this.focused", "class.igx-checkbox--indeterminate": "this.indeterminate", "class.igx-checkbox--checked": "this.checked", "class.igx-checkbox--disabled": "this.disabled", "class.igx-checkbox--invalid": "this.invalid", "class.igx-checkbox--plain": "this.disableTransitions" } }, providers: [{
                 provide: EDITOR_PROVIDER,
                 useExisting: IgxCheckboxComponent,
@@ -16525,7 +16546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                             useExisting: IgxCheckboxComponent,
                             multi: true
                         }], preserveWhitespaces: false, standalone: true, imports: [IgxRippleDirective], template: "<input #checkbox class=\"igx-checkbox__input\"\n    type=\"checkbox\"\n    [id]=\"inputId\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [tabindex]=\"tabindex\"\n    [disabled]=\"disabled\"\n    [indeterminate]=\"indeterminate\"\n    [checked]=\"checked\"\n    [required]=\"required\"\n    [attr.aria-required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-checked]=\"ariaChecked\"\n    [attr.aria-labelledby]=\"ariaLabel ? null : ariaLabelledBy\"\n    [attr.aria-label]=\"ariaLabel\"\n    (change)=\"_onCheckboxChange($event)\"\n    (blur)=\"onBlur()\" />\n\n<div\n    igxRipple\n    igxRippleTarget=\".igx-checkbox__ripple\"\n    [igxRippleDisabled]=\"disableRipple\"\n    [igxRippleCentered]=\"true\"\n    [igxRippleDuration]=\"300\"\n    class=\"igx-checkbox__composite-wrapper\"\n>\n    <span #label class=\"igx-checkbox__composite\">\n        <svg class=\"igx-checkbox__composite-mark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n            <path d=\"M4.1,12.7 9,17.6 20.3,6.3\" />\n        </svg>\n    </span>\n\n    <div class=\"igx-checkbox__ripple\"></div>\n</div>\n\n<span #placeholderLabel\n    [class]=\"labelClass\"\n    [id]=\"labelId\">\n    <ng-content></ng-content>\n</span>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i1$1.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i4.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -17396,7 +17417,7 @@ class IgxRadioGroupDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxRadioGroupDirective, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: IgxDirectionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxRadioGroupDirective, deps: [{ token: i4.NgControl, optional: true, self: true }, { token: IgxDirectionality }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.5", type: IgxRadioGroupDirective, isStandalone: true, selector: "igx-radio-group, [igxRadioGroup]", inputs: { value: "value", name: "name", required: ["required", "required", booleanAttribute], selected: "selected", invalid: ["invalid", "invalid", booleanAttribute], alignment: "alignment" }, outputs: { change: "change" }, host: { listeners: { "click": "handleClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "class.igx-radio-group": "this.cssClass", "class.igx-radio-group--vertical": "this.vertical" } }, queries: [{ propertyName: "radioButtons", predicate: IgxRadioComponent, descendants: true }], exportAs: ["igxRadioGroup"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxRadioGroupDirective, decorators: [{
@@ -17406,7 +17427,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                     selector: 'igx-radio-group, [igxRadioGroup]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
+        }], ctorParameters: () => [{ type: i4.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -30216,12 +30237,12 @@ class KeyboardNavigationService {
         this.keyHandlers.delete(key);
         return this;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: KeyboardNavigationService, deps: [{ token: i1$2.EventManager }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: KeyboardNavigationService, deps: [{ token: i1$1.EventManager }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: KeyboardNavigationService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: KeyboardNavigationService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.EventManager }, { type: i0.NgZone }] });
+        }], ctorParameters: () => [{ type: i1$1.EventManager }, { type: i0.NgZone }] });
 
 /** @hidden @internal */
 class IgxCalendarBaseDirective {
@@ -37286,15 +37307,7 @@ class IgxComboBaseDirective {
     }
     manageRequiredAsterisk() {
         if (this.ngControl) {
-            if (this.ngControl.control.validator) {
-                // Run the validation with empty object to check if required is enabled.
-                const error = this.ngControl.control.validator({});
-                this.inputGroup.isRequired = error && error.required;
-            }
-            else {
-                // P.M. 18 May 2022: IgxCombo's asterisk not removed when removing required validator dynamically in reactive form #11543
-                this.inputGroup.isRequired = false;
-            }
+            this.inputGroup.isRequired = this.required;
         }
     }
     /** Contains key-value pairs of the selected valueKeys and their resp. displayKeys */
@@ -38165,7 +38178,7 @@ class IgxComboComponent extends IgxComboBaseDirective {
             IgxComboAPIService,
             { provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },
             { provide: NG_VALUE_ACCESSOR, useExisting: IgxComboComponent, multi: true }
-        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [type]=\"type\" (click)=\"onClick($event)\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n    <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"displayValue\" readonly\n            [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n            role=\"combobox\" aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n            [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n            (blur)=\"onBlur()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"displayValue\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClearItems($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\" family=\"default\" name=\"input_clear\"></igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n    </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n    [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n    <div class=\"igx-combo__search\">\n        <igx-input-group *ngIf=\"displaySearchInput\" theme=\"material\" >\n            <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n                   [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n                   (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"searchPlaceholder\"\n                   aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n            <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n                <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n                    <igx-icon\n                        family=\"default\"\n                        name=\"case_sensitive\"\n                        [active]=\"filteringOptions.caseSensitive\">\n                    </igx-icon>\n                </span>\n            </igx-suffix>\n        </igx-input-group>\n    </div>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n        [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n            | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }] }); }
+        ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [type]=\"type\" (click)=\"onClick($event)\">\n    <ng-container ngProjectAs=\"[igxLabel]\">\n        <ng-content select=\"[igxLabel]\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-prefix\">\n        <ng-content select=\"igx-prefix\"></ng-content>\n    </ng-container>\n    <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n        <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n    </ng-container>\n    <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"displayValue\" readonly\n            [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n            role=\"combobox\" aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n            [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n            (blur)=\"onBlur()\" />\n    <ng-container ngProjectAs=\"igx-suffix\">\n        <ng-content select=\"igx-suffix\"></ng-content>\n    </ng-container>\n    <igx-suffix *ngIf=\"displayValue\" aria-label=\"Clear Selection\" class=\"igx-combo__clear-button\"\n        (click)=\"handleClearItems($event)\">\n        <ng-container *ngIf=\"clearIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!clearIconTemplate\" family=\"default\" name=\"input_clear\"></igx-icon>\n    </igx-suffix>\n    <igx-suffix class=\"igx-combo__toggle-button\">\n        <ng-container *ngIf=\"toggleIconTemplate\">\n            <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n        </ng-container>\n        <igx-icon *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n    </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n    [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n    [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n    (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n    <div class=\"igx-combo__search\">\n        <igx-input-group *ngIf=\"displaySearchInput\" theme=\"material\" >\n            <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n                   [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n                   (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"searchPlaceholder\"\n                   aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n            <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n                <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n                    <igx-icon\n                        family=\"default\"\n                        name=\"case_sensitive\"\n                        [active]=\"filteringOptions.caseSensitive\">\n                    </igx-icon>\n                </span>\n            </igx-suffix>\n        </igx-input-group>\n    </div>\n    <ng-container *ngTemplateOutlet=\"headerTemplate\">\n    </ng-container>\n    <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n        [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n        [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n        [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n            | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction\n            | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n            index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n            [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n            <ng-container *ngIf=\"item?.isHeader\">\n                <ng-container\n                    *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n                    context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n                </ng-container>\n            </ng-container>\n            <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n            <ng-container *ngIf=\"!item?.isHeader\">\n                <ng-container #listItem\n                    *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n                </ng-container>\n            </ng-container>\n        </igx-combo-item>\n    </div>\n    <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n        <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n            <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n            </ng-container>\n        </div>\n        <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n            [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n            aria-label=\"Add Item\" [index]=\"virtualScrollContainer.igxForOf.length\">\n            <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n            </ng-container>\n        </igx-combo-add-item>\n    </div>\n    <ng-container *ngTemplateOutlet=\"footerTemplate\">\n    </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n    {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n    {{display}}\n</ng-template>\n<ng-template #empty>\n    <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n    <button type=\"button\" igxButton=\"flat\" igxRipple>Add item</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n    {{ item[key] }}\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxComboComponent, decorators: [{
             type: Component,
@@ -38301,9 +38314,10 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
     get hasSelectedItem() {
         return !!this.selectionService.get(this.id).size;
     }
-    constructor(elementRef, cdr, selectionService, comboAPI, platformUtil, document, _inputGroupType, _injector, _iconService) {
+    constructor(elementRef, cdr, selectionService, comboAPI, platformUtil, document, _inputGroupType, _injector, _iconService, formGroupDirective) {
         super(elementRef, cdr, selectionService, comboAPI, document, _inputGroupType, _injector, _iconService);
         this.platformUtil = platformUtil;
+        this.formGroupDirective = formGroupDirective;
         /**
          * Emitted when item selection is changing, before the selection completes
          *
@@ -38725,11 +38739,15 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
         }
     }
     isValid(value) {
-        return this.required
-            ? value !== null && value !== '' && value !== undefined
-            : value !== undefined;
+        if (this.formGroupDirective && value === null) {
+            return false;
+        }
+        if (this.required) {
+            return value !== null && value !== '' && value !== undefined;
+        }
+        return value !== undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxSimpleComboComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxSelectionAPIService }, { token: IgxComboAPIService }, { token: PlatformUtil }, { token: DOCUMENT }, { token: IGX_INPUT_GROUP_TYPE, optional: true }, { token: i0.Injector, optional: true }, { token: IgxIconService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxSimpleComboComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxSelectionAPIService }, { token: IgxComboAPIService }, { token: PlatformUtil }, { token: DOCUMENT }, { token: IGX_INPUT_GROUP_TYPE, optional: true }, { token: i0.Injector, optional: true }, { token: IgxIconService, optional: true }, { token: i4.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: IgxSimpleComboComponent, isStandalone: true, selector: "igx-simple-combo", outputs: { selectionChanging: "selectionChanging" }, host: { listeners: { "keydown.ArrowDown": "onArrowDown($event)", "keydown.Alt.ArrowDown": "onArrowDown($event)" } }, providers: [
             IgxComboAPIService,
             { provide: IGX_COMBO_COMPONENT, useExisting: IgxSimpleComboComponent },
@@ -38758,6 +38776,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                 }, {
                     type: Inject,
                     args: [IgxIconService]
+                }] }, { type: i4.FormGroupDirective, decorators: [{
+                    type: Optional
                 }] }], propDecorators: { dropdown: [{
                 type: ViewChild,
                 args: [IgxComboDropDownComponent, { static: true }]
@@ -40867,7 +40887,7 @@ class IgxColumnActionsComponent {
         this.columnToggled.emit({ column: column, checked: this.actionsDirective.columnChecked(column) });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxColumnActionsComponent, deps: [{ token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.5", type: IgxColumnActionsComponent, isStandalone: true, selector: "igx-column-actions", inputs: { grid: "grid", indentation: "indentation", columnsAreaMaxHeight: "columnsAreaMaxHeight", hideFilter: ["hideFilter", "hideFilter", booleanAttribute], title: "title", filterColumnsPrompt: "filterColumnsPrompt", filterCriteria: "filterCriteria", columnDisplayOrder: "columnDisplayOrder", uncheckAllText: "uncheckAllText", checkAllText: "checkAllText", id: "id" }, outputs: { columnToggled: "columnToggled" }, host: { properties: { "class": "this.cssClass", "attr.id": "this.id" } }, viewQueries: [{ propertyName: "columnItems", predicate: IgxCheckboxComponent, descendants: true }], ngImport: i0, template: "<div class=\"igx-column-actions__header\">\n    <h4 [attr.id]='titleID' class=\"igx-column-actions__header-title\" *ngIf=\"title\">{{ title }}</h4>\n\n    <igx-input-group class=\"igx-column-actions__header-input\" *ngIf=\"!hideFilter\">\n        <input igxInput\n            type=\"text\"\n            [attr.aria-describedby]='titleID'\n            [(ngModel)]=\"filterCriteria\"\n            [placeholder]=\"filterColumnsPrompt\"\n            autocomplete=\"off\" />\n    </igx-input-group>\n</div>\n\n<div class=\"igx-column-actions__columns\" tabindex=\"0\"\n    [style.max-height]=\"columnsAreaMaxHeight\">\n    <igx-checkbox\n        *ngFor=\"let column of $any(grid)?._columns\n            | columnActionEnabled:actionsDirective.actionEnabledColumnsFilter:pipeTrigger\n            | filterActionColumns:filterCriteria:pipeTrigger\n            | sortActionColumns:columnDisplayOrder:pipeTrigger;\"\n        class=\"igx-column-actions__columns-item\"\n        [readonly]=\"true\"\n        (click)=\"toggleColumn(column)\"\n        [checked]=\"actionsDirective.columnChecked(column)\"\n        [style.margin-left.px]=\"column.level * indentation\">\n        {{ column.header || column.field }}\n    </igx-checkbox>\n</div>\n\n<div class=\"igx-column-actions__buttons\">\n    <button type=\"button\" igxButton igxRipple (click)=\"uncheckAllColumns()\" [disabled]=\"uncheckAllDisabled\">{{ uncheckAllText }}</button>\n    <button type=\"button\" igxButton igxRipple (click)=\"checkAllColumns()\" [disabled]=\"checkAllDisabled\">{{ checkAllText }}</button>\n</div>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(() => NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => IgxInputGroupComponent), selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(() => IgxInputDirective), selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: i0.forwardRef(() => NgFor), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i0.forwardRef(() => IgxCheckboxComponent), selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "directive", type: i0.forwardRef(() => IgxButtonDirective), selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: i0.forwardRef(() => IgxRippleDirective), selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: i0.forwardRef(() => IgxColumnActionEnabledPipe), name: "columnActionEnabled" }, { kind: "pipe", type: i0.forwardRef(() => IgxFilterActionColumnsPipe), name: "filterActionColumns" }, { kind: "pipe", type: i0.forwardRef(() => IgxSortActionColumnsPipe), name: "sortActionColumns" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.5", type: IgxColumnActionsComponent, isStandalone: true, selector: "igx-column-actions", inputs: { grid: "grid", indentation: "indentation", columnsAreaMaxHeight: "columnsAreaMaxHeight", hideFilter: ["hideFilter", "hideFilter", booleanAttribute], title: "title", filterColumnsPrompt: "filterColumnsPrompt", filterCriteria: "filterCriteria", columnDisplayOrder: "columnDisplayOrder", uncheckAllText: "uncheckAllText", checkAllText: "checkAllText", id: "id" }, outputs: { columnToggled: "columnToggled" }, host: { properties: { "class": "this.cssClass", "attr.id": "this.id" } }, viewQueries: [{ propertyName: "columnItems", predicate: IgxCheckboxComponent, descendants: true }], ngImport: i0, template: "<div class=\"igx-column-actions__header\">\n    <h4 [attr.id]='titleID' class=\"igx-column-actions__header-title\" *ngIf=\"title\">{{ title }}</h4>\n\n    <igx-input-group class=\"igx-column-actions__header-input\" *ngIf=\"!hideFilter\">\n        <input igxInput\n            type=\"text\"\n            [attr.aria-describedby]='titleID'\n            [(ngModel)]=\"filterCriteria\"\n            [placeholder]=\"filterColumnsPrompt\"\n            autocomplete=\"off\" />\n    </igx-input-group>\n</div>\n\n<div class=\"igx-column-actions__columns\" tabindex=\"0\"\n    [style.max-height]=\"columnsAreaMaxHeight\">\n    <igx-checkbox\n        *ngFor=\"let column of $any(grid)?._columns\n            | columnActionEnabled:actionsDirective.actionEnabledColumnsFilter:pipeTrigger\n            | filterActionColumns:filterCriteria:pipeTrigger\n            | sortActionColumns:columnDisplayOrder:pipeTrigger;\"\n        class=\"igx-column-actions__columns-item\"\n        [readonly]=\"true\"\n        (click)=\"toggleColumn(column)\"\n        [checked]=\"actionsDirective.columnChecked(column)\"\n        [style.margin-left.px]=\"column.level * indentation\">\n        {{ column.header || column.field }}\n    </igx-checkbox>\n</div>\n\n<div class=\"igx-column-actions__buttons\">\n    <button type=\"button\" igxButton igxRipple (click)=\"uncheckAllColumns()\" [disabled]=\"uncheckAllDisabled\">{{ uncheckAllText }}</button>\n    <button type=\"button\" igxButton igxRipple (click)=\"checkAllColumns()\" [disabled]=\"checkAllDisabled\">{{ checkAllText }}</button>\n</div>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(() => NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => IgxInputGroupComponent), selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i4.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i4.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i0.forwardRef(() => IgxInputDirective), selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: i0.forwardRef(() => NgFor), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i0.forwardRef(() => IgxCheckboxComponent), selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "directive", type: i0.forwardRef(() => IgxButtonDirective), selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: i0.forwardRef(() => IgxRippleDirective), selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: i0.forwardRef(() => IgxColumnActionEnabledPipe), name: "columnActionEnabled" }, { kind: "pipe", type: i0.forwardRef(() => IgxFilterActionColumnsPipe), name: "filterActionColumns" }, { kind: "pipe", type: i0.forwardRef(() => IgxSortActionColumnsPipe), name: "sortActionColumns" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxColumnActionsComponent, decorators: [{
             type: Component,
@@ -48268,7 +48288,7 @@ class IgxQueryBuilderComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxQueryBuilderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: IgxIconService }, { token: PlatformUtil }, { token: i0.ElementRef }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: IgxQueryBuilderComponent, isStandalone: true, selector: "igx-query-builder", inputs: { fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings" }, outputs: { expressionTreeChange: "expressionTreeChange" }, host: { properties: { "class.igx-query-builder": "this.cssClass", "style.display": "this.display" } }, queries: [{ propertyName: "headerContent", first: true, predicate: IgxQueryBuilderHeaderComponent, descendants: true }], viewQueries: [{ propertyName: "fieldSelect", first: true, predicate: ["fieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "addModeContainer", first: true, predicate: ["addModeContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "contextMenuToggle", first: true, predicate: IgxToggleDirective, descendants: true }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "chips", predicate: IgxChipComponent, descendants: true }], ngImport: i0, template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<igx-query-builder-header\n    *ngIf=\"!headerContent\"\n    [title]=\"this.resourceStrings.igx_query_builder_title\"\n>\n</igx-query-builder-header>\n\n<ng-content select=\"igx-query-builder-header\"></ng-content>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <button type=\"button\"\n            #addRootAndGroupButton\n            igxButton=\"outlined\"\n            (click)=\"addAndGroup()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            (click)=\"addOrGroup()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n\n        <div class=\"igx-filter-empty\">\n            <h6 class=\"igx-filter-empty__title\">\n                {{ this.resourceStrings.igx_query_builder_initial_text }}\n            </h6>\n        </div>\n    </ng-container>\n\n    <ng-template\n        #addExpressionsTemplate\n        let-expressionItem\n        let-afterExpression=\"afterExpression\"\n    >\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #filterOperandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                [data]=\"expressionItem\"\n                [removable]=\"true\"\n                [selected]=\"expressionItem.selected\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onChipClick(expressionItem)\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">{{\n                    expressionItem.fieldLabel ||\n                        expressionItem.expression.fieldName\n                }}</span>\n                <igx-prefix>\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"expressionItem.expression.condition.iconName\"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n                <span class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span\n                    igxSuffix\n                    *ngIf=\"!expressionItem.expression.condition.isUnary\"\n                >\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal\n                                  | fieldFormatter\n                                      : getFormatter(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined)\n                                : (expressionItem.expression.searchVal\n                                  | date\n                                      : getFormat(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined\n                                      : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                </span>\n            </igx-chip>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <igx-icon\n                    family=\"default\"\n                    name=\"edit\"\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionEdit(expressionItem)\"\n                >\n                </igx-icon>\n                <igx-icon\n                    family=\"default\"\n                    name=\"add\"\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionAdd(expressionItem)\"\n                    *ngIf=\"\n                        !expressionItem.inAddMode &&\n                        (expressionItem.parent !== currentGroup ||\n                            expressionItem !==\n                                currentGroup.children[\n                                    currentGroup.children.length - 1\n                                ])\n                    \"\n                >\n                </igx-icon>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_column_placeholder\n                \"\n                [(ngModel)]=\"selectedField\"\n            >\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_condition_placeholder\n                \"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"default\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <igx-input-group\n                *ngIf=\"\n                    !selectedField ||\n                    (selectedField.dataType !== 'date' &&\n                        selectedField.dataType !== 'time' &&\n                        selectedField.dataType !== 'dateTime')\n                \"\n                type=\"box\"\n            >\n                <input\n                    #searchValueInput\n                    igxInput\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [type]=\"\n                        selectedField && selectedField.dataType === 'number'\n                            ? 'number'\n                            : 'text'\n                    \"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_value_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                />\n            </igx-input-group>\n\n            <igx-date-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                [(value)]=\"searchValue\"\n                (keydown)=\"openPicker($event)\"\n                (click)=\"picker.open()\"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_date_placeholder\n                \"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [weekStart]=\"selectedField.pipeArgs.weekStart\"\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            <igx-time-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                [(value)]=\"searchValue\"\n                (click)=\"picker.open()\"\n                (keydown)=\"openPicker($event)\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_time_placeholder\n                \"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [inputFormat]=\"selectedField.defaultTimeFormat\"\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            <igx-input-group\n                #inputGroup\n                type=\"box\"\n                *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                type=\"box\"\n            >\n                <input\n                    #input\n                    #searchValueInput\n                    igxInput\n                    tabindex=\"0\"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_date_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [igxDateTimeEditor]=\"selectedField.defaultDateTimeFormat\"\n                />\n            </igx-input-group>\n\n            <div class=\"igx-filter-tree__inputs-actions\">\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                </button>\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                </button>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button type=\"button\"\n                igxIconButton=\"flat\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionTreeTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <ng-container *ngFor=\"let expr of expressionItem.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionTreeTemplate\n                                : filterOperandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button type=\"button\"\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionTreeTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n    >\n        <button type=\"button\"\n            igxIconButton=\"flat\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"default\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon family=\"default\" name=\"delete\"></igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxQueryBuilderHeaderComponent, selector: "igx-query-builder-header", inputs: ["title", "showLegend", "resourceStrings"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { 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: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: 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", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { 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: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: IgxQueryBuilderComponent, isStandalone: true, selector: "igx-query-builder", inputs: { fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings" }, outputs: { expressionTreeChange: "expressionTreeChange" }, host: { properties: { "class.igx-query-builder": "this.cssClass", "style.display": "this.display" } }, queries: [{ propertyName: "headerContent", first: true, predicate: IgxQueryBuilderHeaderComponent, descendants: true }], viewQueries: [{ propertyName: "fieldSelect", first: true, predicate: ["fieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "addModeContainer", first: true, predicate: ["addModeContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "contextMenuToggle", first: true, predicate: IgxToggleDirective, descendants: true }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "overlayOutlet", first: true, predicate: ["overlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "chips", predicate: IgxChipComponent, descendants: true }], ngImport: i0, template: "<ng-template #addIcon>\n    <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n    <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<igx-query-builder-header\n    *ngIf=\"!headerContent\"\n    [title]=\"this.resourceStrings.igx_query_builder_title\"\n>\n</igx-query-builder-header>\n\n<ng-content select=\"igx-query-builder-header\"></ng-content>\n\n<div\n    #expressionsContainer\n    class=\"igx-query-builder__main\"\n    (scroll)=\"onExpressionsScrolled()\"\n>\n    <ng-container *ngIf=\"!rootGroup\">\n        <button type=\"button\"\n            #addRootAndGroupButton\n            igxButton=\"outlined\"\n            (click)=\"addAndGroup()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            (click)=\"addOrGroup()\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n\n        <div class=\"igx-filter-empty\">\n            <h6 class=\"igx-filter-empty__title\">\n                {{ this.resourceStrings.igx_query_builder_initial_text }}\n            </h6>\n        </div>\n    </ng-container>\n\n    <ng-template\n        #addExpressionsTemplate\n        let-expressionItem\n        let-afterExpression=\"afterExpression\"\n    >\n        <button type=\"button\"\n            #addConditionButton\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addCondition(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{\n                this.resourceStrings.igx_query_builder_add_condition\n            }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addAndGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_and_group }}</span>\n        </button>\n\n        <button type=\"button\"\n            igxButton=\"outlined\"\n            [disabled]=\"hasEditedExpression\"\n            (click)=\"addOrGroup(expressionItem, afterExpression)\"\n        >\n            <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n            <span>{{ this.resourceStrings.igx_query_builder_or_group }}</span>\n        </button>\n    </ng-template>\n\n    <ng-template #filterOperandTemplate let-expressionItem>\n        <div\n            *ngIf=\"!expressionItem.inEditMode\"\n            class=\"igx-filter-tree__expression-item\"\n            (mouseenter)=\"expressionItem.hovered = true\"\n            (mouseleave)=\"expressionItem.hovered = false\"\n        >\n            <igx-chip\n                [data]=\"expressionItem\"\n                [removable]=\"true\"\n                [selected]=\"expressionItem.selected\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onChipClick(expressionItem)\"\n                (dblclick)=\"onChipDblClick(expressionItem)\"\n                (remove)=\"onChipRemove(expressionItem)\"\n                (selectedChanged)=\"onChipSelectionEnd()\"\n            >\n                <span igxPrefix class=\"igx-filter-tree__expression-column\">{{\n                    expressionItem.fieldLabel ||\n                        expressionItem.expression.fieldName\n                }}</span>\n                <igx-prefix>\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"expressionItem.expression.condition.iconName\"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n                <span class=\"igx-filter-tree__expression-condition\">\n                    {{\n                        getConditionFriendlyName(\n                            expressionItem.expression.condition.name\n                        )\n                    }}\n                </span>\n                <span\n                    igxSuffix\n                    *ngIf=\"!expressionItem.expression.condition.isUnary\"\n                >\n                    {{\n                        isDate(expressionItem.expression.searchVal)\n                            ? getFormatter(expressionItem.expression.fieldName)\n                                ? (expressionItem.expression.searchVal\n                                  | fieldFormatter\n                                      : getFormatter(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined)\n                                : (expressionItem.expression.searchVal\n                                  | date\n                                      : getFormat(\n                                            expressionItem.expression.fieldName\n                                        )\n                                      : undefined\n                                      : this.locale)\n                            : expressionItem.expression.searchVal\n                    }}\n                </span>\n            </igx-chip>\n            <div\n                class=\"igx-filter-tree__expression-actions\"\n                *ngIf=\"\n                    (expressionItem.selected &&\n                        selectedExpressions.length === 1) ||\n                    expressionItem.hovered\n                \"\n            >\n                <igx-icon\n                    family=\"default\"\n                    name=\"edit\"\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionEdit(expressionItem)\"\n                >\n                </igx-icon>\n                <igx-icon\n                    family=\"default\"\n                    name=\"add\"\n                    tabindex=\"0\"\n                    (keydown)=\"invokeClick($event)\"\n                    (click)=\"enterExpressionAdd(expressionItem)\"\n                    *ngIf=\"\n                        !expressionItem.inAddMode &&\n                        (expressionItem.parent !== currentGroup ||\n                            expressionItem !==\n                                currentGroup.children[\n                                    currentGroup.children.length - 1\n                                ])\n                    \"\n                >\n                </igx-icon>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inEditMode\"\n            #editingInputsContainer\n            class=\"igx-filter-tree__inputs\"\n        >\n            <igx-select\n                #fieldSelect\n                type=\"box\"\n                [overlaySettings]=\"fieldSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_column_placeholder\n                \"\n                [(ngModel)]=\"selectedField\"\n            >\n                <igx-select-item *ngFor=\"let field of fields\" [value]=\"field\">\n                    {{ field.label || field.header || field.field }}\n                </igx-select-item>\n            </igx-select>\n\n            <igx-select\n                #conditionSelect\n                type=\"box\"\n                [overlaySettings]=\"conditionSelectOverlaySettings\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_condition_placeholder\n                \"\n                [(ngModel)]=\"selectedCondition\"\n                [disabled]=\"!selectedField\"\n            >\n                <igx-prefix\n                    *ngIf=\"\n                        selectedField &&\n                        conditionSelect.value &&\n                        selectedField.filters.condition(conditionSelect.value)\n                    \"\n                >\n                    <igx-icon\n                        family=\"default\"\n                        [name]=\"\n                            selectedField.filters.condition(\n                                conditionSelect.value\n                            ).iconName\n                        \"\n                    >\n                    </igx-icon>\n                </igx-prefix>\n\n                <igx-select-item\n                    *ngFor=\"let condition of getConditionList()\"\n                    [value]=\"condition\"\n                    [text]=\"getConditionFriendlyName(condition)\"\n                >\n                    <div class=\"igx-grid__filtering-dropdown-items\">\n                        <igx-icon\n                            family=\"default\"\n                            [name]=\"\n                                selectedField.filters.condition(condition)\n                                    .iconName\n                            \"\n                        >\n                        </igx-icon>\n                        <span class=\"igx-grid__filtering-dropdown-text\">{{\n                            getConditionFriendlyName(condition)\n                        }}</span>\n                    </div>\n                </igx-select-item>\n            </igx-select>\n\n            <igx-input-group\n                *ngIf=\"\n                    !selectedField ||\n                    (selectedField.dataType !== 'date' &&\n                        selectedField.dataType !== 'time' &&\n                        selectedField.dataType !== 'dateTime')\n                \"\n                type=\"box\"\n            >\n                <input\n                    #searchValueInput\n                    igxInput\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [type]=\"\n                        selectedField && selectedField.dataType === 'number'\n                            ? 'number'\n                            : 'text'\n                    \"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_value_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                />\n            </igx-input-group>\n\n            <igx-date-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'date'\"\n                [(value)]=\"searchValue\"\n                (keydown)=\"openPicker($event)\"\n                (click)=\"picker.open()\"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_date_placeholder\n                \"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [displayFormat]=\"selectedField.pipeArgs.format\"\n                [weekStart]=\"selectedField.pipeArgs.weekStart\"\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            <igx-time-picker\n                #picker\n                *ngIf=\"selectedField && selectedField.dataType === 'time'\"\n                [(value)]=\"searchValue\"\n                (click)=\"picker.open()\"\n                (keydown)=\"openPicker($event)\"\n                [placeholder]=\"\n                    this.resourceStrings.igx_query_builder_time_placeholder\n                \"\n                type=\"box\"\n                [readOnly]=\"true\"\n                [disabled]=\"\n                    !selectedField ||\n                    !selectedCondition ||\n                    (selectedField &&\n                        selectedField.filters.condition(selectedCondition)\n                            .isUnary)\n                \"\n                [locale]=\"this.locale\"\n                [outlet]=\"pickerOutlet\"\n                [formatter]=\"selectedField.formatter\"\n                [inputFormat]=\"selectedField.defaultTimeFormat\"\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            <igx-input-group\n                #inputGroup\n                type=\"box\"\n                *ngIf=\"selectedField && selectedField.dataType === 'dateTime'\"\n                type=\"box\"\n            >\n                <input\n                    #input\n                    #searchValueInput\n                    igxInput\n                    tabindex=\"0\"\n                    [placeholder]=\"\n                        this.resourceStrings.igx_query_builder_date_placeholder\n                    \"\n                    [(ngModel)]=\"searchValue\"\n                    [disabled]=\"\n                        !selectedField ||\n                        !selectedCondition ||\n                        (selectedField &&\n                            selectedField.filters.condition(selectedCondition)\n                                .isUnary)\n                    \"\n                    [igxDateTimeEditor]=\"selectedField.defaultDateTimeFormat\"\n                />\n            </igx-input-group>\n\n            <div class=\"igx-filter-tree__inputs-actions\">\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    [disabled]=\"!operandCanBeCommitted()\"\n                    (click)=\"commitOperandEdit()\"\n                >\n                    <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n                </button>\n                <button type=\"button\"\n                    igxIconButton=\"flat\"\n                    (click)=\"cancelOperandEdit()\"\n                >\n                    <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n                </button>\n            </div>\n        </div>\n\n        <div\n            *ngIf=\"expressionItem.inAddMode\"\n            #addModeContainer\n            class=\"igx-filter-tree__buttons\"\n        >\n            <ng-container\n                *ngTemplateOutlet=\"\n                    addExpressionsTemplate;\n                    context: context(expressionItem.parent, expressionItem)\n                \"\n            >\n            </ng-container>\n            <button type=\"button\"\n                igxIconButton=\"flat\"\n                (click)=\"cancelOperandAdd()\"\n            >\n                <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template #expressionTreeTemplate let-expressionItem>\n        <div class=\"igx-filter-tree\">\n            <div\n                tabindex=\"0\"\n                class=\"igx-filter-tree__line\"\n                [ngClass]=\"{\n                    'igx-filter-tree__line--and': expressionItem.operator === 0,\n                    'igx-filter-tree__line--or': expressionItem.operator === 1,\n                    'igx-filter-tree__line--selected': expressionItem.selected\n                }\"\n                (keydown)=\"invokeClick($event)\"\n                (click)=\"onGroupClick(expressionItem)\"\n            ></div>\n\n            <div class=\"igx-filter-tree__expression\">\n                <ng-container *ngFor=\"let expr of expressionItem.children\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            isExpressionGroup(expr)\n                                ? expressionTreeTemplate\n                                : filterOperandTemplate;\n                            context: context(expr)\n                        \"\n                    >\n                    </ng-container>\n                </ng-container>\n                <div\n                    *ngIf=\"currentGroup === expressionItem\"\n                    #currentGroupButtonsContainer\n                    class=\"igx-filter-tree__buttons\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            addExpressionsTemplate;\n                            context: context(expressionItem)\n                        \"\n                    >\n                    </ng-container>\n                    <button type=\"button\"\n                        igxButton=\"outlined\"\n                        *ngIf=\"expressionItem !== rootGroup\"\n                        [disabled]=\"\n                            hasEditedExpression ||\n                            expressionItem.children.length < 2\n                        \"\n                        (click)=\"endGroup(expressionItem)\"\n                    >\n                        <span>{{\n                            this.resourceStrings.igx_query_builder_end_group\n                        }}</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"rootGroup\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                expressionTreeTemplate;\n                context: context(rootGroup)\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <div\n        igxToggle\n        class=\"igx-filter-contextual-menu\"\n        (keydown)=\"onKeyDown($event)\"\n        (closed)=\"contextMenuClosed()\"\n    >\n        <button type=\"button\"\n            igxIconButton=\"flat\"\n            class=\"igx-filter-contextual-menu__close-btn\"\n            (click)=\"clearSelection()\"\n        >\n            <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n        </button>\n\n        <ng-container *ngIf=\"contextualGroup\">\n            <igx-buttongroup\n                [values]=\"filteringLogics\"\n                type=\"outline\"\n                (selected)=\"selectFilteringLogic($event)\"\n            >\n            </igx-buttongroup>\n\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                [disabled]=\"!contextualGroup.parent\"\n                (click)=\"ungroup()\"\n            >\n                <igx-icon family=\"default\" name=\"ungroup\"></igx-icon>\n                <span>{{\n                    this.resourceStrings.igx_query_builder_ungroup\n                }}</span>\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteGroup()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                <igx-icon family=\"default\" name=\"delete\"></igx-icon>\n                <span>{{ this.resourceStrings.igx_query_builder_delete }}</span>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"!contextualGroup\">\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createAndGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_and_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"createOrGroup()\"\n            >\n                {{ this.resourceStrings.igx_query_builder_create_or_group }}\n            </button>\n            <button type=\"button\"\n                igxButton=\"outlined\"\n                (click)=\"deleteFilters()\"\n                class=\"igx-filter-contextual-menu__delete-btn\"\n            >\n                {{ this.resourceStrings.igx_query_builder_delete_filters }}\n            </button>\n        </ng-container>\n    </div>\n</div>\n<div\n    #overlayOutlet\n    igxOverlayOutlet\n    class=\"igx-query-builder__outlet\"\n    (pointerdown)=\"onOutletPointerDown($event)\"\n></div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxQueryBuilderHeaderComponent, selector: "igx-query-builder-header", inputs: ["title", "showLegend", "resourceStrings"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { 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: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: 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", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { 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: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxQueryBuilderComponent, decorators: [{
             type: Component,
@@ -48448,6 +48468,7 @@ const GridResourceStringsEN = {
     igx_grid_pinning_uncheck_all_label: 'Unpin All',
     igx_grid_row_edit_btn_done: 'Done',
     igx_grid_row_edit_btn_cancel: 'Cancel',
+    igx_grid_row_edit_text: 'You have {0} changes in this row and {1} hidden columns',
     igx_grid_toolbar_actions_filter_prompt: 'Filter columns list ...',
     igx_grid_toolbar_pinning_button_tooltip: 'Open column pinning dropdown',
     igx_grid_toolbar_hiding_button_tooltip: 'Open column hiding dropdown',
@@ -48907,7 +48928,7 @@ class IgxExcelStyleDateExpressionComponent extends IgxExcelStyleDefaultExpressio
         return getLocaleFirstDayOfWeek(this.grid.locale);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: IgxExcelStyleDateExpressionComponent, isStandalone: true, selector: "igx-excel-style-date-expression", 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 #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\" family=\"default\" name=\"filter_list\"></igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [inputFormat]=\"column.defaultTimeFormat\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\" *ngIf=\"!isSingle\" >\n    <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\">\n    <span 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        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span 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        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #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: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: 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", "headerOrientation", "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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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", "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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: IgxExcelStyleDateExpressionComponent, isStandalone: true, selector: "igx-excel-style-date-expression", 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 #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        <igx-icon *ngIf=\"expressionUI.expression.condition\" family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        <igx-icon *ngIf=\"!expressionUI.expression.condition\" family=\"default\" name=\"filter_list\"></igx-icon>\n    </igx-prefix>\n    <igx-select-item *ngFor=\"let condition of conditions\" [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n        <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n        <span>{{translateCondition(condition)}}</span>\n    </igx-select-item>\n</igx-select>\n\n<igx-date-picker #picker *ngIf=\"column.dataType === 'date'\"\n    [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputDatePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-date-picker>\n\n<igx-time-picker #picker *ngIf=\"column.dataType === 'time'\"\n    [inputFormat]=\"column.defaultTimeFormat\"\n    [(value)]=\"expressionUI.expression.searchVal\"\n    [locale]=\"grid.locale\"\n    [outlet]=\"grid.outlet\"\n    (click)=\"picker.open()\"\n    [readOnly]=\"true\"\n    [placeholder]=\"inputTimePlaceholder\"\n    [displayFormat]=\"column.pipeArgs.format\"\n    [formatter]=\"column.formatter\"\n    [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n    type=\"box\">\n     <!-- disable default icons -->\n     <igx-picker-toggle></igx-picker-toggle>\n     <igx-picker-clear></igx-picker-clear>\n</igx-time-picker>\n\n<igx-input-group #dropDownTarget *ngIf=\"column.dataType === 'dateTime'\" #inputGroup type=\"box\">\n    <input #input igxInput tabindex=\"0\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n        [(ngModel)]=\"expressionUI.expression.searchVal\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n</igx-input-group>\n\n<button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\" *ngIf=\"!isSingle\" >\n    <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n</button>\n\n<igx-buttongroup #logicOperatorButtonGroup\n    *ngIf=\"!isLast\">\n    <span 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        {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n    </span>\n\n    <span 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        {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n    </span>\n</igx-buttongroup>\n\n<div #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: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: 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", "headerOrientation", "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: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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", "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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, decorators: [{
             type: Component,
@@ -53545,7 +53566,7 @@ class IgxExcelStyleSearchComponent {
         return subRequired;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxExcelStyleSearchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: BaseFilteringComponent }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", 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]=\"esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\"\n        autocomplete=\"off\"/>\n    <igx-icon\n        family=\"default\"\n        name=\"input_clear\"\n        igxSuffix\n        *ngIf=\"searchValue || searchValue === 0\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\">\n    </igx-icon>\n</igx-input-group>\n\n<igx-list #list role=\"listbox\" [isLoading]=\"isLoading\" *ngIf=\"!isHierarchical()\" (keydown)=\"handleKeyDown($event)\" tabindex=\"0\"\n[attr.aria-activedescendant]=\"this.activeDescendant\" (focus)=\"onFocus()\" (focusout)=\"onFocusOut()\">\n    <div style=\"overflow: hidden; position: relative;\">\n        <igx-list-item [class.igx-list__item-base--active]=\"focusedItem?.id === this.getItemId(i)\" [attr.id]=\"getItemId(i)\" role=\"option\"\n        *igxFor=\"let item of displayedListData;index as i; scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize\">\n            <igx-checkbox\n                [value]=\"item\"\n                [tabindex]=\"-1\"\n                [checked]=\"item?.isSelected\"\n                [disableRipple]=\"true\"\n                [indeterminate]=\"item?.indeterminate\"\n                [disableTransitions]=\"true\"\n                (change)=\"onCheckboxChange($event)\">\n                {{ item.label }}\n            </igx-checkbox>\n        </igx-list-item>\n    </div>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template igxEmptyList>\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n\n    <div class=\"igx-excel-filter__filter-results\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{ esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace('{0}', matchesCount) }}\n    </div>\n</igx-list>\n\n<div class=\"igx-excel-filter__tree\" *ngIf=\"isHierarchical()\">\n    <div class=\"igx-excel-filter__tree-alike\" *ngIf=\"!isTreeEmpty()\">\n        <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox #selectAllCheckbox\n                          [value]=\"selectAllItem\"\n                          [checked]=\"selectAllItem?.isSelected\"\n                          [disableRipple]=\"true\"\n                          [indeterminate]=\"selectAllItem?.indeterminate\"\n                          [disableTransitions]=\"true\"\n                          (change)=\"onSelectAllCheckboxChange($event)\">\n                {{ selectAllItem.label }}\n            </igx-checkbox>\n        </div>\n        <div class=\"igx-excel-filter__tree-alike-item\" *ngIf=\"searchValue\">\n            <igx-checkbox #addToCurrentFilterCheckbox\n                          [value]=\"addToCurrentFilterItem\"\n                          [checked]=\"addToCurrentFilterItem.isSelected\"\n                          [disableRipple]=\"true\"\n                          [disableTransitions]=\"true\">\n\n                {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n        </div>\n    </div>\n\n    <igx-tree #tree selection=\"Cascading\"  (nodeSelection)=\"onNodeSelectionChange($event)\">\n        <igx-tree-node [data]=\"item\" *ngFor=\"let item of displayedListData;\" [selected]=\"item.isSelected\">\n            <div>{{item.label}}</div>\n            <igx-tree-node [data]=\"childLevel1\" *ngFor=\"let childLevel1 of item.children\" [selected]=\"childLevel1.isSelected\">\n                <div>{{childLevel1.label}}</div>\n                <igx-tree-node [data]=\"childLevel2\" *ngFor=\"let childLevel2 of childLevel1.children\" [selected]=\"childLevel2.isSelected\">\n                    <div>{{childLevel2.label}}</div>\n                    <igx-tree-node [data]=\"childLevel3\" *ngFor=\"let childLevel3 of childLevel2.children\" [selected]=\"childLevel3.isSelected\">\n                        <div>{{childLevel3.label}}</div>\n                        <igx-tree-node [data]=\"childLevel4\" *ngFor=\"let childLevel4 of childLevel3.children\" [selected]=\"childLevel4.isSelected\">\n                            <div>{{childLevel4.label}}</div>\n                            <igx-tree-node [data]=\"childLevel5\" *ngFor=\"let childLevel5 of childLevel4.children\" [selected]=\"childLevel5.isSelected\">\n                                <div>{{childLevel5.label}}</div>\n                                <igx-tree-node [data]=\"childLevel6\" *ngFor=\"let childLevel6 of childLevel5.children\" [selected]=\"childLevel6.isSelected\">\n                                    <div>{{childLevel6.label}}</div>\n                                    <igx-tree-node [data]=\"childLevel7\" *ngFor=\"let childLevel7 of childLevel6.children\" [selected]=\"childLevel7.isSelected\">\n                                        <div>{{childLevel7.label}}</div>\n                                        <igx-tree-node [data]=\"childLevel8\" *ngFor=\"let childLevel8 of childLevel7.children\" [selected]=\"childLevel8.isSelected\">\n                                            <div>{{childLevel8.label}}</div>\n                                            <igx-tree-node [data]=\"childLevel9\" *ngFor=\"let childLevel9 of childLevel8.children\" [selected]=\"childLevel9.isSelected\">\n                                                <div>{{childLevel9.label}}</div>\n                                            </igx-tree-node>\n                                        </igx-tree-node>\n                                    </igx-tree-node>\n                                </igx-tree-node>\n                            </igx-tree-node>\n                        </igx-tree-node>\n                    </igx-tree-node>\n                </igx-tree-node>\n            </igx-tree-node>\n        </igx-tree-node>\n    </igx-tree>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template [ngIf]=\"isTreeEmpty()\">\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n</div>\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\">\n    </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\n            igxButton=\"flat\"\n            (click)=\"esf.cancel()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n        </button>\n    </div>\n    <div class=\"igx-excel-filter__apply\">\n        <button type=\"button\"\n            igxButton=\"contained\"\n            [disabled]=\"applyButtonDisabled\"\n            (click)=\"applyFilter()\">\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: ["family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { 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", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index", "role"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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", "isIndeterminate", "textVisibility", "text"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", 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]=\"esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder\"\n        autocomplete=\"off\"/>\n    <igx-icon\n        family=\"default\"\n        name=\"input_clear\"\n        igxSuffix\n        *ngIf=\"searchValue || searchValue === 0\"\n        (click)=\"clearInput()\"\n        tabindex=\"0\">\n    </igx-icon>\n</igx-input-group>\n\n<igx-list #list role=\"listbox\" [isLoading]=\"isLoading\" *ngIf=\"!isHierarchical()\" (keydown)=\"handleKeyDown($event)\" tabindex=\"0\"\n[attr.aria-activedescendant]=\"this.activeDescendant\" (focus)=\"onFocus()\" (focusout)=\"onFocusOut()\">\n    <div style=\"overflow: hidden; position: relative;\">\n        <igx-list-item [class.igx-list__item-base--active]=\"focusedItem?.id === this.getItemId(i)\" [attr.id]=\"getItemId(i)\" role=\"option\"\n        *igxFor=\"let item of displayedListData;index as i; scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize\">\n            <igx-checkbox\n                [value]=\"item\"\n                [tabindex]=\"-1\"\n                [checked]=\"item?.isSelected\"\n                [disableRipple]=\"true\"\n                [indeterminate]=\"item?.indeterminate\"\n                [disableTransitions]=\"true\"\n                (change)=\"onCheckboxChange($event)\">\n                {{ item.label }}\n            </igx-checkbox>\n        </igx-list-item>\n    </div>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template igxEmptyList>\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n\n    <div class=\"igx-excel-filter__filter-results\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{ esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace('{0}', matchesCount) }}\n    </div>\n</igx-list>\n\n<div class=\"igx-excel-filter__tree\" *ngIf=\"isHierarchical()\">\n    <div class=\"igx-excel-filter__tree-alike\" *ngIf=\"!isTreeEmpty()\">\n        <div class=\"igx-excel-filter__tree-alike-item\">\n            <igx-checkbox #selectAllCheckbox\n                          [value]=\"selectAllItem\"\n                          [checked]=\"selectAllItem?.isSelected\"\n                          [disableRipple]=\"true\"\n                          [indeterminate]=\"selectAllItem?.indeterminate\"\n                          [disableTransitions]=\"true\"\n                          (change)=\"onSelectAllCheckboxChange($event)\">\n                {{ selectAllItem.label }}\n            </igx-checkbox>\n        </div>\n        <div class=\"igx-excel-filter__tree-alike-item\" *ngIf=\"searchValue\">\n            <igx-checkbox #addToCurrentFilterCheckbox\n                          [value]=\"addToCurrentFilterItem\"\n                          [checked]=\"addToCurrentFilterItem.isSelected\"\n                          [disableRipple]=\"true\"\n                          [disableTransitions]=\"true\">\n\n                {{ addToCurrentFilterItem.label }}\n            </igx-checkbox>\n        </div>\n    </div>\n\n    <igx-tree #tree selection=\"Cascading\"  (nodeSelection)=\"onNodeSelectionChange($event)\">\n        <igx-tree-node [data]=\"item\" *ngFor=\"let item of displayedListData;\" [selected]=\"item.isSelected\">\n            <div>{{item.label}}</div>\n            <igx-tree-node [data]=\"childLevel1\" *ngFor=\"let childLevel1 of item.children\" [selected]=\"childLevel1.isSelected\">\n                <div>{{childLevel1.label}}</div>\n                <igx-tree-node [data]=\"childLevel2\" *ngFor=\"let childLevel2 of childLevel1.children\" [selected]=\"childLevel2.isSelected\">\n                    <div>{{childLevel2.label}}</div>\n                    <igx-tree-node [data]=\"childLevel3\" *ngFor=\"let childLevel3 of childLevel2.children\" [selected]=\"childLevel3.isSelected\">\n                        <div>{{childLevel3.label}}</div>\n                        <igx-tree-node [data]=\"childLevel4\" *ngFor=\"let childLevel4 of childLevel3.children\" [selected]=\"childLevel4.isSelected\">\n                            <div>{{childLevel4.label}}</div>\n                            <igx-tree-node [data]=\"childLevel5\" *ngFor=\"let childLevel5 of childLevel4.children\" [selected]=\"childLevel5.isSelected\">\n                                <div>{{childLevel5.label}}</div>\n                                <igx-tree-node [data]=\"childLevel6\" *ngFor=\"let childLevel6 of childLevel5.children\" [selected]=\"childLevel6.isSelected\">\n                                    <div>{{childLevel6.label}}</div>\n                                    <igx-tree-node [data]=\"childLevel7\" *ngFor=\"let childLevel7 of childLevel6.children\" [selected]=\"childLevel7.isSelected\">\n                                        <div>{{childLevel7.label}}</div>\n                                        <igx-tree-node [data]=\"childLevel8\" *ngFor=\"let childLevel8 of childLevel7.children\" [selected]=\"childLevel8.isSelected\">\n                                            <div>{{childLevel8.label}}</div>\n                                            <igx-tree-node [data]=\"childLevel9\" *ngFor=\"let childLevel9 of childLevel8.children\" [selected]=\"childLevel9.isSelected\">\n                                                <div>{{childLevel9.label}}</div>\n                                            </igx-tree-node>\n                                        </igx-tree-node>\n                                    </igx-tree-node>\n                                </igx-tree-node>\n                            </igx-tree-node>\n                        </igx-tree-node>\n                    </igx-tree-node>\n                </igx-tree-node>\n            </igx-tree-node>\n        </igx-tree-node>\n    </igx-tree>\n\n    <ng-template igxDataLoading>\n        <div class=\"igx-excel-filter__loading\">\n            <ng-container *ngTemplateOutlet=\"valuesLoadingTemplate\">\n            </ng-container>\n        </div>\n    </ng-template>\n\n    <ng-template [ngIf]=\"isTreeEmpty()\">\n        <ng-container *ngTemplateOutlet=\"emptySearch\"></ng-container>\n    </ng-template>\n</div>\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\">\n    </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\n            igxButton=\"flat\"\n            (click)=\"esf.cancel()\">\n                {{ esf.grid?.resourceStrings.igx_grid_excel_cancel }}\n        </button>\n    </div>\n    <div class=\"igx-excel-filter__apply\">\n        <button type=\"button\"\n            igxButton=\"contained\"\n            [disabled]=\"applyButtonDisabled\"\n            (click)=\"applyFilter()\">\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: ["family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { 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", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxListItemComponent, selector: "igx-list-item", inputs: ["isHeader", "hidden", "index", "role"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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", "isIndeterminate", "textVisibility", "text"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxExcelStyleSearchComponent, decorators: [{
             type: Component,
@@ -70238,7 +70259,7 @@ class IgxGridCellComponent {
         return new IgxGridCell(this.grid, rowID, this.column);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxGridCellComponent, deps: [{ token: IgxGridSelectionService }, { token: IGX_GRID_BASE }, { token: IgxOverlayService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: HammerGesturesManager }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.5", type: IgxGridCellComponent, isStandalone: true, selector: "igx-grid-cell", inputs: { column: "column", 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" } }, providers: [HammerGesturesManager], 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: "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    <igx-chip\n        *ngIf=\"displayPinnedChip\"\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</ng-template>\n<ng-template #defaultCell>\n    <div *ngIf=\"column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)\"\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' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        \"\n        [row]=\"rowData\"\n        [column]=\"this.column.field\"\n        [containerClass]=\"'igx-grid__td-text'\"\n        [metadata]=\"searchMetadata\"\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' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        }}</div>\n    <igx-icon\n        family=\"default\"\n        [name]=\"value ? 'confirm' : 'close'\"\n        *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n        [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n    </igx-icon>\n    <img *ngIf=\"column.dataType === 'image'\" [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\"\n    [cssClass]=\"highlightClass\"\n    [activeCssClass]=\"activeHighlightClass\"\n    [groupName]=\"gridID\"\n    [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n        (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n        (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n        (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n    [row]=\"rowData\"\n    [column]=\"this.column.field\"\n    [containerClass]=\"'igx-grid__td-text'\"\n    [metadata]=\"searchMetadata\">{{\n        !isEmptyAddRowCell ? value : (column.header || column.field)\n    }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    <ng-container *ngIf=\"column.dataType === 'string' || column.dataType === 'image'\" [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    <ng-container *ngIf=\"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    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'boolean'\" [formGroup]=\"formGroup\">\n        <igx-checkbox\n            [checked]=\"editValue\"\n            [igxFocus]=\"true\"\n            [disableRipple]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-checkbox>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'date'\" [formGroup]=\"formGroup\">\n        <igx-date-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [weekStart]=\"column.pipeArgs.weekStart\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        >\n        </igx-date-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'time'\" [formGroup]=\"formGroup\">\n        <igx-time-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [inputFormat]=\"column.defaultTimeFormat\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-time-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'currency'\">\n        <igx-input-group [formGroup]=\"formGroup\">\n            <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix *ngIf=\"!grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-suffix>\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'percent'\">\n        <igx-input-group [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> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    </ng-container>\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n<ng-container *ngIf=\"isInvalid\">\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #defaultError>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['required']\">\n        {{grid.resourceStrings.igx_grid_required_validation_error}}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['minlength']\">\n        {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['maxlength']\">\n        {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['min']\">\n        {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['max']\">\n        {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['email']\">\n        {{grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['pattern']\">\n        {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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: ["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: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { 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: "16.1.0", version: "18.0.5", type: IgxGridCellComponent, isStandalone: true, selector: "igx-grid-cell", inputs: { column: "column", 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" } }, providers: [HammerGesturesManager], 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: "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    <igx-chip\n        *ngIf=\"displayPinnedChip\"\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</ng-template>\n<ng-template #defaultCell>\n    <div *ngIf=\"column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)\"\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' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        \"\n        [row]=\"rowData\"\n        [column]=\"this.column.field\"\n        [containerClass]=\"'igx-grid__td-text'\"\n        [metadata]=\"searchMetadata\"\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' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        }}</div>\n    <igx-icon\n        family=\"default\"\n        [name]=\"value ? 'confirm' : 'close'\"\n        *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n        [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n    </igx-icon>\n    <img *ngIf=\"column.dataType === 'image'\" [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\"\n    [cssClass]=\"highlightClass\"\n    [activeCssClass]=\"activeHighlightClass\"\n    [groupName]=\"gridID\"\n    [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n        (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n        (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n        (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n    [row]=\"rowData\"\n    [column]=\"this.column.field\"\n    [containerClass]=\"'igx-grid__td-text'\"\n    [metadata]=\"searchMetadata\">{{\n        !isEmptyAddRowCell ? value : (column.header || column.field)\n    }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    <ng-container *ngIf=\"column.dataType === 'string' || column.dataType === 'image'\" [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    <ng-container *ngIf=\"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    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'boolean'\" [formGroup]=\"formGroup\">\n        <igx-checkbox\n            [checked]=\"editValue\"\n            [igxFocus]=\"true\"\n            [disableRipple]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-checkbox>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'date'\" [formGroup]=\"formGroup\">\n        <igx-date-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [weekStart]=\"column.pipeArgs.weekStart\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        >\n        </igx-date-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'time'\" [formGroup]=\"formGroup\">\n        <igx-time-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [inputFormat]=\"column.defaultTimeFormat\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-time-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'currency'\">\n        <igx-input-group [formGroup]=\"formGroup\">\n            <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix *ngIf=\"!grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-suffix>\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'percent'\">\n        <igx-input-group [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> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    </ng-container>\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n<ng-container *ngIf=\"isInvalid\">\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #defaultError>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['required']\">\n        {{grid.resourceStrings.igx_grid_required_validation_error}}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['minlength']\">\n        {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['maxlength']\">\n        {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['min']\">\n        {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['max']\">\n        {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['email']\">\n        {{grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['pattern']\">\n        {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.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: ["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: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { 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: "18.0.5", ngImport: i0, type: IgxGridCellComponent, decorators: [{
             type: Component,
@@ -70461,7 +70482,7 @@ class IgxGridExpandableCellComponent extends IgxGridCellComponent {
         return !this.editMode && (!this.intRow.pinned || isGhost);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxGridExpandableCellComponent, deps: [{ token: IgxGridSelectionService }, { token: IGX_GRID_BASE }, { token: IgxOverlayService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: HammerGesturesManager }, { token: DOCUMENT }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: IgxGridExpandableCellComponent, isStandalone: true, selector: "igx-expandable-grid-cell", inputs: { expanded: "expanded" }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, read: ElementRef }, { propertyName: "indentationDiv", first: true, predicate: ["indentationDiv"], descendants: true, read: ElementRef }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    <igx-chip *ngIf=\"displayPinnedChip\" class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [style.--ig-size]=\"1\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n</ng-template>\n<ng-template #defaultCell>\n    <div *ngIf=\"column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\"\n        [cssClass]=\"highlightClass\"\n        [activeCssClass]=\"activeHighlightClass\"\n        [groupName]=\"gridID\"\n        [value]=\"formatter ? (value | columnFormatter:formatter:rowData)\n            : column.dataType === 'number'\n            ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n            : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n            ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n            : column.dataType === 'currency'\n            ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n            : column.dataType === 'percent'\n            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n            : value\"\n        [row]=\"rowData\"\n        [column]=\"this.column.field\"\n        [containerClass]=\"'igx-grid__td-text'\"\n        [metadata]=\"searchMetadata\">{{ formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === \"number\"\n            ? (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n            ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'\n            ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent'\n            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value}}</div>\n\n    <igx-icon\n        family=\"default\"\n        [name]=\"value ? 'confirm' : 'close'\"\n        *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n        [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n    </igx-icon>\n    <img *ngIf=\"column.dataType === 'image'\" [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\"\n    [cssClass]=\"highlightClass\"\n    [activeCssClass]=\"activeHighlightClass\"\n    [groupName]=\"gridID\"\n    [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n        (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n        (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?\n        (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n    [row]=\"rowData\"\n    [column]=\"this.column.field\"\n    [containerClass]=\"'igx-grid__td-text'\"\n    [metadata]=\"searchMetadata\">{{\n        value ? value : (column.header || column.field)\n    }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    <ng-container *ngIf=\"column.dataType === 'string' || column.dataType === 'image'\" [formGroup]=\"formGroup\">\n        <igx-input-group [style.--ig-size]=\"1\" >\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'number'\">\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'boolean'\" [formGroup]=\"formGroup\">\n        <igx-checkbox\n            [checked]=\"editValue\"\n            [igxFocus]=\"true\"\n            [disableRipple]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-checkbox>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'date'\" [formGroup]=\"formGroup\">\n        <igx-date-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [weekStart]=\"column.pipeArgs.weekStart\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        >\n        </igx-date-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'time'\" [formGroup]=\"formGroup\">\n        <igx-time-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [inputFormat]=\"column.defaultTimeFormat\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-time-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'currency'\">\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix *ngIf=\"!grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-suffix>\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'percent'\">\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    </ng-container>\n</ng-template>\n<ng-container *ngIf=\"showExpanderIndicator\">\n    <div #indicator\n         class=\"igx-grid__tree-grouping-indicator\"\n         (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n         <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit:  row }\">\n        </ng-container>\n    </div>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</ng-container>\n<ng-container *ngIf=\"isInvalid\">\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #defaultExpandedTemplate>\n        <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n        <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultError>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['required']\">\n        {{grid.resourceStrings.igx_grid_required_validation_error}}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['minlength']\">\n        {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['maxlength']\">\n        {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['min']\">\n        {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['max']\">\n        {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['email']\">\n        {{grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['pattern']\">\n        {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["family", "name", "active"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: IgxGridExpandableCellComponent, isStandalone: true, selector: "igx-expandable-grid-cell", inputs: { expanded: "expanded" }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, read: ElementRef }, { propertyName: "indentationDiv", first: true, predicate: ["indentationDiv"], descendants: true, read: ElementRef }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    <igx-chip *ngIf=\"displayPinnedChip\" class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [style.--ig-size]=\"1\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n</ng-template>\n<ng-template #defaultCell>\n    <div *ngIf=\"column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\"\n        [cssClass]=\"highlightClass\"\n        [activeCssClass]=\"activeHighlightClass\"\n        [groupName]=\"gridID\"\n        [value]=\"formatter ? (value | columnFormatter:formatter:rowData)\n            : column.dataType === 'number'\n            ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n            : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n            ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n            : column.dataType === 'currency'\n            ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n            : column.dataType === 'percent'\n            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n            : value\"\n        [row]=\"rowData\"\n        [column]=\"this.column.field\"\n        [containerClass]=\"'igx-grid__td-text'\"\n        [metadata]=\"searchMetadata\">{{ formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === \"number\"\n            ? (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n            ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'\n            ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent'\n            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value}}</div>\n\n    <igx-icon\n        family=\"default\"\n        [name]=\"value ? 'confirm' : 'close'\"\n        *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n        [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n    </igx-icon>\n    <img *ngIf=\"column.dataType === 'image'\" [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\"\n    [cssClass]=\"highlightClass\"\n    [activeCssClass]=\"activeHighlightClass\"\n    [groupName]=\"gridID\"\n    [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n        (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n        (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?\n        (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n    [row]=\"rowData\"\n    [column]=\"this.column.field\"\n    [containerClass]=\"'igx-grid__td-text'\"\n    [metadata]=\"searchMetadata\">{{\n        value ? value : (column.header || column.field)\n    }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    <ng-container *ngIf=\"column.dataType === 'string' || column.dataType === 'image'\" [formGroup]=\"formGroup\">\n        <igx-input-group [style.--ig-size]=\"1\" >\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'number'\">\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'boolean'\" [formGroup]=\"formGroup\">\n        <igx-checkbox\n            [checked]=\"editValue\"\n            [igxFocus]=\"true\"\n            [disableRipple]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-checkbox>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'date'\" [formGroup]=\"formGroup\">\n        <igx-date-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [weekStart]=\"column.pipeArgs.weekStart\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        >\n        </igx-date-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'time'\" [formGroup]=\"formGroup\">\n        <igx-time-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [inputFormat]=\"column.defaultTimeFormat\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-time-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'currency'\">\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix *ngIf=\"!grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-suffix>\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'percent'\">\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    </ng-container>\n</ng-template>\n<ng-container *ngIf=\"showExpanderIndicator\">\n    <div #indicator\n         class=\"igx-grid__tree-grouping-indicator\"\n         (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n         <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit:  row }\">\n        </ng-container>\n    </div>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</ng-container>\n<ng-container *ngIf=\"isInvalid\">\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #defaultExpandedTemplate>\n        <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n        <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultError>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['required']\">\n        {{grid.resourceStrings.igx_grid_required_validation_error}}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['minlength']\">\n        {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['maxlength']\">\n        {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['min']\">\n        {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['max']\">\n        {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['email']\">\n        {{grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['pattern']\">\n        {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["family", "name", "active"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxGridExpandableCellComponent, decorators: [{
             type: Component,
@@ -71725,7 +71746,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
             IgxColumnResizingService,
             IgxForOfSyncService,
             IgxForOfScrollSyncService,
-        ], queries: [{ propertyName: "detailTemplateDirective", first: true, predicate: IgxGridDetailTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "groupTemplate", first: true, predicate: IgxGroupByRowTemplateDirective, descendants: true, read: IgxGroupByRowTemplateDirective }, { propertyName: "groupByRowSelectorsTemplates", predicate: IgxGroupByRowSelectorDirective, read: TemplateRef }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "detailTemplateContainer", first: true, predicate: ["detail_template_container"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupTemplate", first: true, predicate: ["group_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_groupsRowList", predicate: IgxGridGroupByRowComponent, descendants: true, read: IgxGridGroupByRowComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n<ng-container *ngIf=\"showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)\">\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n</ng-container>\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"calcWidth || null\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n    <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n    </ng-container>\n    <ng-template #pinnedRecordsTemplate>\n        <ng-container *ngIf=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridAddRow:true:pipeTrigger\n        | gridRowPinning:id:true:pipeTrigger\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData\">\n            <div #pinContainer *ngIf=\"pinnedData.length > 0\"\n                [ngClass]=\"{\n                    'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                    'igx-grid__tr--pinned-top': isRowPinningToTop\n                }\"\n                class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                    <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                    </ng-container>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:!!paginator:page:perPage:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n                (viewCreated)=\"viewCreatedHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\">\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail=\"true\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\">\n                        <ng-container *ngIf=\"this.groupingExpressions.length > 0\">\n                                <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                        </ng-container>\n                        <ng-template\n                    [ngTemplateOutlet]=\"detailTemplate\"\n                    [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf=\"shouldOverlayLoading\">\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n    <div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]=\"calcWidth\"  [style.height.px]=\"summaryRowHeight\"\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\" [style.min-width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedWidth\" [style.min-width.px]=\"pinnedWidth\" [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    >\n    </igx-icon>\n</ng-template>\n\n <ng-template #defaultCollapsedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_more\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    ></igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\">\n        <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n        <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip\"></ng-content>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridGroupByAreaComponent, selector: "igx-grid-group-by-area", inputs: ["sortingExpressions", "grid"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedColumnCollection", "unpinnedColumnCollection", "activeDescendant", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxGridRowComponent, selector: "igx-grid-row" }, { kind: "component", type: IgxGridGroupByRowComponent, selector: "igx-grid-groupby-row", inputs: ["hideGroupRowSelectors", "rowDraggable", "index", "gridID", "groupRow", "isFocused"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "pipe", type: IgxGridTransactionPipe, name: "gridTransaction" }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridAddRowPipe, name: "gridAddRow" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxGridGroupingPipe, name: "gridGroupBy" }, { kind: "pipe", type: IgxGridPagingPipe, name: "gridPaging" }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { kind: "pipe", type: IgxGridSummaryPipe, name: "gridSummary" }, { kind: "pipe", type: IgxGridDetailsPipe, name: "gridDetails" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "detailTemplateDirective", first: true, predicate: IgxGridDetailTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "groupTemplate", first: true, predicate: IgxGroupByRowTemplateDirective, descendants: true, read: IgxGroupByRowTemplateDirective }, { propertyName: "groupByRowSelectorsTemplates", predicate: IgxGroupByRowSelectorDirective, read: TemplateRef }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "detailTemplateContainer", first: true, predicate: ["detail_template_container"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupTemplate", first: true, predicate: ["group_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_groupsRowList", predicate: IgxGridGroupByRowComponent, descendants: true, read: IgxGridGroupByRowComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n<ng-container *ngIf=\"showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)\">\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n</ng-container>\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"calcWidth || null\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n    <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n    </ng-container>\n    <ng-template #pinnedRecordsTemplate>\n        <ng-container *ngIf=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridAddRow:true:pipeTrigger\n        | gridRowPinning:id:true:pipeTrigger\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData\">\n            <div #pinContainer *ngIf=\"pinnedData.length > 0\"\n                [ngClass]=\"{\n                    'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                    'igx-grid__tr--pinned-top': isRowPinningToTop\n                }\"\n                class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                    <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                    </ng-container>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:!!paginator:page:perPage:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n                (viewCreated)=\"viewCreatedHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\">\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail=\"true\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\">\n                        <ng-container *ngIf=\"this.groupingExpressions.length > 0\">\n                                <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                        </ng-container>\n                        <ng-template\n                    [ngTemplateOutlet]=\"detailTemplate\"\n                    [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf=\"shouldOverlayLoading\">\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n    <div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]=\"calcWidth\"  [style.height.px]=\"summaryRowHeight\"\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\" [style.min-width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedWidth\" [style.min-width.px]=\"pinnedWidth\" [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    >\n    </igx-icon>\n</ng-template>\n\n <ng-template #defaultCollapsedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_more\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    ></igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\">\n        <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n        <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip\"></ng-content>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridGroupByAreaComponent, selector: "igx-grid-group-by-area", inputs: ["sortingExpressions", "grid"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedColumnCollection", "unpinnedColumnCollection", "activeDescendant", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxGridRowComponent, selector: "igx-grid-row" }, { kind: "component", type: IgxGridGroupByRowComponent, selector: "igx-grid-groupby-row", inputs: ["hideGroupRowSelectors", "rowDraggable", "index", "gridID", "groupRow", "isFocused"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "pipe", type: IgxGridTransactionPipe, name: "gridTransaction" }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridAddRowPipe, name: "gridAddRow" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxGridGroupingPipe, name: "gridGroupBy" }, { kind: "pipe", type: IgxGridPagingPipe, name: "gridPaging" }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { kind: "pipe", type: IgxGridSummaryPipe, name: "gridSummary" }, { kind: "pipe", type: IgxGridDetailsPipe, name: "gridDetails" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxGridComponent, decorators: [{
             type: Component,
@@ -71778,8 +71799,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         IgxGridSortingPipe,
                         IgxGridFilteringPipe,
                         IgxGridSummaryPipe,
-                        IgxGridDetailsPipe
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n<ng-container *ngIf=\"showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)\">\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n</ng-container>\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"calcWidth || null\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n    <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n    </ng-container>\n    <ng-template #pinnedRecordsTemplate>\n        <ng-container *ngIf=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridAddRow:true:pipeTrigger\n        | gridRowPinning:id:true:pipeTrigger\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData\">\n            <div #pinContainer *ngIf=\"pinnedData.length > 0\"\n                [ngClass]=\"{\n                    'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                    'igx-grid__tr--pinned-top': isRowPinningToTop\n                }\"\n                class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                    <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                    </ng-container>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:!!paginator:page:perPage:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n                (viewCreated)=\"viewCreatedHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\">\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail=\"true\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\">\n                        <ng-container *ngIf=\"this.groupingExpressions.length > 0\">\n                                <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                        </ng-container>\n                        <ng-template\n                    [ngTemplateOutlet]=\"detailTemplate\"\n                    [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf=\"shouldOverlayLoading\">\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n    <div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]=\"calcWidth\"  [style.height.px]=\"summaryRowHeight\"\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\" [style.min-width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedWidth\" [style.min-width.px]=\"pinnedWidth\" [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    >\n    </igx-icon>\n</ng-template>\n\n <ng-template #defaultCollapsedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_more\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    ></igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\">\n        <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n        <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip\"></ng-content>\n    </div>\n}\n" }]
+                        IgxGridDetailsPipe,
+                        IgxStringReplacePipe
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n<ng-container *ngIf=\"showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)\">\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n</ng-container>\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"calcWidth || null\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n    <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n    </ng-container>\n    <ng-template #pinnedRecordsTemplate>\n        <ng-container *ngIf=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridAddRow:true:pipeTrigger\n        | gridRowPinning:id:true:pipeTrigger\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true as pinnedData\">\n            <div #pinContainer *ngIf=\"pinnedData.length > 0\"\n                [ngClass]=\"{\n                    'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                    'igx-grid__tr--pinned-top': isRowPinningToTop\n                }\"\n                class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                    <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                    </ng-container>\n                </ng-container>\n            </div>\n        </ng-container>\n    </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:!!paginator:page:perPage:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n                (viewCreated)=\"viewCreatedHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\">\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail=\"true\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\">\n                        <ng-container *ngIf=\"this.groupingExpressions.length > 0\">\n                                <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                        </ng-container>\n                        <ng-template\n                    [ngTemplateOutlet]=\"detailTemplate\"\n                    [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf=\"shouldOverlayLoading\">\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n    <div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]=\"calcWidth\"  [style.height.px]=\"summaryRowHeight\"\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\" [style.min-width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedWidth\" [style.min-width.px]=\"pinnedWidth\" [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    >\n    </igx-icon>\n</ng-template>\n\n <ng-template #defaultCollapsedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_more\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    ></igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\">\n        <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n        <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip\"></ng-content>\n    </div>\n}\n" }]
         }], propDecorators: { dataPreLoad: [{
                 type: Output
             }], groupingExpressionsChange: [{
@@ -73099,7 +73121,7 @@ class IgxPivotGridNavigationService extends IgxGridNavigationService {
         if (verticalContainer.isIndexOutsideView(nextDataViewIndex)) {
             verticalContainer.scrollTo(nextDataViewIndex);
             await new Promise((resolve) => {
-                this.grid.gridScroll.pipe(take$1(1), timeout({ first: 10000 })).subscribe({
+                this.grid.gridScroll.pipe(take(1), timeout({ first: 10000 })).subscribe({
                     next: (value) => resolve(value),
                     error: (err) => resolve(err)
                 });
@@ -74384,7 +74406,7 @@ class IgxPivotDateDimension {
         this.memberFunction = (_data) => this.resourceStrings.igx_grid_pivot_date_dimension_total;
         this._baseDimension = inBaseDimension;
         this._options = inOptions;
-        this.enabled = inBaseDimension.enabled;
+        this.enabled = inBaseDimension?.enabled;
         if (this.baseDimension && this.options) {
             this.initialize(this.baseDimension, this.options);
         }
@@ -76858,12 +76880,18 @@ class IgxGridStateBaseDirective {
                 restoreFeatureState: (context, state) => {
                     const grid = context.currGrid;
                     grid.groupingExpressions = state.expressions;
+                    state.expansion.forEach(exp => {
+                        exp.hierarchy.forEach(h => {
+                            const dataType = grid.columns.find(c => c.field === h.fieldName).dataType;
+                            if (dataType.includes(GridColumnDataType.Date) || dataType.includes(GridColumnDataType.Time)) {
+                                h.value = h.value ? new Date(Date.parse(h.value)) : h.value;
+                            }
+                        });
+                    });
                     if (grid.groupsExpanded !== state.defaultExpanded) {
                         grid.toggleAllGroupRows();
                     }
-                    else {
-                        grid.groupingExpansionState = state.expansion;
-                    }
+                    grid.groupingExpansionState = state.expansion;
                 }
             },
             paging: {
@@ -78457,7 +78485,7 @@ class IgxPageSizeSelectorComponent {
         this.cssClass = 'igx-page-size';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxPageSizeSelectorComponent, deps: [{ token: IgxPaginatorComponent, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: IgxPageSizeSelectorComponent, isStandalone: true, selector: "igx-page-size", host: { properties: { "class.igx-page-size": "this.cssClass" } }, ngImport: i0, template: "<label class=\"igx-page-size__label\">{{ paginator.resourceStrings.igx_paginator_label }}</label>\n<div class=\"igx-page-size__select\">\n    <igx-select [overlaySettings]=\"paginator.overlaySettings\" [(ngModel)]=\"paginator.perPage\" type=\"border\">\n        <igx-select-item [value]=\"val\" *ngFor=\"let val of paginator.selectOptions\">\n            {{ val }}\n        </igx-select-item>\n    </igx-select>\n</div>\n", dependencies: [{ kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: IgxPageSizeSelectorComponent, isStandalone: true, selector: "igx-page-size", host: { properties: { "class.igx-page-size": "this.cssClass" } }, ngImport: i0, template: "<label class=\"igx-page-size__label\">{{ paginator.resourceStrings.igx_paginator_label }}</label>\n<div class=\"igx-page-size__select\">\n    <igx-select [overlaySettings]=\"paginator.overlaySettings\" [(ngModel)]=\"paginator.perPage\" type=\"border\">\n        <igx-select-item [value]=\"val\" *ngFor=\"let val of paginator.selectOptions\">\n            {{ val }}\n        </igx-select-item>\n    </igx-select>\n</div>\n", dependencies: [{ kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxPageSizeSelectorComponent, decorators: [{
             type: Component,
@@ -80359,7 +80387,7 @@ class IgxTreeGridCellComponent extends IgxGridExpandableCellComponent {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxTreeGridCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: IgxTreeGridCellComponent, isStandalone: true, selector: "igx-tree-grid-cell", inputs: { level: "level", showIndicator: "showIndicator", isLoading: "isLoading", row: "row" }, providers: [HammerGesturesManager], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    <igx-chip\n        *ngIf=\"displayPinnedChip\"\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</ng-template>\n<ng-template #defaultCell>\n    <div *ngIf=\"column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)\"\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' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        \"\n        [row]=\"rowData\"\n        [column]=\"this.column.field\"\n        [containerClass]=\"'igx-grid__td-text'\"\n        [metadata]=\"searchMetadata\"\n    >{{\n            formatter\n                ? (value | columnFormatter:formatter:rowData)\n                : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        }}</div>\n    <igx-icon\n        family=\"default\"\n        [name]=\"value ? 'confirm' : 'close'\"\n        *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n        [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n    </igx-icon>\n    <img *ngIf=\"column.dataType === 'image'\" [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n    igxTextHighlight class=\"igx-grid__td-text\"\n    [cssClass]=\"highlightClass\"\n    [activeCssClass]=\"activeHighlightClass\"\n    [groupName]=\"gridID\"\n    [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n        (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n        (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?\n        (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n    [row]=\"rowData\"\n    [column]=\"this.column.field\"\n    [containerClass]=\"'igx-grid__td-text'\"\n    [metadata]=\"searchMetadata\">{{\n        !isEmptyAddRowCell ? value : (column.header || column.field)\n    }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    <ng-container *ngIf=\"column.dataType === 'string' || column.dataType === 'image'\" [formGroup]=\"formGroup\">\n        <igx-input-group [style.--ig-size]=\"1\">\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    <ng-container *ngIf=\"column.dataType === 'number'\">\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [igxTextSelection]=\"true\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'boolean'\" [formGroup]=\"formGroup\">\n        <igx-checkbox\n            [checked]=\"editValue\"\n            [igxFocus]=\"true\"\n            [disableRipple]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-checkbox>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'date'\" [formGroup]=\"formGroup\">\n        <igx-date-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [weekStart]=\"column.pipeArgs.weekStart\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        >\n        </igx-date-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'time'\" [formGroup]=\"formGroup\">\n        <igx-time-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [inputFormat]=\"column.defaultTimeFormat\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-time-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'currency'\">\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [igxTextSelection]=\"true\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix *ngIf=\"!grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-suffix>\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'percent'\">\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [igxTextSelection]=\"true\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    </ng-container>\n</ng-template>\n<ng-container *ngIf=\"!editMode\">\n    <ng-container *ngIf=\"level > 0\">\n        <div\n            #indentationDiv\n            class=\"igx-grid__tree-cell--padding-level-{{level}}\"\n            [ngStyle]=\"{'padding-inline-start': 'calc(var(--igx-tree-indent-size) *' + level + ')'}\"\n        ></div>\n    </ng-container>\n    <div\n        #indicator\n        *ngIf=\"!isLoading\"\n        class=\"igx-grid__tree-grouping-indicator\"\n        [ngStyle]=\"{ visibility: showIndicator ? 'visible' : 'hidden' }\"\n        (click)=\"toggle($event)\"\n        (focus)=\"onIndicatorFocus()\"\n    >\n        <ng-container\n            *ngTemplateOutlet=\"iconTemplate; context: { $implicit:  this }\"\n        >\n        </ng-container>\n        <ng-container\n            *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\"\n        >\n        </ng-container>\n    </div>\n    <div\n        *ngIf=\"isLoading\"\n        (dblclick)=\"onLoadingDblClick($event)\"\n        class=\"igx-grid__tree-loading-indicator\"\n    >\n        <ng-container\n            *ngTemplateOutlet=\"\n                grid.rowLoadingIndicatorTemplate\n                    ? grid.rowLoadingIndicatorTemplate\n                    : defaultLoadingIndicatorTemplate\n            \"\n        >\n        </ng-container>\n    </div>\n    <ng-template #defaultLoadingIndicatorTemplate>\n        <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n    </ng-template>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"> </ng-container>\n<ng-container *ngIf=\"isInvalid\">\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n</ng-template>\n<ng-template #defaultError>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['required']\">\n        {{grid.resourceStrings.igx_grid_required_validation_error}}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['minlength']\">\n        {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['maxlength']\">\n        {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['min']\">\n        {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['max']\">\n        {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['email']\">\n        {{grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['pattern']\">\n        {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { 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: ["family", "name", "active"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: IgxTreeGridCellComponent, isStandalone: true, selector: "igx-tree-grid-cell", inputs: { level: "level", showIndicator: "showIndicator", isLoading: "isLoading", row: "row" }, providers: [HammerGesturesManager], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    <igx-chip\n        *ngIf=\"displayPinnedChip\"\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</ng-template>\n<ng-template #defaultCell>\n    <div *ngIf=\"column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)\"\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' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        \"\n        [row]=\"rowData\"\n        [column]=\"this.column.field\"\n        [containerClass]=\"'igx-grid__td-text'\"\n        [metadata]=\"searchMetadata\"\n    >{{\n            formatter\n                ? (value | columnFormatter:formatter:rowData)\n                : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        }}</div>\n    <igx-icon\n        family=\"default\"\n        [name]=\"value ? 'confirm' : 'close'\"\n        *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n        [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n    </igx-icon>\n    <img *ngIf=\"column.dataType === 'image'\" [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n    igxTextHighlight class=\"igx-grid__td-text\"\n    [cssClass]=\"highlightClass\"\n    [activeCssClass]=\"activeHighlightClass\"\n    [groupName]=\"gridID\"\n    [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n        (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n        (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?\n        (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n    [row]=\"rowData\"\n    [column]=\"this.column.field\"\n    [containerClass]=\"'igx-grid__td-text'\"\n    [metadata]=\"searchMetadata\">{{\n        !isEmptyAddRowCell ? value : (column.header || column.field)\n    }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    <ng-container *ngIf=\"column.dataType === 'string' || column.dataType === 'image'\" [formGroup]=\"formGroup\">\n        <igx-input-group [style.--ig-size]=\"1\">\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    <ng-container *ngIf=\"column.dataType === 'number'\">\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [igxTextSelection]=\"true\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'boolean'\" [formGroup]=\"formGroup\">\n        <igx-checkbox\n            [checked]=\"editValue\"\n            [igxFocus]=\"true\"\n            [disableRipple]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-checkbox>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'date'\" [formGroup]=\"formGroup\">\n        <igx-date-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [weekStart]=\"column.pipeArgs.weekStart\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        >\n        </igx-date-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'time'\" [formGroup]=\"formGroup\">\n        <igx-time-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [inputFormat]=\"column.defaultTimeFormat\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-time-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'currency'\">\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [igxTextSelection]=\"true\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix *ngIf=\"!grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-suffix>\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'percent'\">\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [igxTextSelection]=\"true\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    </ng-container>\n</ng-template>\n<ng-container *ngIf=\"!editMode\">\n    <ng-container *ngIf=\"level > 0\">\n        <div\n            #indentationDiv\n            class=\"igx-grid__tree-cell--padding-level-{{level}}\"\n            [ngStyle]=\"{'padding-inline-start': 'calc(var(--igx-tree-indent-size) *' + level + ')'}\"\n        ></div>\n    </ng-container>\n    <div\n        #indicator\n        *ngIf=\"!isLoading\"\n        class=\"igx-grid__tree-grouping-indicator\"\n        [ngStyle]=\"{ visibility: showIndicator ? 'visible' : 'hidden' }\"\n        (click)=\"toggle($event)\"\n        (focus)=\"onIndicatorFocus()\"\n    >\n        <ng-container\n            *ngTemplateOutlet=\"iconTemplate; context: { $implicit:  this }\"\n        >\n        </ng-container>\n        <ng-container\n            *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\"\n        >\n        </ng-container>\n    </div>\n    <div\n        *ngIf=\"isLoading\"\n        (dblclick)=\"onLoadingDblClick($event)\"\n        class=\"igx-grid__tree-loading-indicator\"\n    >\n        <ng-container\n            *ngTemplateOutlet=\"\n                grid.rowLoadingIndicatorTemplate\n                    ? grid.rowLoadingIndicatorTemplate\n                    : defaultLoadingIndicatorTemplate\n            \"\n        >\n        </ng-container>\n    </div>\n    <ng-template #defaultLoadingIndicatorTemplate>\n        <igx-circular-bar [indeterminate]=\"true\"> </igx-circular-bar>\n    </ng-template>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"> </ng-container>\n<ng-container *ngIf=\"isInvalid\">\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n</ng-template>\n<ng-template #defaultError>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['required']\">\n        {{grid.resourceStrings.igx_grid_required_validation_error}}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['minlength']\">\n        {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['maxlength']\">\n        {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['min']\">\n        {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['max']\">\n        {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['email']\">\n        {{grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['pattern']\">\n        {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { 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: ["family", "name", "active"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxTreeGridCellComponent, decorators: [{
             type: Component,
@@ -81341,7 +81369,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
             IgxColumnResizingService,
             IgxForOfSyncService,
             IgxForOfScrollSyncService
-        ], queries: [{ propertyName: "treeGroupArea", first: true, predicate: IgxTreeGridGroupByAreaComponent, descendants: true, read: IgxTreeGridGroupByAreaComponent }, { propertyName: "rowLoadingTemplate", first: true, predicate: IgxRowLoadingIndicatorTemplateDirective, descendants: true, read: IgxRowLoadingIndicatorTemplateDirective }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"></ng-content>\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf=\"data\n            | treeGridTransaction:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | treeGridNormalizeRecord:pipeTrigger\n            | treeGridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true\n            | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger:true as pinnedData\">\n                <div #pinContainer *ngIf=\"pinnedData.length > 0\"\n                    [ngClass]=\"{\n                        'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                        'igx-grid__tr--pinned-top': isRowPinningToTop\n                    }\"\n                    class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                    <ng-container *ngFor=\"let rowData of pinnedData;let rowIndex = index;\">\n                        <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | treeGridTransaction:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:pipeTrigger\n        | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger\n        | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger\n        | treeGridFlattening:expansionDepth:expansionStates:pipeTrigger\n        | treeGridPaging:!!paginator:page:perPage:pipeTrigger\n        | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | treeGridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" #verticalScrollContainer\n            (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row [gridID]=\"id\" [summaries]=\"rowData.summaries\"\n                [firstCellIndentation]=\"rowData.cellIndentation\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" role=\"row\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\"  (pointerdown)=\"$event.preventDefault()\"\n            [style.height.px]='calcHeight'>\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summaryRowHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\">\n        <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n        <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"></ng-content>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedColumnCollection", "unpinnedColumnCollection", "activeDescendant", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxTreeGridRowComponent, selector: "igx-tree-grid-row", inputs: ["treeRow"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxTreeGridHierarchizingPipe, name: "treeGridHierarchizing" }, { kind: "pipe", type: IgxTreeGridFlatteningPipe, name: "treeGridFlattening" }, { kind: "pipe", type: IgxTreeGridSortingPipe, name: "treeGridSorting" }, { kind: "pipe", type: IgxTreeGridFilteringPipe, name: "treeGridFiltering" }, { kind: "pipe", type: IgxTreeGridPagingPipe, name: "treeGridPaging" }, { kind: "pipe", type: IgxTreeGridTransactionPipe, name: "treeGridTransaction" }, { kind: "pipe", type: IgxTreeGridSummaryPipe, name: "treeGridSummary" }, { kind: "pipe", type: IgxTreeGridNormalizeRecordsPipe, name: "treeGridNormalizeRecord" }, { kind: "pipe", type: IgxTreeGridAddRowPipe, name: "treeGridAddRow" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "treeGroupArea", first: true, predicate: IgxTreeGridGroupByAreaComponent, descendants: true, read: IgxTreeGridGroupByAreaComponent }, { propertyName: "rowLoadingTemplate", first: true, predicate: IgxRowLoadingIndicatorTemplateDirective, descendants: true, read: IgxRowLoadingIndicatorTemplateDirective }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"></ng-content>\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf=\"data\n            | treeGridTransaction:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | treeGridNormalizeRecord:pipeTrigger\n            | treeGridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true\n            | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger:true as pinnedData\">\n                <div #pinContainer *ngIf=\"pinnedData.length > 0\"\n                    [ngClass]=\"{\n                        'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                        'igx-grid__tr--pinned-top': isRowPinningToTop\n                    }\"\n                    class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                    <ng-container *ngFor=\"let rowData of pinnedData;let rowIndex = index;\">\n                        <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | treeGridTransaction:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:pipeTrigger\n        | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger\n        | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger\n        | treeGridFlattening:expansionDepth:expansionStates:pipeTrigger\n        | treeGridPaging:!!paginator:page:perPage:pipeTrigger\n        | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | treeGridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" #verticalScrollContainer\n            (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row [gridID]=\"id\" [summaries]=\"rowData.summaries\"\n                [firstCellIndentation]=\"rowData.cellIndentation\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" role=\"row\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\"  (pointerdown)=\"$event.preventDefault()\"\n            [style.height.px]='calcHeight'>\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summaryRowHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\">\n        <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n        <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"></ng-content>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedColumnCollection", "unpinnedColumnCollection", "activeDescendant", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxTreeGridRowComponent, selector: "igx-tree-grid-row", inputs: ["treeRow"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxTreeGridHierarchizingPipe, name: "treeGridHierarchizing" }, { kind: "pipe", type: IgxTreeGridFlatteningPipe, name: "treeGridFlattening" }, { kind: "pipe", type: IgxTreeGridSortingPipe, name: "treeGridSorting" }, { kind: "pipe", type: IgxTreeGridFilteringPipe, name: "treeGridFiltering" }, { kind: "pipe", type: IgxTreeGridPagingPipe, name: "treeGridPaging" }, { kind: "pipe", type: IgxTreeGridTransactionPipe, name: "treeGridTransaction" }, { kind: "pipe", type: IgxTreeGridSummaryPipe, name: "treeGridSummary" }, { kind: "pipe", type: IgxTreeGridNormalizeRecordsPipe, name: "treeGridNormalizeRecord" }, { kind: "pipe", type: IgxTreeGridAddRowPipe, name: "treeGridAddRow" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxTreeGridComponent, decorators: [{
             type: Component,
@@ -81393,8 +81421,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         IgxTreeGridTransactionPipe,
                         IgxTreeGridSummaryPipe,
                         IgxTreeGridNormalizeRecordsPipe,
-                        IgxTreeGridAddRowPipe
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"></ng-content>\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf=\"data\n            | treeGridTransaction:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | treeGridNormalizeRecord:pipeTrigger\n            | treeGridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true\n            | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger:true as pinnedData\">\n                <div #pinContainer *ngIf=\"pinnedData.length > 0\"\n                    [ngClass]=\"{\n                        'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                        'igx-grid__tr--pinned-top': isRowPinningToTop\n                    }\"\n                    class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                    <ng-container *ngFor=\"let rowData of pinnedData;let rowIndex = index;\">\n                        <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | treeGridTransaction:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:pipeTrigger\n        | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger\n        | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger\n        | treeGridFlattening:expansionDepth:expansionStates:pipeTrigger\n        | treeGridPaging:!!paginator:page:perPage:pipeTrigger\n        | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | treeGridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" #verticalScrollContainer\n            (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row [gridID]=\"id\" [summaries]=\"rowData.summaries\"\n                [firstCellIndentation]=\"rowData.cellIndentation\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" role=\"row\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\"  (pointerdown)=\"$event.preventDefault()\"\n            [style.height.px]='calcHeight'>\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summaryRowHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\">\n        <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n        <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"></ng-content>\n    </div>\n}\n" }]
+                        IgxTreeGridAddRowPipe,
+                        IgxStringReplacePipe
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"></ng-content>\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf=\"data\n            | treeGridTransaction:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | treeGridNormalizeRecord:pipeTrigger\n            | treeGridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true\n            | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger:true as pinnedData\">\n                <div #pinContainer *ngIf=\"pinnedData.length > 0\"\n                    [ngClass]=\"{\n                        'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                        'igx-grid__tr--pinned-top': isRowPinningToTop\n                    }\"\n                    class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                    <ng-container *ngFor=\"let rowData of pinnedData;let rowIndex = index;\">\n                        <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"data\n        | treeGridTransaction:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:pipeTrigger\n        | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger\n        | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger\n        | treeGridFlattening:expansionDepth:expansionStates:pipeTrigger\n        | treeGridPaging:!!paginator:page:perPage:pipeTrigger\n        | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | treeGridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" #verticalScrollContainer\n            (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" [disabled]=\"disabledRow\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row [gridID]=\"id\" [summaries]=\"rowData.summaries\"\n                [firstCellIndentation]=\"rowData.cellIndentation\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" role=\"row\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf='shouldOverlayLoading'>\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\"  (pointerdown)=\"$event.preventDefault()\"\n            [style.height.px]='calcHeight'>\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summaryRowHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\"\n    (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf='showAddButton'>\n            <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\">\n        <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n        <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"></ng-content>\n    </div>\n}\n" }]
         }], ctorParameters: () => [{ type: IgxGridValidationService }, { type: IgxGridSelectionService }, { type: IgxColumnResizingService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_SERVICE_BASE]
@@ -83010,7 +83039,7 @@ class IgxHierarchicalGridCellComponent extends IgxGridCellComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxHierarchicalGridCellComponent, deps: [{ token: IgxGridSelectionService }, { token: IGX_GRID_BASE }, { token: IgxOverlayService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: HammerGesturesManager }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: IgxHierarchicalGridCellComponent, isStandalone: true, selector: "igx-hierarchical-grid-cell", providers: [HammerGesturesManager], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    <igx-chip\n        *ngIf=\"displayPinnedChip\"\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</ng-template>\n<ng-template #defaultCell>\n    <div *ngIf=\"column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)\"\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' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        \"\n        [row]=\"rowData\"\n        [column]=\"this.column.field\"\n        [containerClass]=\"'igx-grid__td-text'\"\n        [metadata]=\"searchMetadata\"\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' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        }}</div>\n    <igx-icon\n        family=\"default\"\n        [name]=\"value ? 'confirm' : 'close'\"\n        *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n        [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n    </igx-icon>\n    <img *ngIf=\"column.dataType === 'image'\" [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\"\n    [cssClass]=\"highlightClass\"\n    [activeCssClass]=\"activeHighlightClass\"\n    [groupName]=\"gridID\"\n    [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n        (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n        (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n        (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n    [row]=\"rowData\"\n    [column]=\"this.column.field\"\n    [containerClass]=\"'igx-grid__td-text'\"\n    [metadata]=\"searchMetadata\">{{\n        !isEmptyAddRowCell ? value : (column.header || column.field)\n    }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    <ng-container *ngIf=\"column.dataType === 'string' || column.dataType === 'image'\" [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    <ng-container *ngIf=\"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    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'boolean'\" [formGroup]=\"formGroup\">\n        <igx-checkbox\n            [checked]=\"editValue\"\n            [igxFocus]=\"true\"\n            [disableRipple]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-checkbox>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'date'\" [formGroup]=\"formGroup\">\n        <igx-date-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [weekStart]=\"column.pipeArgs.weekStart\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        >\n        </igx-date-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'time'\" [formGroup]=\"formGroup\">\n        <igx-time-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [inputFormat]=\"column.defaultTimeFormat\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-time-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'currency'\">\n        <igx-input-group [formGroup]=\"formGroup\">\n            <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix *ngIf=\"!grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-suffix>\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'percent'\">\n        <igx-input-group [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> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    </ng-container>\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n<ng-container *ngIf=\"isInvalid\">\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #defaultError>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['required']\">\n        {{grid.resourceStrings.igx_grid_required_validation_error}}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['minlength']\">\n        {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['maxlength']\">\n        {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['min']\">\n        {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['max']\">\n        {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['email']\">\n        {{grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['pattern']\">\n        {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["family", "name", "active"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: IgxHierarchicalGridCellComponent, isStandalone: true, selector: "igx-hierarchical-grid-cell", providers: [HammerGesturesManager], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    <igx-chip\n        *ngIf=\"displayPinnedChip\"\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</ng-template>\n<ng-template #defaultCell>\n    <div *ngIf=\"column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)\"\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' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        \"\n        [row]=\"rowData\"\n        [column]=\"this.column.field\"\n        [containerClass]=\"'igx-grid__td-text'\"\n        [metadata]=\"searchMetadata\"\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' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        }}</div>\n    <igx-icon\n        family=\"default\"\n        [name]=\"value ? 'confirm' : 'close'\"\n        *ngIf=\"column.dataType === 'boolean' && !this.formatter\"\n        [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n    </igx-icon>\n    <img *ngIf=\"column.dataType === 'image'\" [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    <div *ngIf=\"column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)\"\n        igxTextHighlight class=\"igx-grid__td-text\"\n    [cssClass]=\"highlightClass\"\n    [activeCssClass]=\"activeHighlightClass\"\n    [groupName]=\"gridID\"\n    [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n        (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n        (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n        (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n        (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n    [row]=\"rowData\"\n    [column]=\"this.column.field\"\n    [containerClass]=\"'igx-grid__td-text'\"\n    [metadata]=\"searchMetadata\">{{\n        !isEmptyAddRowCell ? value : (column.header || column.field)\n    }}</div>\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    <ng-container *ngIf=\"column.dataType === 'string' || column.dataType === 'image'\" [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    <ng-container *ngIf=\"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    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'boolean'\" [formGroup]=\"formGroup\">\n        <igx-checkbox\n            [checked]=\"editValue\"\n            [igxFocus]=\"true\"\n            [disableRipple]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-checkbox>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'date'\" [formGroup]=\"formGroup\">\n        <igx-date-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [weekStart]=\"column.pipeArgs.weekStart\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        >\n        </igx-date-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'time'\" [formGroup]=\"formGroup\">\n        <igx-time-picker\n            [style.width.%]=\"100\"\n            [outlet]=\"grid.outlet\"\n            mode=\"dropdown\"\n            [locale]=\"grid.locale\"\n            [inputFormat]=\"column.defaultTimeFormat\"\n            [(value)]=\"editValue\"\n            [igxFocus]=\"true\"\n            [formControl]=\"formControl\"\n        ></igx-time-picker>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'dateTime'\">\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [igxDateTimeEditor]=\"column.defaultDateTimeFormat\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'currency'\">\n        <igx-input-group [formGroup]=\"formGroup\">\n            <igx-prefix *ngIf=\"grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-prefix>\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix *ngIf=\"!grid.currencyPositionLeft\">{{ currencyCodeSymbol }}</igx-suffix>\n        </igx-input-group>\n    </ng-container>\n    <ng-container *ngIf=\"column.dataType === 'percent'\">\n        <igx-input-group [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> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    </ng-container>\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n<ng-container *ngIf=\"isInvalid\">\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #defaultError>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['required']\">\n        {{grid.resourceStrings.igx_grid_required_validation_error}}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['minlength']\">\n        {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['maxlength']\">\n        {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['min']\">\n        {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['max']\">\n        {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['email']\">\n        {{grid.resourceStrings.igx_grid_email_validation_error }}\n    </div>\n    <div *ngIf=\"formGroup?.get(column?.field).errors?.['pattern']\">\n        {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["family", "name", "active"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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: ["id", "labelId", "value", "name", "tabindex", "labelPosition", "disableRipple", "required", "aria-labelledby", "aria-label", "indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"], outputs: ["change"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxHierarchicalGridCellComponent, decorators: [{
             type: Component,
@@ -84069,7 +84098,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
             IgxForOfSyncService,
             IgxForOfScrollSyncService,
             IgxRowIslandAPIService
-        ], queries: [{ propertyName: "childLayoutList", predicate: IgxRowIslandComponent, read: IgxRowIslandComponent }, { propertyName: "allLayoutList", predicate: IgxRowIslandComponent, descendants: true, read: IgxRowIslandComponent }, { propertyName: "paginatorList", predicate: IgxPaginatorToken, descendants: true }, { propertyName: "actionStripComponents", predicate: IgxActionStripToken, read: IgxActionStripToken }], viewQueries: [{ propertyName: "toolbarOutlet", first: true, predicate: ["toolbarOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "paginatorOutlet", first: true, predicate: ["paginatorOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "hierarchicalRecordTemplate", first: true, predicate: ["hierarchical_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "childTemplate", first: true, predicate: ["child_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "templateOutlets", predicate: IgxTemplateOutletDirective, descendants: true, read: IgxTemplateOutletDirective }, { propertyName: "hierarchicalRows", predicate: IgxChildGridRowComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-container #toolbarOutlet></ng-container>\n\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\"\n     (keydown)=\"navigation.handleNavigation($event)\" (dragStop)=\"selectionService.dragMode = $event\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"calcWidth\" #tbody (scroll)=\"preventContainerScroll($event)\">\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf=\"data\n            | gridTransaction:id:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | gridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n            | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true as pinnedData\">\n                <div #pinContainer *ngIf=\"pinnedData.length > 0\" class=\"igx-grid__tr--pinned\"\n                    [ngClass]=\"{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }\"\n                    [style.width.px]=\"calcWidth\">\n                    <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                        <ng-container *ngTemplateOutlet=\"pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template igxGridFor let-rowData let-rowIndex=\"index\" [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger\n        | gridHierarchicalPaging:!!paginator:page:perPage:id:pipeTrigger\n        | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\" [igxForItemSize]=\"renderedRowHeight\" [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\" (viewCreated)=\"viewCreatedHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\" (cachedViewLoaded)=\"cachedViewLoaded($event)\">\n            </ng-template>\n            <!-- <ng-container *igxTemplateOutlet=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)\"></ng-container> -->\n        </ng-template>\n        <ng-template #hierarchical_record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [disabled]=\"disabledRow\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n\n        <ng-template #pinned_hierarchical_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row #pinnedRow>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n        <ng-template #child_record_template let-rowIndex=\"index\" let-rowData>\n            <div [attr.data-rowindex]=\"rowIndex\" (scroll)=\"onContainerScroll()\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr--highlighted':isRowHighlighted(rowData)\n            }\">\n                <igx-child-grid-row *ngFor=\"let layout of childLayoutList\" [parentGridID]=\"id\" [index]=\"rowIndex\"\n                    [data]=\"rowData\" [layout]=\"layout\" #row>\n                </igx-child-grid-row>\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark *ngIf=\"!this.parent\"></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf=\"shouldOverlayLoading\">\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" [attr.aria-activedescendant]=\"activeDescendant\"\n     (keydown)=\"navigation.summaryNav($event)\">\n        <igx-grid-summary-row [style.width.px]=\"calcWidth\" [style.height.px]=\"summaryRowHeight\"\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\" [style.min-width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]=\"pinnedWidth\" [style.min-width.px]=\"pinnedWidth\" [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n    <ng-container #paginatorOutlet></ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon family=\"default\" name=\"unfold_more\" role=\"button\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [active]=\"hasExpandedRecords() && hasExpandableChildren\">\n    </igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"resolveRowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : resolveRowEditText || defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditActions || defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\">\n        <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n        <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"></ng-content>\n        <ng-content select=\"igx-row-island,igc-row-island\"></ng-content>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedColumnCollection", "unpinnedColumnCollection", "activeDescendant", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxHierarchicalRowComponent, selector: "igx-hierarchical-grid-row" }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "component", type: IgxChildGridRowComponent, selector: "igx-child-grid-row", inputs: ["layout", "parentGridID", "data", "index"] }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { kind: "pipe", type: IgxGridTransactionPipe, name: "gridTransaction" }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridAddRowPipe, name: "gridAddRow" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxGridHierarchicalPipe, name: "gridHierarchical" }, { kind: "pipe", type: IgxGridHierarchicalPagingPipe, name: "gridHierarchicalPaging" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "childLayoutList", predicate: IgxRowIslandComponent, read: IgxRowIslandComponent }, { propertyName: "allLayoutList", predicate: IgxRowIslandComponent, descendants: true, read: IgxRowIslandComponent }, { propertyName: "paginatorList", predicate: IgxPaginatorToken, descendants: true }, { propertyName: "actionStripComponents", predicate: IgxActionStripToken, read: IgxActionStripToken }], viewQueries: [{ propertyName: "toolbarOutlet", first: true, predicate: ["toolbarOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "paginatorOutlet", first: true, predicate: ["paginatorOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "hierarchicalRecordTemplate", first: true, predicate: ["hierarchical_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "childTemplate", first: true, predicate: ["child_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "templateOutlets", predicate: IgxTemplateOutletDirective, descendants: true, read: IgxTemplateOutletDirective }, { propertyName: "hierarchicalRows", predicate: IgxChildGridRowComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-container #toolbarOutlet></ng-container>\n\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\"\n     (keydown)=\"navigation.handleNavigation($event)\" (dragStop)=\"selectionService.dragMode = $event\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"calcWidth\" #tbody (scroll)=\"preventContainerScroll($event)\">\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf=\"data\n            | gridTransaction:id:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | gridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n            | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true as pinnedData\">\n                <div #pinContainer *ngIf=\"pinnedData.length > 0\" class=\"igx-grid__tr--pinned\"\n                    [ngClass]=\"{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }\"\n                    [style.width.px]=\"calcWidth\">\n                    <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                        <ng-container *ngTemplateOutlet=\"pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template igxGridFor let-rowData let-rowIndex=\"index\" [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger\n        | gridHierarchicalPaging:!!paginator:page:perPage:id:pipeTrigger\n        | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\" [igxForItemSize]=\"renderedRowHeight\" [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\" (viewCreated)=\"viewCreatedHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\" (cachedViewLoaded)=\"cachedViewLoaded($event)\">\n            </ng-template>\n            <!-- <ng-container *igxTemplateOutlet=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)\"></ng-container> -->\n        </ng-template>\n        <ng-template #hierarchical_record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [disabled]=\"disabledRow\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n\n        <ng-template #pinned_hierarchical_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row #pinnedRow>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n        <ng-template #child_record_template let-rowIndex=\"index\" let-rowData>\n            <div [attr.data-rowindex]=\"rowIndex\" (scroll)=\"onContainerScroll()\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr--highlighted':isRowHighlighted(rowData)\n            }\">\n                <igx-child-grid-row *ngFor=\"let layout of childLayoutList\" [parentGridID]=\"id\" [index]=\"rowIndex\"\n                    [data]=\"rowData\" [layout]=\"layout\" #row>\n                </igx-child-grid-row>\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark *ngIf=\"!this.parent\"></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf=\"shouldOverlayLoading\">\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" [attr.aria-activedescendant]=\"activeDescendant\"\n     (keydown)=\"navigation.summaryNav($event)\">\n        <igx-grid-summary-row [style.width.px]=\"calcWidth\" [style.height.px]=\"summaryRowHeight\"\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\" [style.min-width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]=\"pinnedWidth\" [style.min-width.px]=\"pinnedWidth\" [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n    <ng-container #paginatorOutlet></ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon family=\"default\" name=\"unfold_more\" role=\"button\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [active]=\"hasExpandedRecords() && hasExpandableChildren\">\n    </igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"resolveRowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : resolveRowEditText || defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditActions || defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\">\n        <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n        <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"></ng-content>\n        <ng-content select=\"igx-row-island,igc-row-island\"></ng-content>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedColumnCollection", "unpinnedColumnCollection", "activeDescendant", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxHierarchicalRowComponent, selector: "igx-hierarchical-grid-row" }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "isIndeterminate", "textVisibility", "text"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "component", type: IgxChildGridRowComponent, selector: "igx-child-grid-row", inputs: ["layout", "parentGridID", "data", "index"] }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { kind: "pipe", type: IgxGridTransactionPipe, name: "gridTransaction" }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridAddRowPipe, name: "gridAddRow" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxGridHierarchicalPipe, name: "gridHierarchical" }, { kind: "pipe", type: IgxGridHierarchicalPagingPipe, name: "gridHierarchicalPaging" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: IgxHierarchicalGridComponent, decorators: [{
             type: Component,
@@ -84120,8 +84149,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                         IgxGridRowStylesPipe,
                         IgxSummaryDataPipe,
                         IgxGridHierarchicalPipe,
-                        IgxGridHierarchicalPagingPipe
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-container #toolbarOutlet></ng-container>\n\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\"\n     (keydown)=\"navigation.handleNavigation($event)\" (dragStop)=\"selectionService.dragMode = $event\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"calcWidth\" #tbody (scroll)=\"preventContainerScroll($event)\">\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf=\"data\n            | gridTransaction:id:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | gridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n            | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true as pinnedData\">\n                <div #pinContainer *ngIf=\"pinnedData.length > 0\" class=\"igx-grid__tr--pinned\"\n                    [ngClass]=\"{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }\"\n                    [style.width.px]=\"calcWidth\">\n                    <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                        <ng-container *ngTemplateOutlet=\"pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template igxGridFor let-rowData let-rowIndex=\"index\" [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger\n        | gridHierarchicalPaging:!!paginator:page:perPage:id:pipeTrigger\n        | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\" [igxForItemSize]=\"renderedRowHeight\" [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\" (viewCreated)=\"viewCreatedHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\" (cachedViewLoaded)=\"cachedViewLoaded($event)\">\n            </ng-template>\n            <!-- <ng-container *igxTemplateOutlet=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)\"></ng-container> -->\n        </ng-template>\n        <ng-template #hierarchical_record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [disabled]=\"disabledRow\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n\n        <ng-template #pinned_hierarchical_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row #pinnedRow>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n        <ng-template #child_record_template let-rowIndex=\"index\" let-rowData>\n            <div [attr.data-rowindex]=\"rowIndex\" (scroll)=\"onContainerScroll()\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr--highlighted':isRowHighlighted(rowData)\n            }\">\n                <igx-child-grid-row *ngFor=\"let layout of childLayoutList\" [parentGridID]=\"id\" [index]=\"rowIndex\"\n                    [data]=\"rowData\" [layout]=\"layout\" #row>\n                </igx-child-grid-row>\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark *ngIf=\"!this.parent\"></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf=\"shouldOverlayLoading\">\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" [attr.aria-activedescendant]=\"activeDescendant\"\n     (keydown)=\"navigation.summaryNav($event)\">\n        <igx-grid-summary-row [style.width.px]=\"calcWidth\" [style.height.px]=\"summaryRowHeight\"\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\" [style.min-width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]=\"pinnedWidth\" [style.min-width.px]=\"pinnedWidth\" [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n    <ng-container #paginatorOutlet></ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon family=\"default\" name=\"unfold_more\" role=\"button\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [active]=\"hasExpandedRecords() && hasExpandableChildren\">\n    </igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"resolveRowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n<ng-template #defaultRowEditText>\n    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns\n</ng-template>\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : resolveRowEditText || defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditActions || defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\">\n        <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n        <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"></ng-content>\n        <ng-content select=\"igx-row-island,igc-row-island\"></ng-content>\n    </div>\n}\n" }]
+                        IgxGridHierarchicalPagingPipe,
+                        IgxStringReplacePipe
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-container #toolbarOutlet></ng-container>\n\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [activeDescendant]=\"activeDescendant\"\n    [width]=\"calcWidth\"\n    [pinnedColumnCollection]=\"pinnedColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\"\n     (keydown)=\"navigation.handleNavigation($event)\" (dragStop)=\"selectionService.dragMode = $event\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"calcWidth\" #tbody (scroll)=\"preventContainerScroll($event)\">\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length <= 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-left\"></span>\n        <span *ngIf=\"moving && columnInDrag && pinnedColumns.length > 0\"\n            [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n            class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedWidth\"></span>\n        <ng-template #pinnedRecordsTemplate>\n            <ng-container *ngIf=\"data\n            | gridTransaction:id:pipeTrigger\n            | visibleColumns:hasVisibleColumns\n            | gridAddRow:true:pipeTrigger\n            | gridRowPinning:id:true:pipeTrigger\n            | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n            | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true as pinnedData\">\n                <div #pinContainer *ngIf=\"pinnedData.length > 0\" class=\"igx-grid__tr--pinned\"\n                    [ngClass]=\"{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }\"\n                    [style.width.px]=\"calcWidth\">\n                    <ng-container *ngFor=\"let rowData of pinnedData; let rowIndex = index\">\n                        <ng-container *ngTemplateOutlet=\"pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)\">\n                        </ng-container>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template igxGridFor let-rowData let-rowIndex=\"index\" [igxGridForOf]=\"data\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger\n        | gridHierarchicalPaging:!!paginator:page:perPage:id:pipeTrigger\n        | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\"\n            [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\" [igxForItemSize]=\"renderedRowHeight\" [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\" (viewCreated)=\"viewCreatedHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\" (cachedViewLoaded)=\"cachedViewLoaded($event)\">\n            </ng-template>\n            <!-- <ng-container *igxTemplateOutlet=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)\"></ng-container> -->\n        </ng-template>\n        <ng-template #hierarchical_record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [disabled]=\"disabledRow\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n\n        <ng-template #pinned_hierarchical_record_template let-rowIndex=\"index\" let-rowData>\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row #pinnedRow>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n        <ng-template #child_record_template let-rowIndex=\"index\" let-rowData>\n            <div [attr.data-rowindex]=\"rowIndex\" (scroll)=\"onContainerScroll()\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr--highlighted':isRowHighlighted(rowData)\n            }\">\n                <igx-child-grid-row *ngFor=\"let layout of childLayoutList\" [parentGridID]=\"id\" [index]=\"rowIndex\"\n                    [data]=\"rowData\" [layout]=\"layout\" #row>\n                </igx-child-grid-row>\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark *ngIf=\"!this.parent\"></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        <igx-circular-bar [indeterminate]=\"true\" *ngIf=\"shouldOverlayLoading\">\n        </igx-circular-bar>\n    </div>\n    <span *ngIf=\"moving && columnInDrag\" [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n        id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" [attr.aria-activedescendant]=\"activeDescendant\"\n     (keydown)=\"navigation.summaryNav($event)\">\n        <igx-grid-summary-row [style.width.px]=\"calcWidth\" [style.height.px]=\"summaryRowHeight\"\n            *ngIf=\"hasSummarizedColumns && rootSummariesEnabled\" [gridID]=\"id\" role=\"row\"\n            [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n            class=\"igx-grid__summaries\" #summaryRow>\n        </igx-grid-summary-row>\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\" [style.min-width.px]=\"isPinningToStart ? pinnedWidth : headerFeaturesWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]=\"pinnedWidth\" [style.min-width.px]=\"pinnedWidth\" [hidden]=\"pinnedWidth === 0 || isPinningToStart\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n    <ng-container #paginatorOutlet></ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        <span *ngIf=\"showAddButton\">\n            <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n        </span>\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon family=\"default\" name=\"unfold_more\" role=\"button\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [active]=\"hasExpandedRecords() && hasExpandableChildren\">\n    </igx-icon>\n</ng-template>\n\n<div *ngIf=\"rowEditable\" igxToggle #rowEditingOverlay>\n    <div [className]=\"bannerClass\">\n        <ng-container\n            *ngTemplateOutlet=\"resolveRowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n        </ng-container>\n    </div>\n</div>\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.getClassName() === 'IgxAddRow' ? rowAddTextTemplate : resolveRowEditText || defaultRowEditText;\n                context: { $implicit: this.crudService.row?.getClassName() !== 'IgxAddRow' ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditActions || defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n<igx-grid-column-resizer *ngIf=\"colResizingService.showResizer\"></igx-grid-column-resizer>\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\">\n        <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n        <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"></ng-content>\n        <ng-content select=\"igx-row-island,igc-row-island\"></ng-content>\n    </div>\n}\n" }]
         }], propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']