igniteui-angular 20.0.8 → 20.0.10

package/fesm2022/igniteui-angular.mjs

@@ -4,7 +4,7 @@ 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, NEVER, Subject, fromEvent, BehaviorSubject, interval, animationFrameScheduler, noop, takeUntil as takeUntil$1, merge, Subscription, timer, sampleTime, filter as filter$1, pipe, take as take$1 } from 'rxjs';
 import { takeUntil, filter, throttle, throttleTime, first as first$2, take, debounce, tap, switchMap, skipLast, debounceTime, map, shareReplay, takeWhile, timeout, pluck } from 'rxjs/operators';
-import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, FormatWidth, getLocaleDateFormat, formatPercent, formatNumber, getLocaleCurrencyCode, DatePipe, getLocaleDateTimeFormat, NgTemplateOutlet, NgClass, DOCUMENT as DOCUMENT$1, TitleCasePipe, getLocaleFirstDayOfWeek, NgStyle, getLocaleCurrencySymbol, formatCurrency as formatCurrency$1, getLocaleNumberFormat, NumberFormatStyle, DecimalPipe, PercentPipe, getCurrencySymbol, AsyncPipe } from '@angular/common';
+import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, FormatWidth, getLocaleDateFormat, formatPercent, formatNumber, getLocaleCurrencyCode, DatePipe, getLocaleDateTimeFormat, NgTemplateOutlet, DOCUMENT as DOCUMENT$1, TitleCasePipe, getLocaleFirstDayOfWeek, NgClass, 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 { scaleOutVerTop, scaleInVerTop, AnimationUtil, fadeOut, fadeIn, slideOutTop, slideInTop, slideOutBottom, slideInBottom, scaleOutHorRight, scaleInHorRight, scaleOutHorLeft, scaleInHorLeft, scaleOutVerBottom, scaleInVerBottom, scaleInCenter, growVerOut, growVerIn, slideInLeft } from 'igniteui-angular/animations';
@@ -9200,7 +9200,8 @@ var Navigate;
 const DropDownActionKey = {
     ESCAPE: 'escape',
     ENTER: 'enter',
-    SPACE: 'space'
+    SPACE: 'space',
+    TAB: 'tab'
 };
 const IGX_DROPDOWN_BASE = /*@__PURE__*/ new InjectionToken('IgxDropDownBaseToken');
 
@@ -9284,6 +9285,15 @@ class IgxDropDownBaseDirective {
     get scrollContainer() {
         return this.element;
     }
+    /**
+     * @hidden @internal
+     * Gets the id of the focused item during dropdown navigation.
+     * This is used to update the `aria-activedescendant` attribute of
+     * the IgxDropDownNavigationDirective host element.
+     */
+    get activeDescendant() {
+        return this.focusedItem ? this.focusedItem.id : null;
+    }
     constructor(elementRef, cdr, document) {
         this.elementRef = elementRef;
         this.cdr = cdr;
@@ -9327,6 +9337,7 @@ class IgxDropDownBaseDirective {
                 this.selectItem(this.focusedItem, event);
                 break;
             case DropDownActionKey.ESCAPE:
+            case DropDownActionKey.TAB:
         }
     }
     /**
@@ -9498,6 +9509,9 @@ class IgxDropDownItemNavigationDirective {
     set target(target) {
         this._target = target ? target : this.dropdown;
     }
+    get activeDescendant() {
+        return this._target?.activeDescendant;
+    }
     /**
      * Captures keydown events and calls the appropriate handlers on the target component
      */
@@ -9506,7 +9520,7 @@ class IgxDropDownItemNavigationDirective {
             const key = event.key.toLowerCase();
             if (!this.target.collapsed) { // If dropdown is opened
                 const navKeys = ['esc', 'escape', 'enter', 'space', 'spacebar', ' ',
-                    'arrowup', 'up', 'arrowdown', 'down', 'home', 'end'];
+                    'arrowup', 'up', 'arrowdown', 'down', 'home', 'end', 'tab'];
                 if (navKeys.indexOf(key) === -1) { // If key has appropriate function in DD
                     return;
                 }
@@ -9543,6 +9557,9 @@ class IgxDropDownItemNavigationDirective {
                 case 'end':
                     this.onEndKeyDown();
                     break;
+                case 'tab':
+                    this.target.onItemActionKey(DropDownActionKey.TAB, event);
+                    break;
                 default:
                     return;
             }
@@ -9573,7 +9590,7 @@ class IgxDropDownItemNavigationDirective {
         this.target.navigateFirst();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxDropDownItemNavigationDirective, deps: [{ token: IGX_DROPDOWN_BASE, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: IgxDropDownItemNavigationDirective, isStandalone: true, selector: "[igxDropDownItemNavigation]", inputs: { target: ["igxDropDownItemNavigation", "target"] }, host: { listeners: { "keydown": "handleKeyDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: IgxDropDownItemNavigationDirective, isStandalone: true, selector: "[igxDropDownItemNavigation]", inputs: { target: ["igxDropDownItemNavigation", "target"] }, host: { listeners: { "keydown": "handleKeyDown($event)" }, properties: { "attr.aria-activedescendant": "this.activeDescendant" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxDropDownItemNavigationDirective, decorators: [{
             type: Directive,
@@ -9591,6 +9608,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 }] }], propDecorators: { target: [{
                 type: Input,
                 args: ['igxDropDownItemNavigation']
+            }], activeDescendant: [{
+                type: HostBinding,
+                args: ['attr.aria-activedescendant']
             }], handleKeyDown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -10255,7 +10275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }] });
 
 const InputResourceStringsEN = {
-    igx_input_upload_button: 'Upload File',
+    igx_input_upload_button: 'Browse',
     igx_input_file_placeholder: 'No file chosen',
 };
 
