igniteui-angular 20.0.3 → 20.0.5

package/fesm2022/igniteui-angular.mjs

@@ -1,10 +1,10 @@
 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, SecurityContext, DestroyRef, Component, ContentChild, ContentChildren, RendererStyleFlags2, Pipe, ViewChild, contentChildren, QueryList, signal, effect, LOCALE_ID, forwardRef, Host, ViewChildren, TemplateRef, ChangeDetectionStrategy, SimpleChange, ChangeDetectorRef, NgZone, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, reflectComponentType, NgModule } 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, contentChildren, QueryList, signal, effect, LOCALE_ID, forwardRef, Host, ViewChildren, TemplateRef, ChangeDetectionStrategy, SimpleChange, ChangeDetectorRef, SkipSelf, CUSTOM_ELEMENTS_SCHEMA, reflectComponentType, NgModule } from '@angular/core';
 import * as i4 from '@angular/forms';
 import { NgModel, NgControl, FormControlName, NG_VALUE_ACCESSOR, Validators, NG_VALIDATORS, FormGroup, FormsModule, RequiredValidator, MinValidator, MaxValidator, EmailValidator, MinLengthValidator, MaxLengthValidator, PatternValidator, FormControl, ReactiveFormsModule } from '@angular/forms';
-import { Observable, NEVER, Subject, fromEvent, BehaviorSubject, interval, animationFrameScheduler, noop, takeUntil as takeUntil$1, merge, Subscription, timer, sampleTime, filter as filter$1, pipe } from 'rxjs';
+import { Observable, NEVER, Subject, fromEvent, BehaviorSubject, interval, animationFrameScheduler, noop, takeUntil as takeUntil$1, merge, Subscription, timer, sampleTime, filter as filter$1, pipe, take as take$1 } from 'rxjs';
 import { takeUntil, filter, throttle, throttleTime, first as first$2, take, debounce, tap, switchMap, skipLast, debounceTime, map, shareReplay, takeWhile, timeout, pluck } from 'rxjs/operators';
-import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, FormatWidth, getLocaleDateFormat, formatPercent, formatNumber, getLocaleCurrencyCode, DatePipe, getLocaleDateTimeFormat, NgTemplateOutlet, NgClass, TitleCasePipe, getLocaleFirstDayOfWeek, NgStyle, getLocaleCurrencySymbol, formatCurrency as formatCurrency$1, getLocaleNumberFormat, NumberFormatStyle, DecimalPipe, PercentPipe, getCurrencySymbol, AsyncPipe } from '@angular/common';
+import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, FormatWidth, getLocaleDateFormat, formatPercent, formatNumber, getLocaleCurrencyCode, DatePipe, getLocaleDateTimeFormat, NgTemplateOutlet, NgClass, DOCUMENT as DOCUMENT$1, TitleCasePipe, getLocaleFirstDayOfWeek, NgStyle, getLocaleCurrencySymbol, formatCurrency as formatCurrency$1, getLocaleNumberFormat, NumberFormatStyle, DecimalPipe, PercentPipe, getCurrencySymbol, AsyncPipe } from '@angular/common';
 import { mergeWith, isEqual as isEqual$1 } from 'lodash-es';
 import { strToU8, zip } from 'fflate';
 import { scaleOutVerTop, scaleInVerTop, AnimationUtil, fadeOut, fadeIn, slideOutTop, slideInTop, slideOutBottom, slideInBottom, scaleOutHorRight, scaleInHorRight, scaleOutHorLeft, scaleInHorLeft, scaleOutVerBottom, scaleInVerBottom, scaleInCenter, growVerOut, growVerIn, slideInLeft } from 'igniteui-angular/animations';
