igniteui-angular 20.2.0-alpha.3 → 20.2.0-alpha.5

package/fesm2022/igniteui-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, HostListener, Input, Directive, EventEmitter, InjectionToken, isDevMode, inject, PLATFORM_ID, Inject, ElementRef, ViewContainerRef, createComponent, DOCUMENT, HostBinding, Output, Self, Optional, booleanAttribute, afterRenderEffect, SecurityContext, DestroyRef, Component, ContentChild, ContentChildren, RendererStyleFlags2, Pipe, ViewChild, Renderer2, NgZone, signal, QueryList, effect, LOCALE_ID, forwardRef, Host, ViewChildren, TemplateRef, ChangeDetectionStrategy, input, SimpleChange, ChangeDetectorRef, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, reflectComponentType, NgModule, output, untracked } from '@angular/core';
+import { Injectable, HostListener, Input, Directive, EventEmitter, InjectionToken, isDevMode, inject, PLATFORM_ID, Inject, ElementRef, ViewContainerRef, createComponent, DOCUMENT, HostBinding, Output, Self, Optional, booleanAttribute, SecurityContext, DestroyRef, Component, ContentChild, ContentChildren, RendererStyleFlags2, Pipe, ViewChild, Renderer2, NgZone, signal, QueryList, effect, LOCALE_ID, forwardRef, Host, ViewChildren, TemplateRef, ChangeDetectionStrategy, input, SimpleChange, ChangeDetectorRef, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, reflectComponentType, NgModule, computed, output } from '@angular/core';
 import * as i4 from '@angular/forms';
 import { TouchedChangeEvent, 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, filter as filter$1, interval, animationFrameScheduler, noop, takeUntil as takeUntil$1, merge, Subscription, timer, sampleTime, pipe, take as take$1 } from 'rxjs';