@@ -12271,7 +12291,7 @@ class IgxInputGroupComponent {
     }
     /** @hidden @internal */
     get hasPrefixes() {
-        return this._prefixes.length > 0 || this.isFileType;
+        return this._prefixes.length > 0;
     }
     /** @hidden @internal */
     set prefixes(items) {
@@ -12326,10 +12346,6 @@ class IgxInputGroupComponent {
         return this.type === 'box' && this._theme === 'material';
     }
     /** @hidden @internal */
-    uploadButtonHandler() {
-        this.input.nativeElement.click();
-    }
-    /** @hidden @internal */
     clearValueHandler() {
         this.input.clear();
     }
@@ -12338,6 +12354,22 @@ class IgxInputGroupComponent {
         return this.input.type === 'file';
     }
     /** @hidden @internal */
+    get isFileInput() {
+        return this.input.type === 'file';
+    }
+    /** @hidden @internal */
+    get isFileInputFilled() {
+        return this.isFileType && this.isFilled;
+    }
+    /** @hidden @internal */
+    get isFileInputFocused() {
+        return this.isFileType && this.isFocused;
+    }
+    /** @hidden @internal */
+    get isFileInputDisabled() {
+        return this.isFileType && this.disabled;
+    }
+    /** @hidden @internal */
     get fileNames() {
         return this.input.fileNames || this._resourceStrings.igx_input_file_placeholder;
     }
@@ -12430,11 +12462,11 @@ class IgxInputGroupComponent {
         this.setComponentTheme();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxInputGroupComponent, deps: [{ token: i0.ElementRef }, { token: IGX_INPUT_GROUP_TYPE, optional: true }, { token: DOCUMENT }, { token: PlatformUtil }, { token: i0.ChangeDetectorRef }, { token: THEME_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxInputGroupComponent, isStandalone: true, selector: "igx-input-group", inputs: { resourceStrings: "resourceStrings", suppressInputAutofocus: ["suppressInputAutofocus", "suppressInputAutofocus", booleanAttribute], type: "type", theme: "theme" }, host: { listeners: { "click": "onClick($event)", "pointerdown": "onPointerDown($event)" }, properties: { "class.igx-input-group": "this.defaultClass", "class.igx-input-group--placeholder": "this.hasPlaceholder", "class.igx-input-group--required": "this.isRequired", "class.igx-input-group--focused": "this.isFocused", "class.igx-input-group--disabled": "this.disabled", "class.igx-input-group--warning": "this.hasWarning", "class.igx-input-group--valid": "this.validClass", "class.igx-input-group--invalid": "this.invalidClass", "class.igx-input-group--filled": "this.isFilled", "class.igx-input-group--textarea-group": "this.textAreaClass", "class.igx-input-group--prefixed": "this.hasPrefixes", "class.igx-input-group--suffixed": "this.hasSuffixes", "class.igx-input-group--box": "this.isTypeBox", "class.igx-input-group--file": "this.isFileType", "class.igx-input-group--border": "this.isTypeBorder", "class.igx-input-group--fluent": "this.isTypeFluent", "class.igx-input-group--bootstrap": "this.isTypeBootstrap", "class.igx-input-group--indigo": "this.isTypeIndigo", "class.igx-input-group--search": "this.isTypeSearch" } }, providers: [{ provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }], queries: [{ propertyName: "input", first: true, predicate: IgxInputDirective, descendants: true, read: IgxInputDirective, static: true }, { propertyName: "hints", predicate: IgxHintDirective, read: IgxHintDirective }, { propertyName: "_prefixes", predicate: IgxPrefixDirective, descendants: true, read: IgxPrefixDirective }, { propertyName: "_suffixes", predicate: IgxSuffixDirective, descendants: true, read: IgxSuffixDirective }], ngImport: i0, template: "@if (isTypeBox) {\n    <div class=\"igx-input-group__wrapper\">\n        <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n    </div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n}\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    @if (isFileType) {\n        <igx-prefix class=\"igx-input-group__upload-button\">\n            <button\n                igxButton=\"contained\"\n                type=\"button\"\n                (click)=\"uploadButtonHandler()\"\n                [disabled]=\"disabled\"\n                [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n            >\n                {{ resourceStrings.igx_input_upload_button }}\n            </button>\n        </igx-prefix>\n    }\n</ng-template>\n\n<ng-template #files>\n    @if (isFileType) {\n        <div\n            class=\"igx-input-group__file-input\"\n            [title]=\"fileNames\"\n        >\n            <span>{{ fileNames }}</span>\n        </div>\n    }\n</ng-template>\n\n<ng-template #clear>\n    @if (isFileType && isFilled) {\n        <igx-suffix\n            class=\"igx-input-group__clear-icon\"\n            (click)=\"clearValueHandler()\"\n            (keydown.Enter)=\"clearValueHandler()\"\n            title=\"clear files\"\n            tabindex=\"0\"\n        >\n            <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n        </igx-suffix>\n    }\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n        <ng-container>\n            <div class=\"igx-input-group__notch\">\n                <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            </div>\n        </ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__filler\"></div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    @switch (theme) {\n        @case ('bootstrap') {\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        }\n        @case ('fluent') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @case ('indigo') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @default {\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        }\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxInputGroupComponent, isStandalone: true, selector: "igx-input-group", inputs: { resourceStrings: "resourceStrings", suppressInputAutofocus: ["suppressInputAutofocus", "suppressInputAutofocus", booleanAttribute], type: "type", theme: "theme" }, host: { listeners: { "click": "onClick($event)", "pointerdown": "onPointerDown($event)" }, properties: { "class.igx-input-group": "this.defaultClass", "class.igx-input-group--placeholder": "this.hasPlaceholder", "class.igx-input-group--required": "this.isRequired", "class.igx-input-group--focused": "this.isFocused", "class.igx-input-group--disabled": "this.disabled", "class.igx-input-group--warning": "this.hasWarning", "class.igx-input-group--valid": "this.validClass", "class.igx-input-group--invalid": "this.invalidClass", "class.igx-input-group--filled": "this.isFilled", "class.igx-input-group--textarea-group": "this.textAreaClass", "class.igx-input-group--prefixed": "this.hasPrefixes", "class.igx-input-group--suffixed": "this.hasSuffixes", "class.igx-input-group--box": "this.isTypeBox", "class.igx-input-group--file": "this.isFileType", "class.igx-file-input": "this.isFileInput", "class.igx-file-input--filled": "this.isFileInputFilled", "class.igx-file-input--focused": "this.isFileInputFocused", "class.igx-file-input--disabled": "this.isFileInputDisabled", "class.igx-input-group--border": "this.isTypeBorder", "class.igx-input-group--fluent": "this.isTypeFluent", "class.igx-input-group--bootstrap": "this.isTypeBootstrap", "class.igx-input-group--indigo": "this.isTypeIndigo", "class.igx-input-group--search": "this.isTypeSearch" } }, providers: [{ provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }], queries: [{ propertyName: "input", first: true, predicate: IgxInputDirective, descendants: true, read: IgxInputDirective, static: true }, { propertyName: "hints", predicate: IgxHintDirective, read: IgxHintDirective }, { propertyName: "_prefixes", predicate: IgxPrefixDirective, descendants: true, read: IgxPrefixDirective }, { propertyName: "_suffixes", predicate: IgxSuffixDirective, descendants: true, read: IgxSuffixDirective }], ngImport: i0, template: "@if (isTypeBox) {\n    <div class=\"igx-input-group__wrapper\">\n        <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n    </div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n}\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<!-- Dummy usage to satisfy Angular compiler -->\n<ng-template #dummy><span igxPrefix hidden></span></ng-template>\n\n<ng-template #uploadButton>\n    @if (isFileType) {\n        <div class=\"igx-input-group__upload-button igx-file-input__upload-button-wrapper\">\n            <button\n                igxButton=\"flat\"\n                type=\"button\"\n                tabindex=\"-1\"\n                [disabled]=\"disabled\"\n                class=\"igx-file-input__upload-button\"\n            >\n                {{ resourceStrings.igx_input_upload_button }}\n            </button>\n        </div>\n    }\n</ng-template>\n\n<ng-template #files>\n    @if (isFileType) {\n        <div\n            class=\"igx-input-group__file-input igx-file-input__file-names\"\n            [title]=\"fileNames\"\n        >\n            <span>{{ fileNames }}</span>\n        </div>\n    }\n</ng-template>\n\n<ng-template #clear>\n    @if (isFileType && isFilled) {\n        <igx-suffix\n            class=\"igx-input-group__clear-icon igx-file-input__clear-icon\"\n            (click)=\"clearValueHandler()\"\n            (keydown.Enter)=\"clearValueHandler()\"\n            title=\"clear files\"\n            tabindex=\"0\"\n        >\n            <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n        </igx-suffix>\n    }\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        </div>\n\n        <ng-container>\n            <div class=\"igx-input-group__notch\">\n                <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            </div>\n        </ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__filler\"></div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        </div>\n\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    @switch (theme) {\n        @case ('bootstrap') {\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        }\n        @case ('fluent') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @case ('indigo') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @default {\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        }\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxInputGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-input-group', providers: [{ provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }], imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, NgClass, IgxSuffixDirective, IgxIconComponent], template: "@if (isTypeBox) {\n    <div class=\"igx-input-group__wrapper\">\n        <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n    </div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n}\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    @if (isFileType) {\n        <igx-prefix class=\"igx-input-group__upload-button\">\n            <button\n                igxButton=\"contained\"\n                type=\"button\"\n                (click)=\"uploadButtonHandler()\"\n                [disabled]=\"disabled\"\n                [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n            >\n                {{ resourceStrings.igx_input_upload_button }}\n            </button>\n        </igx-prefix>\n    }\n</ng-template>\n\n<ng-template #files>\n    @if (isFileType) {\n        <div\n            class=\"igx-input-group__file-input\"\n            [title]=\"fileNames\"\n        >\n            <span>{{ fileNames }}</span>\n        </div>\n    }\n</ng-template>\n\n<ng-template #clear>\n    @if (isFileType && isFilled) {\n        <igx-suffix\n            class=\"igx-input-group__clear-icon\"\n            (click)=\"clearValueHandler()\"\n            (keydown.Enter)=\"clearValueHandler()\"\n            title=\"clear files\"\n            tabindex=\"0\"\n        >\n            <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n        </igx-suffix>\n    }\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n        <ng-container>\n            <div class=\"igx-input-group__notch\">\n                <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            </div>\n        </ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__filler\"></div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    @switch (theme) {\n        @case ('bootstrap') {\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        }\n        @case ('fluent') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @case ('indigo') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @default {\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        }\n    }\n</ng-template>\n" }]
+            args: [{ selector: 'igx-input-group', providers: [{ provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }], imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent], template: "@if (isTypeBox) {\n    <div class=\"igx-input-group__wrapper\">\n        <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n    </div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n}\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<!-- Dummy usage to satisfy Angular compiler -->\n<ng-template #dummy><span igxPrefix hidden></span></ng-template>\n\n<ng-template #uploadButton>\n    @if (isFileType) {\n        <div class=\"igx-input-group__upload-button igx-file-input__upload-button-wrapper\">\n            <button\n                igxButton=\"flat\"\n                type=\"button\"\n                tabindex=\"-1\"\n                [disabled]=\"disabled\"\n                class=\"igx-file-input__upload-button\"\n            >\n                {{ resourceStrings.igx_input_upload_button }}\n            </button>\n        </div>\n    }\n</ng-template>\n\n<ng-template #files>\n    @if (isFileType) {\n        <div\n            class=\"igx-input-group__file-input igx-file-input__file-names\"\n            [title]=\"fileNames\"\n        >\n            <span>{{ fileNames }}</span>\n        </div>\n    }\n</ng-template>\n\n<ng-template #clear>\n    @if (isFileType && isFilled) {\n        <igx-suffix\n            class=\"igx-input-group__clear-icon igx-file-input__clear-icon\"\n            (click)=\"clearValueHandler()\"\n            (keydown.Enter)=\"clearValueHandler()\"\n            title=\"clear files\"\n            tabindex=\"0\"\n        >\n            <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n        </igx-suffix>\n    }\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        </div>\n\n        <ng-container>\n            <div class=\"igx-input-group__notch\">\n                <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            </div>\n        </ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__filler\"></div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        </div>\n\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    @switch (theme) {\n        @case ('bootstrap') {\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        }\n        @case ('fluent') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @case ('indigo') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @default {\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        }\n    }\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -12515,6 +12547,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
             }], isFileType: [{
                 type: HostBinding,
                 args: ['class.igx-input-group--file']
+            }], isFileInput: [{
+                type: HostBinding,
+                args: ['class.igx-file-input']
+            }], isFileInputFilled: [{
+                type: HostBinding,
+                args: ['class.igx-file-input--filled']
+            }], isFileInputFocused: [{
+                type: HostBinding,
+                args: ['class.igx-file-input--focused']
+            }], isFileInputDisabled: [{
+                type: HostBinding,
+                args: ['class.igx-file-input--disabled']
             }], isTypeBorder: [{
                 type: HostBinding,
                 args: ['class.igx-input-group--border']
@@ -20994,10 +21038,10 @@ class IgxTooltipDirective extends IgxToggleDirective {
         this._destroy$ = new Subject();
         this._document = inject(DOCUMENT);
         this.onDocumentTouchStart = this.onDocumentTouchStart.bind(this);
-        this.overlayService.opening.pipe(takeUntil$1(this._destroy$)).subscribe(() => {
+        this.opening.pipe(takeUntil$1(this._destroy$)).subscribe(() => {
             this._document.addEventListener('touchstart', this.onDocumentTouchStart, { passive: true });
         });
-        this.overlayService.closed.pipe(takeUntil$1(this._destroy$)).subscribe(() => {
+        this.closed.pipe(takeUntil$1(this._destroy$)).subscribe(() => {
             this._document.removeEventListener('touchstart', this.onDocumentTouchStart);
         });
     }
@@ -23952,7 +23996,7 @@ let NEXT_ID$p = 0;
  */
 class IgxDropDownItemBaseDirective {
     get ariaLabel() {
-        return this._label ? this._label : this.value ? this.value : this.id;
+        return this._label ? this._label : this.value ? this.value : null;
     }
     set ariaLabel(value) {
         this._label = value;
@@ -26924,8 +26968,9 @@ class IgxGridSelectionService {
         this.pointerOriginHandler = (event) => {
             this.pointerEventInGridBody = false;
             this.grid.document.body.removeEventListener('pointerup', this.pointerOriginHandler);
-            const targetTagName = event.target.tagName.toLowerCase();
-            if (targetTagName !== 'igx-grid-cell' && targetTagName !== 'igx-tree-grid-cell') {
+            const gridCellSelectors = ['igx-grid-cell', 'igx-hierarchical-grid-cell', 'igx-tree-grid-cell'];
+            const isInsideGridCell = gridCellSelectors.some(selector => event.target.closest(selector));
+            if (!isInsideGridCell) {
                 this.pointerUp(this._lastSelectedNode, this.grid.rangeSelected, true);
             }
         };
@@ -39233,6 +39278,7 @@ class IgxComboDropDownComponent extends IgxDropDownComponent {
                 this.handleSpace();
                 break;
             case DropDownActionKey.ESCAPE:
+            case DropDownActionKey.TAB:
                 this.close();
         }
     }
@@ -59622,6 +59668,12 @@ class IgxGridHeaderGroupComponent {
         }
         return Z_INDEX - this.grid.pinnedColumns.indexOf(this.column);
     }
+    /**
+     * @hidden
+     */
+    get ariaHidden() {
+        return this.grid.hasColumnGroups && (this.column.hidden || this.grid.navigation.activeNode.row !== -1);
+    }
     /**
      * Gets whether the header group belongs to a column that is filtered.
      *
@@ -59799,11 +59851,11 @@ class IgxGridHeaderGroupComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxGridHeaderGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: IGX_GRID_BASE }, { token: i0.ElementRef }, { token: IgxColumnResizingService }, { token: IgxFilteringService }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxGridHeaderGroupComponent, isStandalone: true, selector: "igx-grid-header-group", inputs: { column: "column" }, host: { listeners: { "mousedown": "onMouseDown($event)" }, properties: { "style.grid-row-end": "this.rowEnd", "style.grid-column-end": "this.colEnd", "style.grid-row-start": "this.rowStart", "style.grid-column-start": "this.colStart", "attr.id": "this.headerID", "class.igx-grid-th--active": "this.active", "class.igx-grid-thead__item": "this.defaultCss", "class.igx-grid-th--pinned": "this.pinnedCss", "class.igx-grid-th--pinned-last": "this.pinnedLastCss", "class.igx-grid-th--pinned-first": "this.pinnedFirstCSS", "class.igx-grid__drag-col-header": "this.headerDragCss", "class.igx-grid-th--filtering": "this.filteringCss", "style.z-index": "this.zIndex", "style.display": "this.groupDisplayStyle" } }, viewQueries: [{ propertyName: "header", first: true, predicate: IgxGridHeaderComponent, descendants: true }, { propertyName: "filter", first: true, predicate: IgxGridFilteringCellComponent, descendants: true }, { propertyName: "children", predicate: i0.forwardRef(() => IgxGridHeaderGroupComponent), descendants: true, read: IgxGridHeaderGroupComponent }], ngImport: i0, template: "@if (grid.hasColumnLayouts && column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <div class=\"igx-grid-thead__group igx-grid__mrl-block\"\n     [ngClass]=\"{\n         'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n         'igx-grid-th--pinned-first': hasFirstPinnedChildColumn\n        }\"\n     [ngStyle]=\"{'grid-template-rows':column.getGridTemplate(true),\n     'grid-template-columns':column.getGridTemplate(false)}\">\n        @for (child of column.children; track child) {\n            @if (!child.hidden) {\n                <igx-grid-header-group class=\"igx-grid-thead__subgroup\"\n                    [ngClass]=\"child.headerGroupClasses\"\n                    [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                    [column]=\"child\">\n                </igx-grid-header-group>\n            }\n        }\n    </div>\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n\n\n<ng-template #defaultColumn>\n    <span class=\"igx-grid-th__group-title\" [title]=\"title\">{{column.header}}</span>\n</ng-template>\n\n<ng-template #defaultCollapseIndicator>\n    <igx-icon\n        family=\"default\"\n        [name]=\"column.expanded ? 'tree_collapse' : 'tree_expand'\">\n    </igx-icon>\n</ng-template>\n\n@if (!grid.hasColumnLayouts && column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <div class=\"igx-grid-thead__title\"\n        role=\"columnheader\"\n        [attr.aria-label]=\"column.header || column.field\"\n        [attr.aria-expanded]=\"column.expanded\"\n        [attr.aria-selected]=\"column.selected\"\n        [ngClass]=\"{\n            'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n            'igx-grid-th--pinned-first': hasFirstPinnedChildColumn,\n            'igx-grid-th--collapsible': column.collapsible,\n            'igx-grid-th--selectable': selectable,\n            'igx-grid-th--selected': selected,\n            'igx-grid-th--active': activeGroup}\"\n        [igxColumnMovingDrag]=\"column\"\n        [ghostHost]=\"grid.outlet.nativeElement\"\n        [attr.droppable]=\"true\"\n        [igxColumnMovingDrop]=\"column\"\n        (pointerdown)=\"pointerdown($event)\"\n        (click)=\"groupClicked($event)\"\n        (pointerenter)=\"onPinterEnter()\"\n        (pointerleave)=\"onPointerLeave()\"\n        >\n        @if (column.collapsible) {\n            <div class=\"igx-grid-th__expander\" (pointerdown)=\"onPointerDownIndicator($event)\" (click)=\"toggleExpandState($event)\">\n                <ng-container\n                    *ngTemplateOutlet=\"column.collapsibleIndicatorTemplate ? column.collapsibleIndicatorTemplate : defaultCollapseIndicator; context: {$implicit: column, column: column}\">\n                </ng-container>\n            </div>\n        }\n        <ng-container *ngTemplateOutlet=\"column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}\">\n        </ng-container>\n    </div>\n    @if (grid.type !== 'pivot') {\n        <div class=\"igx-grid-thead__group\">\n            @for (child of column.children; track child) {\n                @if (!child.hidden) {\n                    <igx-grid-header-group class=\"igx-grid-thead__subgroup\"\n                        [ngClass]=\"child.headerGroupClasses\"\n                        [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                        [column]=\"child\"\n                        [style.min-width]=\"child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts\"\n                        [style.flex-basis]=\"child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n    }\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n\n@if (!column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <igx-grid-header\n        role=\"columnheader\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"grid.id + '_' + column.field\"\n        [ngClass]=\"column.headerClasses\"\n        [ngStyle]=\"column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n        [igxColumnMovingDrag]=\"column\"\n        [ghostHost]=\"grid.outlet.nativeElement\"\n        [attr.droppable]=\"true\"\n        (pointerdown)=\"activate()\"\n        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n    >\n    </igx-grid-header>\n    @if (grid.allowFiltering && grid.filterMode === 'quickFilter') {\n        <igx-grid-filtering-cell [column]=\"column\" [attr.draggable]=\"false\"></igx-grid-filtering-cell>\n    }\n    @if (!column.columnGroup && column.resizable) {\n        <span class=\"igx-grid-th__resize-handle\"\n            [igxResizeHandle]=\"column\"\n            [attr.draggable]=\"false\"\n            [style.cursor]=\"colResizingService.resizeCursor\">\n        </span>\n    }\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n", dependencies: [{ kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxColumnMovingDragDirective, selector: "[igxColumnMovingDrag]", inputs: ["igxColumnMovingDrag"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderComponent, selector: "igx-grid-header", inputs: ["column"] }, { kind: "component", type: IgxGridFilteringCellComponent, selector: "igx-grid-filtering-cell", inputs: ["column"] }, { kind: "directive", type: IgxResizeHandleDirective, selector: "[igxResizeHandle]", inputs: ["igxResizeHandle"] }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxGridHeaderGroupComponent, isStandalone: true, selector: "igx-grid-header-group", inputs: { column: "column" }, host: { listeners: { "mousedown": "onMouseDown($event)" }, properties: { "style.grid-row-end": "this.rowEnd", "style.grid-column-end": "this.colEnd", "style.grid-row-start": "this.rowStart", "style.grid-column-start": "this.colStart", "attr.id": "this.headerID", "class.igx-grid-th--active": "this.active", "class.igx-grid-thead__item": "this.defaultCss", "class.igx-grid-th--pinned": "this.pinnedCss", "class.igx-grid-th--pinned-last": "this.pinnedLastCss", "class.igx-grid-th--pinned-first": "this.pinnedFirstCSS", "class.igx-grid__drag-col-header": "this.headerDragCss", "class.igx-grid-th--filtering": "this.filteringCss", "style.z-index": "this.zIndex", "style.display": "this.groupDisplayStyle" } }, viewQueries: [{ propertyName: "header", first: true, predicate: IgxGridHeaderComponent, descendants: true }, { propertyName: "filter", first: true, predicate: IgxGridFilteringCellComponent, descendants: true }, { propertyName: "children", predicate: i0.forwardRef(() => IgxGridHeaderGroupComponent), descendants: true, read: IgxGridHeaderGroupComponent }], ngImport: i0, template: "@if (grid.hasColumnLayouts && column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <div class=\"igx-grid-thead__group igx-grid__mrl-block\"\n     [ngClass]=\"{\n         'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n         'igx-grid-th--pinned-first': hasFirstPinnedChildColumn\n        }\"\n     [ngStyle]=\"{'grid-template-rows':column.getGridTemplate(true),\n     'grid-template-columns':column.getGridTemplate(false)}\">\n        @for (child of column.children; track child) {\n            @if (!child.hidden) {\n                <igx-grid-header-group class=\"igx-grid-thead__subgroup\"\n                    [ngClass]=\"child.headerGroupClasses\"\n                    [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                    [column]=\"child\">\n                </igx-grid-header-group>\n            }\n        }\n    </div>\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n\n\n<ng-template #defaultColumn>\n    <span class=\"igx-grid-th__group-title\" [title]=\"title\">{{column.header}}</span>\n</ng-template>\n\n<ng-template #defaultCollapseIndicator>\n    <igx-icon\n        family=\"default\"\n        [name]=\"column.expanded ? 'tree_collapse' : 'tree_expand'\">\n    </igx-icon>\n</ng-template>\n\n@if (!grid.hasColumnLayouts && column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <div class=\"igx-grid-thead__title\"\n        role=\"columnheader\"\n        [attr.aria-hidden]=\"ariaHidden\"\n        [attr.aria-label]=\"column.header || column.field\"\n        [attr.aria-expanded]=\"column.expanded\"\n        [attr.aria-selected]=\"column.selected\"\n        [ngClass]=\"{\n            'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n            'igx-grid-th--pinned-first': hasFirstPinnedChildColumn,\n            'igx-grid-th--collapsible': column.collapsible,\n            'igx-grid-th--selectable': selectable,\n            'igx-grid-th--selected': selected,\n            'igx-grid-th--active': activeGroup}\"\n        [igxColumnMovingDrag]=\"column\"\n        [ghostHost]=\"grid.outlet.nativeElement\"\n        [attr.droppable]=\"true\"\n        [igxColumnMovingDrop]=\"column\"\n        (pointerdown)=\"pointerdown($event)\"\n        (click)=\"groupClicked($event)\"\n        (pointerenter)=\"onPinterEnter()\"\n        (pointerleave)=\"onPointerLeave()\"\n        >\n        @if (column.collapsible) {\n            <div class=\"igx-grid-th__expander\" (pointerdown)=\"onPointerDownIndicator($event)\" (click)=\"toggleExpandState($event)\">\n                <ng-container\n                    *ngTemplateOutlet=\"column.collapsibleIndicatorTemplate ? column.collapsibleIndicatorTemplate : defaultCollapseIndicator; context: {$implicit: column, column: column}\">\n                </ng-container>\n            </div>\n        }\n        <ng-container *ngTemplateOutlet=\"column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}\">\n        </ng-container>\n    </div>\n    @if (grid.type !== 'pivot') {\n        <div class=\"igx-grid-thead__group\">\n            @for (child of column.children; track child) {\n                @if (!child.hidden) {\n                    <igx-grid-header-group class=\"igx-grid-thead__subgroup\"\n                        [ngClass]=\"child.headerGroupClasses\"\n                        [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                        [column]=\"child\"\n                        [style.min-width]=\"child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts\"\n                        [style.flex-basis]=\"child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n    }\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n\n@if (!column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <igx-grid-header\n        role=\"columnheader\"\n        [attr.aria-hidden]=\"ariaHidden\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"grid.id + '_' + column.field\"\n        [ngClass]=\"column.headerClasses\"\n        [ngStyle]=\"column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n        [igxColumnMovingDrag]=\"column\"\n        [ghostHost]=\"grid.outlet.nativeElement\"\n        [attr.droppable]=\"true\"\n        (pointerdown)=\"activate()\"\n        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n    >\n    </igx-grid-header>\n    @if (grid.allowFiltering && grid.filterMode === 'quickFilter') {\n        <igx-grid-filtering-cell [column]=\"column\" [attr.draggable]=\"false\"></igx-grid-filtering-cell>\n    }\n    @if (!column.columnGroup && column.resizable) {\n        <span class=\"igx-grid-th__resize-handle\"\n            [igxResizeHandle]=\"column\"\n            [attr.draggable]=\"false\"\n            [style.cursor]=\"colResizingService.resizeCursor\">\n        </span>\n    }\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n", dependencies: [{ kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxColumnMovingDragDirective, selector: "[igxColumnMovingDrag]", inputs: ["igxColumnMovingDrag"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderComponent, selector: "igx-grid-header", inputs: ["column"] }, { kind: "component", type: IgxGridFilteringCellComponent, selector: "igx-grid-filtering-cell", inputs: ["column"] }, { kind: "directive", type: IgxResizeHandleDirective, selector: "[igxResizeHandle]", inputs: ["igxResizeHandle"] }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxGridHeaderGroupComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-group', imports: [NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxIconComponent, NgTemplateOutlet, IgxGridHeaderComponent, IgxGridFilteringCellComponent, IgxResizeHandleDirective, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe], template: "@if (grid.hasColumnLayouts && column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <div class=\"igx-grid-thead__group igx-grid__mrl-block\"\n     [ngClass]=\"{\n         'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n         'igx-grid-th--pinned-first': hasFirstPinnedChildColumn\n        }\"\n     [ngStyle]=\"{'grid-template-rows':column.getGridTemplate(true),\n     'grid-template-columns':column.getGridTemplate(false)}\">\n        @for (child of column.children; track child) {\n            @if (!child.hidden) {\n                <igx-grid-header-group class=\"igx-grid-thead__subgroup\"\n                    [ngClass]=\"child.headerGroupClasses\"\n                    [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                    [column]=\"child\">\n                </igx-grid-header-group>\n            }\n        }\n    </div>\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n\n\n<ng-template #defaultColumn>\n    <span class=\"igx-grid-th__group-title\" [title]=\"title\">{{column.header}}</span>\n</ng-template>\n\n<ng-template #defaultCollapseIndicator>\n    <igx-icon\n        family=\"default\"\n        [name]=\"column.expanded ? 'tree_collapse' : 'tree_expand'\">\n    </igx-icon>\n</ng-template>\n\n@if (!grid.hasColumnLayouts && column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <div class=\"igx-grid-thead__title\"\n        role=\"columnheader\"\n        [attr.aria-label]=\"column.header || column.field\"\n        [attr.aria-expanded]=\"column.expanded\"\n        [attr.aria-selected]=\"column.selected\"\n        [ngClass]=\"{\n            'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n            'igx-grid-th--pinned-first': hasFirstPinnedChildColumn,\n            'igx-grid-th--collapsible': column.collapsible,\n            'igx-grid-th--selectable': selectable,\n            'igx-grid-th--selected': selected,\n            'igx-grid-th--active': activeGroup}\"\n        [igxColumnMovingDrag]=\"column\"\n        [ghostHost]=\"grid.outlet.nativeElement\"\n        [attr.droppable]=\"true\"\n        [igxColumnMovingDrop]=\"column\"\n        (pointerdown)=\"pointerdown($event)\"\n        (click)=\"groupClicked($event)\"\n        (pointerenter)=\"onPinterEnter()\"\n        (pointerleave)=\"onPointerLeave()\"\n        >\n        @if (column.collapsible) {\n            <div class=\"igx-grid-th__expander\" (pointerdown)=\"onPointerDownIndicator($event)\" (click)=\"toggleExpandState($event)\">\n                <ng-container\n                    *ngTemplateOutlet=\"column.collapsibleIndicatorTemplate ? column.collapsibleIndicatorTemplate : defaultCollapseIndicator; context: {$implicit: column, column: column}\">\n                </ng-container>\n            </div>\n        }\n        <ng-container *ngTemplateOutlet=\"column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}\">\n        </ng-container>\n    </div>\n    @if (grid.type !== 'pivot') {\n        <div class=\"igx-grid-thead__group\">\n            @for (child of column.children; track child) {\n                @if (!child.hidden) {\n                    <igx-grid-header-group class=\"igx-grid-thead__subgroup\"\n                        [ngClass]=\"child.headerGroupClasses\"\n                        [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                        [column]=\"child\"\n                        [style.min-width]=\"child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts\"\n                        [style.flex-basis]=\"child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n    }\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n\n@if (!column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <igx-grid-header\n        role=\"columnheader\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"grid.id + '_' + column.field\"\n        [ngClass]=\"column.headerClasses\"\n        [ngStyle]=\"column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n        [igxColumnMovingDrag]=\"column\"\n        [ghostHost]=\"grid.outlet.nativeElement\"\n        [attr.droppable]=\"true\"\n        (pointerdown)=\"activate()\"\n        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n    >\n    </igx-grid-header>\n    @if (grid.allowFiltering && grid.filterMode === 'quickFilter') {\n        <igx-grid-filtering-cell [column]=\"column\" [attr.draggable]=\"false\"></igx-grid-filtering-cell>\n    }\n    @if (!column.columnGroup && column.resizable) {\n        <span class=\"igx-grid-th__resize-handle\"\n            [igxResizeHandle]=\"column\"\n            [attr.draggable]=\"false\"\n            [style.cursor]=\"colResizingService.resizeCursor\">\n        </span>\n    }\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-group', imports: [NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxIconComponent, NgTemplateOutlet, IgxGridHeaderComponent, IgxGridFilteringCellComponent, IgxResizeHandleDirective, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe], template: "@if (grid.hasColumnLayouts && column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <div class=\"igx-grid-thead__group igx-grid__mrl-block\"\n     [ngClass]=\"{\n         'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n         'igx-grid-th--pinned-first': hasFirstPinnedChildColumn\n        }\"\n     [ngStyle]=\"{'grid-template-rows':column.getGridTemplate(true),\n     'grid-template-columns':column.getGridTemplate(false)}\">\n        @for (child of column.children; track child) {\n            @if (!child.hidden) {\n                <igx-grid-header-group class=\"igx-grid-thead__subgroup\"\n                    [ngClass]=\"child.headerGroupClasses\"\n                    [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                    [column]=\"child\">\n                </igx-grid-header-group>\n            }\n        }\n    </div>\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n\n\n<ng-template #defaultColumn>\n    <span class=\"igx-grid-th__group-title\" [title]=\"title\">{{column.header}}</span>\n</ng-template>\n\n<ng-template #defaultCollapseIndicator>\n    <igx-icon\n        family=\"default\"\n        [name]=\"column.expanded ? 'tree_collapse' : 'tree_expand'\">\n    </igx-icon>\n</ng-template>\n\n@if (!grid.hasColumnLayouts && column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <div class=\"igx-grid-thead__title\"\n        role=\"columnheader\"\n        [attr.aria-hidden]=\"ariaHidden\"\n        [attr.aria-label]=\"column.header || column.field\"\n        [attr.aria-expanded]=\"column.expanded\"\n        [attr.aria-selected]=\"column.selected\"\n        [ngClass]=\"{\n            'igx-grid-th--pinned-last': hasLastPinnedChildColumn,\n            'igx-grid-th--pinned-first': hasFirstPinnedChildColumn,\n            'igx-grid-th--collapsible': column.collapsible,\n            'igx-grid-th--selectable': selectable,\n            'igx-grid-th--selected': selected,\n            'igx-grid-th--active': activeGroup}\"\n        [igxColumnMovingDrag]=\"column\"\n        [ghostHost]=\"grid.outlet.nativeElement\"\n        [attr.droppable]=\"true\"\n        [igxColumnMovingDrop]=\"column\"\n        (pointerdown)=\"pointerdown($event)\"\n        (click)=\"groupClicked($event)\"\n        (pointerenter)=\"onPinterEnter()\"\n        (pointerleave)=\"onPointerLeave()\"\n        >\n        @if (column.collapsible) {\n            <div class=\"igx-grid-th__expander\" (pointerdown)=\"onPointerDownIndicator($event)\" (click)=\"toggleExpandState($event)\">\n                <ng-container\n                    *ngTemplateOutlet=\"column.collapsibleIndicatorTemplate ? column.collapsibleIndicatorTemplate : defaultCollapseIndicator; context: {$implicit: column, column: column}\">\n                </ng-container>\n            </div>\n        }\n        <ng-container *ngTemplateOutlet=\"column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}\">\n        </ng-container>\n    </div>\n    @if (grid.type !== 'pivot') {\n        <div class=\"igx-grid-thead__group\">\n            @for (child of column.children; track child) {\n                @if (!child.hidden) {\n                    <igx-grid-header-group class=\"igx-grid-thead__subgroup\"\n                        [ngClass]=\"child.headerGroupClasses\"\n                        [ngStyle]=\"child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger\"\n                        [column]=\"child\"\n                        [style.min-width]=\"child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts\"\n                        [style.flex-basis]=\"child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n    }\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n\n@if (!column.columnGroup) {\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <igx-grid-header\n        role=\"columnheader\"\n        [attr.aria-hidden]=\"ariaHidden\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"grid.id + '_' + column.field\"\n        [ngClass]=\"column.headerClasses\"\n        [ngStyle]=\"column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n        [igxColumnMovingDrag]=\"column\"\n        [ghostHost]=\"grid.outlet.nativeElement\"\n        [attr.droppable]=\"true\"\n        (pointerdown)=\"activate()\"\n        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n    >\n    </igx-grid-header>\n    @if (grid.allowFiltering && grid.filterMode === 'quickFilter') {\n        <igx-grid-filtering-cell [column]=\"column\" [attr.draggable]=\"false\"></igx-grid-filtering-cell>\n    }\n    @if (!column.columnGroup && column.resizable) {\n        <span class=\"igx-grid-th__resize-handle\"\n            [igxResizeHandle]=\"column\"\n            [attr.draggable]=\"false\"\n            [style.cursor]=\"colResizingService.resizeCursor\">\n        </span>\n    }\n    @if (grid.moving) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_BASE]
@@ -61810,6 +61862,24 @@ class IgxGridHeaderRowComponent {
     get filters() {
         return this.groups.map(group => group.filter);
     }
+    /**
+     * Gets a list of all visible leaf columns in the grid.
+     *
+     * @hidden @internal
+     */
+    get visibleLeafColumns() {
+        const row = this.grid.gridAPI.get_row_by_index(this.grid.rowList.first?.index || 0);
+        if (row && row.cells) {
+            return row.cells.map(cell => cell.column);
+        }
+    }
+    /**
+    * @hidden
+    * @internal
+    */
+    get isLeafHeaderAriaHidden() {
+        return this.grid.navigation.activeNode.row === -1;
+    }
     get headerForOf() {
         return this.headerContainer;
     }
@@ -61883,11 +61953,11 @@ class IgxGridHeaderRowComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxGridHeaderRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxGridHeaderRowComponent, isStandalone: true, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedColumnCollection: "pinnedColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", activeDescendant: "activeDescendant", hasMRL: ["hasMRL", "hasMRL", booleanAttribute], width: "width" }, viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "headerDragContainer", first: true, predicate: ["headerDragContainer"], descendants: true }, { propertyName: "headerSelectorContainer", first: true, predicate: ["headerSelectorContainer"], descendants: true }, { propertyName: "headerGroupContainer", first: true, predicate: ["headerGroupContainer"], descendants: true }, { propertyName: "headSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true }, { propertyName: "filterRow", first: true, predicate: IgxGridFilteringRowComponent, descendants: true }, { propertyName: "headerHierarchyExpander", first: true, predicate: ["headerHierarchyExpander"], descendants: true }, { propertyName: "_groups", predicate: IgxGridHeaderGroupComponent, descendants: true }], ngImport: i0, template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        @if (grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n        @if (grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n\n        <!-- Row dragging area -->\n        @if (grid.rowDraggable) {\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        }\n\n        <!-- Row selectors area -->\n        @if (grid.showRowSelectors) {\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        }\n\n        <!-- Hierarchical grids expand all area -->\n        @if (isHierarchicalGrid) {\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n\n        <!-- Grouping icon toggle area -->\n        @if (grid?.groupingExpressions?.length) {\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n        <!-- Pinned columns collection from the start -->\n        @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            }\n        }\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            }\n        }\n    </div>\n\n    <!-- Filter row area -->\n    @if (grid.filteringService.isFilterRowVisible) {\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    }\n\n    <!-- Right column moving area -->\n    @if (grid.moving && grid.columnInDrag) {\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    }\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxGridHeaderRowComponent, isStandalone: true, selector: "igx-grid-header-row", inputs: { grid: "grid", pinnedColumnCollection: "pinnedColumnCollection", unpinnedColumnCollection: "unpinnedColumnCollection", activeDescendant: "activeDescendant", hasMRL: ["hasMRL", "hasMRL", booleanAttribute], width: "width" }, viewQueries: [{ propertyName: "headerContainer", first: true, predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "headerDragContainer", first: true, predicate: ["headerDragContainer"], descendants: true }, { propertyName: "headerSelectorContainer", first: true, predicate: ["headerSelectorContainer"], descendants: true }, { propertyName: "headerGroupContainer", first: true, predicate: ["headerGroupContainer"], descendants: true }, { propertyName: "headSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true }, { propertyName: "filterRow", first: true, predicate: IgxGridFilteringRowComponent, descendants: true }, { propertyName: "headerHierarchyExpander", first: true, predicate: ["headerHierarchyExpander"], descendants: true }, { propertyName: "_groups", predicate: IgxGridHeaderGroupComponent, descendants: true }], ngImport: i0, template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        @if (grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n        @if (grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n\n        <!-- Row dragging area -->\n        @if (grid.rowDraggable) {\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        }\n\n        <!-- Row selectors area -->\n        @if (grid.showRowSelectors) {\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        }\n\n        <!-- Hierarchical grids expand all area -->\n        @if (isHierarchicalGrid) {\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n\n        <!-- Grouping icon toggle area -->\n        @if (grid?.groupingExpressions?.length) {\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n        <!-- Pinned columns collection from the start -->\n        @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            }\n        }\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            }\n        }\n    </div>\n\n    <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n    @if (grid.hasColumnGroups) {\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\n            }\n        </div>\n    }\n\n    <!-- Filter row area -->\n    @if (grid.filteringService.isFilterRowVisible) {\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    }\n\n    <!-- Right column moving area -->\n    @if (grid.moving && grid.columnInDrag) {\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    }\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridFilteringRowComponent, selector: "igx-grid-filtering-row", inputs: ["column", "value"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxGridHeaderRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-row', imports: [IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe], template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        @if (grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n        @if (grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n\n        <!-- Row dragging area -->\n        @if (grid.rowDraggable) {\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        }\n\n        <!-- Row selectors area -->\n        @if (grid.showRowSelectors) {\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        }\n\n        <!-- Hierarchical grids expand all area -->\n        @if (isHierarchicalGrid) {\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n\n        <!-- Grouping icon toggle area -->\n        @if (grid?.groupingExpressions?.length) {\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n        <!-- Pinned columns collection from the start -->\n        @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            }\n        }\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            }\n        }\n    </div>\n\n    <!-- Filter row area -->\n    @if (grid.filteringService.isFilterRowVisible) {\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    }\n\n    <!-- Right column moving area -->\n    @if (grid.moving && grid.columnInDrag) {\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    }\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-row', imports: [IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe], template: "<div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" (scroll)=\"scroll($event)\" [style.width.px]=\"width\"\n    [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n    <!-- Column headers area -->\n    <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n\n        <!-- Left column moving area -->\n        @if (grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-left\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n        @if (grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0) {\n            <span id=\"left\" class=\"igx-grid__scroll-on-drag-pinned\" droppable=\"true\" [style.left.px]=\"grid.pinnedWidth\"\n                [igxColumnMovingDrop]=\"headerContainer\"></span>\n        }\n\n        <!-- Row dragging area -->\n        @if (grid.rowDraggable) {\n            <div #headerDragContainer class=\"igx-grid__drag-indicator igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\" [class.igx-grid__drag-indicator--header]=\"!grid.isRowSelectable\">\n                <div style=\"visibility: hidden;\">\n                    <ng-container *ngTemplateOutlet=\"grid.dragIndicatorIconTemplate || grid.dragIndicatorIconBase\"></ng-container>\n                </div>\n            </div>\n        }\n\n        <!-- Row selectors area -->\n        @if (grid.showRowSelectors) {\n            <div #headerSelectorContainer class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n                [class.igx-grid__cbx-selection--push]=\"grid.filteringService.isFilterRowVisible\"\n                (click)=\"headerRowSelection($event)\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container #headSelector\n                    *ngTemplateOutlet=\"grid.headSelectorTemplate || headSelectorBaseTemplate; context: rowSelectorsContext\">\n                </ng-container>\n            </div>\n        }\n\n        <!-- Hierarchical grids expand all area -->\n        @if (isHierarchicalGrid) {\n            <div #headerHierarchyExpander\n                (click)=\"grid.toggleAll()\"\n                (pointerdown)=\"$event.preventDefault()\"\n                [hidden]=\"!grid.hasExpandableChildren || !grid.hasVisibleColumns\"\n                [ngClass]=\"{\n                    'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': grid.hasExpandableChildren,\n                    'igx-grid__hierarchical-expander--push': grid.filteringService.isFilterRowVisible,\n                    'igx-grid__hierarchical-expander--no-border': grid.isRowSelectable || grid.rowDraggable\n                }\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n\n        <!-- Grouping icon toggle area -->\n        @if (grid?.groupingExpressions?.length) {\n            <div #headerGroupContainer class=\"{{ indentationCSSClasses }}\"\n                (click)=\"grid.toggleAllGroupRows()\"\n                (pointerdown)=\"$event.preventDefault()\">\n                <ng-container *ngTemplateOutlet=\"grid.iconTemplate; context: { $implicit: grid }\"></ng-container>\n            </div>\n        }\n\n        <!-- Pinned columns collection from the start -->\n        @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n                </igx-grid-header-group>\n            }\n        }\n\n        <!-- Unpinned columns collection -->\n        <ng-template igxGridFor #headerVirtualContainer let-column\n            [igxGridForOf]=\"unpinnedColumnCollection | igxTopLevel\"\n            [igxForScrollContainer]=\"grid.parentVirtDir\"\n            [igxForContainerSize]=\"grid.unpinnedWidth\"\n            [igxForTrackBy]=\"grid.trackColumnChanges\"\n            [igxForSizePropName]=\"'calcPixelWidth'\"\n            [igxForScrollOrientation]=\"'horizontal'\"\n        >\n            <igx-grid-header-group\n                [ngClass]=\"column.headerGroupClasses\"\n                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                [column]=\"column\"\n                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\">\n            </igx-grid-header-group>\n        </ng-template>\n\n        <!-- Pinned columns collection at the end -->\n        @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n            @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) {\n                <igx-grid-header-group\n                    [ngClass]=\"column.headerGroupClasses\"\n                    [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\"\n                    [column]=\"column\"\n                    [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                    [style.left]=\"column.rightPinnedOffset\">\n                </igx-grid-header-group>\n            }\n        }\n    </div>\n\n    <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n    @if (grid.hasColumnGroups) {\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\n            }\n        </div>\n    }\n\n    <!-- Filter row area -->\n    @if (grid.filteringService.isFilterRowVisible) {\n        <igx-grid-filtering-row #filteringRow\n            [column]=\"grid.filteringService.filteredColumn\"\n            [style.width.px]=\"width\">\n        </igx-grid-filtering-row>\n    }\n\n    <!-- Right column moving area -->\n    @if (grid.moving && grid.columnInDrag) {\n        <span id=\"right\" class=\"igx-grid__scroll-on-drag-right\" droppable=\"true\" [igxColumnMovingDrop]=\"headerContainer\"></span>\n    }\n</div>\n\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\"></div>\n\n<!-- Default row selection header checkbox template -->\n<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox\n            [tabindex]=\"-1\"\n            [readonly]=\"true\"\n            [checked]=\"context.selectedCount > 0 && grid.selectionService.areAllRowSelected()\"\n            [disableRipple]=\"true\"\n            [ngStyle]=\"{'visibility': grid.isMultiRowSelectionEnabled? 'visible' : 'hidden' }\"\n            [indeterminate]=\"context.selectedCount > 0 && grid.selectionService.hasSomeRowSelected()\"\n            [aria-label]=\"grid.headSelectorBaseAriaLabel\"\n            #headerCheckbox>\n        </igx-checkbox>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { grid: [{
                 type: Input
             }], pinnedColumnCollection: [{
@@ -63079,19 +63149,20 @@ class IgxGridValidationService {
     */
     addFormControl(formGroup, data, column) {
         const value = resolveNestedPath(data || {}, columnFieldPath(column.field));
-        const field = this.getFieldKey(column.field);
         const control = new FormControl(value, { updateOn: this.grid.validationTrigger });
         control.addValidators(column.validators);
-        formGroup.addControl(field, control);
+        formGroup.addControl(column.field, control);
         control.setValue(value);
     }
     /**
      * @hidden
      * @internal
+     Wraps the provided path into an array. This way FormGroup.get will return proper result.
+     Otherwise, if the path is a string (e.g. 'address.street'), FormGroup.get will treat it as there is a nested structure
+     and will look for control with a name of 'address' which returns undefined.
      */
-    getFieldKey(path) {
-        const parts = path?.split('.') ?? [];
-        return parts.join('_');
+    getFormControlPath(path) {
+        return [path];
     }
     /**
      * @hidden
@@ -63106,8 +63177,8 @@ class IgxGridValidationService {
      */
     getFormControl(rowId, columnKey) {
         const formControl = this.getFormGroup(rowId);
-        const field = this.getFieldKey(columnKey);
-        return formControl?.get(field);
+        const path = this.getFormControlPath(columnKey);
+        return formControl?.get(path);
     }
     /**
      * @hidden
@@ -63116,6 +63187,20 @@ class IgxGridValidationService {
     add(rowId, form) {
         this._validityStates.set(rowId, form);
     }
+    /**
+     * Checks the validity of the native ngControl
+     */
+    isFieldInvalid(formGroup, fieldName) {
+        const path = this.getFormControlPath(fieldName);
+        return formGroup.get(path)?.invalid && formGroup.get(path)?.touched;
+    }
+    /**
+     * Checks the validity of the native ngControl after edit
+     */
+    isFieldValidAfterEdit(formGroup, fieldName) {
+        const path = this.getFormControlPath(fieldName);
+        return !formGroup.get(path)?.invalid && formGroup.get(path)?.dirty;
+    }
     /**
      * @hidden
      * @internal
@@ -63125,10 +63210,10 @@ class IgxGridValidationService {
         this._validityStates.forEach((formGroup, key) => {
             const state = [];
             for (const col of this.grid.columns) {
-                const colKey = this.getFieldKey(col.field);
-                const control = formGroup.get(colKey);
+                const path = this.getFormControlPath(col.field);
+                const control = formGroup.get(path);
                 if (control) {
-                    state.push({ field: colKey, status: control.status, errors: control.errors });
+                    state.push({ field: col.field, status: control.status, errors: control.errors });
                 }
             }
             states.push({ key: key, status: formGroup.status, fields: state, errors: formGroup.errors });
@@ -63152,8 +63237,8 @@ class IgxGridValidationService {
         const keys = Object.keys(rowData);
         const rowGroup = this.getFormGroup(rowId);
         for (const key of keys) {
-            const colKey = this.getFieldKey(key);
-            const control = rowGroup?.get(colKey);
+            const path = this.getFormControlPath(key);
+            const control = rowGroup?.get(path);
             if (control && control.value !== rowData[key]) {
                 control.setValue(rowData[key], { emitEvent: false });
             }
@@ -63187,8 +63272,8 @@ class IgxGridValidationService {
         rowGroup.markAsTouched();
         const fields = field ? [field] : this.grid.columns.map(x => x.field);
         for (const currField of fields) {
-            const colKey = this.getFieldKey(currField);
-            rowGroup?.get(colKey)?.markAsTouched();
+            const path = this.getFormControlPath(currField);
+            rowGroup?.get(path)?.markAsTouched();
         }
     }
     /**
@@ -73137,11 +73222,7 @@ class IgxGridCellComponent {
     }
     /** @hidden @internal */
     get ariaDescribeBy() {
-        let describeBy = (this.gridID + '_' + this.column.field).replace('.', '_');
-        if (this.isInvalid) {
-            describeBy += ' ' + this.ariaErrorMessage;
-        }
-        return describeBy;
+        return this.isInvalid ? this.ariaErrorMessage : null;
     }
     /** @hidden @internal */
     get ariaErrorMessage() {
@@ -73152,16 +73233,22 @@ class IgxGridCellComponent {
      * @internal
      */
     get isInvalid() {
-        const isInvalid = this.formGroup?.get(this.column?.field)?.invalid && this.formGroup?.get(this.column?.field)?.touched;
-        return !this.intRow.deleted && isInvalid;
+        if (this.formGroup) {
+            const isInvalid = this.grid.validation?.isFieldInvalid(this.formGroup, this.column?.field);
+            return !this.intRow.deleted && isInvalid;
+        }
+        return false;
     }
     /**
      * @hidden
      * @internal
      */
     get isValidAfterEdit() {
-        const formControl = this.formGroup?.get(this.column?.field);
-        return this.editMode && formControl && !formControl.invalid && formControl.dirty;
+        if (this.formGroup) {
+            const isValidAfterEdit = this.grid.validation?.isFieldValidAfterEdit(this.formGroup, this.column?.field);
+            return this.editMode && isValidAfterEdit;
+        }
+        return false;
     }
     /**
      * Gets the formControl responsible for value changes and validation for this cell.
@@ -73794,7 +73881,7 @@ class IgxGridCellComponent {
         return new IgxGridCell(this.grid, rowID, this.column);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", 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: "17.0.0", version: "20.0.0", 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", "style.min-height.px": "this.minHeight" } }, 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    @if (displayPinnedChip) {\n        <igx-chip\n            class=\"igx-grid__td--pinned-chip\"\n            [disabled]=\"true\"\n            [style.--ig-size]=\"1\"\n        >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight\n            class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"\n                formatter\n                    ? (value | columnFormatter:formatter:rowData:columnData)\n                    : column.dataType === 'number'\n                    ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                    : (column.dataType === 'date' || 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    }\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\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        >{{\n            !isEmptyAddRowCell ? value : (column.header || column.field)\n        }}</div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group>\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [igxTextSelection]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                [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                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [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}\n\n<ng-template #defaultError>\n    @if (formGroup?.get(column?.field).errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "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: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { 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", "defaultFormatType", "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: "17.0.0", version: "20.0.0", 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", "style.min-height.px": "this.minHeight" } }, 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    @if (displayPinnedChip) {\n        <igx-chip\n            class=\"igx-grid__td--pinned-chip\"\n            [disabled]=\"true\"\n            [style.--ig-size]=\"1\"\n        >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight\n            class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"\n                formatter\n                    ? (value | columnFormatter:formatter:rowData:columnData)\n                    : column.dataType === 'number'\n                    ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                    : (column.dataType === 'date' || 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    }\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\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        >{{\n            !isEmptyAddRowCell ? value : (column.header || column.field)\n        }}</div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group>\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [igxTextSelection]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                [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                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [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}\n\n<ng-template #defaultError>\n    @let errors = formControl.errors;\n    @if (errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n        </div>\n    }\n    @if (errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\n        </div>\n    }\n    @if (errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "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: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { 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", "defaultFormatType", "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: "20.0.0", ngImport: i0, type: IgxGridCellComponent, decorators: [{
             type: Component,
@@ -73824,7 +73911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                         IgxGridCellImageAltPipe,
                         IgxStringReplacePipe,
                         IgxColumnFormatterPipe
-                    ], template: "<ng-template #defaultPinnedIndicator>\n    @if (displayPinnedChip) {\n        <igx-chip\n            class=\"igx-grid__td--pinned-chip\"\n            [disabled]=\"true\"\n            [style.--ig-size]=\"1\"\n        >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight\n            class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"\n                formatter\n                    ? (value | columnFormatter:formatter:rowData:columnData)\n                    : column.dataType === 'number'\n                    ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                    : (column.dataType === 'date' || 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    }\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\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        >{{\n            !isEmptyAddRowCell ? value : (column.header || column.field)\n        }}</div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group>\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [igxTextSelection]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                [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                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [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}\n\n<ng-template #defaultError>\n    @if (formGroup?.get(column?.field).errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n" }]
+                    ], template: "<ng-template #defaultPinnedIndicator>\n    @if (displayPinnedChip) {\n        <igx-chip\n            class=\"igx-grid__td--pinned-chip\"\n            [disabled]=\"true\"\n            [style.--ig-size]=\"1\"\n        >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight\n            class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"\n                formatter\n                    ? (value | columnFormatter:formatter:rowData:columnData)\n                    : column.dataType === 'number'\n                    ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                    : (column.dataType === 'date' || 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    }\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\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        >{{\n            !isEmptyAddRowCell ? value : (column.header || column.field)\n        }}</div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group>\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [igxTextSelection]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                [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                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [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}\n\n<ng-template #defaultError>\n    @let errors = formControl.errors;\n    @if (errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n        </div>\n    }\n    @if (errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\n        </div>\n    }\n    @if (errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: IgxGridSelectionService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_BASE]
@@ -75812,6 +75899,13 @@ class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
     * @hidden
     * @internal
     */
+    get isLeafHeaderAriaHidden() {
+        return super.isLeafHeaderAriaHidden || this.grid.navigation.isRowHeaderActive || this.grid.navigation.isRowDimensionHeaderActive;
+    }
+    /**
+    * @hidden
+    * @internal
+    */
     calcHeight(col, index) {
         return !col.columnGroup && col.level < this.totalDepth && col.level === index ? (this.totalDepth - col.level) * this.grid.rowHeight : this.grid.rowHeight;
     }
@@ -76142,7 +76236,7 @@ class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         return this.grid.dimensionDataColumns ? this.grid.dimensionDataColumns.find((col) => col.field === dim.memberName) : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxPivotHeaderRowComponent, deps: [{ token: IGX_GRID_BASE }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxPivotHeaderRowComponent, isStandalone: true, selector: "igx-pivot-header-row", viewQueries: [{ propertyName: "esf", first: true, predicate: ["esf"], descendants: true }, { propertyName: "filterArea", first: true, predicate: ["filterAreaHidden"], descendants: true }, { propertyName: "filtersButton", first: true, predicate: ["filterIcon"], descendants: true }, { propertyName: "dropdownChips", first: true, predicate: ["dropdownChips"], descendants: true }, { propertyName: "pivotFilterContainer", first: true, predicate: ["pivotFilterContainer"], descendants: true }, { propertyName: "pivotRowContainer", first: true, predicate: ["pivotRowContainer"], descendants: true }, { propertyName: "notificationChips", predicate: ["notifyChip"], descendants: true }, { propertyName: "headerContainers", predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "rowDimensionHeaders", predicate: ["rowDimensionHeaders"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n    <div class=\"igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot\" role=\"row\" [style.width.px]=\"width\">\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <div class='igx-grid__tr-pivot--filter-container'>\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotFilterContainer\n                         class=\"igx-grid__tr-pivot igx-grid__tr-pivot--filter\" [style.min-width.px]=\"grid.pivotRowWidths - 1\"\n                         [style.max-width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, filterArea)\"\n                         igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\" (pointerdown)=\"$event.preventDefault()\">\n                        <!-- Filter area -->\n                        <igx-chips-area #filterArea droppable='true'>\n                            @if (grid.filterDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                                  class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                            }\n                            @for (filter of this.filterAreaDimensions; track filter; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                                <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [data]=\"{ pivotArea: 'filter' }\"\n                                      [removable]=\"true\" (remove)=\"filterRemoved($event)\" (dragOver)=\"onDimDragOver($event, 2)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, filterArea, 2)\"\n                                      (moveStart)='onDimDragStart($event, filterArea)' (moveEnd)='onDimDragEnd()'>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, filter)'>\n                                    </igx-icon>\n                                    {{filter.displayName || filter.memberName}}\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(filterArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                        @if (isFiltersButton && grid.filterDimensions.length !== 0) {\n                            <div class=\"igx-grid__pivot-filter-toggle\">\n                                <igx-icon\n                                    family=\"default\"\n                                    name=\"filter_list\"\n                                    #filterIcon\n                                    (pointerdown)='onFilteringIconPointerDown($event)'\n                                    (click)='onFiltersAreaDropdownClick($event)'>\n                                </igx-icon>\n                                <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                            </div>\n                        }\n                    </div>\n                }\n                <div class='igx-grid__tr-pivot--drop-row-area'>\n                    @if (grid.pivotUI.showConfiguration && grid.pivotUI.showRowHeaders) {\n                        <div #pivotRowContainer [style.width.px]=\"grid.pivotRowWidths - 1\"\n                            class=\"igx-grid__tr-pivot igx-grid__tr-pivot--small-row-area\" igxDrop\n                            (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\"\n                            (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                            <igx-chips-area #rowArea droppable='true'>\n                                @if (grid.rowDimensions.length === 0) {\n                                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                                }\n                                @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                            [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                            (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                            (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                            (click)=\"onChipSort($event, row)\">\n                                        <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                        <igx-icon\n                                            family=\"default\"\n                                            name=\"filter_list\"\n                                            igxPrefix\n                                            (pointerdown)='onFilteringIconPointerDown($event)'\n                                            (click)='onFilteringIconClick($event, row)'>\n                                        </igx-icon>\n                                        {{ row.displayName || row.memberName}}\n                                        @if (row.sortDirection) {\n                                            <igx-icon\n                                                family=\"default\"\n                                                [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                                igxSuffix>\n                                            </igx-icon>\n                                        }\n                                    </igx-chip>\n                                    @if (last) {\n                                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    }\n                                }\n                                <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                    {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                                </igx-chip>\n                            </igx-chips-area>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotColumnContainer class=\"igx-grid__tr-pivot\"\n                         (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop (igxDragLeave)=\"onAreaDragLeave($event, colArea)\">\n                        <!-- Columns area -->\n                        <igx-chips-area #colArea droppable='true'>\n                            @if (grid.columnDimensions.length === 0) {\n                                <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                                    class='igx-grid__pivot-empty-chip-area'>\n                                {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                            }\n                            @for (col of grid.columnDimensions; track col.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [data]=\"{ pivotArea: 'column' }\"\n                                      [removable]=\"true\" (remove)=\"columnRemoved($event)\" (dragOver)=\"onDimDragOver($event, 1)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, colArea, 1)\"\n                                      (moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort($event, col)\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"view_column\"\n                                        igxPrefix>\n                                    </igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, col)'>\n                                    </igx-icon>\n                                    {{col.displayName || col.memberName}}\n                                    @if (col.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"col.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(colArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotValueContainer class=\"igx-grid__tr-pivot\"\n                         (pointerdown)=\"$event.preventDefault()\" (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                         (igxDragLeave)=\"onAreaDragLeave($event, valueArea)\">\n                        <!-- Value area -->\n                        <igx-chips-area #valueArea droppable='true'>\n                            @if (grid.values.length === 0) {\n                                <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                            }\n                            @for (value of grid.values; track value.member; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                                <igx-chip #currChip [draggable]=\"true\" [id]=\"value.displayName || value.member\" [data]=\"{ pivotArea: 'value' }\"\n                                      [removable]=\"true\" (remove)=\"valueRemoved($event)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragOver)=\"onDimDragOver($event)\"\n                                      (dragDrop)=\"onValueDrop($event, valueArea)\">\n                                    <div class=\"igx-grid__tr-pivot-toggle-icons\" igxPrefix\n                                         (click)='onSummaryClick($event, value, dropdown, currChip)'\n                                         (pointerdown)='$event.stopPropagation()' [igxDropDownItemNavigation]=\"dropdown\">\n                                        <igx-icon family=\"default\" name=\"functions\"></igx-icon>\n                                        <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n                                    </div>\n                                    <ng-container *ngTemplateOutlet=\"grid.valueChipTemplate ? grid.valueChipTemplate : valueChipDefaultTemplate; context: { $implicit: value }\"></ng-container>\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(valueArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n         [attr.aria-activedescendant]=\"activeDescendant\" [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n        <!-- Column headers area -->\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            @if (!grid.pivotUI.showRowHeaders || grid.rowDimensions.length === 0) {\n                <div #pivotContainer class=\"igx-grid__tr-pivot igx-grid__tr-pivot--row-area\"\n                    [style.width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                    (dropped)=\"onDimDrop($event, rowArea, 0)\" (pointerdown)=\"$event.preventDefault()\">\n                    <!-- Row area -->\n                    <igx-chips-area #rowArea droppable='true'>\n                        @if (grid.pivotUI.showConfiguration || grid.rowDimensions.length === 0) {\n                            @if (grid.rowDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                            }\n                            @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                        [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                        (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                        (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                        (click)=\"onChipSort($event, row)\">\n                                    <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, row)'>\n                                    </igx-icon>\n                                    {{ row.displayName || row.memberName}}\n                                    @if (row.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                            </igx-chip>\n                        }\n                    </igx-chips-area>\n                </div>\n            }\n\n            @if (grid.pivotUI.showRowHeaders && grid.rowDimensions.length > 0) {\n                <div class=\"igx-grid__tr igx-grid__tr-header-row\" role=\"row\" [style.width.px]=\"grid.pivotRowWidths - 1\">\n                    @for (dim of grid.visibleRowDimensions; track dim; let colIndex = $index; let isLast = $last) {\n                        @if (getRowDimensionColumn(dim); as dimCol) {\n                            <igx-pivot-row-header-group #rowDimensionHeaders\n                                [ngClass]=\"dimCol.headerGroupClasses\"\n                                [ngStyle]=\"dimCol.headerGroupStyles | igxHeaderGroupStyle:dimCol:grid.pipeTrigger\"\n                                [style.min-width]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [column]=\"dimCol\"\n                                [rootDimension]=\"grid.visibleRowDimensions[colIndex]\"\n                                [dimWidth]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\n                                [rowIndex]=\"-1\" >\n                            </igx-pivot-row-header-group>\n                        }\n                    }\n                </div>\n            }\n\n            <!-- Pinned columns collection from the start -->\n            @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]=\"maxContainerHeight\" (click)=\"grid.navigation.focusOutRowHeader($event)\">\n                @for (dimLevelColumns of columnDimensionsByLevel; track $index; let i = $index) {\n                    <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]=\"totalDepth > 1 ? grid.rowHeight : undefined\" [style.width.px]=\"grid.unpinnedWidth\">\n                        <ng-template igxGridFor #headerVirtualContainer let-column\n                            [igxGridForOf]=\"dimLevelColumns\" [igxGridForOfUniqueSizeCache]=\"true\" [igxForScrollContainer]=\"grid.parentVirtDir\"\n                            [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\"\n                            [igxForSizePropName]=\"'calcPixelWidth'\" [igxForScrollOrientation]=\"'horizontal'\">\n                            <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                [style.height.px]=\"totalDepth > 1 ? calcHeight(column, i) : undefined\"\n                                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [class.igx-grid__tr-pivot--columnDimensionLeaf]=\"isDuplicateOfExistingParent(column, i)\"\n                                [class.igx-grid__tr-pivot--columnMultiRowSpan]=\"isMultiRow(column, i)\"\n                            >\n                            </igx-grid-header-group>\n                        </ng-template>\n                    </div>\n                }\n            </div>\n\n            <!-- Pinned columns collection at the end -->\n            @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.left]=\"column.rightPinnedOffset\" (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n    </div>\n</div>\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\">\n</div>\n\n<igx-drop-down #dropdown (selectionChanging)='onAggregationChange($event)'>\n    @for (item of aggregateList; track item.key) {\n        <igx-drop-down-item [selected]='isSelected(item)' [value]='item'>\n            {{ item.label }}\n        </igx-drop-down-item>\n    }\n</igx-drop-down>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='grid.excelStyleFilterMaxHeight' [minHeight]='grid.excelStyleFilterMinHeight' #esf>\n        <div igxExcelStyleColumnOperations>\n            <igx-chips-area #dropdownChips>\n                @for (filter of this.filterDropdownDimensions; track filter) {\n                    <igx-chip [id]=\"filter.memberName\"\n                        [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                        (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                        {{filter.displayName || filter.memberName}}\n                    </igx-chip>\n                }\n            </igx-chips-area>\n        </div>\n        <igx-excel-style-filter-operations>\n            <igx-excel-style-search></igx-excel-style-search>\n        </igx-excel-style-filter-operations>\n    </igx-grid-excel-style-filtering>\n</div>\n\n<div style=\"visibility: hidden; position: absolute; top: -10000px\">\n    <igx-chips-area #filterAreaHidden droppable='true'>\n        @for (filter of grid.filterDimensions; track filter) {\n            <igx-chip\n                [id]=\"filter.memberName\"\n                [draggable]=\"true\"\n                [removable]=\"true\"\n                (remove)=\"filterRemoved($event)\">\n                <igx-icon family=\"default\" name=\"filter_list\" igxPrefix></igx-icon>\n                {{filter.displayName || filter.memberName}}\n            </igx-chip>\n        }\n    </igx-chips-area>\n</div>\n\n<ng-template #valueChipDefaultTemplate let-value>\n    {{value.aggregate.key}}({{value.displayName || value.member}})\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxGridExcelStyleFilteringComponent, selector: "igx-grid-excel-style-filtering", inputs: ["column", "minHeight", "maxHeight"], outputs: ["loadingStart", "loadingEnd", "initialized", "sortingChanged", "columnChange", "listDataLoaded"] }, { kind: "directive", type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]" }, { kind: "directive", type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "component", type: IgxPivotRowHeaderGroupComponent, selector: "igx-pivot-row-header-group", inputs: ["rowIndex", "dimWidth", "rootDimension"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxPivotHeaderRowComponent, isStandalone: true, selector: "igx-pivot-header-row", viewQueries: [{ propertyName: "esf", first: true, predicate: ["esf"], descendants: true }, { propertyName: "filterArea", first: true, predicate: ["filterAreaHidden"], descendants: true }, { propertyName: "filtersButton", first: true, predicate: ["filterIcon"], descendants: true }, { propertyName: "dropdownChips", first: true, predicate: ["dropdownChips"], descendants: true }, { propertyName: "pivotFilterContainer", first: true, predicate: ["pivotFilterContainer"], descendants: true }, { propertyName: "pivotRowContainer", first: true, predicate: ["pivotRowContainer"], descendants: true }, { propertyName: "notificationChips", predicate: ["notifyChip"], descendants: true }, { propertyName: "headerContainers", predicate: ["headerVirtualContainer"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "rowDimensionHeaders", predicate: ["rowDimensionHeaders"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n    <div class=\"igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot\" role=\"row\" [style.width.px]=\"width\">\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <div class='igx-grid__tr-pivot--filter-container'>\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotFilterContainer\n                         class=\"igx-grid__tr-pivot igx-grid__tr-pivot--filter\" [style.min-width.px]=\"grid.pivotRowWidths - 1\"\n                         [style.max-width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, filterArea)\"\n                         igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\" (pointerdown)=\"$event.preventDefault()\">\n                        <!-- Filter area -->\n                        <igx-chips-area #filterArea droppable='true'>\n                            @if (grid.filterDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                                  class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                            }\n                            @for (filter of this.filterAreaDimensions; track filter; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                                <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [data]=\"{ pivotArea: 'filter' }\"\n                                      [removable]=\"true\" (remove)=\"filterRemoved($event)\" (dragOver)=\"onDimDragOver($event, 2)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, filterArea, 2)\"\n                                      (moveStart)='onDimDragStart($event, filterArea)' (moveEnd)='onDimDragEnd()'>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, filter)'>\n                                    </igx-icon>\n                                    {{filter.displayName || filter.memberName}}\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(filterArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                        @if (isFiltersButton && grid.filterDimensions.length !== 0) {\n                            <div class=\"igx-grid__pivot-filter-toggle\">\n                                <igx-icon\n                                    family=\"default\"\n                                    name=\"filter_list\"\n                                    #filterIcon\n                                    (pointerdown)='onFilteringIconPointerDown($event)'\n                                    (click)='onFiltersAreaDropdownClick($event)'>\n                                </igx-icon>\n                                <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                            </div>\n                        }\n                    </div>\n                }\n                <div class='igx-grid__tr-pivot--drop-row-area'>\n                    @if (grid.pivotUI.showConfiguration && grid.pivotUI.showRowHeaders) {\n                        <div #pivotRowContainer [style.width.px]=\"grid.pivotRowWidths - 1\"\n                            class=\"igx-grid__tr-pivot igx-grid__tr-pivot--small-row-area\" igxDrop\n                            (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\"\n                            (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                            <igx-chips-area #rowArea droppable='true'>\n                                @if (grid.rowDimensions.length === 0) {\n                                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                                }\n                                @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                            [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                            (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                            (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                            (click)=\"onChipSort($event, row)\">\n                                        <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                        <igx-icon\n                                            family=\"default\"\n                                            name=\"filter_list\"\n                                            igxPrefix\n                                            (pointerdown)='onFilteringIconPointerDown($event)'\n                                            (click)='onFilteringIconClick($event, row)'>\n                                        </igx-icon>\n                                        {{ row.displayName || row.memberName}}\n                                        @if (row.sortDirection) {\n                                            <igx-icon\n                                                family=\"default\"\n                                                [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                                igxSuffix>\n                                            </igx-icon>\n                                        }\n                                    </igx-chip>\n                                    @if (last) {\n                                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    }\n                                }\n                                <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                    {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                                </igx-chip>\n                            </igx-chips-area>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotColumnContainer class=\"igx-grid__tr-pivot\"\n                         (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop (igxDragLeave)=\"onAreaDragLeave($event, colArea)\">\n                        <!-- Columns area -->\n                        <igx-chips-area #colArea droppable='true'>\n                            @if (grid.columnDimensions.length === 0) {\n                                <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                                    class='igx-grid__pivot-empty-chip-area'>\n                                {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                            }\n                            @for (col of grid.columnDimensions; track col.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [data]=\"{ pivotArea: 'column' }\"\n                                      [removable]=\"true\" (remove)=\"columnRemoved($event)\" (dragOver)=\"onDimDragOver($event, 1)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, colArea, 1)\"\n                                      (moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort($event, col)\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"view_column\"\n                                        igxPrefix>\n                                    </igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, col)'>\n                                    </igx-icon>\n                                    {{col.displayName || col.memberName}}\n                                    @if (col.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"col.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(colArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotValueContainer class=\"igx-grid__tr-pivot\"\n                         (pointerdown)=\"$event.preventDefault()\" (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                         (igxDragLeave)=\"onAreaDragLeave($event, valueArea)\">\n                        <!-- Value area -->\n                        <igx-chips-area #valueArea droppable='true'>\n                            @if (grid.values.length === 0) {\n                                <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                            }\n                            @for (value of grid.values; track value.member; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                                <igx-chip #currChip [draggable]=\"true\" [id]=\"value.displayName || value.member\" [data]=\"{ pivotArea: 'value' }\"\n                                      [removable]=\"true\" (remove)=\"valueRemoved($event)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragOver)=\"onDimDragOver($event)\"\n                                      (dragDrop)=\"onValueDrop($event, valueArea)\">\n                                    <div class=\"igx-grid__tr-pivot-toggle-icons\" igxPrefix\n                                         (click)='onSummaryClick($event, value, dropdown, currChip)'\n                                         (pointerdown)='$event.stopPropagation()' [igxDropDownItemNavigation]=\"dropdown\">\n                                        <igx-icon family=\"default\" name=\"functions\"></igx-icon>\n                                        <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n                                    </div>\n                                    <ng-container *ngTemplateOutlet=\"grid.valueChipTemplate ? grid.valueChipTemplate : valueChipDefaultTemplate; context: { $implicit: value }\"></ng-container>\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(valueArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n         [attr.aria-activedescendant]=\"activeDescendant\" [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n        <!-- Column headers area -->\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            @if (!grid.pivotUI.showRowHeaders || grid.rowDimensions.length === 0) {\n                <div #pivotContainer class=\"igx-grid__tr-pivot igx-grid__tr-pivot--row-area\"\n                    [style.width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                    (dropped)=\"onDimDrop($event, rowArea, 0)\" (pointerdown)=\"$event.preventDefault()\">\n                    <!-- Row area -->\n                    <igx-chips-area #rowArea droppable='true'>\n                        @if (grid.pivotUI.showConfiguration || grid.rowDimensions.length === 0) {\n                            @if (grid.rowDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                            }\n                            @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                        [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                        (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                        (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                        (click)=\"onChipSort($event, row)\">\n                                    <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, row)'>\n                                    </igx-icon>\n                                    {{ row.displayName || row.memberName}}\n                                    @if (row.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                            </igx-chip>\n                        }\n                    </igx-chips-area>\n                </div>\n            }\n\n            @if (grid.pivotUI.showRowHeaders && grid.rowDimensions.length > 0) {\n                <div class=\"igx-grid__tr igx-grid__tr-header-row\" role=\"row\" [style.width.px]=\"grid.pivotRowWidths - 1\">\n                    @for (dim of grid.visibleRowDimensions; track dim; let colIndex = $index; let isLast = $last) {\n                        @if (getRowDimensionColumn(dim); as dimCol) {\n                            <igx-pivot-row-header-group #rowDimensionHeaders\n                                [ngClass]=\"dimCol.headerGroupClasses\"\n                                [ngStyle]=\"dimCol.headerGroupStyles | igxHeaderGroupStyle:dimCol:grid.pipeTrigger\"\n                                [style.min-width]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [column]=\"dimCol\"\n                                [rootDimension]=\"grid.visibleRowDimensions[colIndex]\"\n                                [dimWidth]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\n                                [rowIndex]=\"-1\" >\n                            </igx-pivot-row-header-group>\n                        }\n                    }\n                </div>\n            }\n\n            <!-- Pinned columns collection from the start -->\n            @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]=\"maxContainerHeight\" (click)=\"grid.navigation.focusOutRowHeader($event)\">\n                @for (dimLevelColumns of columnDimensionsByLevel; track $index; let i = $index) {\n                    <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]=\"totalDepth > 1 ? grid.rowHeight : undefined\" [style.width.px]=\"grid.unpinnedWidth\">\n                        <ng-template igxGridFor #headerVirtualContainer let-column\n                            [igxGridForOf]=\"dimLevelColumns\" [igxGridForOfUniqueSizeCache]=\"true\" [igxForScrollContainer]=\"grid.parentVirtDir\"\n                            [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\"\n                            [igxForSizePropName]=\"'calcPixelWidth'\" [igxForScrollOrientation]=\"'horizontal'\">\n                            <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                [style.height.px]=\"totalDepth > 1 ? calcHeight(column, i) : undefined\"\n                                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [class.igx-grid__tr-pivot--columnDimensionLeaf]=\"isDuplicateOfExistingParent(column, i)\"\n                                [class.igx-grid__tr-pivot--columnMultiRowSpan]=\"isMultiRow(column, i)\"\n                            >\n                            </igx-grid-header-group>\n                        </ng-template>\n                    </div>\n                }\n            </div>\n\n            <!-- Pinned columns collection at the end -->\n            @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.left]=\"column.rightPinnedOffset\" (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n\n        <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\n            }\n        </div>\n    </div>\n</div>\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\">\n</div>\n\n<igx-drop-down #dropdown (selectionChanging)='onAggregationChange($event)'>\n    @for (item of aggregateList; track item.key) {\n        <igx-drop-down-item [selected]='isSelected(item)' [value]='item'>\n            {{ item.label }}\n        </igx-drop-down-item>\n    }\n</igx-drop-down>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='grid.excelStyleFilterMaxHeight' [minHeight]='grid.excelStyleFilterMinHeight' #esf>\n        <div igxExcelStyleColumnOperations>\n            <igx-chips-area #dropdownChips>\n                @for (filter of this.filterDropdownDimensions; track filter) {\n                    <igx-chip [id]=\"filter.memberName\"\n                        [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                        (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                        {{filter.displayName || filter.memberName}}\n                    </igx-chip>\n                }\n            </igx-chips-area>\n        </div>\n        <igx-excel-style-filter-operations>\n            <igx-excel-style-search></igx-excel-style-search>\n        </igx-excel-style-filter-operations>\n    </igx-grid-excel-style-filtering>\n</div>\n\n<div style=\"visibility: hidden; position: absolute; top: -10000px\">\n    <igx-chips-area #filterAreaHidden droppable='true'>\n        @for (filter of grid.filterDimensions; track filter) {\n            <igx-chip\n                [id]=\"filter.memberName\"\n                [draggable]=\"true\"\n                [removable]=\"true\"\n                (remove)=\"filterRemoved($event)\">\n                <igx-icon family=\"default\" name=\"filter_list\" igxPrefix></igx-icon>\n                {{filter.displayName || filter.memberName}}\n            </igx-chip>\n        }\n    </igx-chips-area>\n</div>\n\n<ng-template #valueChipDefaultTemplate let-value>\n    {{value.aggregate.key}}({{value.displayName || value.member}})\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderGroupComponent, selector: "igx-grid-header-group", inputs: ["column"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "component", type: IgxGridExcelStyleFilteringComponent, selector: "igx-grid-excel-style-filtering", inputs: ["column", "minHeight", "maxHeight"], outputs: ["loadingStart", "loadingEnd", "initialized", "sortingChanged", "columnChange", "listDataLoaded"] }, { kind: "directive", type: IgxExcelStyleColumnOperationsTemplateDirective, selector: "igx-excel-style-column-operations,[igxExcelStyleColumnOperations]" }, { kind: "directive", type: IgxExcelStyleFilterOperationsTemplateDirective, selector: "igx-excel-style-filter-operations,[igxExcelStyleFilterOperations]" }, { kind: "component", type: IgxExcelStyleSearchComponent, selector: "igx-excel-style-search", inputs: ["id"] }, { kind: "pipe", type: IgxHeaderGroupWidthPipe, name: "igxHeaderGroupWidth" }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }, { kind: "component", type: IgxPivotRowHeaderGroupComponent, selector: "igx-pivot-row-header-group", inputs: ["rowIndex", "dimWidth", "rootDimension"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxPivotHeaderRowComponent, decorators: [{
             type: Component,
@@ -76152,7 +76246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                         IgxDropDownComponent, IgxDropDownItemComponent, IgxGridExcelStyleFilteringComponent,
                         IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective,
                         IgxExcelStyleSearchComponent, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe, IgxGridTopLevelColumns,
-                        IgxPivotRowHeaderGroupComponent], template: "<div>\n    <div class=\"igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot\" role=\"row\" [style.width.px]=\"width\">\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <div class='igx-grid__tr-pivot--filter-container'>\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotFilterContainer\n                         class=\"igx-grid__tr-pivot igx-grid__tr-pivot--filter\" [style.min-width.px]=\"grid.pivotRowWidths - 1\"\n                         [style.max-width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, filterArea)\"\n                         igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\" (pointerdown)=\"$event.preventDefault()\">\n                        <!-- Filter area -->\n                        <igx-chips-area #filterArea droppable='true'>\n                            @if (grid.filterDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                                  class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                            }\n                            @for (filter of this.filterAreaDimensions; track filter; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                                <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [data]=\"{ pivotArea: 'filter' }\"\n                                      [removable]=\"true\" (remove)=\"filterRemoved($event)\" (dragOver)=\"onDimDragOver($event, 2)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, filterArea, 2)\"\n                                      (moveStart)='onDimDragStart($event, filterArea)' (moveEnd)='onDimDragEnd()'>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, filter)'>\n                                    </igx-icon>\n                                    {{filter.displayName || filter.memberName}}\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(filterArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                        @if (isFiltersButton && grid.filterDimensions.length !== 0) {\n                            <div class=\"igx-grid__pivot-filter-toggle\">\n                                <igx-icon\n                                    family=\"default\"\n                                    name=\"filter_list\"\n                                    #filterIcon\n                                    (pointerdown)='onFilteringIconPointerDown($event)'\n                                    (click)='onFiltersAreaDropdownClick($event)'>\n                                </igx-icon>\n                                <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                            </div>\n                        }\n                    </div>\n                }\n                <div class='igx-grid__tr-pivot--drop-row-area'>\n                    @if (grid.pivotUI.showConfiguration && grid.pivotUI.showRowHeaders) {\n                        <div #pivotRowContainer [style.width.px]=\"grid.pivotRowWidths - 1\"\n                            class=\"igx-grid__tr-pivot igx-grid__tr-pivot--small-row-area\" igxDrop\n                            (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\"\n                            (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                            <igx-chips-area #rowArea droppable='true'>\n                                @if (grid.rowDimensions.length === 0) {\n                                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                                }\n                                @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                            [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                            (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                            (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                            (click)=\"onChipSort($event, row)\">\n                                        <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                        <igx-icon\n                                            family=\"default\"\n                                            name=\"filter_list\"\n                                            igxPrefix\n                                            (pointerdown)='onFilteringIconPointerDown($event)'\n                                            (click)='onFilteringIconClick($event, row)'>\n                                        </igx-icon>\n                                        {{ row.displayName || row.memberName}}\n                                        @if (row.sortDirection) {\n                                            <igx-icon\n                                                family=\"default\"\n                                                [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                                igxSuffix>\n                                            </igx-icon>\n                                        }\n                                    </igx-chip>\n                                    @if (last) {\n                                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    }\n                                }\n                                <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                    {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                                </igx-chip>\n                            </igx-chips-area>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotColumnContainer class=\"igx-grid__tr-pivot\"\n                         (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop (igxDragLeave)=\"onAreaDragLeave($event, colArea)\">\n                        <!-- Columns area -->\n                        <igx-chips-area #colArea droppable='true'>\n                            @if (grid.columnDimensions.length === 0) {\n                                <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                                    class='igx-grid__pivot-empty-chip-area'>\n                                {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                            }\n                            @for (col of grid.columnDimensions; track col.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [data]=\"{ pivotArea: 'column' }\"\n                                      [removable]=\"true\" (remove)=\"columnRemoved($event)\" (dragOver)=\"onDimDragOver($event, 1)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, colArea, 1)\"\n                                      (moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort($event, col)\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"view_column\"\n                                        igxPrefix>\n                                    </igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, col)'>\n                                    </igx-icon>\n                                    {{col.displayName || col.memberName}}\n                                    @if (col.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"col.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(colArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotValueContainer class=\"igx-grid__tr-pivot\"\n                         (pointerdown)=\"$event.preventDefault()\" (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                         (igxDragLeave)=\"onAreaDragLeave($event, valueArea)\">\n                        <!-- Value area -->\n                        <igx-chips-area #valueArea droppable='true'>\n                            @if (grid.values.length === 0) {\n                                <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                            }\n                            @for (value of grid.values; track value.member; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                                <igx-chip #currChip [draggable]=\"true\" [id]=\"value.displayName || value.member\" [data]=\"{ pivotArea: 'value' }\"\n                                      [removable]=\"true\" (remove)=\"valueRemoved($event)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragOver)=\"onDimDragOver($event)\"\n                                      (dragDrop)=\"onValueDrop($event, valueArea)\">\n                                    <div class=\"igx-grid__tr-pivot-toggle-icons\" igxPrefix\n                                         (click)='onSummaryClick($event, value, dropdown, currChip)'\n                                         (pointerdown)='$event.stopPropagation()' [igxDropDownItemNavigation]=\"dropdown\">\n                                        <igx-icon family=\"default\" name=\"functions\"></igx-icon>\n                                        <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n                                    </div>\n                                    <ng-container *ngTemplateOutlet=\"grid.valueChipTemplate ? grid.valueChipTemplate : valueChipDefaultTemplate; context: { $implicit: value }\"></ng-container>\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(valueArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n         [attr.aria-activedescendant]=\"activeDescendant\" [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n        <!-- Column headers area -->\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            @if (!grid.pivotUI.showRowHeaders || grid.rowDimensions.length === 0) {\n                <div #pivotContainer class=\"igx-grid__tr-pivot igx-grid__tr-pivot--row-area\"\n                    [style.width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                    (dropped)=\"onDimDrop($event, rowArea, 0)\" (pointerdown)=\"$event.preventDefault()\">\n                    <!-- Row area -->\n                    <igx-chips-area #rowArea droppable='true'>\n                        @if (grid.pivotUI.showConfiguration || grid.rowDimensions.length === 0) {\n                            @if (grid.rowDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                            }\n                            @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                        [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                        (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                        (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                        (click)=\"onChipSort($event, row)\">\n                                    <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, row)'>\n                                    </igx-icon>\n                                    {{ row.displayName || row.memberName}}\n                                    @if (row.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                            </igx-chip>\n                        }\n                    </igx-chips-area>\n                </div>\n            }\n\n            @if (grid.pivotUI.showRowHeaders && grid.rowDimensions.length > 0) {\n                <div class=\"igx-grid__tr igx-grid__tr-header-row\" role=\"row\" [style.width.px]=\"grid.pivotRowWidths - 1\">\n                    @for (dim of grid.visibleRowDimensions; track dim; let colIndex = $index; let isLast = $last) {\n                        @if (getRowDimensionColumn(dim); as dimCol) {\n                            <igx-pivot-row-header-group #rowDimensionHeaders\n                                [ngClass]=\"dimCol.headerGroupClasses\"\n                                [ngStyle]=\"dimCol.headerGroupStyles | igxHeaderGroupStyle:dimCol:grid.pipeTrigger\"\n                                [style.min-width]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [column]=\"dimCol\"\n                                [rootDimension]=\"grid.visibleRowDimensions[colIndex]\"\n                                [dimWidth]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\n                                [rowIndex]=\"-1\" >\n                            </igx-pivot-row-header-group>\n                        }\n                    }\n                </div>\n            }\n\n            <!-- Pinned columns collection from the start -->\n            @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]=\"maxContainerHeight\" (click)=\"grid.navigation.focusOutRowHeader($event)\">\n                @for (dimLevelColumns of columnDimensionsByLevel; track $index; let i = $index) {\n                    <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]=\"totalDepth > 1 ? grid.rowHeight : undefined\" [style.width.px]=\"grid.unpinnedWidth\">\n                        <ng-template igxGridFor #headerVirtualContainer let-column\n                            [igxGridForOf]=\"dimLevelColumns\" [igxGridForOfUniqueSizeCache]=\"true\" [igxForScrollContainer]=\"grid.parentVirtDir\"\n                            [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\"\n                            [igxForSizePropName]=\"'calcPixelWidth'\" [igxForScrollOrientation]=\"'horizontal'\">\n                            <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                [style.height.px]=\"totalDepth > 1 ? calcHeight(column, i) : undefined\"\n                                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [class.igx-grid__tr-pivot--columnDimensionLeaf]=\"isDuplicateOfExistingParent(column, i)\"\n                                [class.igx-grid__tr-pivot--columnMultiRowSpan]=\"isMultiRow(column, i)\"\n                            >\n                            </igx-grid-header-group>\n                        </ng-template>\n                    </div>\n                }\n            </div>\n\n            <!-- Pinned columns collection at the end -->\n            @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.left]=\"column.rightPinnedOffset\" (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n    </div>\n</div>\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\">\n</div>\n\n<igx-drop-down #dropdown (selectionChanging)='onAggregationChange($event)'>\n    @for (item of aggregateList; track item.key) {\n        <igx-drop-down-item [selected]='isSelected(item)' [value]='item'>\n            {{ item.label }}\n        </igx-drop-down-item>\n    }\n</igx-drop-down>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='grid.excelStyleFilterMaxHeight' [minHeight]='grid.excelStyleFilterMinHeight' #esf>\n        <div igxExcelStyleColumnOperations>\n            <igx-chips-area #dropdownChips>\n                @for (filter of this.filterDropdownDimensions; track filter) {\n                    <igx-chip [id]=\"filter.memberName\"\n                        [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                        (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                        {{filter.displayName || filter.memberName}}\n                    </igx-chip>\n                }\n            </igx-chips-area>\n        </div>\n        <igx-excel-style-filter-operations>\n            <igx-excel-style-search></igx-excel-style-search>\n        </igx-excel-style-filter-operations>\n    </igx-grid-excel-style-filtering>\n</div>\n\n<div style=\"visibility: hidden; position: absolute; top: -10000px\">\n    <igx-chips-area #filterAreaHidden droppable='true'>\n        @for (filter of grid.filterDimensions; track filter) {\n            <igx-chip\n                [id]=\"filter.memberName\"\n                [draggable]=\"true\"\n                [removable]=\"true\"\n                (remove)=\"filterRemoved($event)\">\n                <igx-icon family=\"default\" name=\"filter_list\" igxPrefix></igx-icon>\n                {{filter.displayName || filter.memberName}}\n            </igx-chip>\n        }\n    </igx-chips-area>\n</div>\n\n<ng-template #valueChipDefaultTemplate let-value>\n    {{value.aggregate.key}}({{value.displayName || value.member}})\n</ng-template>\n" }]
+                        IgxPivotRowHeaderGroupComponent], template: "<div>\n    <div class=\"igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot\" role=\"row\" [style.width.px]=\"width\">\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            <div class='igx-grid__tr-pivot--filter-container'>\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotFilterContainer\n                         class=\"igx-grid__tr-pivot igx-grid__tr-pivot--filter\" [style.min-width.px]=\"grid.pivotRowWidths - 1\"\n                         [style.max-width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, filterArea)\"\n                         igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\" (pointerdown)=\"$event.preventDefault()\">\n                        <!-- Filter area -->\n                        <igx-chips-area #filterArea droppable='true'>\n                            @if (grid.filterDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, filterArea, 2)\"\n                                  class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>\n                            }\n                            @for (filter of this.filterAreaDimensions; track filter; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(filterArea)'></span>\n                                <igx-chip [id]=\"filter.memberName\" [draggable]=\"true\" [data]=\"{ pivotArea: 'filter' }\"\n                                      [removable]=\"true\" (remove)=\"filterRemoved($event)\" (dragOver)=\"onDimDragOver($event, 2)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, filterArea, 2)\"\n                                      (moveStart)='onDimDragStart($event, filterArea)' (moveEnd)='onDimDragEnd()'>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, filter)'>\n                                    </igx-icon>\n                                    {{filter.displayName || filter.memberName}}\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(filterArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, filterArea, 2)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                        @if (isFiltersButton && grid.filterDimensions.length !== 0) {\n                            <div class=\"igx-grid__pivot-filter-toggle\">\n                                <igx-icon\n                                    family=\"default\"\n                                    name=\"filter_list\"\n                                    #filterIcon\n                                    (pointerdown)='onFilteringIconPointerDown($event)'\n                                    (click)='onFiltersAreaDropdownClick($event)'>\n                                </igx-icon>\n                                <igx-badge value=\"{{this.filterDropdownDimensions.size}}\"></igx-badge>\n                            </div>\n                        }\n                    </div>\n                }\n                <div class='igx-grid__tr-pivot--drop-row-area'>\n                    @if (grid.pivotUI.showConfiguration && grid.pivotUI.showRowHeaders) {\n                        <div #pivotRowContainer [style.width.px]=\"grid.pivotRowWidths - 1\"\n                            class=\"igx-grid__tr-pivot igx-grid__tr-pivot--small-row-area\" igxDrop\n                            (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\"\n                            (dropped)=\"onDimDrop($event, rowArea, 0)\">\n                            <igx-chips-area #rowArea droppable='true'>\n                                @if (grid.rowDimensions.length === 0) {\n                                    <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                                }\n                                @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                            [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                            (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                            (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                            (click)=\"onChipSort($event, row)\">\n                                        <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                        <igx-icon\n                                            family=\"default\"\n                                            name=\"filter_list\"\n                                            igxPrefix\n                                            (pointerdown)='onFilteringIconPointerDown($event)'\n                                            (click)='onFilteringIconClick($event, row)'>\n                                        </igx-icon>\n                                        {{ row.displayName || row.memberName}}\n                                        @if (row.sortDirection) {\n                                            <igx-icon\n                                                family=\"default\"\n                                                [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                                igxSuffix>\n                                            </igx-icon>\n                                        }\n                                    </igx-chip>\n                                    @if (last) {\n                                        <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                    }\n                                }\n                                <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                    {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                                </igx-chip>\n                            </igx-chips-area>\n                        </div>\n                    }\n                </div>\n            </div>\n\n            <div class=\"igx-grid__tr-pivot-group\">\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotColumnContainer class=\"igx-grid__tr-pivot\"\n                         (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop (igxDragLeave)=\"onAreaDragLeave($event, colArea)\">\n                        <!-- Columns area -->\n                        <igx-chips-area #colArea droppable='true'>\n                            @if (grid.columnDimensions.length === 0) {\n                                <span id='empty' (dropped)=\"onDimDrop($event, colArea, 1)\" igxDrop\n                                    class='igx-grid__pivot-empty-chip-area'>\n                                {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>\n                            }\n                            @for (col of grid.columnDimensions; track col.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(colArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"col.memberName\" [data]=\"{ pivotArea: 'column' }\"\n                                      [removable]=\"true\" (remove)=\"columnRemoved($event)\" (dragOver)=\"onDimDragOver($event, 1)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragDrop)=\"onDimDrop($event, colArea, 1)\"\n                                      (moveStart)='onDimDragStart($event, colArea)' (moveEnd)='onDimDragEnd()'\n                                      (click)=\"onChipSort($event, col)\">\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"view_column\"\n                                        igxPrefix>\n                                    </igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, col)'>\n                                    </igx-icon>\n                                    {{col.displayName || col.memberName}}\n                                    @if (col.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"col.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(colArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, colArea, 1)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n\n                @if (grid.pivotUI.showConfiguration) {\n                    <div #pivotValueContainer class=\"igx-grid__tr-pivot\"\n                         (pointerdown)=\"$event.preventDefault()\" (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                         (igxDragLeave)=\"onAreaDragLeave($event, valueArea)\">\n                        <!-- Value area -->\n                        <igx-chips-area #valueArea droppable='true'>\n                            @if (grid.values.length === 0) {\n                                <span id='empty' (dropped)=\"onValueDrop($event, valueArea)\" igxDrop\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>\n                            }\n                            @for (value of grid.values; track value.member; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                  [style.height.px]='getAreaHeight(valueArea)'></span>\n                                <igx-chip #currChip [draggable]=\"true\" [id]=\"value.displayName || value.member\" [data]=\"{ pivotArea: 'value' }\"\n                                      [removable]=\"true\" (remove)=\"valueRemoved($event)\"\n                                      (dragLeave)=\"onDimDragLeave($event)\" (dragOver)=\"onDimDragOver($event)\"\n                                      (dragDrop)=\"onValueDrop($event, valueArea)\">\n                                    <div class=\"igx-grid__tr-pivot-toggle-icons\" igxPrefix\n                                         (click)='onSummaryClick($event, value, dropdown, currChip)'\n                                         (pointerdown)='$event.stopPropagation()' [igxDropDownItemNavigation]=\"dropdown\">\n                                        <igx-icon family=\"default\" name=\"functions\"></igx-icon>\n                                        <igx-icon family=\"default\" name=\"arrow_drop_down\"></igx-icon>\n                                    </div>\n                                    <ng-container *ngTemplateOutlet=\"grid.valueChipTemplate ? grid.valueChipTemplate : valueChipDefaultTemplate; context: { $implicit: value }\"></ng-container>\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                      [style.height.px]='getAreaHeight(valueArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onValueDrop($event, valueArea)\" #notifyValueChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}}\n                            </igx-chip>\n                        </igx-chips-area>\n                    </div>\n                }\n            </div>\n        </div>\n    </div>\n    <div role=\"rowgroup\" class=\"igx-grid-thead__wrapper\" [style.width.px]=\"width\"\n         [attr.aria-activedescendant]=\"activeDescendant\" [class.igx-grid__tr--mrl]=\"hasMRL\">\n\n        <!-- Column headers area -->\n        <div class=\"igx-grid__tr\" role=\"row\" [style.width.px]=\"width\">\n            @if (!grid.pivotUI.showRowHeaders || grid.rowDimensions.length === 0) {\n                <div #pivotContainer class=\"igx-grid__tr-pivot igx-grid__tr-pivot--row-area\"\n                    [style.width.px]=\"grid.pivotRowWidths - 1\" (igxDragLeave)=\"onAreaDragLeave($event, rowArea)\" igxDrop\n                    (dropped)=\"onDimDrop($event, rowArea, 0)\" (pointerdown)=\"$event.preventDefault()\">\n                    <!-- Row area -->\n                    <igx-chips-area #rowArea droppable='true'>\n                        @if (grid.pivotUI.showConfiguration || grid.rowDimensions.length === 0) {\n                            @if (grid.rowDimensions.length === 0) {\n                                <span id='empty' igxDrop (dropped)=\"onDimDrop($event, rowArea, 0)\"\n                                class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>\n                            }\n                            @for (row of grid.rowDimensions; track row.memberName; let last = $last) {\n                                <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                    [style.height.px]='getAreaHeight(rowArea)'></span>\n                                <igx-chip [draggable]=\"true\" [id]=\"row.memberName\" [data]=\"{ pivotArea: 'row' }\"\n                                        [removable]=\"true\" (remove)=\"rowRemoved($event)\" (dragLeave)=\"onDimDragLeave($event)\"\n                                        (dragDrop)=\"onDimDrop($event, rowArea, 0)\" (dragOver)=\"onDimDragOver($event, 0)\"\n                                        (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'\n                                        (click)=\"onChipSort($event, row)\">\n                                    <igx-icon igxPrefix family=\"default\" name=\"table_rows\"></igx-icon>\n                                    <igx-icon\n                                        family=\"default\"\n                                        name=\"filter_list\"\n                                        igxPrefix\n                                        (pointerdown)='onFilteringIconPointerDown($event)'\n                                        (click)='onFilteringIconClick($event, row)'>\n                                    </igx-icon>\n                                    {{ row.displayName || row.memberName}}\n                                    @if (row.sortDirection) {\n                                        <igx-icon\n                                            family=\"default\"\n                                            [name]=\"row.sortDirection < 2 ? 'sort_asc' : 'sort_desc'\"\n                                            igxSuffix>\n                                        </igx-icon>\n                                    }\n                                </igx-chip>\n                                @if (last) {\n                                    <span class=\"igx-grid__tr-pivot--chip_drop_indicator\"\n                                        [style.height.px]='getAreaHeight(rowArea)'></span>\n                                }\n                            }\n                            <igx-chip igxDrop (dragDrop)=\"onDimDrop($event, rowArea, 0)\" #notifyChip [hidden]='true'>\n                                {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}}\n                            </igx-chip>\n                        }\n                    </igx-chips-area>\n                </div>\n            }\n\n            @if (grid.pivotUI.showRowHeaders && grid.rowDimensions.length > 0) {\n                <div class=\"igx-grid__tr igx-grid__tr-header-row\" role=\"row\" [style.width.px]=\"grid.pivotRowWidths - 1\">\n                    @for (dim of grid.visibleRowDimensions; track dim; let colIndex = $index; let isLast = $last) {\n                        @if (getRowDimensionColumn(dim); as dimCol) {\n                            <igx-pivot-row-header-group #rowDimensionHeaders\n                                [ngClass]=\"dimCol.headerGroupClasses\"\n                                [ngStyle]=\"dimCol.headerGroupStyles | igxHeaderGroupStyle:dimCol:grid.pipeTrigger\"\n                                [style.min-width]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex]) | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [column]=\"dimCol\"\n                                [rootDimension]=\"grid.visibleRowDimensions[colIndex]\"\n                                [dimWidth]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\n                                [rowIndex]=\"-1\" >\n                            </igx-pivot-row-header-group>\n                        }\n                    }\n                </div>\n            }\n\n            <!-- Pinned columns collection from the start -->\n            @if (pinnedColumnCollection.length && grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n            <div class=\"igx-grid-thead--virtualizationWrapper\" [style.max-height.px]=\"maxContainerHeight\" (click)=\"grid.navigation.focusOutRowHeader($event)\">\n                @for (dimLevelColumns of columnDimensionsByLevel; track $index; let i = $index) {\n                    <div class=\"igx-grid-thead__group igx-grid-thead--virtualizationContainer\" [style.height.px]=\"totalDepth > 1 ? grid.rowHeight : undefined\" [style.width.px]=\"grid.unpinnedWidth\">\n                        <ng-template igxGridFor #headerVirtualContainer let-column\n                            [igxGridForOf]=\"dimLevelColumns\" [igxGridForOfUniqueSizeCache]=\"true\" [igxForScrollContainer]=\"grid.parentVirtDir\"\n                            [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\"\n                            [igxForSizePropName]=\"'calcPixelWidth'\" [igxForScrollOrientation]=\"'horizontal'\">\n                            <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                                [style.height.px]=\"totalDepth > 1 ? calcHeight(column, i) : undefined\"\n                                [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                                [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                                [class.igx-grid__tr-pivot--columnDimensionLeaf]=\"isDuplicateOfExistingParent(column, i)\"\n                                [class.igx-grid__tr-pivot--columnMultiRowSpan]=\"isMultiRow(column, i)\"\n                            >\n                            </igx-grid-header-group>\n                        </ng-template>\n                    </div>\n                }\n            </div>\n\n            <!-- Pinned columns collection at the end -->\n            @if (pinnedColumnCollection.length && !grid.isPinningToStart) {\n                @for (column of pinnedColumnCollection | igxTopLevel; track column) {\n                    <igx-grid-header-group [ngClass]=\"column.headerGroupClasses\"\n                        [ngStyle]=\"column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger\" [column]=\"column\"\n                        [style.min-width]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.flex-basis]=\"column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL\"\n                        [style.left]=\"column.rightPinnedOffset\" (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n                    </igx-grid-header-group>\n                }\n            }\n        </div>\n\n        <!-- Render a hidden row of the leaf column headers for accessibility purposes -->\n        <div role=\"row\" style=\"width: 0; height: 0; position: absolute; top: -10000px;\">\n            @for (column of visibleLeafColumns; track column.index) {\n                <div role=\"columnheader\" [attr.aria-hidden]=\"isLeafHeaderAriaHidden\">{{ column.header || column.field }}</div>\n            }\n        </div>\n    </div>\n</div>\n<!-- Header thumb area -->\n<div class=\"igx-grid-thead__thumb\" [hidden]=\"!grid.hasVerticalScroll()\" [style.width.px]=\"grid.scrollSize\">\n</div>\n\n<igx-drop-down #dropdown (selectionChanging)='onAggregationChange($event)'>\n    @for (item of aggregateList; track item.key) {\n        <igx-drop-down-item [selected]='isSelected(item)' [value]='item'>\n            {{ item.label }}\n        </igx-drop-down-item>\n    }\n</igx-drop-down>\n\n<div [hidden]='true'>\n    <igx-grid-excel-style-filtering [maxHeight]='grid.excelStyleFilterMaxHeight' [minHeight]='grid.excelStyleFilterMinHeight' #esf>\n        <div igxExcelStyleColumnOperations>\n            <igx-chips-area #dropdownChips>\n                @for (filter of this.filterDropdownDimensions; track filter) {\n                    <igx-chip [id]=\"filter.memberName\"\n                        [removable]=\"true\" (remove)=\"filterRemoved($event)\"\n                        (chipClick)='onFiltersSelectionChanged($event)' [selectable]='true' [selected]='filter === this.filterDropdownDimensions.values().next().value'>\n                        {{filter.displayName || filter.memberName}}\n                    </igx-chip>\n                }\n            </igx-chips-area>\n        </div>\n        <igx-excel-style-filter-operations>\n            <igx-excel-style-search></igx-excel-style-search>\n        </igx-excel-style-filter-operations>\n    </igx-grid-excel-style-filtering>\n</div>\n\n<div style=\"visibility: hidden; position: absolute; top: -10000px\">\n    <igx-chips-area #filterAreaHidden droppable='true'>\n        @for (filter of grid.filterDimensions; track filter) {\n            <igx-chip\n                [id]=\"filter.memberName\"\n                [draggable]=\"true\"\n                [removable]=\"true\"\n                (remove)=\"filterRemoved($event)\">\n                <igx-icon family=\"default\" name=\"filter_list\" igxPrefix></igx-icon>\n                {{filter.displayName || filter.memberName}}\n            </igx-chip>\n        }\n    </igx-chips-area>\n</div>\n\n<ng-template #valueChipDefaultTemplate let-value>\n    {{value.aggregate.key}}({{value.displayName || value.member}})\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_BASE]
@@ -86712,11 +86806,11 @@ class IgxHierarchicalGridCellComponent extends IgxGridCellComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", 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: "17.0.0", version: "20.0.0", type: IgxHierarchicalGridCellComponent, isStandalone: true, selector: "igx-hierarchical-grid-cell", providers: [HammerGesturesManager], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    @if (displayPinnedChip) {\n        <igx-chip\n            class=\"igx-grid__td--pinned-chip\"\n            [disabled]=\"true\"\n            [style.--ig-size]=\"1\"\n        >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight\n            class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"\n                formatter\n                    ? (value | columnFormatter:formatter:rowData:columnData)\n                    : column.dataType === 'number'\n                    ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                    : (column.dataType === 'date' || 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    }\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\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        >{{\n            !isEmptyAddRowCell ? value : (column.header || column.field)\n        }}</div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group>\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [igxTextSelection]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                [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                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [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}\n\n<ng-template #defaultError>\n    @if (formGroup?.get(column?.field).errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n", dependencies: [{ 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: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { 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", "defaultFormatType", "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: "17.0.0", version: "20.0.0", type: IgxHierarchicalGridCellComponent, isStandalone: true, selector: "igx-hierarchical-grid-cell", providers: [HammerGesturesManager], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    @if (displayPinnedChip) {\n        <igx-chip\n            class=\"igx-grid__td--pinned-chip\"\n            [disabled]=\"true\"\n            [style.--ig-size]=\"1\"\n        >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight\n            class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"\n                formatter\n                    ? (value | columnFormatter:formatter:rowData:columnData)\n                    : column.dataType === 'number'\n                    ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                    : (column.dataType === 'date' || 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    }\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\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        >{{\n            !isEmptyAddRowCell ? value : (column.header || column.field)\n        }}</div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group>\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [igxTextSelection]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                [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                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [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}\n\n<ng-template #defaultError>\n    @let errors = formControl.errors;\n    @if (errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n        </div>\n    }\n    @if (errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\n        </div>\n    }\n    @if (errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "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: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { 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", "defaultFormatType", "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: "20.0.0", ngImport: i0, type: IgxHierarchicalGridCellComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid-cell', providers: [HammerGesturesManager], imports: [IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxTextSelectionDirective, IgxCheckboxComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe], template: "<ng-template #defaultPinnedIndicator>\n    @if (displayPinnedChip) {\n        <igx-chip\n            class=\"igx-grid__td--pinned-chip\"\n            [disabled]=\"true\"\n            [style.--ig-size]=\"1\"\n        >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight\n            class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"\n                formatter\n                    ? (value | columnFormatter:formatter:rowData:columnData)\n                    : column.dataType === 'number'\n                    ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                    : (column.dataType === 'date' || 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    }\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\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        >{{\n            !isEmptyAddRowCell ? value : (column.header || column.field)\n        }}</div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group>\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [igxTextSelection]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                [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                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [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}\n\n<ng-template #defaultError>\n    @if (formGroup?.get(column?.field).errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid-cell', providers: [HammerGesturesManager], imports: [IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxTextSelectionDirective, IgxCheckboxComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe], template: "<ng-template #defaultPinnedIndicator>\n    @if (displayPinnedChip) {\n        <igx-chip\n            class=\"igx-grid__td--pinned-chip\"\n            [disabled]=\"true\"\n            [style.--ig-size]=\"1\"\n        >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight\n            class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"\n                formatter\n                    ? (value | columnFormatter:formatter:rowData:columnData)\n                    : column.dataType === 'number'\n                    ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                    : (column.dataType === 'date' || 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    }\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\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        >{{\n            !isEmptyAddRowCell ? value : (column.header || column.field)\n        }}</div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group>\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [igxTextSelection]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                [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                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [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}\n\n<ng-template #defaultError>\n    @let errors = formControl.errors;\n    @if (errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n        </div>\n    }\n    @if (errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\n        </div>\n    }\n    @if (errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: IgxGridSelectionService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_BASE]
@@ -94769,14 +94863,14 @@ class IgxDateRangeStartComponent extends IgxDateRangeInputsBaseComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxDateRangeStartComponent, isStandalone: true, selector: "igx-date-range-start", providers: [
             { provide: IgxInputGroupBase, useExisting: IgxDateRangeStartComponent },
             { provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeStartComponent }
-        ], usesInheritance: true, ngImport: i0, template: "@if (isTypeBox) {\n    <div class=\"igx-input-group__wrapper\">\n        <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n    </div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n}\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    @if (isFileType) {\n        <igx-prefix class=\"igx-input-group__upload-button\">\n            <button\n                igxButton=\"contained\"\n                type=\"button\"\n                (click)=\"uploadButtonHandler()\"\n                [disabled]=\"disabled\"\n                [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n            >\n                {{ resourceStrings.igx_input_upload_button }}\n            </button>\n        </igx-prefix>\n    }\n</ng-template>\n\n<ng-template #files>\n    @if (isFileType) {\n        <div\n            class=\"igx-input-group__file-input\"\n            [title]=\"fileNames\"\n        >\n            <span>{{ fileNames }}</span>\n        </div>\n    }\n</ng-template>\n\n<ng-template #clear>\n    @if (isFileType && isFilled) {\n        <igx-suffix\n            class=\"igx-input-group__clear-icon\"\n            (click)=\"clearValueHandler()\"\n            (keydown.Enter)=\"clearValueHandler()\"\n            title=\"clear files\"\n            tabindex=\"0\"\n        >\n            <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n        </igx-suffix>\n    }\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n        <ng-container>\n            <div class=\"igx-input-group__notch\">\n                <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            </div>\n        </ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__filler\"></div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    @switch (theme) {\n        @case ('bootstrap') {\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        }\n        @case ('fluent') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @case ('indigo') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @default {\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        }\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (isTypeBox) {\n    <div class=\"igx-input-group__wrapper\">\n        <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n    </div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n}\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<!-- Dummy usage to satisfy Angular compiler -->\n<ng-template #dummy><span igxPrefix hidden></span></ng-template>\n\n<ng-template #uploadButton>\n    @if (isFileType) {\n        <div class=\"igx-input-group__upload-button igx-file-input__upload-button-wrapper\">\n            <button\n                igxButton=\"flat\"\n                type=\"button\"\n                tabindex=\"-1\"\n                [disabled]=\"disabled\"\n                class=\"igx-file-input__upload-button\"\n            >\n                {{ resourceStrings.igx_input_upload_button }}\n            </button>\n        </div>\n    }\n</ng-template>\n\n<ng-template #files>\n    @if (isFileType) {\n        <div\n            class=\"igx-input-group__file-input igx-file-input__file-names\"\n            [title]=\"fileNames\"\n        >\n            <span>{{ fileNames }}</span>\n        </div>\n    }\n</ng-template>\n\n<ng-template #clear>\n    @if (isFileType && isFilled) {\n        <igx-suffix\n            class=\"igx-input-group__clear-icon igx-file-input__clear-icon\"\n            (click)=\"clearValueHandler()\"\n            (keydown.Enter)=\"clearValueHandler()\"\n            title=\"clear files\"\n            tabindex=\"0\"\n        >\n            <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n        </igx-suffix>\n    }\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        </div>\n\n        <ng-container>\n            <div class=\"igx-input-group__notch\">\n                <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            </div>\n        </ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__filler\"></div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        </div>\n\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    @switch (theme) {\n        @case ('bootstrap') {\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        }\n        @case ('fluent') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @case ('indigo') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @default {\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        }\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxDateRangeStartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-date-range-start', providers: [
                         { provide: IgxInputGroupBase, useExisting: IgxDateRangeStartComponent },
                         { provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeStartComponent }
-                    ], imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, NgClass, IgxSuffixDirective, IgxIconComponent], template: "@if (isTypeBox) {\n    <div class=\"igx-input-group__wrapper\">\n        <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n    </div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n}\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    @if (isFileType) {\n        <igx-prefix class=\"igx-input-group__upload-button\">\n            <button\n                igxButton=\"contained\"\n                type=\"button\"\n                (click)=\"uploadButtonHandler()\"\n                [disabled]=\"disabled\"\n                [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n            >\n                {{ resourceStrings.igx_input_upload_button }}\n            </button>\n        </igx-prefix>\n    }\n</ng-template>\n\n<ng-template #files>\n    @if (isFileType) {\n        <div\n            class=\"igx-input-group__file-input\"\n            [title]=\"fileNames\"\n        >\n            <span>{{ fileNames }}</span>\n        </div>\n    }\n</ng-template>\n\n<ng-template #clear>\n    @if (isFileType && isFilled) {\n        <igx-suffix\n            class=\"igx-input-group__clear-icon\"\n            (click)=\"clearValueHandler()\"\n            (keydown.Enter)=\"clearValueHandler()\"\n            title=\"clear files\"\n            tabindex=\"0\"\n        >\n            <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n        </igx-suffix>\n    }\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n        <ng-container>\n            <div class=\"igx-input-group__notch\">\n                <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            </div>\n        </ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__filler\"></div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    @switch (theme) {\n        @case ('bootstrap') {\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        }\n        @case ('fluent') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @case ('indigo') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @default {\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        }\n    }\n</ng-template>\n" }]
+                    ], imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent], template: "@if (isTypeBox) {\n    <div class=\"igx-input-group__wrapper\">\n        <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n    </div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n}\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<!-- Dummy usage to satisfy Angular compiler -->\n<ng-template #dummy><span igxPrefix hidden></span></ng-template>\n\n<ng-template #uploadButton>\n    @if (isFileType) {\n        <div class=\"igx-input-group__upload-button igx-file-input__upload-button-wrapper\">\n            <button\n                igxButton=\"flat\"\n                type=\"button\"\n                tabindex=\"-1\"\n                [disabled]=\"disabled\"\n                class=\"igx-file-input__upload-button\"\n            >\n                {{ resourceStrings.igx_input_upload_button }}\n            </button>\n        </div>\n    }\n</ng-template>\n\n<ng-template #files>\n    @if (isFileType) {\n        <div\n            class=\"igx-input-group__file-input igx-file-input__file-names\"\n            [title]=\"fileNames\"\n        >\n            <span>{{ fileNames }}</span>\n        </div>\n    }\n</ng-template>\n\n<ng-template #clear>\n    @if (isFileType && isFilled) {\n        <igx-suffix\n            class=\"igx-input-group__clear-icon igx-file-input__clear-icon\"\n            (click)=\"clearValueHandler()\"\n            (keydown.Enter)=\"clearValueHandler()\"\n            title=\"clear files\"\n            tabindex=\"0\"\n        >\n            <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n        </igx-suffix>\n    }\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        </div>\n\n        <ng-container>\n            <div class=\"igx-input-group__notch\">\n                <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            </div>\n        </ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__filler\"></div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        </div>\n\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    @switch (theme) {\n        @case ('bootstrap') {\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        }\n        @case ('fluent') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @case ('indigo') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @default {\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        }\n    }\n</ng-template>\n" }]
         }] });
 /**
  * Defines the end input for a date range picker
@@ -94807,14 +94901,14 @@ class IgxDateRangeEndComponent extends IgxDateRangeInputsBaseComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxDateRangeEndComponent, isStandalone: true, selector: "igx-date-range-end", providers: [
             { provide: IgxInputGroupBase, useExisting: IgxDateRangeEndComponent },
             { provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeEndComponent }
-        ], usesInheritance: true, ngImport: i0, template: "@if (isTypeBox) {\n    <div class=\"igx-input-group__wrapper\">\n        <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n    </div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n}\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    @if (isFileType) {\n        <igx-prefix class=\"igx-input-group__upload-button\">\n            <button\n                igxButton=\"contained\"\n                type=\"button\"\n                (click)=\"uploadButtonHandler()\"\n                [disabled]=\"disabled\"\n                [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n            >\n                {{ resourceStrings.igx_input_upload_button }}\n            </button>\n        </igx-prefix>\n    }\n</ng-template>\n\n<ng-template #files>\n    @if (isFileType) {\n        <div\n            class=\"igx-input-group__file-input\"\n            [title]=\"fileNames\"\n        >\n            <span>{{ fileNames }}</span>\n        </div>\n    }\n</ng-template>\n\n<ng-template #clear>\n    @if (isFileType && isFilled) {\n        <igx-suffix\n            class=\"igx-input-group__clear-icon\"\n            (click)=\"clearValueHandler()\"\n            (keydown.Enter)=\"clearValueHandler()\"\n            title=\"clear files\"\n            tabindex=\"0\"\n        >\n            <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n        </igx-suffix>\n    }\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n        <ng-container>\n            <div class=\"igx-input-group__notch\">\n                <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            </div>\n        </ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__filler\"></div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    @switch (theme) {\n        @case ('bootstrap') {\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        }\n        @case ('fluent') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @case ('indigo') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @default {\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        }\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if (isTypeBox) {\n    <div class=\"igx-input-group__wrapper\">\n        <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n    </div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n}\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<!-- Dummy usage to satisfy Angular compiler -->\n<ng-template #dummy><span igxPrefix hidden></span></ng-template>\n\n<ng-template #uploadButton>\n    @if (isFileType) {\n        <div class=\"igx-input-group__upload-button igx-file-input__upload-button-wrapper\">\n            <button\n                igxButton=\"flat\"\n                type=\"button\"\n                tabindex=\"-1\"\n                [disabled]=\"disabled\"\n                class=\"igx-file-input__upload-button\"\n            >\n                {{ resourceStrings.igx_input_upload_button }}\n            </button>\n        </div>\n    }\n</ng-template>\n\n<ng-template #files>\n    @if (isFileType) {\n        <div\n            class=\"igx-input-group__file-input igx-file-input__file-names\"\n            [title]=\"fileNames\"\n        >\n            <span>{{ fileNames }}</span>\n        </div>\n    }\n</ng-template>\n\n<ng-template #clear>\n    @if (isFileType && isFilled) {\n        <igx-suffix\n            class=\"igx-input-group__clear-icon igx-file-input__clear-icon\"\n            (click)=\"clearValueHandler()\"\n            (keydown.Enter)=\"clearValueHandler()\"\n            title=\"clear files\"\n            tabindex=\"0\"\n        >\n            <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n        </igx-suffix>\n    }\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        </div>\n\n        <ng-container>\n            <div class=\"igx-input-group__notch\">\n                <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            </div>\n        </ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__filler\"></div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        </div>\n\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    @switch (theme) {\n        @case ('bootstrap') {\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        }\n        @case ('fluent') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @case ('indigo') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @default {\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        }\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxDateRangeEndComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-date-range-end', providers: [
                         { provide: IgxInputGroupBase, useExisting: IgxDateRangeEndComponent },
                         { provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeEndComponent }
-                    ], imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, NgClass, IgxSuffixDirective, IgxIconComponent], template: "@if (isTypeBox) {\n    <div class=\"igx-input-group__wrapper\">\n        <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n    </div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n}\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #uploadButton>\n    @if (isFileType) {\n        <igx-prefix class=\"igx-input-group__upload-button\">\n            <button\n                igxButton=\"contained\"\n                type=\"button\"\n                (click)=\"uploadButtonHandler()\"\n                [disabled]=\"disabled\"\n                [ngClass]=\"{ 'igx-input-group__upload-button': isTypeLine }\"\n            >\n                {{ resourceStrings.igx_input_upload_button }}\n            </button>\n        </igx-prefix>\n    }\n</ng-template>\n\n<ng-template #files>\n    @if (isFileType) {\n        <div\n            class=\"igx-input-group__file-input\"\n            [title]=\"fileNames\"\n        >\n            <span>{{ fileNames }}</span>\n        </div>\n    }\n</ng-template>\n\n<ng-template #clear>\n    @if (isFileType && isFilled) {\n        <igx-suffix\n            class=\"igx-input-group__clear-icon\"\n            (click)=\"clearValueHandler()\"\n            (keydown.Enter)=\"clearValueHandler()\"\n            title=\"clear files\"\n            tabindex=\"0\"\n        >\n            <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n        </igx-suffix>\n    }\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n        <ng-container>\n            <div class=\"igx-input-group__notch\">\n                <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            </div>\n        </ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__filler\"></div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    @switch (theme) {\n        @case ('bootstrap') {\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        }\n        @case ('fluent') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @case ('indigo') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @default {\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        }\n    }\n</ng-template>\n" }]
+                    ], imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, IgxSuffixDirective, IgxIconComponent], template: "@if (isTypeBox) {\n    <div class=\"igx-input-group__wrapper\">\n        <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n    </div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"bundle\"></ng-container>\n}\n\n<div class=\"igx-input-group__hint\" (click)=\"hintClickHandler($event)\">\n    <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n</div>\n\n<ng-template #label>\n    <ng-content select=\"[igxLabel]\"></ng-content>\n</ng-template>\n\n<ng-template #input>\n    <ng-content select=\"[igxInput]\"></ng-content>\n</ng-template>\n\n<ng-template #prefix>\n    <ng-content select=\"igx-prefix, [igxPrefix]\"></ng-content>\n</ng-template>\n\n<!-- Dummy usage to satisfy Angular compiler -->\n<ng-template #dummy><span igxPrefix hidden></span></ng-template>\n\n<ng-template #uploadButton>\n    @if (isFileType) {\n        <div class=\"igx-input-group__upload-button igx-file-input__upload-button-wrapper\">\n            <button\n                igxButton=\"flat\"\n                type=\"button\"\n                tabindex=\"-1\"\n                [disabled]=\"disabled\"\n                class=\"igx-file-input__upload-button\"\n            >\n                {{ resourceStrings.igx_input_upload_button }}\n            </button>\n        </div>\n    }\n</ng-template>\n\n<ng-template #files>\n    @if (isFileType) {\n        <div\n            class=\"igx-input-group__file-input igx-file-input__file-names\"\n            [title]=\"fileNames\"\n        >\n            <span>{{ fileNames }}</span>\n        </div>\n    }\n</ng-template>\n\n<ng-template #clear>\n    @if (isFileType && isFilled) {\n        <igx-suffix\n            class=\"igx-input-group__clear-icon igx-file-input__clear-icon\"\n            (click)=\"clearValueHandler()\"\n            (keydown.Enter)=\"clearValueHandler()\"\n            title=\"clear files\"\n            tabindex=\"0\"\n        >\n            <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n        </igx-suffix>\n    }\n</ng-template>\n\n<ng-template #suffix>\n    <ng-content select=\"igx-suffix, [igxSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #materialBundle>\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        </div>\n\n        <ng-container>\n            <div class=\"igx-input-group__notch\">\n                <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n            </div>\n        </ng-container>\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__filler\"></div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #fluentBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        </div>\n\n\n        <div class=\"igx-input-group__bundle-main\">\n            <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n        </div>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n\n        @if (hasBorder) {\n            <div class=\"igx-input-group__line\"></div>\n        }\n    </div>\n</ng-template>\n\n<ng-template #bootstrapBundle>\n    <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n\n    <div class=\"igx-input-group__bundle\">\n        <div class=\"igx-input-group__bundle-start\">\n            <ng-container *ngTemplateOutlet=\"prefix\"></ng-container>\n        </div>\n\n        <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"uploadButton\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"files\"></ng-container>\n\n        <div class=\"igx-input-group__bundle-end\">\n            <ng-container *ngTemplateOutlet=\"clear\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"suffix\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #bundle>\n    @switch (theme) {\n        @case ('bootstrap') {\n            <ng-container *ngTemplateOutlet=\"bootstrapBundle\"></ng-container>\n        }\n        @case ('fluent') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @case ('indigo') {\n            <ng-container *ngTemplateOutlet=\"fluentBundle\"></ng-container>\n        }\n        @default {\n            <ng-container *ngTemplateOutlet=\"materialBundle\"></ng-container>\n        }\n    }\n</ng-template>\n" }]
         }] });
 /**
  * Replaces the default separator `to` with the provided value