@@ -1020,9 +1020,10 @@ class IgxSorting {
             fullResult.data.push(groupRow);
             fullResult.metadata.push(null);
             if (level < expressions.length - 1) {
-                recursiveResult = this.groupDataRecursive(group, state, level + 1, groupRow, expanded ? metadata : [], grid, groupsRecords, fullResult);
+                recursiveResult = this.groupDataRecursive(group, state, level + 1, groupRow, [], grid, groupsRecords, fullResult);
                 if (expanded) {
-                    result = result.concat(recursiveResult);
+                    result = result.concat(recursiveResult.data);
+                    metadata = metadata.concat(recursiveResult.metadata);
                 }
             }
             else {
@@ -1031,13 +1032,13 @@ class IgxSorting {
                     fullResult.data.push(groupItem);
                 }
                 if (expanded) {
-                    metadata.push(...fullResult.metadata.slice(fullResult.metadata.length - group.length));
-                    result.push(...fullResult.data.slice(fullResult.data.length - group.length));
+                    metadata = metadata.concat(fullResult.metadata.slice(fullResult.metadata.length - group.length));
+                    result = result.concat(fullResult.data.slice(fullResult.data.length - group.length));
                 }
             }
             i += group.length;
         }
-        return result;
+        return { data: result, metadata };
     }
     /**
    * Retrieves the value of the specified field from the given object, considering date and time data types.
@@ -1152,8 +1153,8 @@ class IgxGrouping extends IgxSorting {
         const grouping = this.groupDataRecursive(data, state, 0, null, metadata, grid, groupsRecords, fullResult);
         grid?.groupingPerformedSubject.next();
         return {
-            data: grouping,
-            metadata
+            data: grouping.data,
+            metadata: grouping.metadata
         };
     }
 }
@@ -15584,6 +15585,9 @@ class VirtualHelperBaseDirective {
         this.destroy$ = new Subject();
         this._afterViewInit = false;
         this._detached = false;
+        this.renderer = inject(Renderer2);
+        this.platformId = inject(PLATFORM_ID);
+        this.ngZone = inject(NgZone);
         this._scrollNativeSize = this.calculateScrollNativeSize();
     }
     onScroll(event) {
@@ -15639,6 +15643,30 @@ class VirtualHelperBaseDirective {
     get isAttachedToDom() {
         return this.document.body.contains(this.nativeElement);
     }
+    toggleClass(element, className, shouldHaveClass) {
+        if (shouldHaveClass) {
+            this.renderer.addClass(element, className);
+        }
+        else {
+            this.renderer.removeClass(element, className);
+        }
+    }
+    updateScrollbarClass() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        this.ngZone.runOutsideAngular(() => {
+            requestAnimationFrame(() => {
+                const el = this.nativeElement;
+                const hasScrollbar = el.scrollHeight > el.clientHeight;
+                const prevSibling = el.previousElementSibling;
+                const scrollbarClass = 'igx-display-container--scrollbar';
+                if (prevSibling?.tagName.toLowerCase() === 'igx-display-container') {
+                    this.toggleClass(prevSibling, scrollbarClass, hasScrollbar);
+                }
+            });
+        });
+    }
     handleMutations(event) {
         const hasSize = !(event[0].contentRect.height === 0 && event[0].contentRect.width === 0);
         if (!hasSize && !this.isAttachedToDom) {
@@ -15649,9 +15677,10 @@ class VirtualHelperBaseDirective {
             // attached back now.
             this.restoreScroll();
         }
+        this.updateScrollbarClass();
     }
     restoreScroll() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: VirtualHelperBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: VirtualHelperBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DOCUMENT$1 }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: VirtualHelperBaseDirective, isStandalone: true, selector: "[igxVirtualHelperBase]", host: { listeners: { "scroll": "onScroll($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: VirtualHelperBaseDirective, decorators: [{
@@ -15662,7 +15691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [DOCUMENT]
+                    args: [DOCUMENT$1]
                 }] }, { type: PlatformUtil }], propDecorators: { onScroll: [{
                 type: HostListener,
                 args: ['scroll', ['$event']]
@@ -15679,7 +15708,7 @@ class HVirtualHelperComponent extends VirtualHelperBaseDirective {
     restoreScroll() {
         this.nativeElement.scrollLeft = this.scrollAmount;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: HVirtualHelperComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: HVirtualHelperComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DOCUMENT$1 }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: HVirtualHelperComponent, isStandalone: true, selector: "igx-horizontal-virtual-helper", inputs: { width: "width" }, host: { properties: { "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "_vcr", first: true, predicate: ["horizontal_container"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: '<div #horizontal_container class="igx-vhelper__placeholder-content" [style.width.px]="size"></div>', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: HVirtualHelperComponent, decorators: [{
@@ -15691,7 +15720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [DOCUMENT]
+                    args: [DOCUMENT$1]
                 }] }, { type: PlatformUtil }], propDecorators: { _vcr: [{
                 type: ViewChild,
                 args: ['horizontal_container', { read: ViewContainerRef, static: true }]
@@ -15714,7 +15743,7 @@ class VirtualHelperComponent extends VirtualHelperBaseDirective {
     restoreScroll() {
         this.nativeElement.scrollTop = this.scrollAmount;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: VirtualHelperComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: VirtualHelperComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: DOCUMENT$1 }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: VirtualHelperComponent, isStandalone: true, selector: "igx-virtual-helper", inputs: { itemsLength: "itemsLength" }, host: { properties: { "scrollTop": "this.scrollTop", "class": "this.cssClasses" } }, viewQueries: [{ propertyName: "_vcr", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: '<div #container class="igx-vhelper__placeholder-content" [style.height.px]="size"></div>', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: VirtualHelperComponent, decorators: [{
@@ -15726,7 +15755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
-                    args: [DOCUMENT]
+                    args: [DOCUMENT$1]
                 }] }, { type: PlatformUtil }], propDecorators: { scrollTop: [{
                 type: HostBinding,
                 args: ['scrollTop']
@@ -26778,6 +26807,26 @@ class PivotUtil {
                 return IgxPivotAggregate.aggregators();
         }
     }
+    static updateColumnTypeByAggregator(columns, value, isSingleValue) {
+        const targetColumnType = PivotUtil.getColumnDataTypeForValue(value);
+        columns.forEach(column => {
+            if ((column.field?.includes(value.member) || isSingleValue) && targetColumnType !== undefined) {
+                column.dataType = targetColumnType;
+            }
+        });
+    }
+    static getColumnDataTypeForValue(value) {
+        const isCountAggregator = value.aggregate.aggregator?.name?.toLowerCase() === 'count' || value.aggregate.aggregatorName?.toLowerCase() === 'count';
+        if ((value.dataType === GridColumnDataType.Currency || value.dataType === GridColumnDataType.Percent) && isCountAggregator) {
+            return GridColumnDataType.Number;
+        }
+        else if (value.dataType === GridColumnDataType.Currency && !isCountAggregator) {
+            return GridColumnDataType.Currency;
+        }
+        else if (value.dataType === GridColumnDataType.Percent && !isCountAggregator) {
+            return GridColumnDataType.Percent;
+        }
+    }
 }
 
 class IgxGridSelectionService {
@@ -34746,8 +34795,14 @@ class IgxCarouselComponentBase {
         this.vertical = false;
     }
     ngOnDestroy() {
-        this.enterAnimationPlayer?.destroy();
-        this.leaveAnimationPlayer?.destroy();
+        if (this.enterAnimationPlayer) {
+            this.enterAnimationPlayer.destroy();
+            this.enterAnimationPlayer = null;
+        }
+        if (this.leaveAnimationPlayer) {
+            this.leaveAnimationPlayer.destroy();
+            this.leaveAnimationPlayer = null;
+        }
     }
     /** @hidden */
     triggerAnimations() {
@@ -47133,19 +47188,20 @@ class IgxSelectComponent extends IgxDropDownComponent {
     }
     manageRequiredAsterisk() {
         const hasRequiredHTMLAttribute = this.elementRef.nativeElement.hasAttribute('required');
+        let isRequired = false;
         if (this.ngControl && this.ngControl.control.validator) {
-            // Run the validation with empty object to check if required is enabled.
             const error = this.ngControl.control.validator({});
-            this.inputGroup.isRequired = error && error.required;
-            this.cdr.markForCheck();
-            // If validator is dynamically cleared and no required HTML attribute is set,
-            // reset label's required class(asterisk) and IgxInputState #6896
+            isRequired = !!(error && error.required);
+        }
+        this.inputGroup.isRequired = isRequired;
+        if (this.input?.nativeElement) {
+            this.input.nativeElement.setAttribute('aria-required', isRequired.toString());
         }
-        else if (this.inputGroup.isRequired && this.ngControl && !this.ngControl.control.validator && !hasRequiredHTMLAttribute) {
+        // Handle validator removal case
+        if (!isRequired && !hasRequiredHTMLAttribute) {
             this.input.valid = IgxInputState.INITIAL;
-            this.inputGroup.isRequired = false;
-            this.cdr.markForCheck();
         }
+        this.cdr.markForCheck();
     }
     setSelection(item) {
         if (item && item.value !== undefined && item.value !== null) {
@@ -62895,6 +62951,7 @@ class IgxGridValidationService {
                 owner: this.grid
             };
             this.grid.formGroupCreated.emit(args);
+            formGroup.patchValue(data);
             this.add(rowId, formGroup);
         }
         else {
@@ -66802,7 +66859,7 @@ class IgxGridBaseDirective {
             this.notifyChanges(true);
         });
         // notifier for column autosize requests
-        this._autoSizeColumnsNotify.pipe(throttleTime(0, animationFrameScheduler, { leading: false, trailing: true }), destructor)
+        this._autoSizeColumnsNotify.pipe(throttleTime(0, this.platform.isBrowser ? animationFrameScheduler : undefined, { leading: false, trailing: true }), destructor)
             .subscribe(() => {
             this.autoSizeColumnsInView();
             this._firstAutoResize = false;
@@ -68369,7 +68426,7 @@ class IgxGridBaseDirective {
         let sum = 0;
         for (const col of fc) {
             if (col.level === 0) {
-                sum += parseInt(col.calcWidth, 10);
+                sum += parseFloat(col.calcWidth);
             }
         }
         if (this.isPinningToStart) {
@@ -68923,7 +68980,7 @@ class IgxGridBaseDirective {
      * @hidden @internal
      */
     trackColumnChanges(_index, col) {
-        return col.field + col._calcWidth;
+        return col.field + col._calcWidth.toString();
     }
     /**
      * @hidden
@@ -69039,7 +69096,7 @@ class IgxGridBaseDirective {
      * @hidden @internal
      */
     hasHorizontalScroll() {
-        return this.totalWidth - this.unpinnedWidth > 0 && this.width !== null;
+        return Math.round(this.totalWidth - this.unpinnedWidth) > 0 && this.width !== null;
     }
     /**
      * @hidden @internal
@@ -69075,6 +69132,9 @@ class IgxGridBaseDirective {
     // TODO: do not remove this, as it is used in rowEditTemplate, but mark is as internal and hidden
     /* blazorCSSuppress */
     endEdit(commit = true, event) {
+        if (!this.crudService.cellInEditMode && !this.crudService.rowInEditMode) {
+            return;
+        }
         const document = this.nativeElement?.getRootNode();
         const focusWithin = this.nativeElement?.contains(document.activeElement);
         const success = this.crudService.endEdit(commit, event);
@@ -73399,6 +73459,10 @@ class IgxGridCellComponent {
                 this.highlight.lastSearchInfo.caseSensitive = this.grid.lastSearchInfo.caseSensitive;
                 this.highlight.lastSearchInfo.exactMatch = this.grid.lastSearchInfo.exactMatch;
             }
+            const isInEdit = this.grid.rowEditable ? this.row.inEditMode : this.editMode;
+            if (this.formControl && this.formControl.value !== changes.value.currentValue && !isInEdit) {
+                this.formControl.setValue(changes.value.currentValue);
+            }
         }
     }
     /**
@@ -73848,11 +73912,11 @@ class IgxGridExpandableCellComponent extends IgxGridCellComponent {
         return !this.editMode && (!this.intRow.pinned || isGhost);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxGridExpandableCellComponent, deps: [{ token: IgxGridSelectionService }, { token: IGX_GRID_BASE }, { token: IgxOverlayService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: HammerGesturesManager }, { token: DOCUMENT }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxGridExpandableCellComponent, isStandalone: true, selector: "igx-expandable-grid-cell", inputs: { expanded: "expanded" }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, read: ElementRef }, { propertyName: "indentationDiv", first: true, predicate: ["indentationDiv"], descendants: true, read: ElementRef }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    @if (displayPinnedChip) {\n        <igx-chip class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [style.--ig-size]=\"1\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"formatter ? (value | columnFormatter:formatter:rowData)\n                : column.dataType === 'number'\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\">\n            {{ formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value}}</div>\n    }\n\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n                (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n                (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?\n                (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n                (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\">\n            {{ value ? value : (column.header || column.field) }}\n        </div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group [style.--ig-size]=\"1\" >\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [weekStart]=\"column.pipeArgs.weekStart\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n@if (showExpanderIndicator) {\n    <div #indicator\n         class=\"igx-grid__tree-grouping-indicator\"\n         (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n         <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit:  row }\">\n        </ng-container>\n    </div>\n}\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</ng-container>\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultExpandedTemplate>\n        <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n        <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultError>\n    @if (formGroup?.get(column?.field).errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxGridExpandableCellComponent, isStandalone: true, selector: "igx-expandable-grid-cell", inputs: { expanded: "expanded" }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, read: ElementRef }, { propertyName: "indentationDiv", first: true, predicate: ["indentationDiv"], descendants: true, read: ElementRef }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    @if (displayPinnedChip) {\n        <igx-chip class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [style.--ig-size]=\"1\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [class.igx-grid__td--number]=\"column.dataType === 'number' || column.dataType === 'percent' || column.dataType === 'currency'\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"formatter ? (value | columnFormatter:formatter:rowData)\n                : column.dataType === 'number'\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\">\n            {{ formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value}}</div>\n    }\n\n    @if (column.dataType === 'boolean' && !this.formatter) {\n    <div [class.igx-grid__td--bool]=\"column.dataType === 'boolean'\">\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    </div>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n                (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n                (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?\n                (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n                (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\">\n            {{ value ? value : (column.header || column.field) }}\n        </div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group [style.--ig-size]=\"1\" >\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [weekStart]=\"column.pipeArgs.weekStart\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n@if (showExpanderIndicator) {\n    <div #indicator\n         class=\"igx-grid__tree-grouping-indicator\"\n         (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n         <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit:  row }\">\n        </ng-container>\n    </div>\n}\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</ng-container>\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultExpandedTemplate>\n        <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n        <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultError>\n    @if (formGroup?.get(column?.field).errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "showWeekNumbers", "formatter", "headerOrientation", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "headerOrientation", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxGridExpandableCellComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-expandable-grid-cell', providers: [HammerGesturesManager], imports: [IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxCheckboxComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe], template: "<ng-template #defaultPinnedIndicator>\n    @if (displayPinnedChip) {\n        <igx-chip class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [style.--ig-size]=\"1\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"formatter ? (value | columnFormatter:formatter:rowData)\n                : column.dataType === 'number'\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\">\n            {{ formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value}}</div>\n    }\n\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n                (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n                (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?\n                (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n                (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\">\n            {{ value ? value : (column.header || column.field) }}\n        </div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group [style.--ig-size]=\"1\" >\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [weekStart]=\"column.pipeArgs.weekStart\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n@if (showExpanderIndicator) {\n    <div #indicator\n         class=\"igx-grid__tree-grouping-indicator\"\n         (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n         <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit:  row }\">\n        </ng-container>\n    </div>\n}\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</ng-container>\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultExpandedTemplate>\n        <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n        <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultError>\n    @if (formGroup?.get(column?.field).errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-expandable-grid-cell', providers: [HammerGesturesManager], imports: [IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxCheckboxComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe], template: "<ng-template #defaultPinnedIndicator>\n    @if (displayPinnedChip) {\n        <igx-chip class=\"igx-grid__td--pinned-chip\" [disabled]=\"true\" [style.--ig-size]=\"1\">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [class.igx-grid__td--number]=\"column.dataType === 'number' || column.dataType === 'percent' || column.dataType === 'currency'\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"formatter ? (value | columnFormatter:formatter:rowData)\n                : column.dataType === 'number'\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\">\n            {{ formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value}}</div>\n    }\n\n    @if (column.dataType === 'boolean' && !this.formatter) {\n    <div [class.igx-grid__td--bool]=\"column.dataType === 'boolean'\">\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    </div>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n                (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n                (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'?\n                (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n                (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\">\n            {{ value ? value : (column.header || column.field) }}\n        </div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group [style.--ig-size]=\"1\" >\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [weekStart]=\"column.pipeArgs.weekStart\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [style.--ig-size]=\"1\" [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n@if (showExpanderIndicator) {\n    <div #indicator\n         class=\"igx-grid__tree-grouping-indicator\"\n         (click)=\"toggle($event)\" (focus)=\"onIndicatorFocus()\">\n         <ng-container *ngTemplateOutlet=\"iconTemplate; context: { $implicit:  row }\">\n        </ng-container>\n    </div>\n}\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\">\n</ng-container>\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultExpandedTemplate>\n        <igx-icon family=\"default\" name=\"tree_collapse\"></igx-icon>\n</ng-template>\n<ng-template #defaultCollapsedTemplate>\n        <igx-icon family=\"default\" name=\"tree_expand\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultError>\n    @if (formGroup?.get(column?.field).errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (formGroup?.get(column?.field).errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: IgxGridSelectionService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [IGX_GRID_BASE]
@@ -75827,6 +75891,8 @@ class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
     onAggregationChange(event) {
         if (!this.isSelected(event.newSelection.value)) {
             this.value.aggregate = event.newSelection.value;
+            const isSingleValue = this.grid.values.length === 1;
+            PivotUtil.updateColumnTypeByAggregator(this.grid.columns, this.value, isSingleValue);
             this.grid.pipeTrigger++;
         }
     }
@@ -77657,8 +77723,8 @@ class IgxPivotRowComponent extends IgxRowDirective {
             keyValueMap.set(dim.memberName, path.shift());
         }
         let pivotValue;
-        if (this.grid.hasMultipleValues) {
-            pivotValue = this.grid.values.find(x => x.member === path.shift());
+        if (this.grid.hasMultipleValues && path.length) {
+            pivotValue = this.grid.values.find(x => x.member === path[0]);
         }
         else {
             pivotValue = this.grid.values ? this.grid.values[0] : undefined;
@@ -79647,11 +79713,15 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
         if (fields.size === 0) {
             this.values.forEach((value) => {
                 const ref = createComponent(IgxColumnComponent, { environmentInjector: this.envInjector, elementInjector: this.injector });
+                let columnDataType = value.dataType || this.resolveDataTypes(data.length ? data[0][value.member] : null);
+                if (value.aggregate?.key?.toLowerCase() === 'count' && (columnDataType === GridColumnDataType.Currency || columnDataType == GridColumnDataType.Percent)) {
+                    columnDataType = GridColumnDataType.Number;
+                }
                 ref.instance.header = value.displayName;
                 ref.instance.field = value.member;
                 ref.instance.parent = parent;
                 ref.instance.sortable = true;
-                ref.instance.dataType = value.dataType || this.resolveDataTypes(data.length ? data[0][value.member] : null);
+                ref.instance.dataType = columnDataType;
                 ref.instance.formatter = value.formatter;
                 columns.push(ref.instance);
             });
@@ -79665,9 +79735,16 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
             }
             if (shouldGenerate && (value.children == null || value.children.length === 0 || value.children.size === 0)) {
                 const col = this.createColumnForDimension(value, data, parent, this.hasMultipleValues);
+                if (!this.hasMultipleValues && this.values.length > 0) {
+                    PivotUtil.updateColumnTypeByAggregator([col], this.values[0], true);
+                }
                 columns.push(col);
                 if (this.hasMultipleValues) {
                     const measureChildren = this.getMeasureChildren(data, col, false, value.dimension.width);
+                    measureChildren.forEach((child, index) => {
+                        const pivotValue = this.values[index];
+                        PivotUtil.updateColumnTypeByAggregator([child], pivotValue, this.values.length === 1);
+                    });
                     col.children.reset(measureChildren);
                     columns = columns.concat(measureChildren);
                 }
@@ -82406,6 +82483,8 @@ class IgxPivotDataSelectorComponent {
     onAggregationChange(event) {
         if (!this.isSelected(event.newSelection.value)) {
             this.value.aggregate = event.newSelection.value;
+            const isSingleValue = this.grid.values.length === 1;
+            PivotUtil.updateColumnTypeByAggregator(this.grid.columns, this.value, isSingleValue);
             this.grid.pipeTrigger++;
             this.grid.cdr.markForCheck();
         }
@@ -86178,7 +86257,7 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
             .subscribe(() => {
             this.updateChildren();
             // update existing grids since their child ri have been changed.
-            this.getGridsForIsland(this.key).forEach(grid => {
+            this.rowIslandAPI.getChildGrids(false).forEach(grid => {
                 grid.onRowIslandChange(this.children);
             });
         });
@@ -87629,7 +87708,9 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
                 }
             ];
             entities[0].childEntities = this.childLayoutList.reduce((acc, rowIsland) => {
-                return acc.concat(this.generateChildEntity(rowIsland, this.data[0][rowIsland.key][0]));
+                const childFirstRowData = this.data?.length > 0 && this.data[0][rowIsland.key]?.length > 0 ?
+                    this.data[0][rowIsland.key][0] : null;
+                return acc.concat(this.generateChildEntity(rowIsland, childFirstRowData));
             }, []);
         }
         return entities;
@@ -87658,7 +87739,9 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
             if (!firstRowData) {
                 return null;
             }
-            return acc.concat(this.generateChildEntity(childRowIsland, firstRowData[childRowIsland.key][0]));
+            const childFirstRowData = firstRowData.length > 0 && firstRowData[childRowIsland.key]?.length > 0 ?
+                firstRowData[childRowIsland.key][0] : null;
+            return acc.concat(this.generateChildEntity(childRowIsland, childFirstRowData));
         }, []);
         if (rowIslandChildEntities?.length > 0) {
             childEntities = rowIslandChildEntities;
@@ -92276,6 +92359,13 @@ class IgxSplitterPaneComponent {
             this.owner.panes.notifyOnChanges();
         }
     }
+    /** @hidden @internal */
+    get order() {
+        return this._order();
+    }
+    set order(val) {
+        this._order.set(val);
+    }
     /**
      * Gets/Sets the size of the current pane.
      *  * @example
@@ -92346,6 +92436,7 @@ class IgxSplitterPaneComponent {
     }
     constructor(el) {
         this.el = el;
+        this._order = signal(null);
         /**
          * @hidden @internal
          * Gets/Sets the 'display' property of the current pane.
@@ -92515,9 +92606,10 @@ class IgxSplitterComponent {
     get orientation() {
         return this.type === SplitterType.Horizontal ? 'horizontal' : 'vertical';
     }
-    constructor(document, elementRef) {
+    constructor(document, elementRef, zone) {
         this.document = document;
         this.elementRef = elementRef;
+        this.zone = zone;
         /**
         * @hidden
         * @internal
@@ -92604,7 +92696,9 @@ class IgxSplitterComponent {
     }
     /** @hidden @internal */
     ngAfterContentInit() {
-        this.initPanes();
+        this.zone.onStable.pipe(take$1(1)).subscribe(() => {
+            this.initPanes();
+        });
         this.panes.changes.subscribe(() => {
             this.initPanes();
         });
@@ -92753,7 +92847,7 @@ class IgxSplitterComponent {
         }
         return [this.initialPaneSize - delta, this.initialSiblingSize + delta];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxSplitterComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxSplitterComponent, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: IgxSplitterComponent, isStandalone: true, selector: "igx-splitter", inputs: { type: "type", nonCollapsible: ["nonCollapsible", "nonCollapsible", booleanAttribute] }, outputs: { resizeStart: "resizeStart", resizing: "resizing", resizeEnd: "resizeEnd" }, host: { properties: { "class.igx-splitter": "this.cssClass", "style.overflow": "this.overflow", "style.display": "this.display", "attr.aria-orientation": "this.orientation", "style.flex-direction": "this.direction" } }, queries: [{ propertyName: "panes", predicate: IgxSplitterPaneComponent, read: IgxSplitterPaneComponent }], ngImport: i0, template: "<ng-content select=\"igx-splitter-pane\"></ng-content>\n@for (pane of panes; track pane; let last = $last; let index = $index) {\n    @if (!last) {\n        <igx-splitter-bar [order]=\"pane.order + 1\" role=\"separator\"\n            [type]=\"type\"\n            [pane]=\"pane\"\n            [siblings]=\"getPaneSiblingsByOrder(pane.order + 1, index)\"\n            (moveStart)=\"onMoveStart($event)\"\n            (moving)=\"onMoving($event)\"\n            (movingEnd)=\"onMoveEnd($event)\"\n            [nonCollapsible]=\"nonCollapsible\">\n        </igx-splitter-bar>\n    }\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => IgxSplitBarComponent), selector: "igx-splitter-bar", inputs: ["nonCollapsible", "type", "order", "pane", "siblings"], outputs: ["moveStart", "moving", "movingEnd"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: IgxSplitterComponent, decorators: [{
@@ -92762,7 +92856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }], propDecorators: { panes: [{
+                }] }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { panes: [{
                 type: ContentChildren,
                 args: [IgxSplitterPaneComponent, { read: IgxSplitterPaneComponent }]
             }], cssClass: [{
@@ -92845,7 +92939,7 @@ class IgxSplitBarComponent {
      * @hidden @internal
      */
     get prevButtonHidden() {
-        return this.siblings[0].collapsed && !this.siblings[1].collapsed;
+        return this.siblings[0]?.collapsed && !this.siblings[1]?.collapsed;
     }
     /**
      * @hidden @internal
@@ -92928,7 +93022,7 @@ class IgxSplitBarComponent {
      * @hidden @internal
      */
     get nextButtonHidden() {
-        return this.siblings[1].collapsed && !this.siblings[0].collapsed;
+        return this.siblings[1]?.collapsed && !this.siblings[0]?.collapsed;
     }
     /**
      * @hidden @internal
@@ -92964,7 +93058,7 @@ class IgxSplitBarComponent {
     }
     get resizeDisallowed() {
         const relatedTabs = this.siblings;
-        return !!relatedTabs.find(x => x.resizable === false || x.collapsed === true);
+        return !!relatedTabs.find(x => x?.resizable === false || x?.collapsed === true);
     }
     /**
      * @hidden @internal