@@ -12,16 +12,12 @@ import { scaleOutVerTop, scaleInVerTop, AnimationUtil, fadeOut, fadeIn, slideOut
 import * as i1 from '@angular/animations';
 import { style, animate, useAnimation } from '@angular/animations';
 import * as i1$1 from '@angular/platform-browser';
-import { ɵgetDOM as _getDOM, HammerGestureConfig, HAMMER_GESTURE_CONFIG, DomSanitizer } from '@angular/platform-browser';
+import { ɵgetDOM as _getDOM, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
 import * as i2 from '@angular/common/http';
 import { addRow, addChild, pinLeft, unpinLeft, jumpDown, jumpUp, caseSensitive, editor } from '@igniteui/material-icons-extended';
 import { __decorate, __param } from 'tslib';
 import { IgcTrialWatermark } from 'igniteui-trial-watermark';
 import { IgcChatComponent } from 'igniteui-webcomponents';
-import DOMPurify from 'dompurify';
-import { Marked } from 'marked';
-import markedShiki from 'marked-shiki';
-import { createHighlighter, bundledThemes } from 'shiki/bundle/web';
 
 /**
  * Common service to be injected between components where those implementing common
@@ -8078,7 +8074,13 @@ class IgxOverlayService {
             }
         }
         this.updateSize(info);
+        const openAnimation = info.settings.positionStrategy.settings.openAnimation;
+        const closeAnimation = info.settings.positionStrategy.settings.closeAnimation;
         info.settings.positionStrategy.position(info.elementRef.nativeElement.parentElement, { width: info.initialSize.width, height: info.initialSize.height }, this._document, true, info.settings.target);
+        if (openAnimation !== info.settings.positionStrategy.settings.openAnimation ||
+            closeAnimation !== info.settings.positionStrategy.settings.closeAnimation) {
+            this.buildAnimationPlayers(info);
+        }
         this.addModalClasses(info);
         if (info.settings.positionStrategy.settings.openAnimation) {
             // TODO: should we build players again. This was already done in attach!!!
@@ -10623,6 +10625,7 @@ class IgxButtonBaseDirective {
     constructor(element) {
         this.element = element;
         this._platformUtil = inject(PlatformUtil);
+        this._viewInit = false;
         /**
          * Emitted when the button is clicked.
          */
@@ -10661,15 +10664,14 @@ class IgxButtonBaseDirective {
         // In SSR there is no paint, so there’s no visual rendering or transitions to suppress.
         // Fix style flickering https://github.com/IgniteUI/igniteui-angular/issues/14759
         if (this._platformUtil.isBrowser) {
-            afterRenderEffect({
-                write: () => {
-                    this.element.nativeElement.style.setProperty('--_init-transition', '0s');
-                },
-                read: () => {
-                    requestAnimationFrame(() => {
-                        this.element.nativeElement.style.removeProperty('--_init-transition');
-                    });
-                }
+            this.element.nativeElement.style.setProperty('--_init-transition', '0s');
+        }
+    }
+    ngAfterViewInit() {
+        if (this._platformUtil.isBrowser && !this._viewInit) {
+            this._viewInit = true;
+            requestAnimationFrame(() => {
+                this.element.nativeElement.style.removeProperty('--_init-transition');
             });
         }
     }
@@ -20883,6 +20885,9 @@ class IgxToggleDirective {
     get hiddenClass() {
         return this.collapsed;
     }
+    /**
+     * @hidden
+     */
     get hiddenWebkitClass() {
         const isSafari = this.platform?.isSafari;
         const browserVersion = this.platform?.browserVersion;
@@ -21022,6 +21027,14 @@ class IgxToggleDirective {
             return;
         }
         this._collapsed = false;
+        // TODO: this is a workaround for the issue introduced by Angular's with Ivy renderer.
+        // When calling detectChanges(), Angular marks the element for check, but does not update the classes
+        // immediately, which causes the overlay to calculate incorrect dimensions of target element.
+        // Overlay show should be called in the next tick to ensure the classes are updated and target element is measured correctly.
+        // Note: across the codebase, each host binding should be checked and similar fix applied if needed!!!
+        this.elementRef.nativeElement.className = this.elementRef.nativeElement.className.replace('igx-toggle--hidden', 'igx-toggle');
+        this.elementRef.nativeElement.className = this.elementRef.nativeElement.className.replace('igx-toggle--hidden-webkit', 'igx-toggle');
+        this.elementRef.nativeElement.removeAttribute('aria-hidden');
         this.cdr.detectChanges();
         if (!info) {
             this.unsubscribe();
@@ -21172,14 +21185,20 @@ class IgxToggleDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxOverlayService }, { token: IgxNavigationService, optional: true }, { token: PlatformUtil, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: IgxToggleDirective, isStandalone: true, selector: "[igxToggle]", inputs: { id: "id" }, outputs: { opened: "opened", opening: "opening", closed: "closed", closing: "closing", appended: "appended" }, host: { properties: { "class.igx-toggle--hidden": "this.hiddenClass", "attr.aria-hidden": "this.hiddenClass", "class.igx-toggle--hidden-webkit": "this.hiddenWebkitClass", "class.igx-toggle": "this.defaultClass" } }, exportAs: ["toggle"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: IgxToggleDirective, isStandalone: true, selector: "[igxToggle]", inputs: { id: "id" }, outputs: { opened: "opened", opening: "opening", closed: "closed", closing: "closing", appended: "appended" }, host: { properties: { "class.igx-toggle--hidden": "hiddenClass", "attr.aria-hidden": "hiddenClass", "class.igx-toggle--hidden-webkit": "hiddenWebkitClass", "class.igx-toggle": "defaultClass" } }, exportAs: ["toggle"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxToggleDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'toggle',
                     selector: '[igxToggle]',
-                    standalone: true
+                    standalone: true,
+                    host: {
+                        '[class.igx-toggle--hidden]': 'hiddenClass',
+                        '[attr.aria-hidden]': 'hiddenClass',
+                        '[class.igx-toggle--hidden-webkit]': 'hiddenWebkitClass',
+                        '[class.igx-toggle]': 'defaultClass'
+                    }
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxOverlayService, decorators: [{
                     type: Inject,
@@ -21200,18 +21219,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                 type: Output
             }], id: [{
                 type: Input
-            }], hiddenClass: [{
-                type: HostBinding,
-                args: ['class.igx-toggle--hidden']
-            }, {
-                type: HostBinding,
-                args: ['attr.aria-hidden']
-            }], hiddenWebkitClass: [{
-                type: HostBinding,
-                args: ['class.igx-toggle--hidden-webkit']
-            }], defaultClass: [{
-                type: HostBinding,
-                args: ['class.igx-toggle']
             }] } });
 class IgxToggleActionDirective {
     /**
@@ -21525,11 +21532,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
 
 class IgxTooltipComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: IgxTooltipComponent, isStandalone: true, selector: "igx-tooltip", viewQueries: [{ propertyName: "tooltip", first: true, predicate: IgxTooltipDirective, descendants: true, static: true }], ngImport: i0, template: "<span igxTooltip>{{content}}</span>", dependencies: [{ kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: IgxTooltipComponent, isStandalone: true, selector: "igx-tooltip", viewQueries: [{ propertyName: "tooltip", first: true, predicate: IgxTooltipDirective, descendants: true, static: true }], ngImport: i0, template: "<span data-default igxTooltip>{{content}}</span>\n", dependencies: [{ kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-tooltip', imports: [IgxTooltipDirective], template: "<span igxTooltip>{{content}}</span>" }]
+            args: [{ selector: 'igx-tooltip', imports: [IgxTooltipDirective], template: "<span data-default igxTooltip>{{content}}</span>\n" }]
         }], propDecorators: { tooltip: [{
                 type: ViewChild,
                 args: [IgxTooltipDirective, { static: true }]
@@ -28970,6 +28977,10 @@ class IgxRowDirective {
      * @internal
      */
     ngOnDestroy() {
+        // if action strip is shown here but row is about to be destroyed, hide it.
+        if (this.grid.actionStrip && this.grid.actionStrip.context === this) {
+            this.grid.actionStrip.hide();
+        }
         this.destroy$.next(true);
         this.destroy$.complete();
     }
@@ -30317,10 +30328,23 @@ class IgxBadgeComponent {
          * ```
          */
         this.outlined = false;
+        /**
+         * Sets/gets whether the badge is displayed as a dot.
+         * When true, the badge will be rendered as a minimal 8px indicator without any content.
+         * Default value is `false`.
+         *
+         * @example
+         * ```html
+         * <igx-badge dot type="success"></igx-badge>
+         * ```
+         */
+        this.dot = false;
     }
     /** @hidden @internal */
     get _squareShape() {
-        return this.shape === 'square';
+        if (!this.dot) {
+            return this.shape === 'square';
+        }
     }
     /**
      * Defines a human-readable, accessor, author-localized description for
@@ -30351,7 +30375,7 @@ class IgxBadgeComponent {
         return this.type === IgxBadgeType.ERROR;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: IgxBadgeComponent, isStandalone: true, selector: "igx-badge", inputs: { id: "id", type: "type", value: "value", icon: "icon", iconSet: "iconSet", shape: "shape", outlined: ["outlined", "outlined", booleanAttribute] }, host: { properties: { "attr.id": "this.id", "attr.role": "this.role", "class.igx-badge": "this.cssClass", "class.igx-badge--square": "this._squareShape", "attr.aria-label": "this.label", "class.igx-badge--outlined": "this.outlined", "attr.aria-roledescription": "this.roleDescription", "class.igx-badge--info": "this.infoClass", "class.igx-badge--success": "this.successClass", "class.igx-badge--warning": "this.warningClass", "class.igx-badge--error": "this.errorClass" } }, ngImport: i0, template: "@if (value || value === 0 && !icon) {\n    <span class=\"igx-badge__value\">{{value}}</span>\n}\n@if (icon && !iconSet) {\n    <igx-icon>{{icon}}</igx-icon>\n}\n@if (icon && iconSet) {\n    <igx-icon [family]=\"iconSet\" [name]=\"icon\">{{icon}}</igx-icon>\n}\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: IgxBadgeComponent, isStandalone: true, selector: "igx-badge", inputs: { id: "id", type: "type", value: "value", icon: "icon", iconSet: "iconSet", shape: "shape", outlined: ["outlined", "outlined", booleanAttribute], dot: ["dot", "dot", booleanAttribute] }, host: { properties: { "attr.id": "this.id", "attr.role": "this.role", "class.igx-badge": "this.cssClass", "class.igx-badge--square": "this._squareShape", "attr.aria-label": "this.label", "class.igx-badge--outlined": "this.outlined", "class.igx-badge--dot": "this.dot", "attr.aria-roledescription": "this.roleDescription", "class.igx-badge--info": "this.infoClass", "class.igx-badge--success": "this.successClass", "class.igx-badge--warning": "this.warningClass", "class.igx-badge--error": "this.errorClass" } }, ngImport: i0, template: "@if (value || value === 0 && !icon) {\n    <span class=\"igx-badge__value\">{{value}}</span>\n}\n@if (icon && !iconSet) {\n    <igx-icon>{{icon}}</igx-icon>\n}\n@if (icon && iconSet) {\n    <igx-icon [family]=\"iconSet\" [name]=\"icon\">{{icon}}</igx-icon>\n}\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxBadgeComponent, decorators: [{
             type: Component,
@@ -30389,6 +30413,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
             }, {
                 type: HostBinding,
                 args: ['class.igx-badge--outlined']
+            }], dot: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }, {
+                type: HostBinding,
+                args: ['class.igx-badge--dot']
             }], roleDescription: [{
                 type: HostBinding,
                 args: ['attr.aria-roledescription']
@@ -32238,6 +32268,7 @@ class IgxMonthsViewComponent extends IgxCalendarViewDirective {
         super(dayInterval);
         this.el = el;
         this.#standalone = true;
+        this.platform = inject(PlatformUtil);
         /**
          * Sets/gets the `id` of the months view.
          * If not set, the `id` will have value `"igx-months-view-0"`.
@@ -32271,7 +32302,7 @@ class IgxMonthsViewComponent extends IgxCalendarViewDirective {
      * @hidden
      */
     onMouseDown() {
-        if (this.tabIndex !== -1) {
+        if (this.tabIndex !== -1 && this.platform.isBrowser && this.el?.nativeElement) {
             this.el.nativeElement.focus();
         }
     }
@@ -32412,6 +32443,7 @@ class IgxYearsViewComponent extends IgxCalendarViewDirective {
         super(dayInterval);
         this.el = el;
         this.#standalone = true;
+        this.platform = inject(PlatformUtil);
         /**
          * The default css class applied to the component.
          *
@@ -32463,7 +32495,7 @@ class IgxYearsViewComponent extends IgxCalendarViewDirective {
      * @hidden
      */
     onMouseDown() {
-        if (this.tabIndex !== -1) {
+        if (this.tabIndex !== -1 && this.platform.isBrowser && this.el?.nativeElement) {
             this.el.nativeElement.focus();
         }
     }
@@ -32735,8 +32767,12 @@ class KeyboardNavigationService {
         this.ngZone = ngZone;
         this.keyHandlers = new Map();
         this.eventUnsubscribeFn = null;
+        this.platform = inject(PlatformUtil);
     }
     attachKeyboardHandlers(elementRef, context) {
+        if (!this.platform.isBrowser) {
+            return this;
+        }
         this.detachKeyboardHandlers(); // Clean up any existing listeners
         this.ngZone.runOutsideAngular(() => {
             this.eventUnsubscribeFn = this.eventManager.addEventListener(elementRef.nativeElement, 'keydown', (event) => {
@@ -33793,7 +33829,7 @@ class IgxDaysViewComponent extends IgxCalendarBaseDirective {
                 nextDate: date
             });
         }
-        if (this.tabIndex !== -1) {
+        if (this.tabIndex !== -1 && this.platform.isBrowser && this.el?.nativeElement) {
             this.el.nativeElement.focus();
         }
         this.activeDate = item.date.native;
@@ -34421,7 +34457,9 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
     }
     onMouseDown(event) {
         event.stopPropagation();
-        this.wrapper.nativeElement.focus();
+        if (this.platform.isBrowser && this.wrapper?.nativeElement) {
+            this.wrapper.nativeElement.focus();
+        }
     }
     /**
      * @hidden
@@ -34703,7 +34741,9 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
         super.activeViewDecadeKB(event, activeViewIdx);
         if (this.platform.isActivationKey(event)) {
             this.viewDate = date;
-            this.wrapper.nativeElement.focus();
+            if (this.platform.isBrowser && this.wrapper?.nativeElement) {
+                this.wrapper.nativeElement.focus();
+            }
         }
     }
     /**
@@ -34711,6 +34751,9 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
      * @internal
      */
     onYearsViewClick(event) {
+        if (!this.platform.isBrowser) {
+            return;
+        }
         const path = event.composed ? event.composedPath() : [event.target];
         const years = this.dacadeView.viewItems.toArray();
         const validTarget = years.some(year => path.includes(year.nativeElement));
@@ -34838,7 +34881,9 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
             this.activeView = IgxCalendarView.Year;
             this.activeViewIdx = activeViewIdx;
             this.viewDate = date;
-            this.wrapper.nativeElement.focus();
+            if (this.platform.isBrowser && this.wrapper?.nativeElement) {
+                this.wrapper.nativeElement.focus();
+            }
         }
     }
     /**
@@ -34937,7 +34982,7 @@ class IgxCalendarComponent extends IgxCalendarBaseDirective {
                 multi: false,
                 provide: KeyboardNavigationService,
             },
-        ], queries: [{ propertyName: "headerTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarHeaderTemplateDirective), descendants: true, read: IgxCalendarHeaderTemplateDirective, static: true }, { propertyName: "headerTitleTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarHeaderTitleTemplateDirective), descendants: true, read: IgxCalendarHeaderTitleTemplateDirective, static: true }, { propertyName: "subheaderTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarSubheaderTemplateDirective), descendants: true, read: IgxCalendarSubheaderTemplateDirective, static: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "dacadeView", first: true, predicate: ["decade"], descendants: true, read: IgxYearsViewComponent }, { propertyName: "monthsView", first: true, predicate: ["months"], descendants: true, read: IgxMonthsViewComponent }, { propertyName: "daysView", first: true, predicate: ["days"], descendants: true, read: IgxDaysViewComponent }, { propertyName: "prevPageBtn", first: true, predicate: ["prevPageBtn"], descendants: true }, { propertyName: "nextPageBtn", first: true, predicate: ["nextPageBtn"], descendants: true }, { propertyName: "monthsBtns", predicate: ["monthsBtn"], descendants: true }, { propertyName: "monthViews", predicate: ["days"], descendants: true, read: IgxDaysViewComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template let-result #defaultHeaderTitle>\n    @if (selection === 'single') {\n        <span>{{ resourceStrings.igx_calendar_select_date }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ resourceStrings.igx_calendar_range_placeholder }}</span>\n    }\n</ng-template>\n\n<ng-template let-result #defaultHeaderDate>\n    @if (selection === 'single') {\n        <span>{{ getFormattedDate().weekday }},&nbsp;</span>\n        <span>{{ getFormattedDate().monthday }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ selectedDates.length === 0 ? 'Start' : getFormattedRange().start}}</span>\n        <span>&nbsp;-&nbsp;</span>\n        <span>{{ selectedDates.length <= 1 ? 'End' : getFormattedRange().end}}</span>\n    }\n</ng-template>\n\n<!-- Month -->\n<ng-template #defaultMonth let-obj>\n    <span\n        #monthsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'LLLL') + ', ' + resourceStrings.igx_calendar_select_month\"\n        (keydown)=\"onActiveViewYearKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewYear($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedMonth(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Month Year -->\n<ng-template #defaultMonthYear let-obj let-result>\n    @if (monthsViewNumber < 2 || obj.index < 1) {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">\n            {{ monthsViewNumber > 1 ?\n            (resourceStrings.igx_calendar_first_picker_of.replace('{0}', monthsViewNumber.toString()) + ' ' +\n            (obj.date | date: 'LLLL yyyy')) :\n            resourceStrings.igx_calendar_selected_month_is + (obj.date | date: 'LLLL yyyy')}}\n        </span>\n    }\n    <ng-container *ngTemplateOutlet=\"defaultMonth; context: {$implicit: obj}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"defaultYear; context: {$implicit: obj}\"></ng-container>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevMonth(viewDate) | date: 'LLLL'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        [startScroll]=\"startPrevPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextMonth(viewDate, monthsViewNumber) | date: 'LLLL'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        [startScroll]=\"startNextPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- PICKER IN DAYS -->\n<ng-template #calendarDaysPicker let-i>\n    <section class=\"igx-calendar-picker\" [style.--calendar-row-start]=\"1 + (2 * i)\">\n        <div class=\"igx-calendar-picker__dates\" [attr.data-month]=\"i | IgxGetViewDate:viewDate:false\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultMonthYear; context: getContext(i)\">\n            </ng-container>\n        </div>\n        @if (this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0) {\n            <div class=\"igx-calendar-picker__nav\">\n                <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n            </div>\n        }\n    </section>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n\n@if (selection === 'single' && hasHeader || selection === 'range' && hasHeader) {\n    <header\n        aria-labelledby=\"igx-aria-calendar-title-month igx-aria-calendar-title-year\"\n        class=\"igx-calendar__header\"\n    >\n        <h5 id=\"igx-aria-calendar-title-year\" class=\"igx-calendar__header-year\">\n            <ng-container *ngTemplateOutlet=\"headerTitleTemplate ?? defaultHeaderTitle; context: headerContext\"></ng-container>\n        </h5>\n        <h2 id=\"igx-aria-calendar-title-month\" class=\"igx-calendar__header-date\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultHeaderDate; context: headerContext\">\n            </ng-container>\n        </h2>\n    </header>\n}\n\n\n<div\n    #wrapper\n    [style.--calendar-months]=\"monthsViewNumber\"\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [class.igx-calendar__wrapper--vertical]=\"orientation === 'vertical'\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <caption id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        @if (selection === 'multi') {\n            {{ monthsViewNumber && monthsViewNumber > 1 ?\n            resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :\n            resourceStrings.igx_calendar_singular_multi_selection}}\n        }\n        @if (selection === 'range') {\n            {{ monthsViewNumber && monthsViewNumber > 1 ?\n            resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :\n            resourceStrings.igx_calendar_singular_range_selection}}\n        }\n        @if (selection === 'single') {\n            {{ monthsViewNumber && monthsViewNumber > 1 ?\n            resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :\n            resourceStrings.igx_calendar_singular_single_selection}}\n        }\n    </caption>\n    <section\n        class=\"igx-calendar__pickers\"\n        [class.igx-calendar__pickers--days]=\"isDefaultView\"\n        [class.igx-calendar__pickers--vertical]=\"orientation === 'vertical'\"\n    >\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <ng-container *ngTemplateOutlet=\"calendarDaysPicker; context: {$implicit: i}\"></ng-container>\n            }\n        }\n\n        @if (isYearView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\" [class.igx-calendar__body--vertical]=\"orientation === 'vertical'\" role=\"presentation\">\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <igx-days-view\n                    #days\n                    role=\"rowgroup\"\n                    [tabIndex]=\"-1\"\n                    [selection]=\"selection\"\n                    [locale]=\"locale\"\n                    [value]=\"value\"\n                    [(activeDate)]=\"activeDate\"\n                    [(previewRangeDate)]=\"previewRangeDate\"\n                    [viewDate]=\"i | IgxGetViewDate: viewDate\"\n                    [weekStart]=\"weekStart\"\n                    [formatOptions]=\"formatOptions\"\n                    [formatViews]=\"formatViews\"\n                    [disabledDates]=\"disabledDates\"\n                    [specialDates]=\"specialDates\"\n                    [style.--calendar-row-start]=\"(i + 1) * 2\"\n                    [hideLeadingDays]=\"hideOutsideDays || i !== 0\"\n                    [hideTrailingDays]=\"hideOutsideDays || i !== monthsViewNumber - 1\"\n                    [showWeekNumbers]=\"showWeekNumbers\"\n                    [showActiveDay]=\"showActiveDay\"\n                    [standalone]=\"false\"\n                    (swiperight)=\"previousPage()\"\n                    (swipeleft)=\"nextPage()\"\n                    (dateSelected)=\"handleDateSelection($event)\"\n                    (mousedown)=\"$event.preventDefault()\">\n                </igx-days-view>\n            }\n        }\n\n        @if (isYearView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeMonth($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeYear($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-years-view>\n        }\n    </section>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxCalendarScrollPageDirective, selector: "[igxCalendarScrollPage]", inputs: ["startScroll", "stopScroll"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxDaysViewComponent, selector: "igx-days-view", inputs: ["id", "tabIndex", "role", "standalone", "showWeekNumbers", "activeDate", "previewRangeDate", "hideLeadingDays", "hideTrailingDays", "showActiveDay"], outputs: ["dateSelected", "pageChanged", "activeDateChange", "previewRangeDateChange"] }, { kind: "component", type: IgxMonthsViewComponent, selector: "igx-months-view", inputs: ["id", "standalone", "monthFormat", "formatView"] }, { kind: "component", type: IgxYearsViewComponent, selector: "igx-years-view", inputs: ["standalone", "yearFormat"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: IgxMonthViewSlotsCalendar, name: "IgxMonthViewSlots" }, { kind: "pipe", type: IgxGetViewDateCalendar, name: "IgxGetViewDate" }] }); }
+        ], queries: [{ propertyName: "headerTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarHeaderTemplateDirective), descendants: true, read: IgxCalendarHeaderTemplateDirective, static: true }, { propertyName: "headerTitleTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarHeaderTitleTemplateDirective), descendants: true, read: IgxCalendarHeaderTitleTemplateDirective, static: true }, { propertyName: "subheaderTemplateDirective", first: true, predicate: i0.forwardRef(() => IgxCalendarSubheaderTemplateDirective), descendants: true, read: IgxCalendarSubheaderTemplateDirective, static: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "dacadeView", first: true, predicate: ["decade"], descendants: true, read: IgxYearsViewComponent }, { propertyName: "monthsView", first: true, predicate: ["months"], descendants: true, read: IgxMonthsViewComponent }, { propertyName: "daysView", first: true, predicate: ["days"], descendants: true, read: IgxDaysViewComponent }, { propertyName: "prevPageBtn", first: true, predicate: ["prevPageBtn"], descendants: true }, { propertyName: "nextPageBtn", first: true, predicate: ["nextPageBtn"], descendants: true }, { propertyName: "monthsBtns", predicate: ["monthsBtn"], descendants: true }, { propertyName: "monthViews", predicate: ["days"], descendants: true, read: IgxDaysViewComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template let-result #defaultHeaderTitle>\n    @if (selection === 'single') {\n        <span>{{ resourceStrings.igx_calendar_select_date }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ resourceStrings.igx_calendar_range_placeholder }}</span>\n    }\n</ng-template>\n\n<ng-template let-result #defaultHeaderDate>\n    @if (selection === 'single') {\n        <span>{{ getFormattedDate().weekday }},&nbsp;</span>\n        <span>{{ getFormattedDate().monthday }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ selectedDates.length === 0 ? 'Start' : getFormattedRange().start}}</span>\n        <span>&nbsp;-&nbsp;</span>\n        <span>{{ selectedDates.length <= 1 ? 'End' : getFormattedRange().end}}</span>\n    }\n</ng-template>\n\n<!-- Month -->\n<ng-template #defaultMonth let-obj>\n    <span\n        #monthsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'LLLL') + ', ' + resourceStrings.igx_calendar_select_month\"\n        (keydown)=\"onActiveViewYearKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewYear($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedMonth(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Month Year -->\n<ng-template #defaultMonthYear let-obj let-result>\n    @if (monthsViewNumber < 2 || obj.index < 1) {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">\n            {{ monthsViewNumber > 1 ?\n            (resourceStrings.igx_calendar_first_picker_of.replace('{0}', monthsViewNumber.toString()) + ' ' +\n            (obj.date | date: 'LLLL yyyy')) :\n            resourceStrings.igx_calendar_selected_month_is + (obj.date | date: 'LLLL yyyy')}}\n        </span>\n    }\n    <ng-container *ngTemplateOutlet=\"defaultMonth; context: {$implicit: obj}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"defaultYear; context: {$implicit: obj}\"></ng-container>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevMonth(viewDate) | date: 'LLLL'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        [startScroll]=\"startPrevPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextMonth(viewDate, monthsViewNumber) | date: 'LLLL'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        [startScroll]=\"startNextPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- PICKER IN DAYS -->\n<ng-template #calendarDaysPicker let-i>\n    <section class=\"igx-calendar-picker\" [style.--calendar-row-start]=\"1 + (2 * i)\">\n        <div class=\"igx-calendar-picker__dates\" [attr.data-month]=\"i | IgxGetViewDate:viewDate:false\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultMonthYear; context: getContext(i)\">\n            </ng-container>\n        </div>\n        @if (this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0) {\n            <div class=\"igx-calendar-picker__nav\">\n                <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n            </div>\n        }\n    </section>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n\n@if (selection === 'single' && hasHeader || selection === 'range' && hasHeader) {\n    <header\n        aria-labelledby=\"igx-aria-calendar-title-month igx-aria-calendar-title-year\"\n        class=\"igx-calendar__header\"\n    >\n        <h5 id=\"igx-aria-calendar-title-year\" class=\"igx-calendar__header-year\">\n            <ng-container *ngTemplateOutlet=\"headerTitleTemplate ?? defaultHeaderTitle; context: headerContext\"></ng-container>\n        </h5>\n        <h2 id=\"igx-aria-calendar-title-month\" class=\"igx-calendar__header-date\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultHeaderDate; context: headerContext\">\n            </ng-container>\n        </h2>\n    </header>\n}\n\n\n<div\n    #wrapper\n    [style.--calendar-months]=\"monthsViewNumber\"\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [class.igx-calendar__wrapper--vertical]=\"orientation === 'vertical'\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <div id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        @switch (selection) {\n            @case ('multi') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_multi_selection}}\n            }\n            @case ('range') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_range_selection}}\n            }\n            @default {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_single_selection}}\n            }\n        }\n    </div>\n    <section\n        class=\"igx-calendar__pickers\"\n        [class.igx-calendar__pickers--days]=\"isDefaultView\"\n        [class.igx-calendar__pickers--vertical]=\"orientation === 'vertical'\"\n    >\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <ng-container *ngTemplateOutlet=\"calendarDaysPicker; context: {$implicit: i}\"></ng-container>\n            }\n        }\n\n        @if (isYearView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\" [class.igx-calendar__body--vertical]=\"orientation === 'vertical'\" role=\"presentation\">\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <igx-days-view\n                    #days\n                    role=\"rowgroup\"\n                    [tabIndex]=\"-1\"\n                    [selection]=\"selection\"\n                    [locale]=\"locale\"\n                    [value]=\"value\"\n                    [(activeDate)]=\"activeDate\"\n                    [(previewRangeDate)]=\"previewRangeDate\"\n                    [viewDate]=\"i | IgxGetViewDate: viewDate\"\n                    [weekStart]=\"weekStart\"\n                    [formatOptions]=\"formatOptions\"\n                    [formatViews]=\"formatViews\"\n                    [disabledDates]=\"disabledDates\"\n                    [specialDates]=\"specialDates\"\n                    [style.--calendar-row-start]=\"(i + 1) * 2\"\n                    [hideLeadingDays]=\"hideOutsideDays || i !== 0\"\n                    [hideTrailingDays]=\"hideOutsideDays || i !== monthsViewNumber - 1\"\n                    [showWeekNumbers]=\"showWeekNumbers\"\n                    [showActiveDay]=\"showActiveDay\"\n                    [standalone]=\"false\"\n                    (swiperight)=\"previousPage()\"\n                    (swipeleft)=\"nextPage()\"\n                    (dateSelected)=\"handleDateSelection($event)\"\n                    (mousedown)=\"$event.preventDefault()\">\n                </igx-days-view>\n            }\n        }\n\n        @if (isYearView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeMonth($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeYear($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-years-view>\n        }\n    </section>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxCalendarScrollPageDirective, selector: "[igxCalendarScrollPage]", inputs: ["startScroll", "stopScroll"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxDaysViewComponent, selector: "igx-days-view", inputs: ["id", "tabIndex", "role", "standalone", "showWeekNumbers", "activeDate", "previewRangeDate", "hideLeadingDays", "hideTrailingDays", "showActiveDay"], outputs: ["dateSelected", "pageChanged", "activeDateChange", "previewRangeDateChange"] }, { kind: "component", type: IgxMonthsViewComponent, selector: "igx-months-view", inputs: ["id", "standalone", "monthFormat", "formatView"] }, { kind: "component", type: IgxYearsViewComponent, selector: "igx-years-view", inputs: ["standalone", "yearFormat"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: IgxMonthViewSlotsCalendar, name: "IgxMonthViewSlots" }, { kind: "pipe", type: IgxGetViewDateCalendar, name: "IgxGetViewDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxCalendarComponent, decorators: [{
             type: Component,
@@ -34951,7 +34996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                             multi: false,
                             provide: KeyboardNavigationService,
                         },
-                    ], selector: 'igx-calendar', imports: [NgTemplateOutlet, IgxCalendarScrollPageDirective, IgxIconComponent, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, DatePipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar], template: "<ng-template let-result #defaultHeaderTitle>\n    @if (selection === 'single') {\n        <span>{{ resourceStrings.igx_calendar_select_date }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ resourceStrings.igx_calendar_range_placeholder }}</span>\n    }\n</ng-template>\n\n<ng-template let-result #defaultHeaderDate>\n    @if (selection === 'single') {\n        <span>{{ getFormattedDate().weekday }},&nbsp;</span>\n        <span>{{ getFormattedDate().monthday }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ selectedDates.length === 0 ? 'Start' : getFormattedRange().start}}</span>\n        <span>&nbsp;-&nbsp;</span>\n        <span>{{ selectedDates.length <= 1 ? 'End' : getFormattedRange().end}}</span>\n    }\n</ng-template>\n\n<!-- Month -->\n<ng-template #defaultMonth let-obj>\n    <span\n        #monthsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'LLLL') + ', ' + resourceStrings.igx_calendar_select_month\"\n        (keydown)=\"onActiveViewYearKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewYear($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedMonth(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Month Year -->\n<ng-template #defaultMonthYear let-obj let-result>\n    @if (monthsViewNumber < 2 || obj.index < 1) {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">\n            {{ monthsViewNumber > 1 ?\n            (resourceStrings.igx_calendar_first_picker_of.replace('{0}', monthsViewNumber.toString()) + ' ' +\n            (obj.date | date: 'LLLL yyyy')) :\n            resourceStrings.igx_calendar_selected_month_is + (obj.date | date: 'LLLL yyyy')}}\n        </span>\n    }\n    <ng-container *ngTemplateOutlet=\"defaultMonth; context: {$implicit: obj}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"defaultYear; context: {$implicit: obj}\"></ng-container>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevMonth(viewDate) | date: 'LLLL'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        [startScroll]=\"startPrevPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextMonth(viewDate, monthsViewNumber) | date: 'LLLL'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        [startScroll]=\"startNextPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- PICKER IN DAYS -->\n<ng-template #calendarDaysPicker let-i>\n    <section class=\"igx-calendar-picker\" [style.--calendar-row-start]=\"1 + (2 * i)\">\n        <div class=\"igx-calendar-picker__dates\" [attr.data-month]=\"i | IgxGetViewDate:viewDate:false\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultMonthYear; context: getContext(i)\">\n            </ng-container>\n        </div>\n        @if (this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0) {\n            <div class=\"igx-calendar-picker__nav\">\n                <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n            </div>\n        }\n    </section>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n\n@if (selection === 'single' && hasHeader || selection === 'range' && hasHeader) {\n    <header\n        aria-labelledby=\"igx-aria-calendar-title-month igx-aria-calendar-title-year\"\n        class=\"igx-calendar__header\"\n    >\n        <h5 id=\"igx-aria-calendar-title-year\" class=\"igx-calendar__header-year\">\n            <ng-container *ngTemplateOutlet=\"headerTitleTemplate ?? defaultHeaderTitle; context: headerContext\"></ng-container>\n        </h5>\n        <h2 id=\"igx-aria-calendar-title-month\" class=\"igx-calendar__header-date\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultHeaderDate; context: headerContext\">\n            </ng-container>\n        </h2>\n    </header>\n}\n\n\n<div\n    #wrapper\n    [style.--calendar-months]=\"monthsViewNumber\"\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [class.igx-calendar__wrapper--vertical]=\"orientation === 'vertical'\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <caption id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        @if (selection === 'multi') {\n            {{ monthsViewNumber && monthsViewNumber > 1 ?\n            resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :\n            resourceStrings.igx_calendar_singular_multi_selection}}\n        }\n        @if (selection === 'range') {\n            {{ monthsViewNumber && monthsViewNumber > 1 ?\n            resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :\n            resourceStrings.igx_calendar_singular_range_selection}}\n        }\n        @if (selection === 'single') {\n            {{ monthsViewNumber && monthsViewNumber > 1 ?\n            resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :\n            resourceStrings.igx_calendar_singular_single_selection}}\n        }\n    </caption>\n    <section\n        class=\"igx-calendar__pickers\"\n        [class.igx-calendar__pickers--days]=\"isDefaultView\"\n        [class.igx-calendar__pickers--vertical]=\"orientation === 'vertical'\"\n    >\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <ng-container *ngTemplateOutlet=\"calendarDaysPicker; context: {$implicit: i}\"></ng-container>\n            }\n        }\n\n        @if (isYearView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\" [class.igx-calendar__body--vertical]=\"orientation === 'vertical'\" role=\"presentation\">\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <igx-days-view\n                    #days\n                    role=\"rowgroup\"\n                    [tabIndex]=\"-1\"\n                    [selection]=\"selection\"\n                    [locale]=\"locale\"\n                    [value]=\"value\"\n                    [(activeDate)]=\"activeDate\"\n                    [(previewRangeDate)]=\"previewRangeDate\"\n                    [viewDate]=\"i | IgxGetViewDate: viewDate\"\n                    [weekStart]=\"weekStart\"\n                    [formatOptions]=\"formatOptions\"\n                    [formatViews]=\"formatViews\"\n                    [disabledDates]=\"disabledDates\"\n                    [specialDates]=\"specialDates\"\n                    [style.--calendar-row-start]=\"(i + 1) * 2\"\n                    [hideLeadingDays]=\"hideOutsideDays || i !== 0\"\n                    [hideTrailingDays]=\"hideOutsideDays || i !== monthsViewNumber - 1\"\n                    [showWeekNumbers]=\"showWeekNumbers\"\n                    [showActiveDay]=\"showActiveDay\"\n                    [standalone]=\"false\"\n                    (swiperight)=\"previousPage()\"\n                    (swipeleft)=\"nextPage()\"\n                    (dateSelected)=\"handleDateSelection($event)\"\n                    (mousedown)=\"$event.preventDefault()\">\n                </igx-days-view>\n            }\n        }\n\n        @if (isYearView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeMonth($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeYear($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-years-view>\n        }\n    </section>\n</div>\n" }]
+                    ], selector: 'igx-calendar', imports: [NgTemplateOutlet, IgxCalendarScrollPageDirective, IgxIconComponent, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, DatePipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar], template: "<ng-template let-result #defaultHeaderTitle>\n    @if (selection === 'single') {\n        <span>{{ resourceStrings.igx_calendar_select_date }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ resourceStrings.igx_calendar_range_placeholder }}</span>\n    }\n</ng-template>\n\n<ng-template let-result #defaultHeaderDate>\n    @if (selection === 'single') {\n        <span>{{ getFormattedDate().weekday }},&nbsp;</span>\n        <span>{{ getFormattedDate().monthday }}</span>\n    }\n    @if (selection === 'range') {\n        <span>{{ selectedDates.length === 0 ? 'Start' : getFormattedRange().start}}</span>\n        <span>&nbsp;-&nbsp;</span>\n        <span>{{ selectedDates.length <= 1 ? 'End' : getFormattedRange().end}}</span>\n    }\n</ng-template>\n\n<!-- Month -->\n<ng-template #defaultMonth let-obj>\n    <span\n        #monthsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'LLLL') + ', ' + resourceStrings.igx_calendar_select_month\"\n        (keydown)=\"onActiveViewYearKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewYear($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedMonth(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Month Year -->\n<ng-template #defaultMonthYear let-obj let-result>\n    @if (monthsViewNumber < 2 || obj.index < 1) {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">\n            {{ monthsViewNumber > 1 ?\n            (resourceStrings.igx_calendar_first_picker_of.replace('{0}', monthsViewNumber.toString()) + ' ' +\n            (obj.date | date: 'LLLL yyyy')) :\n            resourceStrings.igx_calendar_selected_month_is + (obj.date | date: 'LLLL yyyy')}}\n        </span>\n    }\n    <ng-container *ngTemplateOutlet=\"defaultMonth; context: {$implicit: obj}\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"defaultYear; context: {$implicit: obj}\"></ng-container>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevMonth(viewDate) | date: 'LLLL'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        [startScroll]=\"startPrevPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextMonth(viewDate, monthsViewNumber) | date: 'LLLL'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        [startScroll]=\"startNextPageScroll\"\n        [stopScroll]=\"stopPageScroll\"\n        (keydown)=\"$event.stopPropagation()\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- PICKER IN DAYS -->\n<ng-template #calendarDaysPicker let-i>\n    <section class=\"igx-calendar-picker\" [style.--calendar-row-start]=\"1 + (2 * i)\">\n        <div class=\"igx-calendar-picker__dates\" [attr.data-month]=\"i | IgxGetViewDate:viewDate:false\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultMonthYear; context: getContext(i)\">\n            </ng-container>\n        </div>\n        @if (this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0) {\n            <div class=\"igx-calendar-picker__nav\">\n                <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n            </div>\n        }\n    </section>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                *ngTemplateOutlet=\"subheaderTemplate ? subheaderTemplate : defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n\n@if (selection === 'single' && hasHeader || selection === 'range' && hasHeader) {\n    <header\n        aria-labelledby=\"igx-aria-calendar-title-month igx-aria-calendar-title-year\"\n        class=\"igx-calendar__header\"\n    >\n        <h5 id=\"igx-aria-calendar-title-year\" class=\"igx-calendar__header-year\">\n            <ng-container *ngTemplateOutlet=\"headerTitleTemplate ?? defaultHeaderTitle; context: headerContext\"></ng-container>\n        </h5>\n        <h2 id=\"igx-aria-calendar-title-month\" class=\"igx-calendar__header-date\">\n            <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultHeaderDate; context: headerContext\">\n            </ng-container>\n        </h2>\n    </header>\n}\n\n\n<div\n    #wrapper\n    [style.--calendar-months]=\"monthsViewNumber\"\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [class.igx-calendar__wrapper--vertical]=\"orientation === 'vertical'\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <div id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        @switch (selection) {\n            @case ('multi') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_multi_selection}}\n            }\n            @case ('range') {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_range_selection}}\n            }\n            @default {\n                {{ monthsViewNumber && monthsViewNumber > 1 ?\n                resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :\n                resourceStrings.igx_calendar_singular_single_selection}}\n            }\n        }\n    </div>\n    <section\n        class=\"igx-calendar__pickers\"\n        [class.igx-calendar__pickers--days]=\"isDefaultView\"\n        [class.igx-calendar__pickers--vertical]=\"orientation === 'vertical'\"\n    >\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <ng-container *ngTemplateOutlet=\"calendarDaysPicker; context: {$implicit: i}\"></ng-container>\n            }\n        }\n\n        @if (isYearView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\" [class.igx-calendar__body--vertical]=\"orientation === 'vertical'\" role=\"presentation\">\n        @if (isDefaultView) {\n            @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) {\n                <igx-days-view\n                    #days\n                    role=\"rowgroup\"\n                    [tabIndex]=\"-1\"\n                    [selection]=\"selection\"\n                    [locale]=\"locale\"\n                    [value]=\"value\"\n                    [(activeDate)]=\"activeDate\"\n                    [(previewRangeDate)]=\"previewRangeDate\"\n                    [viewDate]=\"i | IgxGetViewDate: viewDate\"\n                    [weekStart]=\"weekStart\"\n                    [formatOptions]=\"formatOptions\"\n                    [formatViews]=\"formatViews\"\n                    [disabledDates]=\"disabledDates\"\n                    [specialDates]=\"specialDates\"\n                    [style.--calendar-row-start]=\"(i + 1) * 2\"\n                    [hideLeadingDays]=\"hideOutsideDays || i !== 0\"\n                    [hideTrailingDays]=\"hideOutsideDays || i !== monthsViewNumber - 1\"\n                    [showWeekNumbers]=\"showWeekNumbers\"\n                    [showActiveDay]=\"showActiveDay\"\n                    [standalone]=\"false\"\n                    (swiperight)=\"previousPage()\"\n                    (swipeleft)=\"nextPage()\"\n                    (dateSelected)=\"handleDateSelection($event)\"\n                    (mousedown)=\"$event.preventDefault()\">\n                </igx-days-view>\n            }\n        }\n\n        @if (isYearView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeMonth($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (pageChanged)=\"updateYear($event)\"\n                (activeDateChanged)=\"updateActiveDescendant($event)\"\n                (selected)=\"changeYear($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            </igx-years-view>\n        }\n    </section>\n</div>\n" }]
         }], propDecorators: { wrapper: [{
                 type: ViewChild,
                 args: ["wrapper"]
@@ -35074,7 +35119,9 @@ class IgxMonthPickerComponent extends IgxCalendarBaseDirective {
         super.activeViewDecadeKB(event, activeViewIdx);
         if (this.platform.isActivationKey(event)) {
             this.viewDate = date;
-            this.wrapper.nativeElement.focus();
+            if (this.platform.isBrowser && this.wrapper?.nativeElement) {
+                this.wrapper.nativeElement.focus();
+            }
         }
     }
     /**
@@ -35103,9 +35150,13 @@ class IgxMonthPickerComponent extends IgxCalendarBaseDirective {
      */
     activeViewDecade() {
         super.activeViewDecade();
-        requestAnimationFrame(() => {
-            this.dacadeView.el.nativeElement.focus();
-        });
+        if (this.platform.isBrowser) {
+            requestAnimationFrame(() => {
+                if (this.dacadeView?.el?.nativeElement) {
+                    this.dacadeView.el.nativeElement.focus();
+                }
+            });
+        }
     }
     /**
      * @hidden
@@ -35128,7 +35179,9 @@ class IgxMonthPickerComponent extends IgxCalendarBaseDirective {
         this.previousViewDate = this.viewDate;
         this.viewDate = new Date(event.getFullYear(), event.getMonth(), event.getDate());
         this.activeView = IgxCalendarView.Year;
-        this.wrapper.nativeElement.focus();
+        if (this.platform.isBrowser && this.wrapper?.nativeElement) {
+            this.wrapper.nativeElement.focus();
+        }
     }
     /**
      * @hidden
@@ -35177,7 +35230,9 @@ class IgxMonthPickerComponent extends IgxCalendarBaseDirective {
     }
     onMouseDown(event) {
         event.stopPropagation();
-        this.wrapper.nativeElement.focus();
+        if (this.platform.isBrowser && this.wrapper?.nativeElement) {
+            this.wrapper.nativeElement.focus();
+        }
     }
     /**
      * @hidden
@@ -45013,6 +45068,7 @@ class IgxColumnComponent {
     get index() {
         return this.grid._columns.indexOf(this);
     }
+    /* mustCoerceToInt */
     /**
      * Gets the pinning position of the column.
      * ```typescript
@@ -60694,7 +60750,7 @@ class IgxGridFilteringCellComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxGridFilteringCellComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: IgxFilteringService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: IgxGridFilteringCellComponent, isStandalone: true, selector: "igx-grid-filtering-cell", inputs: { column: "column" }, host: { properties: { "class": "this.styleClasses", "class.igx-grid-th--pinned": "this.pinnedCss", "class.igx-grid-th--pinned-last": "this.pinnedLastCss", "class.igx-grid-th--pinned-first": "this.pinnedFirstCSS" } }, viewQueries: [{ propertyName: "emptyFilter", first: true, predicate: ["emptyFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultFilter", first: true, predicate: ["defaultFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexFilter", first: true, predicate: ["complexFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent }, { propertyName: "moreIcon", first: true, predicate: ["moreIcon"], descendants: true, read: ElementRef }, { propertyName: "ghostChip", first: true, predicate: ["ghostChip"], descendants: true, read: IgxChipComponent }, { propertyName: "complexChip", first: true, predicate: ["complexChip"], descendants: true, read: IgxChipComponent }], ngImport: i0, template: "<ng-template #emptyFilter>\n    <igx-chips-area [attr.draggable]=\"false\" class=\"igx-filtering-chips\">\n        <igx-chip #ghostChip [attr.draggable]=\"false\" (click)=\"onChipClicked()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon\n                [attr.draggable]=\"false\"\n                igxPrefix\n                family=\"default\"\n                name=\"filter_list\"\n            ></igx-icon>\n            <span [attr.draggable]=\"false\">{{filteringService.grid.resourceStrings.igx_grid_filter}}</span>\n        </igx-chip>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #defaultFilter>\n    <igx-chips-area #chipsArea class=\"igx-filtering-chips\">\n        <!-- expressionsList items re-created on refreshExpressions(), track stable expression -->\n        @for (item of expressionsList; track item.expression; let last = $last; let index = $index) {\n            @if (isChipVisible(index)) {\n                <igx-chip\n                    [removable]=\"true\"\n                    [tabIndex]=\"-1\"\n                    [style.--ig-size]=\"filteringElementsSize\"\n                    (click)=\"onChipClicked(item.expression)\"\n                    (remove)=\"onChipRemoved($event, item)\">\n                    <igx-icon igxPrefix\n                        family=\"default\"\n                        [name]=\"item.expression.condition.iconName\">\n                    </igx-icon>\n                    <span #label>\n                        {{filteringService.getChipLabel(item.expression)}}\n                    </span>\n                </igx-chip>\n            }\n            @if (!last && isChipVisible(index + 1)) {\n                <span class=\"igx-filtering-chips__connector\">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n            }\n        }\n        <div #moreIcon [ngClass]=\"filteringIndicatorClass()\" (click)=\"onChipClicked()\">\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n            <igx-badge [value]=\"moreFiltersCount\"></igx-badge>\n        </div>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #complexFilter>\n    <igx-chip #complexChip [removable]=\"true\" (remove)=\"clearFiltering()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n        <igx-icon igxPrefix family=\"default\" name=\"filter_list\"></igx-icon>\n        <span>{{filteringService.grid.resourceStrings.igx_grid_complex_filter}}</span>\n    </igx-chip>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: IgxGridFilteringCellComponent, isStandalone: true, selector: "igx-grid-filtering-cell", inputs: { column: "column" }, host: { properties: { "class": "this.styleClasses", "class.igx-grid-th--pinned": "this.pinnedCss", "class.igx-grid-th--pinned-last": "this.pinnedLastCss", "class.igx-grid-th--pinned-first": "this.pinnedFirstCSS" } }, viewQueries: [{ propertyName: "emptyFilter", first: true, predicate: ["emptyFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultFilter", first: true, predicate: ["defaultFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexFilter", first: true, predicate: ["complexFilter"], descendants: true, read: TemplateRef, static: true }, { propertyName: "chipsArea", first: true, predicate: ["chipsArea"], descendants: true, read: IgxChipsAreaComponent }, { propertyName: "moreIcon", first: true, predicate: ["moreIcon"], descendants: true, read: ElementRef }, { propertyName: "ghostChip", first: true, predicate: ["ghostChip"], descendants: true, read: IgxChipComponent }, { propertyName: "complexChip", first: true, predicate: ["complexChip"], descendants: true, read: IgxChipComponent }], ngImport: i0, template: "<ng-template #emptyFilter>\n    <igx-chips-area [attr.draggable]=\"false\" class=\"igx-filtering-chips\">\n        <igx-chip #ghostChip [attr.draggable]=\"false\" (click)=\"onChipClicked()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n            <igx-icon\n                [attr.draggable]=\"false\"\n                igxPrefix\n                family=\"default\"\n                name=\"filter_list\"\n            ></igx-icon>\n            <span [attr.draggable]=\"false\">{{filteringService.grid.resourceStrings.igx_grid_filter}}</span>\n        </igx-chip>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #defaultFilter>\n    <igx-chips-area #chipsArea class=\"igx-filtering-chips\">\n        <!-- expressionsList items re-created on refreshExpressions(), track stable expression -->\n        @for (item of expressionsList; track item.expression; let last = $last; let index = $index) {\n            @if (isChipVisible(index)) {\n                <igx-chip\n                    [removable]=\"true\"\n                    [tabIndex]=\"-1\"\n                    [style.--ig-size]=\"filteringElementsSize\"\n                    (click)=\"onChipClicked(item.expression)\"\n                    (remove)=\"onChipRemoved($event, item)\">\n                    <igx-icon igxPrefix\n                        family=\"default\"\n                        [name]=\"item.expression.condition.iconName\">\n                    </igx-icon>\n                    <span #label>\n                        {{filteringService.getChipLabel(item.expression)}}\n                    </span>\n                </igx-chip>\n            }\n            @if (!last && isChipVisible(index + 1)) {\n                <span class=\"igx-filtering-chips__connector\">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>\n            }\n        }\n        <div #moreIcon [ngClass]=\"filteringIndicatorClass()\" (click)=\"onChipClicked()\">\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n            <igx-badge [value]=\"moreFiltersCount\"></igx-badge>\n        </div>\n    </igx-chips-area>\n</ng-template>\n\n<ng-template #complexFilter>\n    <igx-chip #complexChip [removable]=\"true\" (remove)=\"clearFiltering()\" [tabIndex]=\"-1\" [style.--ig-size]=\"filteringElementsSize\">\n        <igx-icon igxPrefix family=\"default\" name=\"filter_list\"></igx-icon>\n        <span>{{filteringService.grid.resourceStrings.igx_grid_complex_filter}}</span>\n    </igx-chip>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n", dependencies: [{ kind: "component", type: IgxChipsAreaComponent, selector: "igx-chips-area", inputs: ["width", "height"], outputs: ["reorder", "selectionChange", "moveStart", "moveEnd"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined", "dot"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxGridFilteringCellComponent, decorators: [{
             type: Component,
@@ -68698,7 +68754,9 @@ class IgxGridBaseDirective {
         }
         else {
             const activeRow = this.navigation.activeNode?.row;
-            const selectedCellIndexes = this.selectionService.selection?.keys()?.toArray();
+            const selectedCellIndexes = this.selectionService.selection
+                ? Array.from(this.selectionService.selection.keys())
+                : [];
             this._activeRowIndexes = [activeRow, ...selectedCellIndexes];
             return this._activeRowIndexes;
         }
@@ -70798,6 +70856,11 @@ class IgxGridBaseDirective {
             }
         }
     }
+    viewDetachHandler(args) {
+        if (this.actionStrip && args.view.rootNodes.find(x => x === this.actionStrip.context?.element.nativeElement)) {
+            this.actionStrip.hide();
+        }
+    }
     /**
      * @hidden @internal
      */
@@ -73899,7 +73962,7 @@ class IgxGridGroupByRowComponent {
         return this.grid.rowSelection !== GridSelectionMode.none && !this.hideGroupRowSelectors;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxGridGroupByRowComponent, deps: [{ token: IGX_GRID_BASE }, { token: IgxGridSelectionService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: IgxFilteringService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: IgxGridGroupByRowComponent, isStandalone: true, selector: "igx-grid-groupby-row", inputs: { hideGroupRowSelectors: "hideGroupRowSelectors", rowDraggable: "rowDraggable", index: "index", gridID: "gridID", groupRow: "groupRow", isFocused: "isFocused" }, host: { listeners: { "pointerdown": "activate()", "click": "onClick($event)" }, properties: { "attr.aria-expanded": "this.expanded", "attr.aria-describedby": "this.describedBy", "attr.data-rowIndex": "this.dataRowIndex", "attr.id": "this.attrCellID", "class": "this.styleClasses" } }, viewQueries: [{ propertyName: "groupContent", first: true, predicate: ["groupContent"], descendants: true, static: true }, { propertyName: "defaultGroupByExpandedTemplate", first: true, predicate: ["defaultGroupByExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupByCollapsedTemplate", first: true, predicate: ["defaultGroupByCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-container #defaultGroupRow>\n\n    @if (rowDraggable) {\n        <div class=\"igx-grid__drag-indicator igx-grid__tr-action\">\n            <igx-icon family=\"default\" name=\"drag_indicator\" [style.visibility]=\"'hidden'\"></igx-icon>\n        </div>\n    }\n\n    @if (showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\"\n            (click)=\"onGroupSelectorClick($event)\">\n            <ng-template #groupByRowSelector *ngTemplateOutlet=\"\n                this.grid.groupByRowSelectorTemplate ? this.grid.groupByRowSelectorTemplate : groupByRowSelectorBaseTemplate;\n                context: { $implicit: {\n                    selectedCount: selectedRowsInTheGroup.length,\n                    totalCount: this.groupRow.records.length,\n                    groupRow: this.groupRow }}\">\n            </ng-template>\n        </div>\n    }\n\n    <div (click)=\"toggle()\" class=\"igx-grid__grouping-indicator\">\n        <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n        </ng-container>\n    </div>\n\n    <div class=\"igx-grid__group-content\" #groupContent>\n        <ng-container\n            *ngTemplateOutlet=\"grid.groupRowTemplate ? grid.groupRowTemplate : defaultGroupByTemplate; context: { $implicit: groupRow }\">\n        </ng-container>\n    </div>\n\n    <ng-template #defaultGroupByExpandedTemplate>\n        <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n    </ng-template>\n\n    <ng-template #defaultGroupByCollapsedTemplate>\n        <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n    </ng-template>\n\n\n    <ng-template #defaultGroupByTemplate>\n        <div class=\"igx-group-label\">\n            <igx-icon family=\"default\" name=\"group_work\" class=\"igx-group-label__icon\"></igx-icon>\n            <span class=\"igx-group-label__column-name\">\n                {{ groupRow.column && groupRow.column.header ?\n                groupRow.column.header :\n                (groupRow.expression ? groupRow.expression.fieldName : '') }}:\n            </span>\n\n            <span class=\"igx-group-label__text\">{{\n                formatter\n                    ? (groupRow.value | columnFormatter:formatter:groupRow.records[0]:null)\n                    : dataType === \"number\"\n                    ? (groupRow.value | number:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n                    : (dataType === 'date' || dataType === 'time' || dataType === 'dateTime')\n                    ? (groupRow.value | date:groupRow.column.pipeArgs.format:groupRow.column.pipeArgs.timezone:grid.locale)\n                    : dataType === 'currency'\n                    ? (groupRow.value | currency:currencyCode:groupRow.column.pipeArgs.display:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n                    : dataType === 'percent'\n                    ? (groupRow.value | percent:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n                    : groupRow.value\n            }}</span>\n\n            <igx-badge [value]=\"groupRow.records ? groupRow.records.length : 0\" class='igx-group-label__count-badge'>\n            </igx-badge>\n        </div>\n    </ng-template>\n    <ng-template #groupByRowSelectorBaseTemplate let-context>\n        <div class=\"igx-grid__cbx-padding\">\n            <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"areAllRowsInTheGroupSelected\"\n                [disableRipple]=\"true\" [indeterminate]=\"groupByRowCheckboxIndeterminateState\"\n                [disabled]=\"this.grid.rowSelection === 'single'\" [aria-label]=\"groupByRowSelectorBaseAriaLabel\"\n                #groupByRowCheckbox>\n            </igx-checkbox>\n        </div>\n    </ng-template>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: IgxGridGroupByRowComponent, isStandalone: true, selector: "igx-grid-groupby-row", inputs: { hideGroupRowSelectors: "hideGroupRowSelectors", rowDraggable: "rowDraggable", index: "index", gridID: "gridID", groupRow: "groupRow", isFocused: "isFocused" }, host: { listeners: { "pointerdown": "activate()", "click": "onClick($event)" }, properties: { "attr.aria-expanded": "this.expanded", "attr.aria-describedby": "this.describedBy", "attr.data-rowIndex": "this.dataRowIndex", "attr.id": "this.attrCellID", "class": "this.styleClasses" } }, viewQueries: [{ propertyName: "groupContent", first: true, predicate: ["groupContent"], descendants: true, static: true }, { propertyName: "defaultGroupByExpandedTemplate", first: true, predicate: ["defaultGroupByExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupByCollapsedTemplate", first: true, predicate: ["defaultGroupByCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-container #defaultGroupRow>\n\n    @if (rowDraggable) {\n        <div class=\"igx-grid__drag-indicator igx-grid__tr-action\">\n            <igx-icon family=\"default\" name=\"drag_indicator\" [style.visibility]=\"'hidden'\"></igx-icon>\n        </div>\n    }\n\n    @if (showRowSelectors) {\n        <div class=\"igx-grid__cbx-selection igx-grid__tr-action\" (pointerdown)=\"$event.preventDefault()\"\n            (click)=\"onGroupSelectorClick($event)\">\n            <ng-template #groupByRowSelector *ngTemplateOutlet=\"\n                this.grid.groupByRowSelectorTemplate ? this.grid.groupByRowSelectorTemplate : groupByRowSelectorBaseTemplate;\n                context: { $implicit: {\n                    selectedCount: selectedRowsInTheGroup.length,\n                    totalCount: this.groupRow.records.length,\n                    groupRow: this.groupRow }}\">\n            </ng-template>\n        </div>\n    }\n\n    <div (click)=\"toggle()\" class=\"igx-grid__grouping-indicator\">\n        <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\">\n        </ng-container>\n    </div>\n\n    <div class=\"igx-grid__group-content\" #groupContent>\n        <ng-container\n            *ngTemplateOutlet=\"grid.groupRowTemplate ? grid.groupRowTemplate : defaultGroupByTemplate; context: { $implicit: groupRow }\">\n        </ng-container>\n    </div>\n\n    <ng-template #defaultGroupByExpandedTemplate>\n        <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n    </ng-template>\n\n    <ng-template #defaultGroupByCollapsedTemplate>\n        <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n    </ng-template>\n\n\n    <ng-template #defaultGroupByTemplate>\n        <div class=\"igx-group-label\">\n            <igx-icon family=\"default\" name=\"group_work\" class=\"igx-group-label__icon\"></igx-icon>\n            <span class=\"igx-group-label__column-name\">\n                {{ groupRow.column && groupRow.column.header ?\n                groupRow.column.header :\n                (groupRow.expression ? groupRow.expression.fieldName : '') }}:\n            </span>\n\n            <span class=\"igx-group-label__text\">{{\n                formatter\n                    ? (groupRow.value | columnFormatter:formatter:groupRow.records[0]:null)\n                    : dataType === \"number\"\n                    ? (groupRow.value | number:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n                    : (dataType === 'date' || dataType === 'time' || dataType === 'dateTime')\n                    ? (groupRow.value | date:groupRow.column.pipeArgs.format:groupRow.column.pipeArgs.timezone:grid.locale)\n                    : dataType === 'currency'\n                    ? (groupRow.value | currency:currencyCode:groupRow.column.pipeArgs.display:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n                    : dataType === 'percent'\n                    ? (groupRow.value | percent:groupRow.column.pipeArgs.digitsInfo:grid.locale)\n                    : groupRow.value\n            }}</span>\n\n            <igx-badge [value]=\"groupRow.records ? groupRow.records.length : 0\" class='igx-group-label__count-badge'>\n            </igx-badge>\n        </div>\n    </ng-template>\n    <ng-template #groupByRowSelectorBaseTemplate let-context>\n        <div class=\"igx-grid__cbx-padding\">\n            <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"areAllRowsInTheGroupSelected\"\n                [disableRipple]=\"true\" [indeterminate]=\"groupByRowCheckboxIndeterminateState\"\n                [disabled]=\"this.grid.rowSelection === 'single'\" [aria-label]=\"groupByRowSelectorBaseAriaLabel\"\n                #groupByRowCheckbox>\n            </igx-checkbox>\n        </div>\n    </ng-template>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxBadgeComponent, selector: "igx-badge", inputs: ["id", "type", "value", "icon", "iconSet", "shape", "outlined", "dot"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxGridGroupByRowComponent, decorators: [{
             type: Component,
@@ -76263,7 +76326,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
         if (!this._init) {
             this.validation.updateAll(this._data);
         }
-        if (this.autoGenerate && this._data.length > 0 && this.shouldRecreateColumns(oldData, this._data)) {
+        if (this.autoGenerate && this._data.length > 0 && this.shouldRecreateColumns(oldData, this._data) && this.gridAPI.grid) {
             this.setupColumns();
         }
         this.cdr.markForCheck();
@@ -77061,6 +77124,15 @@ class IgxGridComponent extends IgxGridBaseDirective {
         }
         super.onColumnsAddedOrRemoved();
     }
+    /**
+     * @hidden
+     */
+    onColumnsChanged(change) {
+        super.onColumnsChanged(change);
+        if (this.hasColumnLayouts && !(this.navigation instanceof IgxGridMRLNavigationService)) {
+            this._setupNavigationService();
+        }
+    }
     /**
      * @hidden @internal
      */
@@ -77144,7 +77216,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
             IgxColumnResizingService,
             IgxForOfSyncService,
             IgxForOfScrollSyncService,
-        ], queries: [{ propertyName: "detailTemplateDirective", first: true, predicate: IgxGridDetailTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "groupTemplate", first: true, predicate: IgxGroupByRowTemplateDirective, descendants: true, read: IgxGroupByRowTemplateDirective }, { propertyName: "groupByRowSelectorsTemplates", predicate: IgxGroupByRowSelectorDirective, read: TemplateRef }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "detailTemplateContainer", first: true, predicate: ["detail_template_container"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupTemplate", first: true, predicate: ["group_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_groupsRowList", predicate: IgxGridGroupByRowComponent, descendants: true, read: IgxGridGroupByRowComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n@if (showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)) {\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n}\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [width]=\"calcWidth\"\n    [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n    [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (moving && columnInDrag && pinnedColumns.length > 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n        }\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n\n        @if (mergedDataInView && mergedDataInView.length > 0) {\n            <div igxScrollInertia\n            [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n            [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n                @for (rowData of mergedDataInView; track rowData.record;) {\n                    <igx-grid-row  class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [data]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n                    [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData):false:rowData.record:pipeTrigger\"\n                    [ngStyle]=\"rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger\" #row>\n                    </igx-grid-row>\n                }\n            </div>\n        }\n\n        <ng-template #pinnedRecordsTemplate>\n            @if (data\n                | gridTransaction:id:pipeTrigger\n                | visibleColumns:hasVisibleColumns\n                | gridAddRow:true:pipeTrigger\n                | gridRowPinning:id:true:pipeTrigger\n                | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n                | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true\n                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n                | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData) {\n                @if (pinnedData.length > 0) {\n                    <div #pinContainer\n                        [ngClass]=\"{\n                            'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                            'igx-grid__tr--pinned-top': isRowPinningToTop\n                        }\"\n                        class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                        @for (rowData of pinnedData; track (rowData.recordRef || rowData); let rowIndex = $index) {\n                            <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                            </ng-container>\n                        }\n                    </div>\n                }\n            }\n        </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:!!paginator:page:perPage:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\n        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n        | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n                (viewCreated)=\"viewCreatedHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\">\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\" let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail=\"true\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\">\n                    @if (this.groupingExpressions.length > 0) {\n                        <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                    }\n                    <ng-template\n                        [ngTemplateOutlet]=\"detailTemplate\"\n                        [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\">\n            </igx-circular-bar>\n        }\n    </div>\n    @if (moving && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n    <div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (hasSummarizedColumns && rootSummariesEnabled) {\n            <igx-grid-summary-row [style.width.px]=\"calcWidth\"  [style.height.px]=\"summaryRowHeight\"\n                [gridID]=\"id\" role=\"row\"\n                [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n                class=\"igx-grid__summaries\" #summaryRow>\n            </igx-grid-summary-row>\n        }\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"pinnedStartWidth\" [style.min-width.px]=\"pinnedStartWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedEndWidth\" [style.min-width.px]=\"pinnedEndWidth\" [hidden]=\"pinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    >\n    </igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_more\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    ></igx-icon>\n</ng-template>\n\n@if (rowEditable) {\n    <div igxToggle #rowEditingOverlay>\n        <div [className]=\"bannerClass\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n    <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\"></div>\n    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n    <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip\"></ng-content>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridGroupByAreaComponent, selector: "igx-grid-group-by-area", inputs: ["sortingExpressions", "grid"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedStartColumnCollection", "pinnedEndColumnCollection", "unpinnedColumnCollection", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxGridRowComponent, selector: "igx-grid-row" }, { kind: "component", type: IgxGridGroupByRowComponent, selector: "igx-grid-groupby-row", inputs: ["hideGroupRowSelectors", "rowDraggable", "index", "gridID", "groupRow", "isFocused"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "directive", type: IgxScrollInertiaDirective, selector: "[igxScrollInertia]", inputs: ["IgxScrollInertiaDirection", "IgxScrollInertiaScrollContainer", "wheelStep", "inertiaStep", "smoothingStep", "smoothingDuration", "swipeToleranceX", "inertiaDeltaY", "inertiaDeltaX", "inertiaDuration"] }, { kind: "pipe", type: IgxGridTransactionPipe, name: "gridTransaction" }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridAddRowPipe, name: "gridAddRow" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxGridGroupingPipe, name: "gridGroupBy" }, { kind: "pipe", type: IgxGridPagingPipe, name: "gridPaging" }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { kind: "pipe", type: IgxGridSummaryPipe, name: "gridSummary" }, { kind: "pipe", type: IgxGridDetailsPipe, name: "gridDetails" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxGridCellMergePipe, name: "gridCellMerge" }, { kind: "pipe", type: IgxGridUnmergeActivePipe, name: "gridUnmergeActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "detailTemplateDirective", first: true, predicate: IgxGridDetailTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "groupTemplate", first: true, predicate: IgxGroupByRowTemplateDirective, descendants: true, read: IgxGroupByRowTemplateDirective }, { propertyName: "groupByRowSelectorsTemplates", predicate: IgxGroupByRowSelectorDirective, read: TemplateRef }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "detailTemplateContainer", first: true, predicate: ["detail_template_container"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultGroupTemplate", first: true, predicate: ["group_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_groupsRowList", predicate: IgxGridGroupByRowComponent, descendants: true, read: IgxGridGroupByRowComponent }], usesInheritance: true, ngImport: i0, template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n@if (showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)) {\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n}\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [width]=\"calcWidth\"\n    [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n    [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (moving && columnInDrag && pinnedColumns.length > 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n        }\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n\n        @if (mergedDataInView && mergedDataInView.length > 0) {\n            <div igxScrollInertia\n            [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n            [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n                @for (rowData of mergedDataInView; track rowData.record;) {\n                    <igx-grid-row  class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [data]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n                    [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData):false:rowData.record:pipeTrigger\"\n                    [ngStyle]=\"rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger\" #row>\n                    </igx-grid-row>\n                }\n            </div>\n        }\n\n        <ng-template #pinnedRecordsTemplate>\n            @if (data\n                | gridTransaction:id:pipeTrigger\n                | visibleColumns:hasVisibleColumns\n                | gridAddRow:true:pipeTrigger\n                | gridRowPinning:id:true:pipeTrigger\n                | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n                | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true\n                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n                | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData) {\n                @if (pinnedData.length > 0) {\n                    <div #pinContainer\n                        [ngClass]=\"{\n                            'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                            'igx-grid__tr--pinned-top': isRowPinningToTop\n                        }\"\n                        class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                        @for (rowData of pinnedData; track (rowData.recordRef || rowData); let rowIndex = $index) {\n                            <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                            </ng-container>\n                        }\n                    </div>\n                }\n            }\n        </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:!!paginator:page:perPage:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\n        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n        | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n                (viewCreated)=\"viewCreatedHandler($event)\"\n                (beforeViewDetach)=\"viewDetachHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\">\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\" let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail=\"true\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\">\n                    @if (this.groupingExpressions.length > 0) {\n                        <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                    }\n                    <ng-template\n                        [ngTemplateOutlet]=\"detailTemplate\"\n                        [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\">\n            </igx-circular-bar>\n        }\n    </div>\n    @if (moving && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n    <div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (hasSummarizedColumns && rootSummariesEnabled) {\n            <igx-grid-summary-row [style.width.px]=\"calcWidth\"  [style.height.px]=\"summaryRowHeight\"\n                [gridID]=\"id\" role=\"row\"\n                [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n                class=\"igx-grid__summaries\" #summaryRow>\n            </igx-grid-summary-row>\n        }\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"pinnedStartWidth\" [style.min-width.px]=\"pinnedStartWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedEndWidth\" [style.min-width.px]=\"pinnedEndWidth\" [hidden]=\"pinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    >\n    </igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_more\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    ></igx-icon>\n</ng-template>\n\n@if (rowEditable) {\n    <div igxToggle #rowEditingOverlay>\n        <div [className]=\"bannerClass\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n    <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\"></div>\n    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n    <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip\"></ng-content>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridGroupByAreaComponent, selector: "igx-grid-group-by-area", inputs: ["sortingExpressions", "grid"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedStartColumnCollection", "pinnedEndColumnCollection", "unpinnedColumnCollection", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxGridRowComponent, selector: "igx-grid-row" }, { kind: "component", type: IgxGridGroupByRowComponent, selector: "igx-grid-groupby-row", inputs: ["hideGroupRowSelectors", "rowDraggable", "index", "gridID", "groupRow", "isFocused"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "directive", type: IgxScrollInertiaDirective, selector: "[igxScrollInertia]", inputs: ["IgxScrollInertiaDirection", "IgxScrollInertiaScrollContainer", "wheelStep", "inertiaStep", "smoothingStep", "smoothingDuration", "swipeToleranceX", "inertiaDeltaY", "inertiaDeltaX", "inertiaDuration"] }, { kind: "pipe", type: IgxGridTransactionPipe, name: "gridTransaction" }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridAddRowPipe, name: "gridAddRow" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxGridGroupingPipe, name: "gridGroupBy" }, { kind: "pipe", type: IgxGridPagingPipe, name: "gridPaging" }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { kind: "pipe", type: IgxGridSummaryPipe, name: "gridSummary" }, { kind: "pipe", type: IgxGridDetailsPipe, name: "gridDetails" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxGridCellMergePipe, name: "gridCellMerge" }, { kind: "pipe", type: IgxGridUnmergeActivePipe, name: "gridUnmergeActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxGridComponent, decorators: [{
             type: Component,
@@ -77200,7 +77272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                         IgxGridCellMergePipe,
                         IgxGridUnmergeActivePipe,
                         IgxScrollInertiaDirective
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n@if (showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)) {\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n}\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [width]=\"calcWidth\"\n    [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n    [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (moving && columnInDrag && pinnedColumns.length > 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n        }\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n\n        @if (mergedDataInView && mergedDataInView.length > 0) {\n            <div igxScrollInertia\n            [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n            [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n                @for (rowData of mergedDataInView; track rowData.record;) {\n                    <igx-grid-row  class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [data]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n                    [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData):false:rowData.record:pipeTrigger\"\n                    [ngStyle]=\"rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger\" #row>\n                    </igx-grid-row>\n                }\n            </div>\n        }\n\n        <ng-template #pinnedRecordsTemplate>\n            @if (data\n                | gridTransaction:id:pipeTrigger\n                | visibleColumns:hasVisibleColumns\n                | gridAddRow:true:pipeTrigger\n                | gridRowPinning:id:true:pipeTrigger\n                | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n                | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true\n                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n                | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData) {\n                @if (pinnedData.length > 0) {\n                    <div #pinContainer\n                        [ngClass]=\"{\n                            'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                            'igx-grid__tr--pinned-top': isRowPinningToTop\n                        }\"\n                        class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                        @for (rowData of pinnedData; track (rowData.recordRef || rowData); let rowIndex = $index) {\n                            <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                            </ng-container>\n                        }\n                    </div>\n                }\n            }\n        </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:!!paginator:page:perPage:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\n        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n        | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n                (viewCreated)=\"viewCreatedHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\">\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\" let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail=\"true\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\">\n                    @if (this.groupingExpressions.length > 0) {\n                        <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                    }\n                    <ng-template\n                        [ngTemplateOutlet]=\"detailTemplate\"\n                        [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\">\n            </igx-circular-bar>\n        }\n    </div>\n    @if (moving && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n    <div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (hasSummarizedColumns && rootSummariesEnabled) {\n            <igx-grid-summary-row [style.width.px]=\"calcWidth\"  [style.height.px]=\"summaryRowHeight\"\n                [gridID]=\"id\" role=\"row\"\n                [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n                class=\"igx-grid__summaries\" #summaryRow>\n            </igx-grid-summary-row>\n        }\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"pinnedStartWidth\" [style.min-width.px]=\"pinnedStartWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedEndWidth\" [style.min-width.px]=\"pinnedEndWidth\" [hidden]=\"pinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    >\n    </igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_more\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    ></igx-icon>\n</ng-template>\n\n@if (rowEditable) {\n    <div igxToggle #rowEditingOverlay>\n        <div [className]=\"bannerClass\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n    <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\"></div>\n    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n    <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip\"></ng-content>\n}\n" }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<!-- Toolbar area -->\n<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n\n<!-- Group-by area -->\n@if (showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)) {\n    <igx-grid-group-by-area #groupArea [style.flex-basis.px]=\"outerWidth\"\n        [grid]=\"this\"\n        [expressions]=\"groupingExpressions\"\n        [sortingExpressions]=\"sortingExpressions\"\n        [dropAreaTemplate]=\"dropAreaTemplate\"\n        [dropAreaMessage]=\"dropAreaMessage\"\n    >\n    </igx-grid-group-by-area>\n}\n\n<!-- Grid table head row area -->\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [width]=\"calcWidth\"\n    [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n    [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (scroll)=\"preventHeaderScroll($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\" tabindex=\"0\" [attr.role]=\"dataView.length ? null : 'row'\" (keydown)=\"navigation.handleNavigation($event)\" (focus)=\"navigation.focusTbody($event)\"\n        (dragStop)=\"selectionService.dragMode = $event\" (scroll)=\"preventContainerScroll($event)\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (moving && columnInDrag && pinnedColumns.length > 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n        }\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n\n        @if (mergedDataInView && mergedDataInView.length > 0) {\n            <div igxScrollInertia\n            [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n            [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n                @for (rowData of mergedDataInView; track rowData.record;) {\n                    <igx-grid-row  class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [data]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n                    [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData):false:rowData.record:pipeTrigger\"\n                    [ngStyle]=\"rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger\" #row>\n                    </igx-grid-row>\n                }\n            </div>\n        }\n\n        <ng-template #pinnedRecordsTemplate>\n            @if (data\n                | gridTransaction:id:pipeTrigger\n                | visibleColumns:hasVisibleColumns\n                | gridAddRow:true:pipeTrigger\n                | gridRowPinning:id:true:pipeTrigger\n                | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n                | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true\n                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n                | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData) {\n                @if (pinnedData.length > 0) {\n                    <div #pinContainer\n                        [ngClass]=\"{\n                            'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                            'igx-grid__tr--pinned-top': isRowPinningToTop\n                        }\"\n                        class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                        @for (rowData of pinnedData; track (rowData.recordRef || rowData); let rowIndex = $index) {\n                            <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                            </ng-container>\n                        }\n                    </div>\n                }\n            }\n        </ng-template>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger\n        | gridGroupBy:groupingExpressions:groupingExpansionState:groupStrategy:groupsExpanded:id:groupsRecords:pipeTrigger\n        | gridPaging:!!paginator:page:perPage:pipeTrigger\n        | gridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | gridDetails:hasDetails:expansionStates:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\n        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n        | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\"\n            [igxForItemSize]=\"hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight\"\n            [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"getRowTemplate(rowData)\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex)\"\n                (cachedViewLoaded)=\"cachedViewLoaded($event)\"\n                (viewCreated)=\"viewCreatedHandler($event)\"\n                (beforeViewDetach)=\"viewDetachHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\">\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-rowData let-disabledRow=\"disabled\" let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [disabled]=\"disabledRow\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n            <igx-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-grid-row>\n        </ng-template>\n        <ng-template #group_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-groupby-row [gridID]=\"id\" [index]=\"rowIndex\" [groupRow]=\"rowData\" [hideGroupRowSelectors]=\"hideRowSelectors\" [rowDraggable]=\"rowDraggable\" #row>\n            </igx-grid-groupby-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row role=\"row\" [gridID]=\"id\" [summaries]=\"rowData.summaries\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-template #detail_template_container let-rowIndex=\"index\" let-rowData>\n            <div detail=\"true\" id=\"{{id}}_{{rowIndex}}\" (pointerdown)=\"detailsViewFocused(detailsContainer, rowIndex)\" #detailsContainer [attr.data-rowindex]=\"rowIndex\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr-container--active': isDetailActive(rowIndex)\n            }\">\n                <div class=\"igx-grid__hierarchical-indent\">\n                    @if (this.groupingExpressions.length > 0) {\n                        <div class=\"igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}\"></div>\n                    }\n                    <ng-template\n                        [ngTemplateOutlet]=\"detailTemplate\"\n                        [ngTemplateOutletContext]=\"getDetailsContext(rowData, rowIndex)\">\n                    </ng-template>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\">\n            </igx-circular-bar>\n        }\n    </div>\n    @if (moving && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div #igxBodyOverlayOutlet=\"overlay-outlet\" igxOverlayOutlet></div>\n    <div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n</div>\n\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (hasSummarizedColumns && rootSummariesEnabled) {\n            <igx-grid-summary-row [style.width.px]=\"calcWidth\"  [style.height.px]=\"summaryRowHeight\"\n                [gridID]=\"id\" role=\"row\"\n                [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n                class=\"igx-grid__summaries\" #summaryRow>\n            </igx-grid-summary-row>\n        }\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"pinnedStartWidth\" [style.min-width.px]=\"pinnedStartWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"EMPTY_DATA\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.float]=\"'right'\" [style.width.px]=\"pinnedEndWidth\" [style.min-width.px]=\"pinnedEndWidth\" [hidden]=\"pinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    >\n    </igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_more\"\n        role=\"button\"\n        [ngClass]=\"{\n            'igx-grid__group-expand-btn': true,\n            'igx-grid__group-expand-btn--push': filteringService.isFilterRowVisible\n        }\"\n    ></igx-icon>\n</ng-template>\n\n@if (rowEditable) {\n    <div igxToggle #rowEditingOverlay>\n        <div [className]=\"bannerClass\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button igxButton igxRowEditTabStop type=\"button\" (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n    <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\"></div>\n    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n    <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-column-layout,igc-column-layout,igx-action-strip,igc-action-strip\"></ng-content>\n}\n" }]
         }], propDecorators: { dataPreLoad: [{
                 type: Output
             }], groupingExpressionsChange: [{
@@ -77534,17 +77606,14 @@ class IgxPivotRowHeaderGroupComponent extends IgxGridHeaderGroupComponent {
         return false;
     }
     getHeaderWidthFromDimension() {
-        if (this.grid.hasHorizontalLayout) {
-            return this.dimWidth === -1 ? 'fit-content' : this.width;
-        }
-        return this.grid.rowDimensionWidth(this.parent.rootDimension);
+        return this.grid.hasHorizontalLayout && this.dimWidth === -1 ? 'fit-content' : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxPivotRowHeaderGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: IGX_GRID_BASE }, { token: i0.ElementRef }, { token: IgxPivotColumnResizingService }, { token: IgxFilteringService }, { token: PlatformUtil }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: IgxPivotRowHeaderGroupComponent, isStandalone: true, selector: "igx-pivot-row-header-group", inputs: { rowIndex: "rowIndex", dimWidth: "dimWidth", rootDimension: "rootDimension" }, host: { properties: { "style.user-select": "this.userSelect", "attr.id": "this.headerID", "attr.title": "this.title", "class.igx-grid-th--active": "this.active", "class.asc": "this.sortAscendingStyle", "class.desc": "this.sortDescendingStyle", "class.igx-grid-th--sortable": "this.sortableStyle", "class.igx-grid-th--sorted": "this.sortedStyle" } }, viewQueries: [{ propertyName: "header", first: true, predicate: IgxPivotRowDimensionHeaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<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 (!column.columnGroup) {\n    @if (grid.hasMovableColumns) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <igx-pivot-row-dimension-header\n        [attr.role]=\"role\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"header ? grid.id + '_' + header.title : 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)=\"pointerdown($event)\"\n        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n        (keydown)=\"grid.navigation.headerNavigation($event)\"\n        [style.min-width]=\"getHeaderWidthFromDimension()\"\n        [style.width]=\"getHeaderWidthFromDimension()\"\n        [style.flex-basis]=\"getHeaderWidthFromDimension()\"\n    >\n    </igx-pivot-row-dimension-header>\n    @if (!column.columnGroup && column.resizable) {\n        <span class=\"igx-grid-th__resize-handle\"\n            [igxPivotResizeHandle]=\"column\"\n            [igxPivotResizeHandleHeader]=\"this\"\n            [attr.draggable]=\"false\"\n            [style.cursor]=\"colResizingService.resizeCursor\">\n        </span>\n    }\n    @if (grid.hasMovableColumns) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n", dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxPivotRowDimensionHeaderComponent, selector: "igx-pivot-row-dimension-header" }, { 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: "directive", type: IgxPivotResizeHandleDirective, selector: "[igxPivotResizeHandle]", inputs: ["igxPivotResizeHandle", "igxPivotResizeHandleHeader"] }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: IgxPivotRowHeaderGroupComponent, isStandalone: true, selector: "igx-pivot-row-header-group", inputs: { rowIndex: "rowIndex", dimWidth: "dimWidth", rootDimension: "rootDimension" }, host: { properties: { "style.user-select": "this.userSelect", "attr.id": "this.headerID", "attr.title": "this.title", "class.igx-grid-th--active": "this.active", "class.asc": "this.sortAscendingStyle", "class.desc": "this.sortDescendingStyle", "class.igx-grid-th--sortable": "this.sortableStyle", "class.igx-grid-th--sorted": "this.sortedStyle" } }, viewQueries: [{ propertyName: "header", first: true, predicate: IgxPivotRowDimensionHeaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<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 (!column.columnGroup) {\n    @if (grid.hasMovableColumns) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <igx-pivot-row-dimension-header\n        [attr.role]=\"role\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"header ? grid.id + '_' + header.title : 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)=\"pointerdown($event)\"\n        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n        (keydown)=\"grid.navigation.headerNavigation($event)\"\n        [style.min-width]=\"getHeaderWidthFromDimension()\"\n        [style.width]=\"getHeaderWidthFromDimension()\"\n    >\n    </igx-pivot-row-dimension-header>\n    @if (!column.columnGroup && column.resizable) {\n        <span class=\"igx-grid-th__resize-handle\"\n            [igxPivotResizeHandle]=\"column\"\n            [igxPivotResizeHandleHeader]=\"this\"\n            [attr.draggable]=\"false\"\n            [style.cursor]=\"colResizingService.resizeCursor\">\n        </span>\n    }\n    @if (grid.hasMovableColumns) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n", dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxPivotRowDimensionHeaderComponent, selector: "igx-pivot-row-dimension-header" }, { 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: "directive", type: IgxPivotResizeHandleDirective, selector: "[igxPivotResizeHandle]", inputs: ["igxPivotResizeHandle", "igxPivotResizeHandleHeader"] }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxPivotRowHeaderGroupComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-header-group', imports: [IgxIconComponent, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxPivotResizeHandleDirective, IgxHeaderGroupStylePipe], template: "<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 (!column.columnGroup) {\n    @if (grid.hasMovableColumns) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <igx-pivot-row-dimension-header\n        [attr.role]=\"role\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"header ? grid.id + '_' + header.title : 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)=\"pointerdown($event)\"\n        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n        (keydown)=\"grid.navigation.headerNavigation($event)\"\n        [style.min-width]=\"getHeaderWidthFromDimension()\"\n        [style.width]=\"getHeaderWidthFromDimension()\"\n        [style.flex-basis]=\"getHeaderWidthFromDimension()\"\n    >\n    </igx-pivot-row-dimension-header>\n    @if (!column.columnGroup && column.resizable) {\n        <span class=\"igx-grid-th__resize-handle\"\n            [igxPivotResizeHandle]=\"column\"\n            [igxPivotResizeHandleHeader]=\"this\"\n            [attr.draggable]=\"false\"\n            [style.cursor]=\"colResizingService.resizeCursor\">\n        </span>\n    }\n    @if (grid.hasMovableColumns) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-header-group', imports: [IgxIconComponent, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxPivotResizeHandleDirective, IgxHeaderGroupStylePipe], template: "<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 (!column.columnGroup) {\n    @if (grid.hasMovableColumns) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <igx-pivot-row-dimension-header\n        [attr.role]=\"role\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"header ? grid.id + '_' + header.title : 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)=\"pointerdown($event)\"\n        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n        (keydown)=\"grid.navigation.headerNavigation($event)\"\n        [style.min-width]=\"getHeaderWidthFromDimension()\"\n        [style.width]=\"getHeaderWidthFromDimension()\"\n    >\n    </igx-pivot-row-dimension-header>\n    @if (!column.columnGroup && column.resizable) {\n        <span class=\"igx-grid-th__resize-handle\"\n            [igxPivotResizeHandle]=\"column\"\n            [igxPivotResizeHandleHeader]=\"this\"\n            [attr.draggable]=\"false\"\n            [style.cursor]=\"colResizingService.resizeCursor\">\n        </span>\n    }\n    @if (grid.hasMovableColumns) {\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]
@@ -78027,7 +78096,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.3.6", 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.3.6", type: IgxPivotHeaderRowComponent, isStandalone: true, selector: "igx-pivot-header-row", host: { properties: { "attr.aria-activedescendant": "this.activeDescendant" } }, 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        [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\" [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])\"\n                                [style.flex-basis]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\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 (pinnedStartColumnCollection.length) {\n                @for (column of pinnedStartColumnCollection | 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\"\n                        [style.flex-basis]=\"column.resolvedWidth\"\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\"\n                                [style.flex-basis]=\"column.resolvedWidth\"\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 (pinnedEndColumnCollection.length) {\n                @for (column of pinnedEndColumnCollection | 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\"\n                        [style.flex-basis]=\"column.resolvedWidth\"\n                        (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: ["ariaHidden", "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", "role"], 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", "filterCleared"] }, { 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: "component", type: IgxPivotRowHeaderGroupComponent, selector: "igx-pivot-row-header-group", inputs: ["rowIndex", "dimWidth", "rootDimension"] }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: IgxPivotHeaderRowComponent, isStandalone: true, selector: "igx-pivot-header-row", host: { properties: { "attr.aria-activedescendant": "this.activeDescendant" } }, 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        [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\" [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.width.px]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\n                                [style.flex-basis.px]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\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 (pinnedStartColumnCollection.length) {\n                @for (column of pinnedStartColumnCollection | 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\"\n                        [style.flex-basis]=\"column.resolvedWidth\"\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\"\n                                [style.flex-basis]=\"column.resolvedWidth\"\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 (pinnedEndColumnCollection.length) {\n                @for (column of pinnedEndColumnCollection | 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\"\n                        [style.flex-basis]=\"column.resolvedWidth\"\n                        (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: ["ariaHidden", "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", "dot"] }, { 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", "role"], 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", "filterCleared"] }, { 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: "component", type: IgxPivotRowHeaderGroupComponent, selector: "igx-pivot-row-header-group", inputs: ["rowIndex", "dimWidth", "rootDimension"] }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }, { kind: "pipe", type: IgxGridTopLevelColumns, name: "igxTopLevel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxPivotHeaderRowComponent, decorators: [{
             type: Component,
@@ -78037,7 +78106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                         IgxDropDownComponent, IgxDropDownItemComponent, IgxGridExcelStyleFilteringComponent,
                         IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective,
                         IgxExcelStyleSearchComponent, 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        [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\" [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])\"\n                                [style.flex-basis]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\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 (pinnedStartColumnCollection.length) {\n                @for (column of pinnedStartColumnCollection | 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\"\n                        [style.flex-basis]=\"column.resolvedWidth\"\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\"\n                                [style.flex-basis]=\"column.resolvedWidth\"\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 (pinnedEndColumnCollection.length) {\n                @for (column of pinnedEndColumnCollection | 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\"\n                        [style.flex-basis]=\"column.resolvedWidth\"\n                        (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" }]
+                        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        [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\" [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.width.px]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\n                                [style.flex-basis.px]=\"grid.rowDimensionWidthToPixels(this.grid.visibleRowDimensions[colIndex])\"\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 (pinnedStartColumnCollection.length) {\n                @for (column of pinnedStartColumnCollection | 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\"\n                        [style.flex-basis]=\"column.resolvedWidth\"\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\"\n                                [style.flex-basis]=\"column.resolvedWidth\"\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 (pinnedEndColumnCollection.length) {\n                @for (column of pinnedEndColumnCollection | 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\"\n                        [style.flex-basis]=\"column.resolvedWidth\"\n                        (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]
@@ -78769,11 +78838,11 @@ class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroupCompone
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxPivotRowDimensionHeaderGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: IGX_GRID_BASE }, { token: i0.ElementRef }, { token: IgxPivotColumnResizingService }, { token: IgxFilteringService }, { token: PlatformUtil }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: IgxPivotRowDimensionHeaderGroupComponent, isStandalone: true, selector: "igx-pivot-row-dimension-header-group", inputs: { rowIndex: "rowIndex", colIndex: "colIndex", layout: "layout", parent: "parent" }, host: { listeners: { "click": "onClick($event)" }, properties: { "style.user-select": "this.userSelect", "attr.id": "this.headerID", "attr.title": "this.title", "class.igx-grid-th--active": "this.active" } }, viewQueries: [{ propertyName: "header", first: true, predicate: IgxPivotRowDimensionHeaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<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 (!column.columnGroup) {\n    @if (grid.hasMovableColumns) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <igx-pivot-row-dimension-header\n        [attr.role]=\"role\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"header ? grid.id + '_' + header.title : 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)=\"pointerdown($event)\"\n        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n        (keydown)=\"grid.navigation.headerNavigation($event)\"\n        [style.min-width]=\"getHeaderWidthFromDimension()\"\n        [style.width]=\"getHeaderWidthFromDimension()\"\n        [style.flex-basis]=\"getHeaderWidthFromDimension()\"\n    >\n    </igx-pivot-row-dimension-header>\n    @if (!column.columnGroup && column.resizable) {\n        <span class=\"igx-grid-th__resize-handle\"\n            [igxPivotResizeHandle]=\"column\"\n            [igxPivotResizeHandleHeader]=\"this\"\n            [attr.draggable]=\"false\"\n            [style.cursor]=\"colResizingService.resizeCursor\">\n        </span>\n    }\n    @if (grid.hasMovableColumns) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n", dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxPivotRowDimensionHeaderComponent, selector: "igx-pivot-row-dimension-header" }, { 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: "directive", type: IgxPivotResizeHandleDirective, selector: "[igxPivotResizeHandle]", inputs: ["igxPivotResizeHandle", "igxPivotResizeHandleHeader"] }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: IgxPivotRowDimensionHeaderGroupComponent, isStandalone: true, selector: "igx-pivot-row-dimension-header-group", inputs: { rowIndex: "rowIndex", colIndex: "colIndex", layout: "layout", parent: "parent" }, host: { listeners: { "click": "onClick($event)" }, properties: { "style.user-select": "this.userSelect", "attr.id": "this.headerID", "attr.title": "this.title", "class.igx-grid-th--active": "this.active" } }, viewQueries: [{ propertyName: "header", first: true, predicate: IgxPivotRowDimensionHeaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<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 (!column.columnGroup) {\n    @if (grid.hasMovableColumns) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <igx-pivot-row-dimension-header\n        [attr.role]=\"role\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"header ? grid.id + '_' + header.title : 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)=\"pointerdown($event)\"\n        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n        (keydown)=\"grid.navigation.headerNavigation($event)\"\n        [style.min-width]=\"getHeaderWidthFromDimension()\"\n        [style.width]=\"getHeaderWidthFromDimension()\"\n    >\n    </igx-pivot-row-dimension-header>\n    @if (!column.columnGroup && column.resizable) {\n        <span class=\"igx-grid-th__resize-handle\"\n            [igxPivotResizeHandle]=\"column\"\n            [igxPivotResizeHandleHeader]=\"this\"\n            [attr.draggable]=\"false\"\n            [style.cursor]=\"colResizingService.resizeCursor\">\n        </span>\n    }\n    @if (grid.hasMovableColumns) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n", dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxPivotRowDimensionHeaderComponent, selector: "igx-pivot-row-dimension-header" }, { 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: "directive", type: IgxPivotResizeHandleDirective, selector: "[igxPivotResizeHandle]", inputs: ["igxPivotResizeHandle", "igxPivotResizeHandleHeader"] }, { kind: "pipe", type: IgxHeaderGroupStylePipe, name: "igxHeaderGroupStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxPivotRowDimensionHeaderGroupComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-header-group', imports: [IgxIconComponent, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxPivotResizeHandleDirective, IgxHeaderGroupStylePipe], template: "<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 (!column.columnGroup) {\n    @if (grid.hasMovableColumns) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <igx-pivot-row-dimension-header\n        [attr.role]=\"role\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"header ? grid.id + '_' + header.title : 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)=\"pointerdown($event)\"\n        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n        (keydown)=\"grid.navigation.headerNavigation($event)\"\n        [style.min-width]=\"getHeaderWidthFromDimension()\"\n        [style.width]=\"getHeaderWidthFromDimension()\"\n        [style.flex-basis]=\"getHeaderWidthFromDimension()\"\n    >\n    </igx-pivot-row-dimension-header>\n    @if (!column.columnGroup && column.resizable) {\n        <span class=\"igx-grid-th__resize-handle\"\n            [igxPivotResizeHandle]=\"column\"\n            [igxPivotResizeHandleHeader]=\"this\"\n            [attr.draggable]=\"false\"\n            [style.cursor]=\"colResizingService.resizeCursor\">\n        </span>\n    }\n    @if (grid.hasMovableColumns) {\n        <span class=\"igx-grid-th__drop-indicator-right\"></span>\n    }\n}\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-header-group', imports: [IgxIconComponent, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxPivotResizeHandleDirective, IgxHeaderGroupStylePipe], template: "<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 (!column.columnGroup) {\n    @if (grid.hasMovableColumns) {\n        <span class=\"igx-grid-th__drop-indicator-left\"></span>\n    }\n    <igx-pivot-row-dimension-header\n        [attr.role]=\"role\"\n        class=\"igx-grid-th--fw\"\n        [id]=\"header ? grid.id + '_' + header.title : 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)=\"pointerdown($event)\"\n        [igxColumnMovingDrop]=\"column\"\n        [column]=\"column\"\n        (keydown)=\"grid.navigation.headerNavigation($event)\"\n        [style.min-width]=\"getHeaderWidthFromDimension()\"\n        [style.width]=\"getHeaderWidthFromDimension()\"\n    >\n    </igx-pivot-row-dimension-header>\n    @if (!column.columnGroup && column.resizable) {\n        <span class=\"igx-grid-th__resize-handle\"\n            [igxPivotResizeHandle]=\"column\"\n            [igxPivotResizeHandleHeader]=\"this\"\n            [attr.draggable]=\"false\"\n            [style.cursor]=\"colResizingService.resizeCursor\">\n        </span>\n    }\n    @if (grid.hasMovableColumns) {\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]
@@ -79734,11 +79803,11 @@ class IgxPivotRowComponent extends IgxRowDirective {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxPivotRowComponent, deps: [{ token: IGX_GRID_BASE }, { token: IgxGridSelectionService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: IgxPivotRowComponent, isStandalone: true, selector: "igx-pivot-row", inputs: { selected: "selected", data: "data" }, host: { properties: { "attr.aria-selected": "this.selected" } }, providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxPivotRowComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForSizePropName]='\"calcPixelWidth\"'\n    [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth'\n    [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n    <igx-grid-cell #cell class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n        [ngClass]=\"this.getCellClass(col) | igxPivotCellStyleClasses:data[col.field]:data:getColumnData(col):viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:pivotAggregationData[col.field]:pivotAggregationData:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\" [column]=\"col\"\n        [formatter]=\"col.formatter\" [intRow]=\"this\" [active]=\"isCellActive(col.visibleIndex)\"\n        [rowData]=\"data\" [columnData]='getColumnData(col)'\n        [style.min-width]=\"col.resolvedWidth\" [style.max-width]=\"col.resolvedWidth\"\n        [style.flex-basis]=\"col.resolvedWidth\" [width]=\"col.getCellWidth()\" [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"pivotAggregationData[col.field] | dataMapper:col.field:grid.pipeTrigger:pivotAggregationData[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\" [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [cellSelectionMode]=\"grid.cellSelection\" [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"selected\" [disableRipple]=\"true\" [disabled]=\"deleted\"\n            [disableTransitions]=\"grid.disableTransitions\" [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n", dependencies: [{ kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridCellComponent, selector: "igx-grid-cell", inputs: ["column", "isPlaceholder", "isMerged", "intRow", "row", "rowData", "columnData", "cellTemplate", "cellValidationErrorTemplate", "pinnedIndicator", "value", "formatter", "visibleColumnIndex", "cellSelectionMode", "lastSearchInfo", "lastPinned", "firstPinned", "editMode", "width", "active", "displayPinnedChip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridDataMapperPipe, name: "dataMapper" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }, { kind: "pipe", type: IgxPivotGridCellStyleClassesPipe, name: "igxPivotCellStyleClasses" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: IgxPivotRowComponent, isStandalone: true, selector: "igx-pivot-row", inputs: { selected: "selected", data: "data" }, host: { properties: { "attr.aria-selected": "this.selected" } }, providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxPivotRowComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForSizePropName]='\"calcPixelWidth\"'\n    [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth'\n    [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n    <igx-grid-cell #cell class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n        [ngClass]=\"this.getCellClass(col) | igxPivotCellStyleClasses:data[col.field]:data:getColumnData(col):viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:pivotAggregationData[col.field]:pivotAggregationData:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\" [column]=\"col\"\n        [formatter]=\"col.formatter\" [intRow]=\"this\" [active]=\"isCellActive(col.visibleIndex)\"\n        [rowData]=\"data\" [columnData]='getColumnData(col)'\n        [style.min-width]=\"col.resolvedWidth\" [style.max-width]=\"col.resolvedWidth\"\n        [style.flex-basis]=\"col.resolvedWidth\" [width]=\"col.getCellWidth()\" [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"pivotAggregationData[col.field]\"\n        [cellTemplate]=\"col.bodyTemplate\" [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [cellSelectionMode]=\"grid.cellSelection\" [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"selected\" [disableRipple]=\"true\" [disabled]=\"deleted\"\n            [disableTransitions]=\"grid.disableTransitions\" [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n", dependencies: [{ kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxGridCellComponent, selector: "igx-grid-cell", inputs: ["column", "isPlaceholder", "isMerged", "intRow", "row", "rowData", "columnData", "cellTemplate", "cellValidationErrorTemplate", "pinnedIndicator", "value", "formatter", "visibleColumnIndex", "cellSelectionMode", "lastSearchInfo", "lastPinned", "firstPinned", "editMode", "width", "active", "displayPinnedChip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }, { kind: "pipe", type: IgxPivotGridCellStyleClassesPipe, name: "igxPivotCellStyleClasses" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxPivotRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxPivotRowComponent) }], imports: [IgxGridForOfDirective, IgxGridCellComponent, NgClass, NgStyle, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe, IgxPivotGridCellStyleClassesPipe], template: "<ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForSizePropName]='\"calcPixelWidth\"'\n    [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth'\n    [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n    <igx-grid-cell #cell class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n        [ngClass]=\"this.getCellClass(col) | igxPivotCellStyleClasses:data[col.field]:data:getColumnData(col):viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:pivotAggregationData[col.field]:pivotAggregationData:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\" [column]=\"col\"\n        [formatter]=\"col.formatter\" [intRow]=\"this\" [active]=\"isCellActive(col.visibleIndex)\"\n        [rowData]=\"data\" [columnData]='getColumnData(col)'\n        [style.min-width]=\"col.resolvedWidth\" [style.max-width]=\"col.resolvedWidth\"\n        [style.flex-basis]=\"col.resolvedWidth\" [width]=\"col.getCellWidth()\" [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"pivotAggregationData[col.field] | dataMapper:col.field:grid.pipeTrigger:pivotAggregationData[col.field]:col.hasNestedPath\"\n        [cellTemplate]=\"col.bodyTemplate\" [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [cellSelectionMode]=\"grid.cellSelection\" [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"selected\" [disableRipple]=\"true\" [disabled]=\"deleted\"\n            [disableTransitions]=\"grid.disableTransitions\" [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxPivotRowComponent) }], imports: [IgxGridForOfDirective, IgxGridCellComponent, NgClass, NgStyle, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridTransactionStatePipe, IgxPivotGridCellStyleClassesPipe], template: "<ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForSizePropName]='\"calcPixelWidth\"'\n    [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]='grid.unpinnedWidth'\n    [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>\n    <igx-grid-cell #cell class=\"igx-grid__td igx-grid__td--fw\"\n        [class.igx-grid__td--edited]=\"key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row\"\n\n        [class.igx-grid__td--number]=\"col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'\"\n        [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n        [ngClass]=\"this.getCellClass(col) | igxPivotCellStyleClasses:data[col.field]:data:getColumnData(col):viewIndex:grid.pipeTrigger\"\n        [ngStyle]=\"col.cellStyles | igxCellStyles:pivotAggregationData[col.field]:pivotAggregationData:col.field:viewIndex:grid.pipeTrigger\"\n        [editMode]=\"col.editable && this.grid.crudService.targetInEdit(index, col.index)\" [column]=\"col\"\n        [formatter]=\"col.formatter\" [intRow]=\"this\" [active]=\"isCellActive(col.visibleIndex)\"\n        [rowData]=\"data\" [columnData]='getColumnData(col)'\n        [style.min-width]=\"col.resolvedWidth\" [style.max-width]=\"col.resolvedWidth\"\n        [style.flex-basis]=\"col.resolvedWidth\" [width]=\"col.getCellWidth()\" [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"pivotAggregationData[col.field]\"\n        [cellTemplate]=\"col.bodyTemplate\" [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [cellSelectionMode]=\"grid.cellSelection\" [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n        (pointerdown)=\"grid.navigation.focusOutRowHeader($event)\">\n    </igx-grid-cell>\n</ng-template>\n\n<ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n        <igx-checkbox [tabindex]=\"-1\" [readonly]=\"true\" [checked]=\"selected\" [disableRipple]=\"true\" [disabled]=\"deleted\"\n            [disableTransitions]=\"grid.disableTransitions\" [aria-label]=\"rowCheckboxAriaLabel\">\n        </igx-checkbox>\n    </div>\n</ng-template>\n\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_BASE]
@@ -81460,7 +81529,7 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
                     PivotDimensionType.Filter : null;
     }
     getPivotRowHeaderContentWidth(headerGroup) {
-        const headerSizes = this.getHeaderCellWidth(headerGroup.header.refInstance.nativeElement);
+        const headerSizes = this.getHeaderCellWidth(headerGroup.nativeElement);
         return headerSizes.width + headerSizes.padding;
     }
     getLargesContentWidth(contents) {
@@ -83199,7 +83268,7 @@ class BaseToolbarDirective {
         this.columnToggle = new EventEmitter();
         this.$destroy = new Subject();
         this._overlaySettings = {
-            positionStrategy: new ConnectedPositioningStrategy({
+            positionStrategy: new AutoPositionStrategy({
                 horizontalDirection: HorizontalAlignment.Left,
                 horizontalStartPoint: HorizontalAlignment.Right,
                 verticalDirection: VerticalAlignment.Bottom,
@@ -86900,7 +86969,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
             IgxColumnResizingService,
             IgxForOfSyncService,
             IgxForOfScrollSyncService
-        ], queries: [{ propertyName: "treeGroupArea", first: true, predicate: IgxTreeGridGroupByAreaComponent, descendants: true, read: IgxTreeGridGroupByAreaComponent }, { propertyName: "rowLoadingTemplate", first: true, predicate: IgxRowLoadingIndicatorTemplateDirective, descendants: true, read: IgxRowLoadingIndicatorTemplateDirective }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"></ng-content>\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [width]=\"calcWidth\"\n    [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n    [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody (scroll)='preventContainerScroll($event)'>\n        @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (moving && columnInDrag && pinnedColumns.length > 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n        }\n\n        @if (mergedDataInView && mergedDataInView.length > 0) {\n            <div igxScrollInertia\n            [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n            [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n                @for (rowData of mergedDataInView; track rowData.record;) {\n                    <igx-tree-grid-row class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [treeRow]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n                    [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData):row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                    [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowData.index:pipeTrigger\" #row>\n                </igx-tree-grid-row>\n                }\n            </div>\n        }\n\n        <ng-template #pinnedRecordsTemplate>\n            @if (data\n                | treeGridTransaction:pipeTrigger\n                | visibleColumns:hasVisibleColumns\n                | treeGridNormalizeRecord:pipeTrigger\n                | treeGridAddRow:true:pipeTrigger\n                | gridRowPinning:id:true:pipeTrigger\n                | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true\n                | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger:true\n                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n                | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData\n            ) {\n                @if (pinnedData.length > 0) {\n                    <div #pinContainer\n                        [ngClass]=\"{\n                            'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                            'igx-grid__tr--pinned-top': isRowPinningToTop\n                        }\"\n                        class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                        @for (rowData of pinnedData; track trackPinnedRowData(rowData); let rowIndex = $index) {\n                            <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                            </ng-container>\n                        }\n                    </div>\n                }\n            }\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData\n        | treeGridTransaction:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:pipeTrigger\n        | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger\n        | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger\n        | treeGridFlattening:expansionDepth:expansionStates:pipeTrigger\n        | treeGridPaging:!!paginator:page:perPage:pipeTrigger\n        | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | treeGridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\n        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n        | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" #verticalScrollContainer\n            (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData let-metaData=\"metaData\">\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" [disabled]=\"disabledRow\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row [gridID]=\"id\" [summaries]=\"rowData.summaries\"\n                [firstCellIndentation]=\"rowData.cellIndentation\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" role=\"row\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\">\n            </igx-circular-bar>\n        }\n    </div>\n    @if (moving && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\"  (pointerdown)=\"$event.preventDefault()\"\n        [style.height.px]='calcHeight'>\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summaryRowHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\"\n        (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (hasSummarizedColumns && rootSummariesEnabled) {\n            <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'\n                [gridID]=\"id\" role=\"row\"\n                [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n                class=\"igx-grid__summaries\" #summaryRow>\n            </igx-grid-summary-row>\n        }\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='pinnedStartWidth' [style.min-width.px]='pinnedStartWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]='pinnedEndWidth' [style.min-width.px]='pinnedEndWidth' [hidden]=\"pinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n@if (rowEditable) {\n    <div igxToggle #rowEditingOverlay>\n        <div [className]=\"bannerClass\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: !this.crudService.row?.isAddRow? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n    <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\"></div>\n    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n    <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"></ng-content>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedStartColumnCollection", "pinnedEndColumnCollection", "unpinnedColumnCollection", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxTreeGridRowComponent, selector: "igx-tree-grid-row", inputs: ["treeRow"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "directive", type: IgxScrollInertiaDirective, selector: "[igxScrollInertia]", inputs: ["IgxScrollInertiaDirection", "IgxScrollInertiaScrollContainer", "wheelStep", "inertiaStep", "smoothingStep", "smoothingDuration", "swipeToleranceX", "inertiaDeltaY", "inertiaDeltaX", "inertiaDuration"] }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxTreeGridHierarchizingPipe, name: "treeGridHierarchizing" }, { kind: "pipe", type: IgxTreeGridFlatteningPipe, name: "treeGridFlattening" }, { kind: "pipe", type: IgxTreeGridSortingPipe, name: "treeGridSorting" }, { kind: "pipe", type: IgxTreeGridFilteringPipe, name: "treeGridFiltering" }, { kind: "pipe", type: IgxTreeGridPagingPipe, name: "treeGridPaging" }, { kind: "pipe", type: IgxTreeGridTransactionPipe, name: "treeGridTransaction" }, { kind: "pipe", type: IgxTreeGridSummaryPipe, name: "treeGridSummary" }, { kind: "pipe", type: IgxTreeGridNormalizeRecordsPipe, name: "treeGridNormalizeRecord" }, { kind: "pipe", type: IgxTreeGridAddRowPipe, name: "treeGridAddRow" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxGridCellMergePipe, name: "gridCellMerge" }, { kind: "pipe", type: IgxGridUnmergeActivePipe, name: "gridUnmergeActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "treeGroupArea", first: true, predicate: IgxTreeGridGroupByAreaComponent, descendants: true, read: IgxTreeGridGroupByAreaComponent }, { propertyName: "rowLoadingTemplate", first: true, predicate: IgxRowLoadingIndicatorTemplateDirective, descendants: true, read: IgxRowLoadingIndicatorTemplateDirective }], viewQueries: [{ propertyName: "recordTemplate", first: true, predicate: ["record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary_template"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"></ng-content>\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [width]=\"calcWidth\"\n    [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n    [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody (scroll)='preventContainerScroll($event)'>\n        @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (moving && columnInDrag && pinnedColumns.length > 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n        }\n\n        @if (mergedDataInView && mergedDataInView.length > 0) {\n            <div igxScrollInertia\n            [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n            [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n                @for (rowData of mergedDataInView; track rowData.record;) {\n                    <igx-tree-grid-row class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [treeRow]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n                    [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData):row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                    [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowData.index:pipeTrigger\" #row>\n                </igx-tree-grid-row>\n                }\n            </div>\n        }\n\n        <ng-template #pinnedRecordsTemplate>\n            @if (data\n                | treeGridTransaction:pipeTrigger\n                | visibleColumns:hasVisibleColumns\n                | treeGridNormalizeRecord:pipeTrigger\n                | treeGridAddRow:true:pipeTrigger\n                | gridRowPinning:id:true:pipeTrigger\n                | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true\n                | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger:true\n                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n                | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData\n            ) {\n                @if (pinnedData.length > 0) {\n                    <div #pinContainer\n                        [ngClass]=\"{\n                            'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                            'igx-grid__tr--pinned-top': isRowPinningToTop\n                        }\"\n                        class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                        @for (rowData of pinnedData; track trackPinnedRowData(rowData); let rowIndex = $index) {\n                            <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                            </ng-container>\n                        }\n                    </div>\n                }\n            }\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData\n        | treeGridTransaction:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:pipeTrigger\n        | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger\n        | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger\n        | treeGridFlattening:expansionDepth:expansionStates:pipeTrigger\n        | treeGridPaging:!!paginator:page:perPage:pipeTrigger\n        | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | treeGridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\n        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n        | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" #verticalScrollContainer\n            (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)'\n                (beforeViewDetach)=\"viewDetachHandler($event)\"\n                (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData let-metaData=\"metaData\">\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" [disabled]=\"disabledRow\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row [gridID]=\"id\" [summaries]=\"rowData.summaries\"\n                [firstCellIndentation]=\"rowData.cellIndentation\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" role=\"row\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\">\n            </igx-circular-bar>\n        }\n    </div>\n    @if (moving && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\"  (pointerdown)=\"$event.preventDefault()\"\n        [style.height.px]='calcHeight'>\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summaryRowHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\"\n        (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (hasSummarizedColumns && rootSummariesEnabled) {\n            <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'\n                [gridID]=\"id\" role=\"row\"\n                [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n                class=\"igx-grid__summaries\" #summaryRow>\n            </igx-grid-summary-row>\n        }\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='pinnedStartWidth' [style.min-width.px]='pinnedStartWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]='pinnedEndWidth' [style.min-width.px]='pinnedEndWidth' [hidden]=\"pinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n@if (rowEditable) {\n    <div igxToggle #rowEditingOverlay>\n        <div [className]=\"bannerClass\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: !this.crudService.row?.isAddRow? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n    <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\"></div>\n    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n    <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"></ng-content>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedStartColumnCollection", "pinnedEndColumnCollection", "unpinnedColumnCollection", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxTreeGridRowComponent, selector: "igx-tree-grid-row", inputs: ["treeRow"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "directive", type: IgxScrollInertiaDirective, selector: "[igxScrollInertia]", inputs: ["IgxScrollInertiaDirection", "IgxScrollInertiaScrollContainer", "wheelStep", "inertiaStep", "smoothingStep", "smoothingDuration", "swipeToleranceX", "inertiaDeltaY", "inertiaDeltaX", "inertiaDuration"] }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxTreeGridHierarchizingPipe, name: "treeGridHierarchizing" }, { kind: "pipe", type: IgxTreeGridFlatteningPipe, name: "treeGridFlattening" }, { kind: "pipe", type: IgxTreeGridSortingPipe, name: "treeGridSorting" }, { kind: "pipe", type: IgxTreeGridFilteringPipe, name: "treeGridFiltering" }, { kind: "pipe", type: IgxTreeGridPagingPipe, name: "treeGridPaging" }, { kind: "pipe", type: IgxTreeGridTransactionPipe, name: "treeGridTransaction" }, { kind: "pipe", type: IgxTreeGridSummaryPipe, name: "treeGridSummary" }, { kind: "pipe", type: IgxTreeGridNormalizeRecordsPipe, name: "treeGridNormalizeRecord" }, { kind: "pipe", type: IgxTreeGridAddRowPipe, name: "treeGridAddRow" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxGridCellMergePipe, name: "gridCellMerge" }, { kind: "pipe", type: IgxGridUnmergeActivePipe, name: "gridUnmergeActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxTreeGridComponent, decorators: [{
             type: Component,
@@ -86955,7 +87024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                         IgxGridCellMergePipe,
                         IgxScrollInertiaDirective,
                         IgxGridUnmergeActivePipe
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"></ng-content>\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [width]=\"calcWidth\"\n    [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n    [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody (scroll)='preventContainerScroll($event)'>\n        @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (moving && columnInDrag && pinnedColumns.length > 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n        }\n\n        @if (mergedDataInView && mergedDataInView.length > 0) {\n            <div igxScrollInertia\n            [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n            [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n                @for (rowData of mergedDataInView; track rowData.record;) {\n                    <igx-tree-grid-row class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [treeRow]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n                    [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData):row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                    [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowData.index:pipeTrigger\" #row>\n                </igx-tree-grid-row>\n                }\n            </div>\n        }\n\n        <ng-template #pinnedRecordsTemplate>\n            @if (data\n                | treeGridTransaction:pipeTrigger\n                | visibleColumns:hasVisibleColumns\n                | treeGridNormalizeRecord:pipeTrigger\n                | treeGridAddRow:true:pipeTrigger\n                | gridRowPinning:id:true:pipeTrigger\n                | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true\n                | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger:true\n                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n                | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData\n            ) {\n                @if (pinnedData.length > 0) {\n                    <div #pinContainer\n                        [ngClass]=\"{\n                            'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                            'igx-grid__tr--pinned-top': isRowPinningToTop\n                        }\"\n                        class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                        @for (rowData of pinnedData; track trackPinnedRowData(rowData); let rowIndex = $index) {\n                            <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                            </ng-container>\n                        }\n                    </div>\n                }\n            }\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData\n        | treeGridTransaction:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:pipeTrigger\n        | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger\n        | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger\n        | treeGridFlattening:expansionDepth:expansionStates:pipeTrigger\n        | treeGridPaging:!!paginator:page:perPage:pipeTrigger\n        | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | treeGridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\n        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n        | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" #verticalScrollContainer\n            (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)'\n                (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData let-metaData=\"metaData\">\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" [disabled]=\"disabledRow\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row [gridID]=\"id\" [summaries]=\"rowData.summaries\"\n                [firstCellIndentation]=\"rowData.cellIndentation\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" role=\"row\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\">\n            </igx-circular-bar>\n        }\n    </div>\n    @if (moving && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\"  (pointerdown)=\"$event.preventDefault()\"\n        [style.height.px]='calcHeight'>\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summaryRowHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\"\n        (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (hasSummarizedColumns && rootSummariesEnabled) {\n            <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'\n                [gridID]=\"id\" role=\"row\"\n                [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n                class=\"igx-grid__summaries\" #summaryRow>\n            </igx-grid-summary-row>\n        }\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='pinnedStartWidth' [style.min-width.px]='pinnedStartWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]='pinnedEndWidth' [style.min-width.px]='pinnedEndWidth' [hidden]=\"pinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n@if (rowEditable) {\n    <div igxToggle #rowEditingOverlay>\n        <div [className]=\"bannerClass\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: !this.crudService.row?.isAddRow? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n    <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\"></div>\n    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n    <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"></ng-content>\n}\n" }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-content select=\"igx-tree-grid-group-by-area,igc-tree-grid-group-by-area\"></ng-content>\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [width]=\"calcWidth\"\n    [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n    [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\" (keydown)=\"navigation.handleNavigation($event)\"\n    (dragStop)=\"selectionService.dragMode = $event\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\"\n        [style.height.px]='totalHeight' [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody (scroll)='preventContainerScroll($event)'>\n        @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (moving && columnInDrag && pinnedColumns.length > 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n        }\n\n        @if (mergedDataInView && mergedDataInView.length > 0) {\n            <div igxScrollInertia\n            [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n            [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n                @for (rowData of mergedDataInView; track rowData.record;) {\n                    <igx-tree-grid-row class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [treeRow]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n                    [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData):row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                    [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowData.index:pipeTrigger\" #row>\n                </igx-tree-grid-row>\n                }\n            </div>\n        }\n\n        <ng-template #pinnedRecordsTemplate>\n            @if (data\n                | treeGridTransaction:pipeTrigger\n                | visibleColumns:hasVisibleColumns\n                | treeGridNormalizeRecord:pipeTrigger\n                | treeGridAddRow:true:pipeTrigger\n                | gridRowPinning:id:true:pipeTrigger\n                | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true\n                | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger:true\n                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n                | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData\n            ) {\n                @if (pinnedData.length > 0) {\n                    <div #pinContainer\n                        [ngClass]=\"{\n                            'igx-grid__tr--pinned-bottom':  !isRowPinningToTop,\n                            'igx-grid__tr--pinned-top': isRowPinningToTop\n                        }\"\n                        class=\"igx-grid__tr--pinned\" [style.width.px]=\"calcWidth\">\n                        @for (rowData of pinnedData; track trackPinnedRowData(rowData); let rowIndex = $index) {\n                            <ng-container *ngTemplateOutlet=\"pinned_record_template; context: getContext(rowData, rowIndex, true)\">\n                            </ng-container>\n                        }\n                    </div>\n                }\n            }\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template igxGridFor let-rowData [igxGridForOf]=\"renderData\n        | treeGridTransaction:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | treeGridHierarchizing:primaryKey:foreignKey:childDataKey:pipeTrigger\n        | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger\n        | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger\n        | treeGridFlattening:expansionDepth:expansionStates:pipeTrigger\n        | treeGridPaging:!!paginator:page:perPage:pipeTrigger\n        | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:showSummaryOnCollapse:pipeTrigger:summaryPipeTrigger\n        | treeGridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\n        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n        | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n            let-rowIndex=\"index\" [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]='verticalScroll'\n            [igxForContainerSize]='calcHeight' [igxForItemSize]=\"renderedRowHeight\" #verticalScrollContainer\n            (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'\n                [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)'\n                (beforeViewDetach)=\"viewDetachHandler($event)\"\n                (cachedViewLoaded)='cachedViewLoaded($event)'>\n            </ng-template>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\"></ng-container>\n        <ng-template #record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData let-metaData=\"metaData\">\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" [disabled]=\"disabledRow\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #pinned_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n            <igx-tree-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [treeRow]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):row.treeRow.isFilteredOutParent:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\"#row #pinnedRow>\n            </igx-tree-grid-row>\n        </ng-template>\n        <ng-template #summary_template let-rowIndex=\"index\" let-rowData>\n            <igx-grid-summary-row [gridID]=\"id\" [summaries]=\"rowData.summaries\"\n                [firstCellIndentation]=\"rowData.cellIndentation\" [index]=\"rowIndex\"\n                class=\"igx-grid__summaries--body\" role=\"row\" #summaryRow>\n            </igx-grid-summary-row>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        <igc-trial-watermark></igc-trial-watermark>\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\">\n            </igx-circular-bar>\n        }\n    </div>\n    @if (moving && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\n    <div [hidden]='!hasVerticalScroll()' class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\"  (pointerdown)=\"$event.preventDefault()\"\n        [style.height.px]='calcHeight'>\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]='calcHeight'>\n            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]='summaryRowHeight' #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\"\n        (keydown)=\"navigation.summaryNav($event)\" [attr.aria-activedescendant]=\"activeDescendant\">\n        @if (hasSummarizedColumns && rootSummariesEnabled) {\n            <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summaryRowHeight'\n                [gridID]=\"id\" role=\"row\"\n                [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n                class=\"igx-grid__summaries\" #summaryRow>\n            </igx-grid-summary-row>\n        }\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]='!hasVerticalScroll()' [style.height.px]='summaryRowHeight'\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]='pinnedStartWidth' [style.min-width.px]='pinnedStartWidth'></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]='unpinnedWidth'>\n        <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]='pinnedEndWidth' [style.min-width.px]='pinnedEndWidth' [hidden]=\"pinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet='addRowEmptyTemplate || defaultAddRowEmptyTemplate'></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n@if (rowEditable) {\n    <div igxToggle #rowEditingOverlay>\n        <div [className]=\"bannerClass\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : rowEditTextTemplate ? rowEditTextTemplate : defaultRowEditText;\n                context: { $implicit: !this.crudService.row?.isAddRow? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"rowEditActionsTemplate ? rowEditActionsTemplate : defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n    <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\"></div>\n    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n    <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"></ng-content>\n}\n" }]
         }], ctorParameters: () => [{ type: IgxGridValidationService }, { type: IgxGridSelectionService }, { type: IgxColumnResizingService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_SERVICE_BASE]
@@ -89381,7 +89450,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
         if (!this._init) {
             this.validation.updateAll(this._data);
         }
-        if (this.autoGenerate && this._data.length > 0 && this.shouldRecreateColumns(oldData, this._data)) {
+        if (this.autoGenerate && this._data.length > 0 && this.shouldRecreateColumns(oldData, this._data) && this.gridAPI.grid) {
             this.setupColumns();
             this.reflow();
         }
@@ -89797,7 +89866,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
             IgxForOfSyncService,
             IgxForOfScrollSyncService,
             IgxRowIslandAPIService
-        ], queries: [{ propertyName: "childLayoutList", predicate: IgxRowIslandComponent, read: IgxRowIslandComponent }, { propertyName: "allLayoutList", predicate: IgxRowIslandComponent, descendants: true, read: IgxRowIslandComponent }, { propertyName: "paginatorList", predicate: IgxPaginatorToken, descendants: true }, { propertyName: "actionStripComponents", predicate: IgxActionStripToken, read: IgxActionStripToken }], viewQueries: [{ propertyName: "toolbarOutlet", first: true, predicate: ["toolbarOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "paginatorOutlet", first: true, predicate: ["paginatorOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "hierarchicalRecordTemplate", first: true, predicate: ["hierarchical_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "childTemplate", first: true, predicate: ["child_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "templateOutlets", predicate: IgxTemplateOutletDirective, descendants: true, read: IgxTemplateOutletDirective }, { propertyName: "hierarchicalRows", predicate: IgxChildGridRowComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-container #toolbarOutlet></ng-container>\n\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [width]=\"calcWidth\"\n    [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n    [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\"\n        (keydown)=\"navigation.handleNavigation($event)\" (dragStop)=\"selectionService.dragMode = $event\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody (scroll)=\"preventContainerScroll($event)\">\n        @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (moving && columnInDrag && pinnedColumns.length > 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n        }\n        @if (mergedDataInView && mergedDataInView.length > 0) {\n            <div igxScrollInertia\n            [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n            [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n                @for (rowData of mergedDataInView; track rowData.record;) {\n                    <igx-hierarchical-grid-row class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [data]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n                    [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData.record):false:rowData.record:pipeTrigger\"\n                    [ngStyle]=\"rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger\" #row>\n                    </igx-hierarchical-grid-row>\n                }\n        </div>\n        }\n        <ng-template #pinnedRecordsTemplate>\n            @if (data\n                | gridTransaction:id:pipeTrigger\n                | visibleColumns:hasVisibleColumns\n                | gridAddRow:true:pipeTrigger\n                | gridRowPinning:id:true:pipeTrigger\n                | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n                | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true\n                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n                | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData\n            ) {\n                @if (pinnedData.length > 0) {\n                    <div #pinContainer class=\"igx-grid__tr--pinned\"\n                        [ngClass]=\"{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }\"\n                        [style.width.px]=\"calcWidth\">\n                        @for (rowData of pinnedData; track (rowData.recordRef || rowData); let rowIndex = $index) {\n                            <ng-container *ngTemplateOutlet=\"pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)\">\n                            </ng-container>\n                        }\n                    </div>\n                }\n            }\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template igxGridFor let-rowData let-rowIndex=\"index\" [igxGridForOf]=\"renderData\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger\n        | gridHierarchicalPaging:!!paginator:page:perPage:id:pipeTrigger\n        | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\n        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n        | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n            [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\" [igxForItemSize]=\"renderedRowHeight\" [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\" (viewCreated)=\"viewCreatedHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\" (cachedViewLoaded)=\"cachedViewLoaded($event)\">\n            </ng-template>\n            <!-- <ng-container *igxTemplateOutlet=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)\"></ng-container> -->\n        </ng-template>\n        <ng-template #hierarchical_record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData let-metaData=\"metaData\">\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [disabled]=\"disabledRow\" [data]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n\n        <ng-template #pinned_hierarchical_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row #pinnedRow>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n        <ng-template #child_record_template let-rowIndex=\"index\" let-rowData>\n            <div [attr.data-rowindex]=\"rowIndex\" (scroll)=\"onContainerScroll()\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr--highlighted':isRowHighlighted(rowData)\n            }\">\n                @for (layout of childLayoutList; track layout) {\n                    <igx-child-grid-row [parentGridID]=\"id\" [index]=\"rowIndex\"\n                        [data]=\"rowData\" [layout]=\"layout\" #row>\n                    </igx-child-grid-row>\n                }\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        @if (moving && columnInDrag) {\n            <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n                id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        }\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        @if (!this.parent) {\n            <igc-trial-watermark></igc-trial-watermark>\n        }\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\">\n            </igx-circular-bar>\n        }\n    </div>\n    @if (moving && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" [attr.aria-activedescendant]=\"activeDescendant\"\n        (keydown)=\"navigation.summaryNav($event)\">\n        @if (hasSummarizedColumns && rootSummariesEnabled) {\n            <igx-grid-summary-row [style.width.px]=\"calcWidth\" [style.height.px]=\"summaryRowHeight\"\n                [gridID]=\"id\" role=\"row\"\n                [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n                class=\"igx-grid__summaries\" #summaryRow>\n            </igx-grid-summary-row>\n        }\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"pinnedStartWidth\" [style.min-width.px]=\"pinnedStartWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]=\"pinnedEndWidth\" [style.min-width.px]=\"pinnedEndWidth\" [hidden]=\"pinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n    <ng-container #paginatorOutlet></ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon family=\"default\" name=\"unfold_more\" role=\"button\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [active]=\"hasExpandedRecords() && hasExpandableChildren\">\n    </igx-icon>\n</ng-template>\n\n@if (rowEditable) {\n    <div igxToggle #rowEditingOverlay>\n        <div [className]=\"bannerClass\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n}\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : resolveRowEditText || defaultRowEditText;\n                context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditActions || defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n    <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\"></div>\n    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n    <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"></ng-content>\n    <ng-content select=\"igx-row-island,igc-row-island\"></ng-content>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedStartColumnCollection", "pinnedEndColumnCollection", "unpinnedColumnCollection", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxHierarchicalRowComponent, selector: "igx-hierarchical-grid-row" }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "component", type: IgxChildGridRowComponent, selector: "igx-child-grid-row", inputs: ["layout", "parentGridID", "data", "index"] }, { kind: "directive", type: IgxScrollInertiaDirective, selector: "[igxScrollInertia]", inputs: ["IgxScrollInertiaDirection", "IgxScrollInertiaScrollContainer", "wheelStep", "inertiaStep", "smoothingStep", "smoothingDuration", "swipeToleranceX", "inertiaDeltaY", "inertiaDeltaX", "inertiaDuration"] }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { kind: "pipe", type: IgxGridTransactionPipe, name: "gridTransaction" }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridAddRowPipe, name: "gridAddRow" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxGridHierarchicalPipe, name: "gridHierarchical" }, { kind: "pipe", type: IgxGridHierarchicalPagingPipe, name: "gridHierarchicalPaging" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxGridCellMergePipe, name: "gridCellMerge" }, { kind: "pipe", type: IgxGridUnmergeActivePipe, name: "gridUnmergeActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "childLayoutList", predicate: IgxRowIslandComponent, read: IgxRowIslandComponent }, { propertyName: "allLayoutList", predicate: IgxRowIslandComponent, descendants: true, read: IgxRowIslandComponent }, { propertyName: "paginatorList", predicate: IgxPaginatorToken, descendants: true }, { propertyName: "actionStripComponents", predicate: IgxActionStripToken, read: IgxActionStripToken }], viewQueries: [{ propertyName: "toolbarOutlet", first: true, predicate: ["toolbarOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "paginatorOutlet", first: true, predicate: ["paginatorOutlet"], descendants: true, read: ViewContainerRef }, { propertyName: "hierarchicalRecordTemplate", first: true, predicate: ["hierarchical_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "childTemplate", first: true, predicate: ["child_record_template"], descendants: true, read: TemplateRef, static: true }, { propertyName: "templateOutlets", predicate: IgxTemplateOutletDirective, descendants: true, read: IgxTemplateOutletDirective }, { propertyName: "hierarchicalRows", predicate: IgxChildGridRowComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-container #toolbarOutlet></ng-container>\n\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [width]=\"calcWidth\"\n    [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n    [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\"\n        (keydown)=\"navigation.handleNavigation($event)\" (dragStop)=\"selectionService.dragMode = $event\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody (scroll)=\"preventContainerScroll($event)\">\n        @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (moving && columnInDrag && pinnedColumns.length > 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n        }\n        @if (mergedDataInView && mergedDataInView.length > 0) {\n            <div igxScrollInertia\n            [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n            [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n                @for (rowData of mergedDataInView; track rowData.record;) {\n                    <igx-hierarchical-grid-row class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [data]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n                    [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData.record):false:rowData.record:pipeTrigger\"\n                    [ngStyle]=\"rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger\" #row>\n                    </igx-hierarchical-grid-row>\n                }\n        </div>\n        }\n        <ng-template #pinnedRecordsTemplate>\n            @if (data\n                | gridTransaction:id:pipeTrigger\n                | visibleColumns:hasVisibleColumns\n                | gridAddRow:true:pipeTrigger\n                | gridRowPinning:id:true:pipeTrigger\n                | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n                | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true\n                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n                | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData\n            ) {\n                @if (pinnedData.length > 0) {\n                    <div #pinContainer class=\"igx-grid__tr--pinned\"\n                        [ngClass]=\"{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }\"\n                        [style.width.px]=\"calcWidth\">\n                        @for (rowData of pinnedData; track (rowData.recordRef || rowData); let rowIndex = $index) {\n                            <ng-container *ngTemplateOutlet=\"pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)\">\n                            </ng-container>\n                        }\n                    </div>\n                }\n            }\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template igxGridFor let-rowData let-rowIndex=\"index\" [igxGridForOf]=\"renderData\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger\n        | gridHierarchicalPaging:!!paginator:page:perPage:id:pipeTrigger\n        | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\n        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n        | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n            [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\" [igxForItemSize]=\"renderedRowHeight\" [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\" (viewCreated)=\"viewCreatedHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\" (cachedViewLoaded)=\"cachedViewLoaded($event)\" (beforeViewDetach)=\"viewDetachHandler($event)\">\n            </ng-template>\n            <!-- <ng-container *igxTemplateOutlet=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)\"></ng-container> -->\n        </ng-template>\n        <ng-template #hierarchical_record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData let-metaData=\"metaData\">\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [disabled]=\"disabledRow\" [data]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n\n        <ng-template #pinned_hierarchical_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row #pinnedRow>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n        <ng-template #child_record_template let-rowIndex=\"index\" let-rowData>\n            <div [attr.data-rowindex]=\"rowIndex\" (scroll)=\"onContainerScroll()\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr--highlighted':isRowHighlighted(rowData)\n            }\">\n                @for (layout of childLayoutList; track layout) {\n                    <igx-child-grid-row [parentGridID]=\"id\" [index]=\"rowIndex\"\n                        [data]=\"rowData\" [layout]=\"layout\" #row>\n                    </igx-child-grid-row>\n                }\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        @if (moving && columnInDrag) {\n            <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n                id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        }\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        @if (!this.parent) {\n            <igc-trial-watermark></igc-trial-watermark>\n        }\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\">\n            </igx-circular-bar>\n        }\n    </div>\n    @if (moving && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" [attr.aria-activedescendant]=\"activeDescendant\"\n        (keydown)=\"navigation.summaryNav($event)\">\n        @if (hasSummarizedColumns && rootSummariesEnabled) {\n            <igx-grid-summary-row [style.width.px]=\"calcWidth\" [style.height.px]=\"summaryRowHeight\"\n                [gridID]=\"id\" role=\"row\"\n                [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n                class=\"igx-grid__summaries\" #summaryRow>\n            </igx-grid-summary-row>\n        }\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"pinnedStartWidth\" [style.min-width.px]=\"pinnedStartWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]=\"pinnedEndWidth\" [style.min-width.px]=\"pinnedEndWidth\" [hidden]=\"pinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n    <ng-container #paginatorOutlet></ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon family=\"default\" name=\"unfold_more\" role=\"button\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [active]=\"hasExpandedRecords() && hasExpandableChildren\">\n    </igx-icon>\n</ng-template>\n\n@if (rowEditable) {\n    <div igxToggle #rowEditingOverlay>\n        <div [className]=\"bannerClass\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n}\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : resolveRowEditText || defaultRowEditText;\n                context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditActions || defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n    <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\"></div>\n    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n    <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"></ng-content>\n    <ng-content select=\"igx-row-island,igc-row-island\"></ng-content>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxGridHeaderRowComponent, selector: "igx-grid-header-row", inputs: ["grid", "pinnedStartColumnCollection", "pinnedEndColumnCollection", "unpinnedColumnCollection", "hasMRL", "width"] }, { kind: "directive", type: IgxGridBodyDirective, selector: "[igxGridBody]" }, { kind: "directive", type: IgxGridDragSelectDirective, selector: "[igxGridDragSelect]", inputs: ["igxGridDragSelect"], outputs: ["dragStop", "dragScroll"] }, { kind: "directive", type: IgxColumnMovingDropDirective, selector: "[igxColumnMovingDrop]", inputs: ["igxColumnMovingDrop"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "directive", type: IgxTemplateOutletDirective, selector: "[igxTemplateOutlet]", inputs: ["igxTemplateOutletContext", "igxTemplateOutlet"], outputs: ["viewCreated", "viewMoved", "cachedViewLoaded", "beforeViewDetach"] }, { kind: "component", type: IgxHierarchicalRowComponent, selector: "igx-hierarchical-grid-row" }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }, { kind: "component", type: IgxCircularProgressBarComponent, selector: "igx-circular-bar", inputs: ["id", "textVisibility", "type"] }, { kind: "component", type: IgxSnackbarComponent, selector: "igx-snackbar", inputs: ["id", "actionText", "positionSettings"], outputs: ["clicked", "animationStarted", "animationDone"] }, { kind: "component", type: IgxSummaryRowComponent, selector: "igx-grid-summary-row", inputs: ["summaries", "gridID", "index", "firstCellIndentation"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxRowEditTabStopDirective, selector: "[igxRowEditTabStop]" }, { kind: "component", type: IgxGridColumnResizerComponent, selector: "igx-grid-column-resizer", inputs: ["restrictResizerTop"] }, { kind: "component", type: IgxChildGridRowComponent, selector: "igx-child-grid-row", inputs: ["layout", "parentGridID", "data", "index"] }, { kind: "directive", type: IgxScrollInertiaDirective, selector: "[igxScrollInertia]", inputs: ["IgxScrollInertiaDirection", "IgxScrollInertiaScrollContainer", "wheelStep", "inertiaStep", "smoothingStep", "smoothingDuration", "swipeToleranceX", "inertiaDeltaY", "inertiaDeltaX", "inertiaDuration"] }, { kind: "pipe", type: IgxGridSortingPipe, name: "gridSort" }, { kind: "pipe", type: IgxGridFilteringPipe, name: "gridFiltering" }, { kind: "pipe", type: IgxGridTransactionPipe, name: "gridTransaction" }, { kind: "pipe", type: IgxHasVisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: IgxGridRowPinningPipe, name: "gridRowPinning" }, { kind: "pipe", type: IgxGridAddRowPipe, name: "gridAddRow" }, { kind: "pipe", type: IgxGridRowClassesPipe, name: "igxGridRowClasses" }, { kind: "pipe", type: IgxGridRowStylesPipe, name: "igxGridRowStyles" }, { kind: "pipe", type: IgxSummaryDataPipe, name: "igxGridSummaryDataPipe" }, { kind: "pipe", type: IgxGridHierarchicalPipe, name: "gridHierarchical" }, { kind: "pipe", type: IgxGridHierarchicalPagingPipe, name: "gridHierarchicalPaging" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxGridCellMergePipe, name: "gridCellMerge" }, { kind: "pipe", type: IgxGridUnmergeActivePipe, name: "gridUnmergeActive" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxHierarchicalGridComponent, decorators: [{
             type: Component,
@@ -89851,7 +89920,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                         IgxGridCellMergePipe,
                         IgxScrollInertiaDirective,
                         IgxGridUnmergeActivePipe
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-container #toolbarOutlet></ng-container>\n\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [width]=\"calcWidth\"\n    [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n    [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\"\n        (keydown)=\"navigation.handleNavigation($event)\" (dragStop)=\"selectionService.dragMode = $event\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody (scroll)=\"preventContainerScroll($event)\">\n        @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (moving && columnInDrag && pinnedColumns.length > 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n        }\n        @if (mergedDataInView && mergedDataInView.length > 0) {\n            <div igxScrollInertia\n            [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n            [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n                @for (rowData of mergedDataInView; track rowData.record;) {\n                    <igx-hierarchical-grid-row class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [data]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n                    [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData.record):false:rowData.record:pipeTrigger\"\n                    [ngStyle]=\"rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger\" #row>\n                    </igx-hierarchical-grid-row>\n                }\n        </div>\n        }\n        <ng-template #pinnedRecordsTemplate>\n            @if (data\n                | gridTransaction:id:pipeTrigger\n                | visibleColumns:hasVisibleColumns\n                | gridAddRow:true:pipeTrigger\n                | gridRowPinning:id:true:pipeTrigger\n                | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n                | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true\n                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n                | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData\n            ) {\n                @if (pinnedData.length > 0) {\n                    <div #pinContainer class=\"igx-grid__tr--pinned\"\n                        [ngClass]=\"{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }\"\n                        [style.width.px]=\"calcWidth\">\n                        @for (rowData of pinnedData; track (rowData.recordRef || rowData); let rowIndex = $index) {\n                            <ng-container *ngTemplateOutlet=\"pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)\">\n                            </ng-container>\n                        }\n                    </div>\n                }\n            }\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template igxGridFor let-rowData let-rowIndex=\"index\" [igxGridForOf]=\"renderData\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger\n        | gridHierarchicalPaging:!!paginator:page:perPage:id:pipeTrigger\n        | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\n        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n        | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n            [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\" [igxForItemSize]=\"renderedRowHeight\" [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\" (viewCreated)=\"viewCreatedHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\" (cachedViewLoaded)=\"cachedViewLoaded($event)\">\n            </ng-template>\n            <!-- <ng-container *igxTemplateOutlet=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)\"></ng-container> -->\n        </ng-template>\n        <ng-template #hierarchical_record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData let-metaData=\"metaData\">\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [disabled]=\"disabledRow\" [data]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n\n        <ng-template #pinned_hierarchical_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row #pinnedRow>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n        <ng-template #child_record_template let-rowIndex=\"index\" let-rowData>\n            <div [attr.data-rowindex]=\"rowIndex\" (scroll)=\"onContainerScroll()\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr--highlighted':isRowHighlighted(rowData)\n            }\">\n                @for (layout of childLayoutList; track layout) {\n                    <igx-child-grid-row [parentGridID]=\"id\" [index]=\"rowIndex\"\n                        [data]=\"rowData\" [layout]=\"layout\" #row>\n                    </igx-child-grid-row>\n                }\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        @if (moving && columnInDrag) {\n            <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n                id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        }\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        @if (!this.parent) {\n            <igc-trial-watermark></igc-trial-watermark>\n        }\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\">\n            </igx-circular-bar>\n        }\n    </div>\n    @if (moving && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" [attr.aria-activedescendant]=\"activeDescendant\"\n        (keydown)=\"navigation.summaryNav($event)\">\n        @if (hasSummarizedColumns && rootSummariesEnabled) {\n            <igx-grid-summary-row [style.width.px]=\"calcWidth\" [style.height.px]=\"summaryRowHeight\"\n                [gridID]=\"id\" role=\"row\"\n                [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n                class=\"igx-grid__summaries\" #summaryRow>\n            </igx-grid-summary-row>\n        }\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"pinnedStartWidth\" [style.min-width.px]=\"pinnedStartWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]=\"pinnedEndWidth\" [style.min-width.px]=\"pinnedEndWidth\" [hidden]=\"pinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n    <ng-container #paginatorOutlet></ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon family=\"default\" name=\"unfold_more\" role=\"button\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [active]=\"hasExpandedRecords() && hasExpandableChildren\">\n    </igx-icon>\n</ng-template>\n\n@if (rowEditable) {\n    <div igxToggle #rowEditingOverlay>\n        <div [className]=\"bannerClass\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n}\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : resolveRowEditText || defaultRowEditText;\n                context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditActions || defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n    <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\"></div>\n    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n    <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"></ng-content>\n    <ng-content select=\"igx-row-island,igc-row-island\"></ng-content>\n}\n" }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-content select=\"igx-grid-toolbar,igc-grid-toolbar\"></ng-content>\n<ng-container #toolbarOutlet></ng-container>\n\n<igx-grid-header-row class=\"igx-grid-thead\" tabindex=\"0\"\n    [grid]=\"this\"\n    [hasMRL]=\"hasColumnLayouts\"\n    [width]=\"calcWidth\"\n    [pinnedStartColumnCollection]=\"pinnedStartColumns\"\n    [pinnedEndColumnCollection]=\"pinnedEndColumns\"\n    [unpinnedColumnCollection]=\"unpinnedColumns\"\n    (keydown.meta.c)=\"copyHandler($event)\"\n    (keydown.control.c)=\"copyHandler($event)\"\n    (copy)=\"copyHandler($event)\"\n    (keydown)=\"navigation.headerNavigation($event)\"\n    (focus)=\"navigation.focusFirstCell()\"\n>\n</igx-grid-header-row>\n\n<div igxGridBody (keydown.control.c)=\"copyHandler($event)\" (copy)=\"copyHandler($event)\" class=\"igx-grid__tbody\" role=\"rowgroup\">\n    <div class=\"igx-grid__tbody-content\"  tabindex=\"0\" (focus)=\"navigation.focusTbody($event)\"\n        (keydown)=\"navigation.handleNavigation($event)\" (dragStop)=\"selectionService.dragMode = $event\"\n        (dragScroll)=\"dragScroll($event)\" [igxGridDragSelect]=\"selectionService.dragMode\" [attr.aria-activedescendant]=\"activeDescendant\" [attr.role]=\"dataView.length ? null : 'row'\"\n        [style.height.px]=\"totalHeight\" [style.width.px]=\"totalCalcWidth\" [style.width]=\"!platform.isBrowser ? '100%' : undefined\" #tbody (scroll)=\"preventContainerScroll($event)\">\n        @if (moving && columnInDrag && pinnedColumns.length <= 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-left\"></span>\n        }\n        @if (moving && columnInDrag && pinnedColumns.length > 0) {\n            <span\n                [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\" id=\"left\"\n                class=\"igx-grid__scroll-on-drag-pinned\" [style.left.px]=\"pinnedStartWidth\"></span>\n        }\n        @if (mergedDataInView && mergedDataInView.length > 0) {\n            <div igxScrollInertia\n            [IgxScrollInertiaScrollContainer]=\"this.verticalScrollContainer.dc.instance.scrollContainer\"\n            [IgxScrollInertiaDirection]=\"this.verticalScrollContainer.dc.instance.scrollDirection\">\n                @for (rowData of mergedDataInView; track rowData.record;) {\n                    <igx-hierarchical-grid-row class=\"igx-grid__tr--merged-top\" [gridID]=\"id\" [index]=\"rowData.index\" [data]=\"rowData.record.recordRef\" [metaData]=\"rowData.record\" [style.top.px]=\"getMergeCellOffset(rowData)\"\n                    [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowData.index:hasColumnLayouts:isRecordMerged(rowData.record):false:rowData.record:pipeTrigger\"\n                    [ngStyle]=\"rowStyles | igxGridRowStyles:rowData.record:rowData.index:pipeTrigger\" #row>\n                    </igx-hierarchical-grid-row>\n                }\n        </div>\n        }\n        <ng-template #pinnedRecordsTemplate>\n            @if (data\n                | gridTransaction:id:pipeTrigger\n                | visibleColumns:hasVisibleColumns\n                | gridAddRow:true:pipeTrigger\n                | gridRowPinning:id:true:pipeTrigger\n                | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true\n                | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true\n                | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n                | gridUnmergeActive:columnsToMerge:activeRowIndexes:true:pipeTrigger; as pinnedData\n            ) {\n                @if (pinnedData.length > 0) {\n                    <div #pinContainer class=\"igx-grid__tr--pinned\"\n                        [ngClass]=\"{ 'igx-grid__tr--pinned-bottom':  !isRowPinningToTop, 'igx-grid__tr--pinned-top': isRowPinningToTop }\"\n                        [style.width.px]=\"calcWidth\">\n                        @for (rowData of pinnedData; track (rowData.recordRef || rowData); let rowIndex = $index) {\n                            <ng-container *ngTemplateOutlet=\"pinned_hierarchical_record_template; context: getContext(rowData, rowIndex, true)\">\n                            </ng-container>\n                        }\n                    </div>\n                }\n            }\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-template igxGridFor let-rowData let-rowIndex=\"index\" [igxGridForOf]=\"renderData\n        | gridTransaction:id:pipeTrigger\n        | visibleColumns:hasVisibleColumns\n        | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger\n        | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger\n        | gridHierarchicalPaging:!!paginator:page:perPage:id:pipeTrigger\n        | gridHierarchical:expansionStates:id:primaryKey:childLayoutKeys:pipeTrigger\n        | gridAddRow:false:pipeTrigger\n        | gridRowPinning:id:false:pipeTrigger\n        | gridCellMerge:columnsToMerge:cellMergeMode:mergeStrategy:pipeTrigger\n        | gridUnmergeActive:columnsToMerge:activeRowIndexes:false:pipeTrigger\"\n            [igxForScrollOrientation]=\"'vertical'\" [igxForScrollContainer]=\"verticalScroll\"\n            [igxForContainerSize]=\"calcHeight\" [igxForItemSize]=\"renderedRowHeight\" [igxForTrackBy]=\"trackChanges\"\n            #verticalScrollContainer (chunkPreload)=\"dataLoading($event)\" (dataChanging)=\"dataRebinding($event)\" (dataChanged)=\"dataRebound($event)\">\n            <ng-template\n                [igxTemplateOutlet]=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) ? child_record_template : hierarchical_record_template))\"\n                [igxTemplateOutletContext]=\"getContext(rowData, rowIndex, false)\" (viewCreated)=\"viewCreatedHandler($event)\"\n                (viewMoved)=\"viewMovedHandler($event)\" (cachedViewLoaded)=\"cachedViewLoaded($event)\" (beforeViewDetach)=\"viewDetachHandler($event)\">\n            </ng-template>\n            <!-- <ng-container *igxTemplateOutlet=\"(isHierarchicalRecord(rowData) ? hierarchical_record_template : (isChildGridRecord(rowData) && isExpanded(rowData) ? child_record_template : hierarchical_record_template)); context: getContext(rowData)\"></ng-container> -->\n        </ng-template>\n        <ng-template #hierarchical_record_template let-rowIndex=\"index\" let-disabledRow=\"disabled\" let-rowData let-metaData=\"metaData\">\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [disabled]=\"disabledRow\" [data]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n\n        <ng-template #pinned_hierarchical_record_template let-rowIndex=\"index\" let-rowData let-metaData=\"metaData\">\n            <igx-hierarchical-grid-row [gridID]=\"id\" [index]=\"rowIndex\" [data]=\"rowData\" [metaData]=\"metaData\"\n                [ngClass]=\"rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:isRecordMerged(metaData):false:rowData:pipeTrigger\"\n                [ngStyle]=\"rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger\" #row #pinnedRow>\n            </igx-hierarchical-grid-row>\n        </ng-template>\n        <ng-template #child_record_template let-rowIndex=\"index\" let-rowData>\n            <div [attr.data-rowindex]=\"rowIndex\" (scroll)=\"onContainerScroll()\"\n                [ngClass]=\"{\n                'igx-grid__tr-container': true,\n                'igx-grid__tr--highlighted':isRowHighlighted(rowData)\n            }\">\n                @for (layout of childLayoutList; track layout) {\n                    <igx-child-grid-row [parentGridID]=\"id\" [index]=\"rowIndex\"\n                        [data]=\"rowData\" [layout]=\"layout\" #row>\n                    </igx-child-grid-row>\n                }\n            </div>\n        </ng-template>\n        <ng-container *ngTemplateOutlet=\"hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null\">\n        </ng-container>\n        <ng-container *ngTemplateOutlet=\"template; context: { $implicit: this }\"></ng-container>\n        @if (moving && columnInDrag) {\n            <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n                id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n        }\n        <div class=\"igx-grid__row-editing-outlet\" igxOverlayOutlet #igxRowEditingOverlayOutlet></div>\n        @if (!this.parent) {\n            <igc-trial-watermark></igc-trial-watermark>\n        }\n    </div>\n    <div igxToggle #loadingOverlay>\n        @if (shouldOverlayLoading) {\n            <igx-circular-bar [indeterminate]=\"true\">\n            </igx-circular-bar>\n        }\n    </div>\n    @if (moving && columnInDrag) {\n        <span [igxColumnMovingDrop]=\"headerContainer\" [attr.droppable]=\"true\"\n            id=\"right\" class=\"igx-grid__scroll-on-drag-right\"></span>\n    }\n    <div [hidden]=\"!hasVerticalScroll()\" class=\"igx-grid__tbody-scrollbar\" [style.width.px]=\"scrollSize\" (pointerdown)=\"$event.preventDefault()\">\n        <div class=\"igx-grid__tbody-scrollbar-start\" [style.height.px]=\"isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n        <div class=\"igx-grid__tbody-scrollbar-main\" [style.height.px]=\"calcHeight\">\n            <ng-template igxGridFor [igxGridForOf]=\"[]\" #verticalScrollHolder></ng-template>\n        </div>\n        <div class=\"igx-grid__tbody-scrollbar-end\" [style.height.px]=\"!isRowPinningToTop ? pinnedRowHeight : 0\"></div>\n    </div>\n    <div class=\"igx-grid__addrow-snackbar\">\n        <igx-snackbar #addRowSnackbar [outlet]=\"igxBodyOverlayOutlet\" [actionText]=\"resourceStrings.igx_grid_snackbar_addrow_actiontext\" [displayTime]=\"snackbarDisplayTime\">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>\n    </div>\n\n    <div igxOverlayOutlet #igxBodyOverlayOutlet=\"overlay-outlet\"></div>\n</div>\n\n<div class=\"igx-grid__tfoot\" role=\"rowgroup\" [style.height.px]=\"summaryRowHeight\" #tfoot>\n    <div tabindex=\"0\" (focus)=\"navigation.focusFirstCell(false)\" [attr.aria-activedescendant]=\"activeDescendant\"\n        (keydown)=\"navigation.summaryNav($event)\">\n        @if (hasSummarizedColumns && rootSummariesEnabled) {\n            <igx-grid-summary-row [style.width.px]=\"calcWidth\" [style.height.px]=\"summaryRowHeight\"\n                [gridID]=\"id\" role=\"row\"\n                [summaries]=\"id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe\" [index]=\"dataView.length\"\n                class=\"igx-grid__summaries\" #summaryRow>\n            </igx-grid-summary-row>\n        }\n        <div class=\"igx-grid__tfoot-thumb\" [hidden]=\"!hasVerticalScroll()\" [style.height.px]=\"summaryRowHeight\"\n            [style.width.px]=\"scrollSize\"></div>\n    </div>\n</div>\n\n<div class=\"igx-grid__scroll\" [style.height.px]=\"scrollSize\" #scr [hidden]=\"isHorizontalScrollHidden\" (pointerdown)=\"$event.preventDefault()\">\n    <div class=\"igx-grid__scroll-start\" [style.width.px]=\"pinnedStartWidth\" [style.min-width.px]=\"pinnedStartWidth\"></div>\n    <div class=\"igx-grid__scroll-main\" [style.width.px]=\"unpinnedWidth\">\n        <ng-template igxGridFor [igxGridForOf]=\"[]\" #scrollContainer>\n        </ng-template>\n    </div>\n    <div class=\"igx-grid__scroll-end\" [style.width.px]=\"pinnedEndWidth\" [style.min-width.px]=\"pinnedEndWidth\" [hidden]=\"pinnedEndWidth === 0\"></div>\n</div>\n\n<div class=\"igx-grid__footer\" #footer>\n    <ng-content select=\"igx-grid-footer,igc-grid-footer\"></ng-content>\n    <ng-content select=\"igx-paginator,igc-paginator\"></ng-content>\n    <ng-container #paginatorOutlet></ng-container>\n</div>\n\n<ng-template #emptyFilteredGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyFilteredGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultEmptyGrid>\n    <span class=\"igx-grid__tbody-message\" role=\"cell\">\n        <span>{{emptyGridMessage}}</span>\n        @if (showAddButton) {\n            <span>\n                <ng-container *ngTemplateOutlet=\"addRowEmptyTemplate || defaultAddRowEmptyTemplate\"></ng-container>\n            </span>\n        }\n    </span>\n</ng-template>\n\n<ng-template #defaultAddRowEmptyTemplate>\n    <button type=\"button\" igxButton=\"contained\" igxRipple (click)=\"this.crudService.enterAddRowMode(null, false, $event)\">\n        {{resourceStrings.igx_grid_add_row_label}}\n    </button>\n</ng-template>\n\n<ng-template #defaultLoadingGrid>\n    <div class=\"igx-grid__loading\">\n        <igx-circular-bar [indeterminate]=\"true\">\n        </igx-circular-bar>\n    </div>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n    <igx-icon family=\"default\" name=\"unfold_more\" role=\"button\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultExpandedTemplate>\n    <igx-icon\n        family=\"default\"\n        name=\"unfold_less\"\n        role=\"button\"\n        [active]=\"hasExpandedRecords() && hasExpandableChildren\">\n    </igx-icon>\n</ng-template>\n\n@if (rowEditable) {\n    <div igxToggle #rowEditingOverlay>\n        <div [className]=\"bannerClass\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditContainer; context: { rowChangesCount: rowChangesCount, endEdit: this.crudService.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n}\n<ng-template #defaultRowEditText>\n    {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }}\n</ng-template>\n<ng-template #defaultRowEditActions>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(false, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>\n    <button type=\"button\" igxButton igxRowEditTabStop (click)=\"this.endRowEditTabStop(true, $event)\">{{ this.resourceStrings.igx_grid_row_edit_btn_done }}</button>\n</ng-template>\n<ng-template #defaultRowEditTemplate>\n    <div class=\"igx-banner__message\">\n        <span class=\"igx-banner__text\">\n            <ng-container\n                *ngTemplateOutlet=\"this.crudService.row?.isAddRow ? rowAddTextTemplate : resolveRowEditText || defaultRowEditText;\n                context: { $implicit: !this.crudService.row?.isAddRow ? rowChangesCount : null }\">\n            </ng-container>\n        </span>\n    </div>\n    <div class=\"igx-banner__actions\">\n        <div class=\"igx-banner__row\">\n            <ng-container\n                *ngTemplateOutlet=\"resolveRowEditActions || defaultRowEditActions; context: { $implicit: this.endEdit.bind(this) }\">\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #dragIndicatorIconBase>\n    <igx-icon family=\"default\" name=\"drag_indicator\"></igx-icon>\n</ng-template>\n\n@if (colResizingService.showResizer) {\n    <igx-grid-column-resizer></igx-grid-column-resizer>\n}\n<div class=\"igx-grid__loading-outlet\" #igxLoadingOverlayOutlet igxOverlayOutlet></div>\n<div class=\"igx-grid__outlet\" #igxFilteringOverlayOutlet igxOverlayOutlet></div>\n@if (platform.isElements) {\n    <div #sink style=\"display: none;\"></div>\n    <ng-content select=\"igx-grid-state,igc-grid-state\"></ng-content>\n    <ng-content select=\"igx-column,igc-column,igx-column-group,igc-column-group,igx-action-strip,igc-action-strip\"></ng-content>\n    <ng-content select=\"igx-row-island,igc-row-island\"></ng-content>\n}\n" }]
         }], propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -99132,77 +99201,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                 }]
         }] });
 
-const DEFAULT_LANGUAGES = ['javascript', 'typescript', 'html', 'css'];
-const DEFAULT_THEMES = {
-    light: 'github-light',
-    dark: 'github-dark'
-};
-class IgxChatMarkdownService {
-    _initializeMarked() {
-        this._instance = new Marked({
-            breaks: true,
-            gfm: true,
-            extensions: [
-                {
-                    name: 'link',
-                    renderer({ href, title, text }) {
-                        return `<a href="${href}" target="_blank" rel="noopener noreferrer" ${title ? `title="${title}"` : ''}>${text}</a>`;
-                    }
-                }
-            ]
-        });
-    }
-    async _initializeShiki() {
-        const highlighter = await createHighlighter({
-            langs: DEFAULT_LANGUAGES,
-            themes: Object.keys(bundledThemes)
-        });
-        this._instance.use(markedShiki({
-            highlight(code, lang, _) {
-                try {
-                    return highlighter.codeToHtml(code, {
-                        lang,
-                        themes: DEFAULT_THEMES,
-                    });
-                }
-                catch {
-                    return `<pre><code>${code}</code></pre>`;
-                }
-            }
-        }));
-    }
-    constructor() {
-        this._initializeMarked();
-        this._isInitialized = this._initializeShiki();
-    }
-    async parse(text) {
-        await this._isInitialized;
-        return await this._instance.parse(text);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxChatMarkdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxChatMarkdownService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxChatMarkdownService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-
-class MarkdownPipe {
-    constructor() {
-        this._service = inject(IgxChatMarkdownService);
-        this._sanitizer = inject(DomSanitizer);
-    }
-    async transform(text) {
-        return this._sanitizer.bypassSecurityTrustHtml(DOMPurify.sanitize(await this._service.parse(text ?? '')));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MarkdownPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.6", ngImport: i0, type: MarkdownPipe, isStandalone: true, name: "fromMarkdown" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: MarkdownPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'fromMarkdown' }]
-        }] });
-
+/**
+ * Angular wrapper component for the Ignite UI Web Components Chat component.
+ *
+ * This component provides an Angular-friendly interface to the igc-chat web component,
+ * including support for Angular templates, signals, and change detection.
+ *
+ * Uses OnPush change detection strategy for optimal performance. All inputs are signals,
+ * so changes are automatically tracked and propagated to the underlying web component.
+ *
+ * @example
+ * ```typescript
+ * <igx-chat
+ *   [messages]="messages"
+ *   [draftMessage]="draft"
+ *   [options]="chatOptions"
+ *   [templates]="chatTemplates"
+ *   (messageCreated)="onMessageCreated($event)"
+ * />
+ * ```
+ */
 class IgxChatComponent {
     //#endregion
     /** @internal */
@@ -99221,44 +99239,51 @@ class IgxChatComponent {
         this._view = inject(ViewContainerRef);
         this._templateViewRefs = new Map();
         this._oldTemplates = {};
-        this._mergedOptions = signal({}, ...(ngDevMode ? [{ debugName: "_mergedOptions" }] : []));
         this._transformedTemplates = signal({}, ...(ngDevMode ? [{ debugName: "_transformedTemplates" }] : []));
+        this._mergedOptions = computed(() => {
+            const options = this.options();
+            const transformedTemplates = this._transformedTemplates();
+            return {
+                ...options,
+                renderers: transformedTemplates
+            };
+        }, ...(ngDevMode ? [{ debugName: "_mergedOptions" }] : []));
         //#endregion
         //#region Inputs
+        /** Array of chat messages to display */
         this.messages = input([], ...(ngDevMode ? [{ debugName: "messages" }] : []));
+        /** Draft message with text and optional attachments */
         this.draftMessage = input({ text: '' }, ...(ngDevMode ? [{ debugName: "draftMessage" }] : []));
+        /** Configuration options for the chat component */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Custom templates for rendering chat elements */
         this.templates = input({}, ...(ngDevMode ? [{ debugName: "templates" }] : []));
         //#endregion
         //#region Outputs
+        /** Emitted when a new message is created */
         this.messageCreated = output();
+        /** Emitted when a user reacts to a message */
+        this.messageReact = output();
+        /** Emitted when an attachment is clicked */
         this.attachmentClick = output();
+        /** Emitted when attachment drag starts */
         this.attachmentDrag = output();
+        /** Emitted when attachment is dropped */
         this.attachmentDrop = output();
+        /** Emitted when typing indicator state changes */
         this.typingChange = output();
+        /** Emitted when the input receives focus */
         this.inputFocus = output();
+        /** Emitted when the input loses focus */
         this.inputBlur = output();
+        /** Emitted when the input value changes */
         this.inputChange = output();
-        // Templates changed - update transformed templates and viewRefs and merge with options
+        // Templates changed - update transformed templates and viewRefs
         effect(() => {
             const templates = this.templates();
             this._setTemplates(templates ?? {});
-            this._mergeOptions(untracked(() => this.options()));
-        });
-        // Options changed - merge with current template state
-        effect(() => {
-            const options = this.options();
-            this._mergeOptions(options ?? {});
         });
     }
-    _mergeOptions(options) {
-        const transformedTemplates = this._transformedTemplates();
-        const merged = {
-            ...options,
-            renderers: transformedTemplates
-        };
-        this._mergedOptions.set(merged);
-    }
     _setTemplates(newTemplates) {
         const templateCopies = {};
         const newTemplateKeys = Object.keys(newTemplates);
@@ -99303,7 +99328,8 @@ class IgxChatComponent {
             }
             else if ('value' in context) {
                 angularContext = {
-                    $implicit: { value: context.value, attachments: context.attachments },
+                    $implicit: context.value,
+                    attachments: context.attachments
                 };
             }
             else {
@@ -99315,12 +99341,23 @@ class IgxChatComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.6", type: IgxChatComponent, isStandalone: true, selector: "igx-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, draftMessage: { classPropertyName: "draftMessage", publicName: "draftMessage", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageCreated: "messageCreated", attachmentClick: "attachmentClick", attachmentDrag: "attachmentDrag", attachmentDrop: "attachmentDrop", typingChange: "typingChange", inputFocus: "inputFocus", inputBlur: "inputBlur", inputChange: "inputChange" }, ngImport: i0, template: "<igc-chat\n  [messages]=\"messages()\"\n  [draftMessage]=\"draftMessage()\"\n  [options]=\"_mergedOptions()\"\n  (igcMessageCreated)=\"messageCreated.emit($event.detail)\"\n  (igcAttachmentClick)=\"attachmentClick.emit($event.detail)\"\n  (igcAttachmentDrag)=\"attachmentDrag.emit()\"\n  (igcAttachmentDrop)=\"attachmentDrop.emit()\"\n  (igcTypingChange)=\"typingChange.emit($event.detail)\"\n  (igcInputFocus)=\"inputFocus.emit()\"\n  (igcInputBlur)=\"inputBlur.emit()\"\n  (igcInputChange)=\"inputChange.emit($event.detail)\"\n>\n    <ng-content></ng-content>\n</igc-chat>\n", styles: ["igc-chat{--igc-chat-height: calc(100vh - 32px) }\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.6", type: IgxChatComponent, isStandalone: true, selector: "igx-chat", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, draftMessage: { classPropertyName: "draftMessage", publicName: "draftMessage", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { messageCreated: "messageCreated", messageReact: "messageReact", attachmentClick: "attachmentClick", attachmentDrag: "attachmentDrag", attachmentDrop: "attachmentDrop", typingChange: "typingChange", inputFocus: "inputFocus", inputBlur: "inputBlur", inputChange: "inputChange" }, ngImport: i0, template: "<igc-chat\n  [messages]=\"messages()\"\n  [draftMessage]=\"draftMessage()\"\n  [options]=\"_mergedOptions()\"\n  (igcMessageCreated)=\"messageCreated.emit($event.detail)\"\n  (igcMessageReact)=\"messageReact.emit($event.detail)\"\n  (igcAttachmentClick)=\"attachmentClick.emit($event.detail)\"\n  (igcAttachmentDrag)=\"attachmentDrag.emit()\"\n  (igcAttachmentDrop)=\"attachmentDrop.emit()\"\n  (igcTypingChange)=\"typingChange.emit($event.detail)\"\n  (igcInputFocus)=\"inputFocus.emit()\"\n  (igcInputBlur)=\"inputBlur.emit()\"\n  (igcInputChange)=\"inputChange.emit($event.detail)\"\n>\n    <ng-content></ng-content>\n</igc-chat>\n", styles: ["igc-chat{--igc-chat-height: calc(100vh - 32px) }\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: IgxChatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-chat', changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<igc-chat\n  [messages]=\"messages()\"\n  [draftMessage]=\"draftMessage()\"\n  [options]=\"_mergedOptions()\"\n  (igcMessageCreated)=\"messageCreated.emit($event.detail)\"\n  (igcAttachmentClick)=\"attachmentClick.emit($event.detail)\"\n  (igcAttachmentDrag)=\"attachmentDrag.emit()\"\n  (igcAttachmentDrop)=\"attachmentDrop.emit()\"\n  (igcTypingChange)=\"typingChange.emit($event.detail)\"\n  (igcInputFocus)=\"inputFocus.emit()\"\n  (igcInputBlur)=\"inputBlur.emit()\"\n  (igcInputChange)=\"inputChange.emit($event.detail)\"\n>\n    <ng-content></ng-content>\n</igc-chat>\n", styles: ["igc-chat{--igc-chat-height: calc(100vh - 32px) }\n"] }]
-        }], ctorParameters: () => [], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], draftMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "draftMessage", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }], messageCreated: [{ type: i0.Output, args: ["messageCreated"] }], attachmentClick: [{ type: i0.Output, args: ["attachmentClick"] }], attachmentDrag: [{ type: i0.Output, args: ["attachmentDrag"] }], attachmentDrop: [{ type: i0.Output, args: ["attachmentDrop"] }], typingChange: [{ type: i0.Output, args: ["typingChange"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }] } });
+            args: [{ selector: 'igx-chat', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<igc-chat\n  [messages]=\"messages()\"\n  [draftMessage]=\"draftMessage()\"\n  [options]=\"_mergedOptions()\"\n  (igcMessageCreated)=\"messageCreated.emit($event.detail)\"\n  (igcMessageReact)=\"messageReact.emit($event.detail)\"\n  (igcAttachmentClick)=\"attachmentClick.emit($event.detail)\"\n  (igcAttachmentDrag)=\"attachmentDrag.emit()\"\n  (igcAttachmentDrop)=\"attachmentDrop.emit()\"\n  (igcTypingChange)=\"typingChange.emit($event.detail)\"\n  (igcInputFocus)=\"inputFocus.emit()\"\n  (igcInputBlur)=\"inputBlur.emit()\"\n  (igcInputChange)=\"inputChange.emit($event.detail)\"\n>\n    <ng-content></ng-content>\n</igc-chat>\n", styles: ["igc-chat{--igc-chat-height: calc(100vh - 32px) }\n"] }]
+        }], ctorParameters: () => [], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], draftMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "draftMessage", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }], messageCreated: [{ type: i0.Output, args: ["messageCreated"] }], messageReact: [{ type: i0.Output, args: ["messageReact"] }], attachmentClick: [{ type: i0.Output, args: ["attachmentClick"] }], attachmentDrag: [{ type: i0.Output, args: ["attachmentDrag"] }], attachmentDrop: [{ type: i0.Output, args: ["attachmentDrop"] }], typingChange: [{ type: i0.Output, args: ["typingChange"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }] } });
+/**
+ * Directive providing type information for chat message template contexts.
+ * Use this directive on ng-template elements that render chat messages.
+ *
+ * @example
+ * ```html
+ * <ng-template igxChatMessageContext let-message>
+ *   <div>{{ message.text }}</div>
+ * </ng-template>
+ * ```
+ */
 class IgxChatMessageContextDirective {
     static ngTemplateContextGuard(_, ctx) {
         return true;
@@ -99332,7 +99369,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
             type: Directive,
             args: [{ selector: '[igxChatMessageContext]' }]
         }] });
-;
+/**
+ * Directive providing type information for chat attachment template contexts.
+ * Use this directive on ng-template elements that render message attachments.
+ *
+ * @example
+ * ```html
+ * <ng-template igxChatAttachmentContext let-attachment>
+ *   <img [src]="attachment.url" />
+ * </ng-template>
+ * ```
+ */
 class IgxChatAttachmentContextDirective {
     static ngTemplateContextGuard(_, ctx) {
         return true;
@@ -99344,6 +99391,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
             type: Directive,
             args: [{ selector: '[igxChatAttachmentContext]' }]
         }] });
+/**
+ * Directive providing type information for chat input template contexts.
+ * Use this directive on ng-template elements that render the chat input.
+ *
+ * @example
+ * ```html
+ * <ng-template igxChatInputContext let-value let-attachments="attachments">
+ *   <input [value]="value" />
+ * </ng-template>
+ * ```
+ */
 class IgxChatInputContextDirective {
     static ngTemplateContextGuard(_, ctx) {
         return true;
@@ -99372,5 +99430,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbsolutePosition, AbsoluteScrollStrategy, ActionStripResourceStringsEN, AutoPositionStrategy, BannerResourceStringsEN, BaseFilteringStrategy, BlockScrollStrategy, ButtonGroupAlignment, ByLevelTreeGridMergeStrategy, CachedDataCloneStrategy, Calendar, CalendarResourceStringsEN, CalendarSelection, CarouselAnimationType, CarouselHammerConfig, CarouselIndicatorsOrientation, CarouselResourceStringsEN, ChipResourceStringsEN, CloseScrollStrategy, ColumnDisplayOrder, ColumnPinningPosition, ComboResourceStringsEN, ConnectedPositioningStrategy, ContainerPositionStrategy, CsvFileTypes, DEFAULT_OWNER, DEFAULT_PIVOT_KEYS, DataType, DataUtil, DatePart, DatePickerResourceStringsEN, DateRangePickerFormatPipe, DateRangePickerResourceStringsEN, DateRangeType, DefaultDataCloneStrategy, DefaultMergeStrategy, DefaultPivotGridRecordSortingStrategy, DefaultPivotSortingStrategy, DefaultSortingStrategy, DefaultTreeGridMergeStrategy, DimensionValuesFilteringStrategy, Direction, DragDirection, ElasticPositionStrategy, ExpansionPanelHeaderIconPosition, ExportHeaderType, ExportRecordType, ExpressionsTreeUtil, FilterMode, FilterUtil, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, FormattedValuesSortingStrategy, GRID_LEVEL_COL, GRID_PARENT, GRID_ROOT_SUMMARY, GlobalPositionStrategy, GridCellMergeMode, GridColumnDataType, GridPagingMode, GridResourceStringsEN, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GroupMemberCountSortingStrategy, GroupedRecords, HorizontalAlignment, HorizontalAnimationType, IGX_ACCORDION_DIRECTIVES, IGX_ACTION_STRIP_DIRECTIVES, IGX_BANNER_DIRECTIVES, IGX_BOTTOM_NAV_DIRECTIVES, IGX_BUTTON_GROUP_DIRECTIVES, IGX_CALENDAR_DIRECTIVES, IGX_CALENDAR_VIEW_ITEM, IGX_CARD_DIRECTIVES, IGX_CAROUSEL_DIRECTIVES, IGX_CHIPS_DIRECTIVES, IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES, IGX_COMBO_DIRECTIVES, IGX_DATE_PICKER_DIRECTIVES, IGX_DATE_RANGE_PICKER_DIRECTIVES, IGX_DIALOG_DIRECTIVES, IGX_DRAG_DROP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES, IGX_EXPANSION_PANEL_DIRECTIVES, IGX_GRID_ACTION_STRIP_DIRECTIVES, IGX_GRID_BASE, IGX_GRID_COMMON_DIRECTIVES, IGX_GRID_DIRECTIVES, IGX_GRID_SERVICE_BASE, IGX_GRID_VALIDATION_DIRECTIVES, IGX_HIERARCHICAL_GRID_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, IGX_INPUT_GROUP_TYPE, IGX_LINEAR_PROGRESS_BAR_DIRECTIVES, IGX_LIST_DIRECTIVES, IGX_NAVBAR_DIRECTIVES, IGX_NAVIGATION_DRAWER_DIRECTIVES, IGX_PAGINATOR_DIRECTIVES, IGX_PIVOT_GRID_DIRECTIVES, IGX_PROGRESS_BAR_DIRECTIVES, IGX_QUERY_BUILDER_DIRECTIVES, IGX_RADIO_GROUP_DIRECTIVES, IGX_SELECT_DIRECTIVES, IGX_SIMPLE_COMBO_DIRECTIVES, IGX_SLIDER_DIRECTIVES, IGX_SPLITTER_DIRECTIVES, IGX_STEPPER_DIRECTIVES, IGX_TABS_DIRECTIVES, IGX_TIME_PICKER_DIRECTIVES, IGX_TOOLTIP_DIRECTIVES, IGX_TREE_DIRECTIVES, IGX_TREE_GRID_DIRECTIVES, ITreeGridAggregation, IgSizeDirective, IgcFormControlDirective, IgcFormsModule, IgxAccordionComponent, IgxAccordionModule, IgxActionStripComponent, IgxActionStripMenuItemDirective, IgxActionStripModule, IgxAdvancedFilteringDialogComponent, IgxAppendDropStrategy, IgxAutocompleteDirective, IgxAutocompleteModule, IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType, IgxBadgeComponent, IgxBadgeModule, IgxBadgeType, IgxBannerActionsDirective, IgxBannerComponent, IgxBannerModule, IgxBaseExporter, IgxBaseTransactionService, IgxBooleanFilteringOperand, IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent, IgxBottomNavModule, IgxButtonDirective, IgxButtonGroupComponent, IgxButtonGroupModule, IgxButtonModule, IgxCSVTextDirective, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarModule, IgxCalendarMonthDirective, IgxCalendarScrollPageDirective, IgxCalendarSubheaderTemplateDirective, IgxCalendarView, IgxCalendarViewBaseDirective, IgxCalendarYearDirective, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective, IgxCarouselComponent, IgxCarouselIndicatorDirective, IgxCarouselModule, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxChatAttachmentContextDirective, IgxChatComponent, IgxChatInputContextDirective, IgxChatMessageContextDirective, IgxCheckboxComponent, IgxCheckboxModule, IgxChildGridRowComponent, IgxChipComponent, IgxChipTypeVariant, IgxChipsAreaComponent, IgxChipsModule, IgxCircularProgressBarComponent, IgxCollapsibleIndicatorTemplateDirective, IgxColumPatternValidatorDirective, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnComponent, IgxColumnEmailValidatorDirective, IgxColumnGroupComponent, IgxColumnHidingDirective, IgxColumnLayoutComponent, IgxColumnMaxLengthValidatorDirective, IgxColumnMaxValidatorDirective, IgxColumnMinLengthValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnPinningDirective, IgxColumnRequiredValidatorDirective, IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboComponent, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboModule, IgxComboToggleIconDirective, IgxCsvExporterOptions, IgxCsvExporterService, IgxDataLoadingTemplateDirective, IgxDataRecordSorting, IgxDateFilteringOperand, IgxDatePickerComponent, IgxDatePickerModule, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangePickerComponent, IgxDateRangePickerModule, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, IgxDateSummaryOperand, IgxDateTimeEditorDirective, IgxDateTimeEditorModule, IgxDateTimeFilteringOperand, IgxDaysViewComponent, IgxDefaultDropStrategy, IgxDialogActionsDirective, IgxDialogComponent, IgxDialogModule, IgxDialogTitleDirective, IgxDividerDirective, IgxDividerModule, IgxDividerType, IgxDragDirective, IgxDragDropModule, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragIndicatorIconDirective, IgxDragLocation, IgxDropDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, IgxEmptyListTemplateDirective, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleDateExpressionComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelIconDirective, IgxExpansionPanelModule, IgxExpansionPanelTitleDirective, IgxExporterOptionsBase, IgxFilterCellTemplateDirective, IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe, IgxFilteringOperand, IgxFlatTransactionFactory, IgxFlexDirective, IgxFocusDirective, IgxFocusModule, IgxFocusTrapDirective, IgxFocusTrapModule, IgxForOfContext, IgxForOfDirective, IgxForOfModule, IgxGridActionButtonComponent, IgxGridActionsBaseDirective, IgxGridCell, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridEditingActionsComponent, IgxGridEmptyTemplateDirective, IgxGridExcelStyleFilteringComponent, IgxGridFooterComponent, IgxGridForOfContext, IgxGridForOfDirective, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxGridHeaderRowComponent, IgxGridLoadingTemplateDirective, IgxGridModule, IgxGridPinningActionsComponent, IgxGridRow, IgxGridStateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridTransaction, IgxGroupAreaDropDirective, IgxGroupByRow, IgxGroupByRowSelectorDirective, IgxGroupByRowTemplateDirective, IgxGroupedTreeGridSorting, IgxGrouping, IgxHeadSelectorDirective, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxHierarchicalGridRow, IgxHierarchicalTransactionFactory, IgxHierarchicalTransactionService, IgxHintDirective, IgxIconButtonDirective, IgxIconComponent, IgxIconModule, IgxIconService, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupEnum, IgxInputGroupModule, IgxInputState, IgxInsertDropStrategy, IgxItemListDirective, IgxLabelDirective, IgxLayoutDirective, IgxLayoutModule, IgxLinearProgressBarComponent, IgxListActionDirective, IgxListBaseDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListModule, IgxListPanState, IgxListThumbnailDirective, IgxMaskDirective, IgxMaskModule, IgxMonthPickerComponent, IgxMonthsViewComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective, IgxNavbarActionDirective, IgxNavbarComponent, IgxNavbarModule, IgxNavbarTitleDirective, IgxNavigationCloseDirective, IgxNavigationDrawerComponent, IgxNavigationDrawerModule, IgxNavigationService, IgxNavigationToggleDirective, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxOverlayOutletDirective, IgxOverlayService, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective, IgxPaginatorModule, IgxPickerActionsDirective, IgxPickerClearComponent, IgxPickerToggleComponent, IgxPivotAggregate, IgxPivotDataSelectorComponent, IgxPivotDateAggregate, IgxPivotDateDimension, IgxPivotGridComponent, IgxPivotGridModule, IgxPivotGridRow, IgxPivotNumericAggregate, IgxPivotRowDimensionHeaderTemplateDirective, IgxPivotTimeAggregate, IgxPivotValueChipTemplateDirective, IgxPrefixDirective, IgxPrependDropStrategy, IgxProgressBarGradientDirective, IgxProgressBarModule, IgxProgressBarTextTemplateDirective, IgxProgressType, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderModule, IgxQueryBuilderSearchValueTemplateDirective, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, IgxRippleDirective, IgxRippleModule, IgxRowAddTextDirective, IgxRowCollapsedIndicatorDirective, IgxRowDirective, IgxRowDragGhostDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective, IgxRowIslandComponent, IgxRowSelectorDirective, IgxScrollInertiaDirective, IgxScrollInertiaModule, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectToggleIconDirective, IgxSimpleComboComponent, IgxSimpleComboModule, IgxSlideComponent, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxSnackbarComponent, IgxSnackbarModule, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxSorting, IgxSplitBarComponent, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepComponent, IgxStepContentDirective, IgxStepIndicatorDirective, IgxStepInvalidIndicatorDirective, IgxStepSubtitleDirective, IgxStepTitleDirective, IgxStepType, IgxStepperComponent, IgxStepperModule, IgxStepperOrientation, IgxStepperTitlePosition, IgxStringFilteringOperand, IgxSuffixDirective, IgxSummaryOperand, IgxSummaryRow, IgxSummaryTemplateDirective, IgxSwitchComponent, IgxSwitchModule, IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsAlignment, IgxTabsComponent, IgxTabsModule, IgxTemplateOutletDirective, IgxTextAlign, IgxTextHighlightDirective, IgxTextHighlightModule, IgxTextHighlightService, IgxTextSelectionDirective, IgxTextSelectionModule, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, IgxTimeFilteringOperand, IgxTimeItemDirective, IgxTimePickerComponent, IgxTimePickerModule, IgxTimeSummaryOperand, IgxToastComponent, IgxToastModule, IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule, IgxTooltipDirective, IgxTooltipModule, IgxTooltipTargetDirective, IgxTransactionService, IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent, IgxTreeGridGroupingPipe, IgxTreeGridModule, IgxTreeGridRow, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectionType, IgxYearsViewComponent, IndigoIcons, InputResourceStringsEN, LabelPosition, ListResourceStringsEN, MarkdownPipe, NoOpScrollStrategy, NoopFilteringStrategy, NoopPivotDimensionsStrategy, NoopSortingStrategy, PaginatorResourceStringsEN, PagingError, PickerInteractionMode, PivotColumnDimensionsStrategy, PivotDimensionType, PivotRowDimensionsStrategy, PivotRowLayoutType, PivotSummaryPosition, Point, QueryBuilderResourceStringsEN, RadioGroupAlignment, RelativePosition, RelativePositionStrategy, RowPinningPosition, ScrollStrategy, Size, SliderHandle, SortingDirection, SplitterType, THEME_TOKEN, ThemeToken, TickLabelsOrientation, TicksOrientation, TimePickerResourceStringsEN, TooltipPositionStrategy, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, TreeResourceStringsEN, VerticalAlignment, VerticalAnimationType, WEEKDAYS, changei18n, comboIgnoreDiacriticsFilter, igxI18N, isLeap, monthRange, range, weekDay };
+export { AbsolutePosition, AbsoluteScrollStrategy, ActionStripResourceStringsEN, AutoPositionStrategy, BannerResourceStringsEN, BaseFilteringStrategy, BlockScrollStrategy, ButtonGroupAlignment, ByLevelTreeGridMergeStrategy, CachedDataCloneStrategy, Calendar, CalendarResourceStringsEN, CalendarSelection, CarouselAnimationType, CarouselHammerConfig, CarouselIndicatorsOrientation, CarouselResourceStringsEN, ChipResourceStringsEN, CloseScrollStrategy, ColumnDisplayOrder, ColumnPinningPosition, ComboResourceStringsEN, ConnectedPositioningStrategy, ContainerPositionStrategy, CsvFileTypes, DEFAULT_OWNER, DEFAULT_PIVOT_KEYS, DataType, DataUtil, DatePart, DatePickerResourceStringsEN, DateRangePickerFormatPipe, DateRangePickerResourceStringsEN, DateRangeType, DefaultDataCloneStrategy, DefaultMergeStrategy, DefaultPivotGridRecordSortingStrategy, DefaultPivotSortingStrategy, DefaultSortingStrategy, DefaultTreeGridMergeStrategy, DimensionValuesFilteringStrategy, Direction, DragDirection, ElasticPositionStrategy, ExpansionPanelHeaderIconPosition, ExportHeaderType, ExportRecordType, ExpressionsTreeUtil, FilterMode, FilterUtil, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, FilteringStrategy, FormattedValuesFilteringStrategy, FormattedValuesSortingStrategy, GRID_LEVEL_COL, GRID_PARENT, GRID_ROOT_SUMMARY, GlobalPositionStrategy, GridCellMergeMode, GridColumnDataType, GridPagingMode, GridResourceStringsEN, GridSelectionMode, GridSummaryCalculationMode, GridSummaryPosition, GroupMemberCountSortingStrategy, GroupedRecords, HorizontalAlignment, HorizontalAnimationType, IGX_ACCORDION_DIRECTIVES, IGX_ACTION_STRIP_DIRECTIVES, IGX_BANNER_DIRECTIVES, IGX_BOTTOM_NAV_DIRECTIVES, IGX_BUTTON_GROUP_DIRECTIVES, IGX_CALENDAR_DIRECTIVES, IGX_CALENDAR_VIEW_ITEM, IGX_CARD_DIRECTIVES, IGX_CAROUSEL_DIRECTIVES, IGX_CHIPS_DIRECTIVES, IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES, IGX_COMBO_DIRECTIVES, IGX_DATE_PICKER_DIRECTIVES, IGX_DATE_RANGE_PICKER_DIRECTIVES, IGX_DIALOG_DIRECTIVES, IGX_DRAG_DROP_DIRECTIVES, IGX_DROP_DOWN_DIRECTIVES, IGX_EXPANSION_PANEL_DIRECTIVES, IGX_GRID_ACTION_STRIP_DIRECTIVES, IGX_GRID_BASE, IGX_GRID_COMMON_DIRECTIVES, IGX_GRID_DIRECTIVES, IGX_GRID_SERVICE_BASE, IGX_GRID_VALIDATION_DIRECTIVES, IGX_HIERARCHICAL_GRID_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, IGX_INPUT_GROUP_TYPE, IGX_LINEAR_PROGRESS_BAR_DIRECTIVES, IGX_LIST_DIRECTIVES, IGX_NAVBAR_DIRECTIVES, IGX_NAVIGATION_DRAWER_DIRECTIVES, IGX_PAGINATOR_DIRECTIVES, IGX_PIVOT_GRID_DIRECTIVES, IGX_PROGRESS_BAR_DIRECTIVES, IGX_QUERY_BUILDER_DIRECTIVES, IGX_RADIO_GROUP_DIRECTIVES, IGX_SELECT_DIRECTIVES, IGX_SIMPLE_COMBO_DIRECTIVES, IGX_SLIDER_DIRECTIVES, IGX_SPLITTER_DIRECTIVES, IGX_STEPPER_DIRECTIVES, IGX_TABS_DIRECTIVES, IGX_TIME_PICKER_DIRECTIVES, IGX_TOOLTIP_DIRECTIVES, IGX_TREE_DIRECTIVES, IGX_TREE_GRID_DIRECTIVES, ITreeGridAggregation, IgSizeDirective, IgcFormControlDirective, IgcFormsModule, IgxAccordionComponent, IgxAccordionModule, IgxActionStripComponent, IgxActionStripMenuItemDirective, IgxActionStripModule, IgxAdvancedFilteringDialogComponent, IgxAppendDropStrategy, IgxAutocompleteDirective, IgxAutocompleteModule, IgxAvatarComponent, IgxAvatarModule, IgxAvatarSize, IgxAvatarType, IgxBadgeComponent, IgxBadgeModule, IgxBadgeType, IgxBannerActionsDirective, IgxBannerComponent, IgxBannerModule, IgxBaseExporter, IgxBaseTransactionService, IgxBooleanFilteringOperand, IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent, IgxBottomNavModule, IgxButtonDirective, IgxButtonGroupComponent, IgxButtonGroupModule, IgxButtonModule, IgxCSVTextDirective, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarModule, IgxCalendarMonthDirective, IgxCalendarScrollPageDirective, IgxCalendarSubheaderTemplateDirective, IgxCalendarView, IgxCalendarViewBaseDirective, IgxCalendarYearDirective, IgxCardActionsComponent, IgxCardActionsLayout, IgxCardComponent, IgxCardContentDirective, IgxCardFooterDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective, IgxCardModule, IgxCardThumbnailDirective, IgxCarouselComponent, IgxCarouselIndicatorDirective, IgxCarouselModule, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective, IgxCellEditorTemplateDirective, IgxCellFooterTemplateDirective, IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxCellValidationErrorDirective, IgxChatAttachmentContextDirective, IgxChatComponent, IgxChatInputContextDirective, IgxChatMessageContextDirective, IgxCheckboxComponent, IgxCheckboxModule, IgxChildGridRowComponent, IgxChipComponent, IgxChipTypeVariant, IgxChipsAreaComponent, IgxChipsModule, IgxCircularProgressBarComponent, IgxCollapsibleIndicatorTemplateDirective, IgxColumPatternValidatorDirective, IgxColumnActionsBaseDirective, IgxColumnActionsComponent, IgxColumnComponent, IgxColumnEmailValidatorDirective, IgxColumnGroupComponent, IgxColumnHidingDirective, IgxColumnLayoutComponent, IgxColumnMaxLengthValidatorDirective, IgxColumnMaxValidatorDirective, IgxColumnMinLengthValidatorDirective, IgxColumnMinValidatorDirective, IgxColumnPinningDirective, IgxColumnRequiredValidatorDirective, IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboComponent, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboModule, IgxComboToggleIconDirective, IgxCsvExporterOptions, IgxCsvExporterService, IgxDataLoadingTemplateDirective, IgxDataRecordSorting, IgxDateFilteringOperand, IgxDatePickerComponent, IgxDatePickerModule, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangePickerComponent, IgxDateRangePickerModule, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, IgxDateSummaryOperand, IgxDateTimeEditorDirective, IgxDateTimeEditorModule, IgxDateTimeFilteringOperand, IgxDaysViewComponent, IgxDefaultDropStrategy, IgxDialogActionsDirective, IgxDialogComponent, IgxDialogModule, IgxDialogTitleDirective, IgxDividerDirective, IgxDividerModule, IgxDividerType, IgxDragDirective, IgxDragDropModule, IgxDragHandleDirective, IgxDragIgnoreDirective, IgxDragIndicatorIconDirective, IgxDragLocation, IgxDropDirective, IgxDropDownComponent, IgxDropDownGroupComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxDropDownModule, IgxEmptyListTemplateDirective, IgxExcelExporterOptions, IgxExcelExporterService, IgxExcelStyleClearFiltersComponent, IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleDateExpressionComponent, IgxExcelStyleFilterOperationsTemplateDirective, IgxExcelStyleHeaderComponent, IgxExcelStyleHeaderIconDirective, IgxExcelStyleHidingComponent, IgxExcelStyleLoadingValuesTemplateDirective, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleSearchComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleSortingComponent, IgxExcelTextDirective, IgxExpansionPanelBodyComponent, IgxExpansionPanelComponent, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelIconDirective, IgxExpansionPanelModule, IgxExpansionPanelTitleDirective, IgxExporterOptionsBase, IgxFilterCellTemplateDirective, IgxFilterDirective, IgxFilterModule, IgxFilterOptions, IgxFilterPipe, IgxFilteringOperand, IgxFlatTransactionFactory, IgxFlexDirective, IgxFocusDirective, IgxFocusModule, IgxFocusTrapDirective, IgxFocusTrapModule, IgxForOfContext, IgxForOfDirective, IgxForOfModule, IgxGridActionButtonComponent, IgxGridActionsBaseDirective, IgxGridCell, IgxGridComponent, IgxGridDetailTemplateDirective, IgxGridEditingActionsComponent, IgxGridEmptyTemplateDirective, IgxGridExcelStyleFilteringComponent, IgxGridFooterComponent, IgxGridForOfContext, IgxGridForOfDirective, IgxGridHeaderComponent, IgxGridHeaderGroupComponent, IgxGridHeaderRowComponent, IgxGridLoadingTemplateDirective, IgxGridModule, IgxGridPinningActionsComponent, IgxGridRow, IgxGridStateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarDirective, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxGridTransaction, IgxGroupAreaDropDirective, IgxGroupByRow, IgxGroupByRowSelectorDirective, IgxGroupByRowTemplateDirective, IgxGroupedTreeGridSorting, IgxGrouping, IgxHeadSelectorDirective, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxHierarchicalGridComponent, IgxHierarchicalGridModule, IgxHierarchicalGridRow, IgxHierarchicalTransactionFactory, IgxHierarchicalTransactionService, IgxHintDirective, IgxIconButtonDirective, IgxIconComponent, IgxIconModule, IgxIconService, IgxInputDirective, IgxInputGroupComponent, IgxInputGroupEnum, IgxInputGroupModule, IgxInputState, IgxInsertDropStrategy, IgxItemListDirective, IgxLabelDirective, IgxLayoutDirective, IgxLayoutModule, IgxLinearProgressBarComponent, IgxListActionDirective, IgxListBaseDirective, IgxListComponent, IgxListItemComponent, IgxListItemLeftPanningTemplateDirective, IgxListItemRightPanningTemplateDirective, IgxListLineDirective, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListModule, IgxListPanState, IgxListThumbnailDirective, IgxMaskDirective, IgxMaskModule, IgxMonthPickerComponent, IgxMonthsViewComponent, IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective, IgxNavbarActionDirective, IgxNavbarComponent, IgxNavbarModule, IgxNavbarTitleDirective, IgxNavigationCloseDirective, IgxNavigationDrawerComponent, IgxNavigationDrawerModule, IgxNavigationService, IgxNavigationToggleDirective, IgxNumberFilteringOperand, IgxNumberSummaryOperand, IgxOverlayOutletDirective, IgxOverlayService, IgxPageNavigationComponent, IgxPageSizeSelectorComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, IgxPaginatorDirective, IgxPaginatorModule, IgxPickerActionsDirective, IgxPickerClearComponent, IgxPickerToggleComponent, IgxPivotAggregate, IgxPivotDataSelectorComponent, IgxPivotDateAggregate, IgxPivotDateDimension, IgxPivotGridComponent, IgxPivotGridModule, IgxPivotGridRow, IgxPivotNumericAggregate, IgxPivotRowDimensionHeaderTemplateDirective, IgxPivotTimeAggregate, IgxPivotValueChipTemplateDirective, IgxPrefixDirective, IgxPrependDropStrategy, IgxProgressBarGradientDirective, IgxProgressBarModule, IgxProgressBarTextTemplateDirective, IgxProgressType, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderModule, IgxQueryBuilderSearchValueTemplateDirective, IgxRadioComponent, IgxRadioGroupDirective, IgxRadioModule, IgxRippleDirective, IgxRippleModule, IgxRowAddTextDirective, IgxRowCollapsedIndicatorDirective, IgxRowDirective, IgxRowDragGhostDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTextDirective, IgxRowExpandedIndicatorDirective, IgxRowIslandComponent, IgxRowSelectorDirective, IgxScrollInertiaDirective, IgxScrollInertiaModule, IgxSelectComponent, IgxSelectFooterDirective, IgxSelectGroupComponent, IgxSelectHeaderDirective, IgxSelectItemComponent, IgxSelectModule, IgxSelectToggleIconDirective, IgxSimpleComboComponent, IgxSimpleComboModule, IgxSlideComponent, IgxSliderComponent, IgxSliderModule, IgxSliderType, IgxSnackbarComponent, IgxSnackbarModule, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxSorting, IgxSplitBarComponent, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, IgxStepActiveIndicatorDirective, IgxStepCompletedIndicatorDirective, IgxStepComponent, IgxStepContentDirective, IgxStepIndicatorDirective, IgxStepInvalidIndicatorDirective, IgxStepSubtitleDirective, IgxStepTitleDirective, IgxStepType, IgxStepperComponent, IgxStepperModule, IgxStepperOrientation, IgxStepperTitlePosition, IgxStringFilteringOperand, IgxSuffixDirective, IgxSummaryOperand, IgxSummaryRow, IgxSummaryTemplateDirective, IgxSwitchComponent, IgxSwitchModule, IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderIconDirective, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsAlignment, IgxTabsComponent, IgxTabsModule, IgxTemplateOutletDirective, IgxTextAlign, IgxTextHighlightDirective, IgxTextHighlightModule, IgxTextHighlightService, IgxTextSelectionDirective, IgxTextSelectionModule, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IgxTickLabelTemplateDirective, IgxTimeFilteringOperand, IgxTimeItemDirective, IgxTimePickerComponent, IgxTimePickerModule, IgxTimeSummaryOperand, IgxToastComponent, IgxToastModule, IgxToggleActionDirective, IgxToggleDirective, IgxToggleModule, IgxTooltipDirective, IgxTooltipModule, IgxTooltipTargetDirective, IgxTransactionService, IgxTreeComponent, IgxTreeExpandIndicatorDirective, IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent, IgxTreeGridGroupingPipe, IgxTreeGridModule, IgxTreeGridRow, IgxTreeModule, IgxTreeNodeComponent, IgxTreeNodeLinkDirective, IgxTreeSelectionType, IgxYearsViewComponent, IndigoIcons, InputResourceStringsEN, LabelPosition, ListResourceStringsEN, NoOpScrollStrategy, NoopFilteringStrategy, NoopPivotDimensionsStrategy, NoopSortingStrategy, PaginatorResourceStringsEN, PagingError, PickerInteractionMode, PivotColumnDimensionsStrategy, PivotDimensionType, PivotRowDimensionsStrategy, PivotRowLayoutType, PivotSummaryPosition, Point, QueryBuilderResourceStringsEN, RadioGroupAlignment, RelativePosition, RelativePositionStrategy, RowPinningPosition, ScrollStrategy, Size, SliderHandle, SortingDirection, SplitterType, THEME_TOKEN, ThemeToken, TickLabelsOrientation, TicksOrientation, TimePickerResourceStringsEN, TooltipPositionStrategy, TransactionEventOrigin, TransactionType, TreeGridFilteringStrategy, TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy, TreeResourceStringsEN, VerticalAlignment, VerticalAnimationType, WEEKDAYS, changei18n, comboIgnoreDiacriticsFilter, igxI18N, isLeap, monthRange, range, weekDay };
 //# sourceMappingURL=igniteui-angular.mjs.map