igniteui-angular 21.0.3 → 21.1.0-alpha.1

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

@@ -8,9 +8,9 @@ import { IgxButtonDirective, IgxRippleDirective, IgxGridForOfDirective, IgxDragD
 import { __decorate } from 'tslib';
 import { Subject, fromEvent, interval, animationFrameScheduler } from 'rxjs';
 import { mergeWith, isEqual as isEqual$1 } from 'lodash-es';
-import { IgxSorting, DataUtil, FilteringExpressionsTree, FilteringLogic, GridColumnDataType, PlatformUtil, isDate, isEqual, DateTimeUtil, copyDescriptors, trackByIdentity, TransactionType, resolveNestedPath, columnFieldPath, DefaultSortingStrategy, isConstructor, ɵSize as _Size, ColumnPinningPosition, ExpressionsTreeUtil, IgxStringFilteringOperand, IgxDateTimeFilteringOperand, IgxTimeFilteringOperand, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxBooleanFilteringOperand, flatten, GridResourceStringsEN, getCurrentResourceStrings, QueryBuilderResourceStringsEN, AbsoluteScrollStrategy, ConnectedPositioningStrategy, IgxOverlayOutletDirective, IgxPickerToggleComponent, IgxPickerClearComponent, isTree, IgxOverlayService, VerticalAlignment, HorizontalAlignment, AutoPositionStrategy, cloneHierarchicalArray, SortingDirection, showMessage, IgxActionStripActionsToken, formatDate as formatDate$1, GridSummaryCalculationMode, cloneArray, cloneValue, recreateTreeFromFields, yieldingLoop, FilterUtil, TreeGridFilteringStrategy, getHierarchy, isHierarchyMatch, FilteringStrategy, NAVIGATION_KEYS, SUPPORTED_KEYS, HEADER_KEYS, HORIZONTAL_NAV_KEYS, ROW_EXPAND_KEYS, ROW_COLLAPSE_KEYS, ROW_ADD_KEYS, HammerGesturesManager, formatCurrency as formatCurrency$1, reverseMapper, mergeObjects } from 'igniteui-angular/core';
+import { IgxSorting, DataUtil, FilteringExpressionsTree, FilteringLogic, GridColumnDataType, PlatformUtil, isDate, isEqual, DateTimeUtil, copyDescriptors, trackByIdentity, TransactionType, resolveNestedPath, columnFieldPath, DefaultSortingStrategy, isConstructor, ɵSize as _Size, ColumnPinningPosition, ExpressionsTreeUtil, IgxStringFilteringOperand, IgxDateTimeFilteringOperand, IgxTimeFilteringOperand, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxBooleanFilteringOperand, flatten, onResourceChangeHandle, GridResourceStringsEN, getCurrentResourceStrings, QueryBuilderResourceStringsEN, AbsoluteScrollStrategy, ConnectedPositioningStrategy, IgxOverlayOutletDirective, I18N_FORMATTER, IgxPickerToggleComponent, IgxPickerClearComponent, isTree, IgxOverlayService, VerticalAlignment, HorizontalAlignment, AutoPositionStrategy, cloneHierarchicalArray, SortingDirection, showMessage, IgxActionStripActionsToken, GridSummaryCalculationMode, cloneArray, cloneValue, recreateTreeFromFields, yieldingLoop, FilterUtil, TreeGridFilteringStrategy, getHierarchy, isHierarchyMatch, FilteringStrategy, NAVIGATION_KEYS, SUPPORTED_KEYS, HEADER_KEYS, HORIZONTAL_NAV_KEYS, ROW_EXPAND_KEYS, ROW_COLLAPSE_KEYS, ROW_ADD_KEYS, HammerGesturesManager, IgxNumberFormatterPipe, IgxPercentFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe, reverseMapper, mergeObjects } from 'igniteui-angular/core';
 import { first as first$1, takeUntil, map, debounceTime, filter, switchMap, throttle, throttleTime, takeWhile } from 'rxjs/operators';
-import { NgClass, getLocaleFirstDayOfWeek, NgTemplateOutlet, formatPercent, formatNumber, formatCurrency, getLocaleCurrencyCode, formatDate, NgStyle, DatePipe, getLocaleDateFormat, FormatWidth, getLocaleDateTimeFormat, AsyncPipe, getLocaleCurrencySymbol, getCurrencySymbol, DecimalPipe, PercentPipe, CurrencyPipe } from '@angular/common';
+import { NgClass, NgTemplateOutlet, NgStyle, getLocaleDateFormat, FormatWidth, getLocaleDateTimeFormat, AsyncPipe } from '@angular/common';
 import { IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent } from 'igniteui-angular/query-builder';
 import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon';
 import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select';
@@ -26,6 +26,7 @@ import { IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips'
 import { useAnimation } from '@angular/animations';
 import { fadeIn, scaleInVerBottom, scaleInVerTop, fadeOut, scaleInCenter } from 'igniteui-angular/animations';
 import { IgxBadgeComponent } from 'igniteui-angular/badge';
+import { getDateFormatter } from 'igniteui-i18n-core';
 import { strToU8, zip } from 'fflate';
 
 /**
@@ -6458,14 +6459,17 @@ class IgxColumnComponent {
      * @internal
      */
     getConstrainedSizePx(newSize) {
-        if (this.maxWidth && newSize > this.maxWidthPx) {
+        if (this.maxWidth && newSize >= this.maxWidthPx) {
             this.widthConstrained = true;
             return this.maxWidthPx;
         }
-        else if (this.minWidth && newSize < this.userSetMinWidthPx) {
+        else if (this.minWidth && newSize <= this.userSetMinWidthPx) {
             this.widthConstrained = true;
             return this.userSetMinWidthPx;
         }
+        else if (!this.minWidth && (!this.widthSetByUser || this.width === 'fit-content') && !this.grid.columnWidthSetByUser && (!newSize || newSize <= this.grid.minColumnWidth)) {
+            return this.grid.minColumnWidth;
+        }
         else {
             this.widthConstrained = false;
             return newSize;
@@ -6489,12 +6493,12 @@ class IgxColumnComponent {
         else if (!colWidth || isAutoWidth && !this.autoSize) {
             // no width
             const currentCalcWidth = this.defaultWidth || this.grid.getPossibleColumnWidth();
-            this._calcWidth = this.getConstrainedSizePx(currentCalcWidth);
+            this._calcWidth = this.getConstrainedSizePx(parseFloat(currentCalcWidth));
         }
         else {
             let possibleColumnWidth = '';
             if (!this.widthSetByUser && this.userSetMinWidthPx && this.userSetMinWidthPx < this.grid.minColumnWidth) {
-                possibleColumnWidth = this.defaultWidth = this.grid.getPossibleColumnWidth(null, this.userSetMinWidthPx);
+                possibleColumnWidth = this.defaultWidth = this.grid.getPossibleColumnWidth();
             }
             else {
                 possibleColumnWidth = this.width;
@@ -7487,6 +7491,9 @@ class IgxAdvancedFilteringDialogComponent {
          */
         this.lastActiveNode = {};
         this.destroy$ = new Subject();
+        onResourceChangeHandle(this.destroy$, () => {
+            this.assignResourceStrings(false);
+        }, this);
     }
     /**
      * @hidden @internal
@@ -7630,12 +7637,12 @@ class IgxAdvancedFilteringDialogComponent {
             return entities;
         }
     }
-    assignResourceStrings() {
+    assignResourceStrings(init = true) {
         // If grid has custom resource strings set for the advanced filtering,
         // they are passed to the query builder resource strings.
         const gridRS = this.grid.resourceStrings;
         if (gridRS !== GridResourceStringsEN) {
-            const queryBuilderRS = getCurrentResourceStrings(QueryBuilderResourceStringsEN);
+            const queryBuilderRS = getCurrentResourceStrings(QueryBuilderResourceStringsEN, init);
             Object.keys(gridRS).forEach((prop) => {
                 const reg = /^igx_grid_(advanced_)?filter_(row_)?/;
                 if (!reg.test(prop)) {
@@ -7651,15 +7658,16 @@ class IgxAdvancedFilteringDialogComponent {
                     queryBuilderRS[generalProp] = gridRS[prop];
                 }
             });
+            this.queryBuilderResourceStrings = queryBuilderRS;
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxAdvancedFilteringDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxAdvancedFilteringDialogComponent, isStandalone: true, selector: "igx-advanced-filtering-dialog", inputs: { grid: "grid" }, host: { properties: { "style.display": "this.display" } }, viewQueries: [{ propertyName: "queryBuilder", first: true, predicate: ["queryBuilder"], descendants: true, read: IgxQueryBuilderComponent }], ngImport: i0, template: "@if (grid) {\n    <article class=\"igx-advanced-filter\" igxDrag [ghost]=\"false\" [dragTolerance]=\"0\"\n        (dragStart)=\"dragStart($event)\" (dragMove)=\"onDragMove($event)\" (keydown)=\"onKeyDown($event)\"\n        [ngClass]=\"{\n            'igx-advanced-filter': true,\n            'igx-advanced-filter--inline': inline\n        }\">\n        <igx-query-builder #queryBuilder\n            [locale]=\"grid.locale\"\n            [entities]=\"generateEntity()\"\n            [expressionTree]=\"this.grid.advancedFilteringExpressionsTree\">\n            <igx-query-builder-header\n                [title]=\"grid.resourceStrings.igx_grid_advanced_filter_title\"\n                igxDragHandle>\n            </igx-query-builder-header>\n        </igx-query-builder>\n\n        <footer class=\"igx-excel-filter__secondary-footer\">\n            <div class=\"igx-excel-filter__clear\">\n                <button igxButton=\"flat\" type=\"button\"\n                    (click)=\"onClearButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__cancel\">\n                <button igxButton=\"outlined\" type=\"button\" (click)=\"cancelChanges()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__apply\">\n                <button igxButton=\"contained\" type=\"button\"\n                    (click)=\"onApplyButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_apply }}\n                </button>\n            </div>\n        </footer>\n    </article>\n}\n", dependencies: [{ kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxQueryBuilderComponent, selector: "igx-query-builder", inputs: ["showEntityChangeDialog", "entities", "fields", "expressionTree", "locale", "resourceStrings", "disableEntityChange", "disableReturnFieldsChange"], outputs: ["expressionTreeChange"] }, { kind: "component", type: IgxQueryBuilderHeaderComponent, selector: "igx-query-builder-header", inputs: ["title", "showLegend", "resourceStrings"] }, { kind: "directive", type: IgxDragHandleDirective, selector: "[igxDragHandle]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxAdvancedFilteringDialogComponent, isStandalone: true, selector: "igx-advanced-filtering-dialog", inputs: { grid: "grid" }, host: { properties: { "style.display": "this.display" } }, viewQueries: [{ propertyName: "queryBuilder", first: true, predicate: ["queryBuilder"], descendants: true, read: IgxQueryBuilderComponent }], ngImport: i0, template: "@if (grid) {\n    <article class=\"igx-advanced-filter\" igxDrag [ghost]=\"false\" [dragTolerance]=\"0\"\n        (dragStart)=\"dragStart($event)\" (dragMove)=\"onDragMove($event)\" (keydown)=\"onKeyDown($event)\"\n        [ngClass]=\"{\n            'igx-advanced-filter': true,\n            'igx-advanced-filter--inline': inline\n        }\">\n        <igx-query-builder #queryBuilder\n            [locale]=\"grid.locale\"\n            [entities]=\"generateEntity()\"\n            [resourceStrings]=\"queryBuilderResourceStrings\"\n            [expressionTree]=\"this.grid.advancedFilteringExpressionsTree\">\n            <igx-query-builder-header\n                [title]=\"grid.resourceStrings.igx_grid_advanced_filter_title\"\n                igxDragHandle>\n            </igx-query-builder-header>\n        </igx-query-builder>\n\n        <footer class=\"igx-excel-filter__secondary-footer\">\n            <div class=\"igx-excel-filter__clear\">\n                <button igxButton=\"flat\" type=\"button\"\n                    (click)=\"onClearButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__cancel\">\n                <button igxButton=\"outlined\" type=\"button\" (click)=\"cancelChanges()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__apply\">\n                <button igxButton=\"contained\" type=\"button\"\n                    (click)=\"onApplyButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_apply }}\n                </button>\n            </div>\n        </footer>\n    </article>\n}\n", dependencies: [{ kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IgxQueryBuilderComponent, selector: "igx-query-builder", inputs: ["showEntityChangeDialog", "entities", "fields", "expressionTree", "locale", "resourceStrings", "disableEntityChange", "disableReturnFieldsChange"], outputs: ["expressionTreeChange"] }, { kind: "component", type: IgxQueryBuilderHeaderComponent, selector: "igx-query-builder-header", inputs: ["title", "showLegend", "resourceStrings"] }, { kind: "directive", type: IgxDragHandleDirective, selector: "[igxDragHandle]" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxAdvancedFilteringDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'igx-advanced-filtering-dialog', imports: [IgxDragDirective, NgClass, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxDragHandleDirective, IgxButtonDirective], template: "@if (grid) {\n    <article class=\"igx-advanced-filter\" igxDrag [ghost]=\"false\" [dragTolerance]=\"0\"\n        (dragStart)=\"dragStart($event)\" (dragMove)=\"onDragMove($event)\" (keydown)=\"onKeyDown($event)\"\n        [ngClass]=\"{\n            'igx-advanced-filter': true,\n            'igx-advanced-filter--inline': inline\n        }\">\n        <igx-query-builder #queryBuilder\n            [locale]=\"grid.locale\"\n            [entities]=\"generateEntity()\"\n            [expressionTree]=\"this.grid.advancedFilteringExpressionsTree\">\n            <igx-query-builder-header\n                [title]=\"grid.resourceStrings.igx_grid_advanced_filter_title\"\n                igxDragHandle>\n            </igx-query-builder-header>\n        </igx-query-builder>\n\n        <footer class=\"igx-excel-filter__secondary-footer\">\n            <div class=\"igx-excel-filter__clear\">\n                <button igxButton=\"flat\" type=\"button\"\n                    (click)=\"onClearButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__cancel\">\n                <button igxButton=\"outlined\" type=\"button\" (click)=\"cancelChanges()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__apply\">\n                <button igxButton=\"contained\" type=\"button\"\n                    (click)=\"onApplyButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_apply }}\n                </button>\n            </div>\n        </footer>\n    </article>\n}\n" }]
-        }], propDecorators: { queryBuilder: [{
+            args: [{ selector: 'igx-advanced-filtering-dialog', imports: [IgxDragDirective, NgClass, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxDragHandleDirective, IgxButtonDirective], template: "@if (grid) {\n    <article class=\"igx-advanced-filter\" igxDrag [ghost]=\"false\" [dragTolerance]=\"0\"\n        (dragStart)=\"dragStart($event)\" (dragMove)=\"onDragMove($event)\" (keydown)=\"onKeyDown($event)\"\n        [ngClass]=\"{\n            'igx-advanced-filter': true,\n            'igx-advanced-filter--inline': inline\n        }\">\n        <igx-query-builder #queryBuilder\n            [locale]=\"grid.locale\"\n            [entities]=\"generateEntity()\"\n            [resourceStrings]=\"queryBuilderResourceStrings\"\n            [expressionTree]=\"this.grid.advancedFilteringExpressionsTree\">\n            <igx-query-builder-header\n                [title]=\"grid.resourceStrings.igx_grid_advanced_filter_title\"\n                igxDragHandle>\n            </igx-query-builder-header>\n        </igx-query-builder>\n\n        <footer class=\"igx-excel-filter__secondary-footer\">\n            <div class=\"igx-excel-filter__clear\">\n                <button igxButton=\"flat\" type=\"button\"\n                    (click)=\"onClearButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__cancel\">\n                <button igxButton=\"outlined\" type=\"button\" (click)=\"cancelChanges()\">\n                    {{ grid.resourceStrings.igx_grid_excel_cancel }}\n                </button>\n            </div>\n            <div class=\"igx-excel-filter__apply\">\n                <button igxButton=\"contained\" type=\"button\"\n                    (click)=\"onApplyButtonClick($event)\">\n                    {{ grid.resourceStrings.igx_grid_excel_apply }}\n                </button>\n            </div>\n        </footer>\n    </article>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { queryBuilder: [{
                 type: ViewChild,
                 args: ['queryBuilder', { read: IgxQueryBuilderComponent }]
             }], display: [{
@@ -7878,6 +7886,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
  * @hidden
  */
 class IgxExcelStyleDateExpressionComponent extends IgxExcelStyleDefaultExpressionComponent {
+    constructor() {
+        super(...arguments);
+        this.i18nFormatter = inject(I18N_FORMATTER);
+    }
     get searchVal() {
         return this.expressionUI.expression.searchVal;
     }
@@ -7894,7 +7906,7 @@ class IgxExcelStyleDateExpressionComponent extends IgxExcelStyleDefaultExpressio
         return this.grid.resourceStrings['igx_grid_filter_row_time_placeholder'];
     }
     get weekStart() {
-        return getLocaleFirstDayOfWeek(this.grid.locale);
+        return this.i18nFormatter.getLocaleFirstDayOfWeek(this.grid.locale);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxExcelStyleDateExpressionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxExcelStyleDateExpressionComponent, isStandalone: true, selector: "igx-excel-style-date-expression", inputs: { searchVal: "searchVal" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: IgxInputDirective }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<igx-select #dropdownConditions\n        type=\"box\"\n        [placeholder]=\"conditionsPlaceholder\"\n        (selectionChanging)=\"onConditionsChanged($event)\"\n        [overlaySettings]=\"dropDownOverlaySettings\">\n    <igx-prefix>\n        @if (expressionUI.expression.condition) {\n            <igx-icon family=\"default\" [name]=\"getIconName()\"></igx-icon>\n        }\n        @if (!expressionUI.expression.condition) {\n            <igx-icon family=\"default\" name=\"filter_list\"></igx-icon>\n        }\n    </igx-prefix>\n    @for (condition of conditions; track condition) {\n        <igx-select-item [value]=\"condition\" [text]=\"getConditionFriendlyName(condition)\" [selected]=\"isConditionSelected(condition)\">\n            <igx-icon family=\"default\" [name]=\"getCondition(condition).iconName\"></igx-icon>\n            <span>{{translateCondition(condition)}}</span>\n        </igx-select-item>\n    }\n</igx-select>\n\n@if (column.dataType === 'date') {\n    <igx-date-picker #picker\n        [weekStart]=\"column.pipeArgs.weekStart ?? weekStart\"\n        [(value)]=\"searchVal\"\n        [locale]=\"grid.locale\"\n        [outlet]=\"grid.outlet\"\n        (click)=\"picker.open()\"\n        [placeholder]=\"inputDatePlaceholder\"\n        [formatter]=\"column.formatter\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        type=\"box\"\n    >\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-date-picker>\n}\n\n@if (column.dataType === 'time') {\n    <igx-time-picker #picker\n        [(ngModel)]=\"searchVal\"\n        [locale]=\"grid.locale\"\n        [outlet]=\"grid.outlet\"\n        (click)=\"picker.open()\"\n        [placeholder]=\"inputTimePlaceholder\"\n        [displayFormat]=\"column.pipeArgs.format\"\n        [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n        [formatter]=\"column.formatter\"\n        [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"\n        type=\"box\"\n    >\n        <!-- disable default icons -->\n        <igx-picker-toggle></igx-picker-toggle>\n        <igx-picker-clear></igx-picker-clear>\n    </igx-time-picker>\n}\n\n@if (column.dataType === 'dateTime') {\n    <igx-input-group #dropDownTarget #inputGroup type=\"box\">\n        <input #input igxInput tabindex=\"0\"\n            [placeholder]=\"inputDatePlaceholder\"\n            [locale]=\"column.grid.locale\"\n            [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n            [defaultFormatType]=\"column.dataType\"\n            [displayFormat]=\"column.pipeArgs.format\"\n            [(ngModel)]=\"searchVal\"\n            [disabled]=\"expressionUI.expression.condition && expressionUI.expression.condition.isUnary\"/>\n    </igx-input-group>\n}\n\n@if (!isSingle) {\n    <button type=\"button\" (click)=\"onRemoveButtonClick()\" igxIconButton=\"flat\" >\n        <igx-icon family=\"default\" name=\"remove\"></igx-icon>\n    </button>\n}\n\n@if (!isLast) {\n    <igx-buttongroup #logicOperatorButtonGroup>\n        <span igxButton\n            #andButton\n            (keydown)=\"onLogicOperatorKeyDown($event, 0)\"\n            tabindex=\"0\"\n            [selected]=\"expressionUI.afterOperator === 0\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 0)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_and }}\n        </span>\n        <span igxButton\n            #orButton\n            tabindex=\"0\"\n            (keydown)=\"onLogicOperatorKeyDown($event, 1)\"\n            [selected]=\"expressionUI.afterOperator === 1\"\n            type=\"button\"\n            (click)=\"onLogicOperatorButtonClicked($event, 1)\">\n            {{ grid.resourceStrings.igx_grid_filter_operator_or }}\n        </span>\n    </igx-buttongroup>\n}\n\n<div #overlayOutlet\n     igxOverlayOutlet\n     (pointerdown)=\"onOutletPointerDown($event)\">\n</div>\n", dependencies: [{ kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "outlet", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxButtonGroupComponent, selector: "igx-buttongroup", inputs: ["id", "itemContentCssClass", "multiSelection", "selectionMode", "values", "disabled", "alignment"], outputs: ["selected", "deselected"] }, { kind: "directive", type: IgxOverlayOutletDirective, selector: "[igxOverlayOutlet]", exportAs: ["overlay-outlet"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }] }); }
@@ -9917,17 +9929,20 @@ class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent {
         }
         const { display, format, digitsInfo, currencyCode, timezone } = this.column.pipeArgs;
         const locale = this.grid.locale;
+        const i18nFormatter = this.grid.i18nFormatter;
         switch (this.column.dataType) {
             case GridColumnDataType.Date:
             case GridColumnDataType.DateTime:
             case GridColumnDataType.Time:
-                return formatDate(value, format, locale, timezone);
-            case GridColumnDataType.Currency:
-                return formatCurrency(value, currencyCode || getLocaleCurrencyCode(locale), display, digitsInfo, locale);
+                return i18nFormatter.formatDate(value, format, locale, timezone);
+            case GridColumnDataType.Currency: {
+                const currencyCodeFinal = i18nFormatter.getCurrencyCode(locale, currencyCode);
+                return i18nFormatter.formatCurrency(value, locale, display, currencyCodeFinal, digitsInfo);
+            }
             case GridColumnDataType.Number:
-                return formatNumber(value, locale, digitsInfo);
+                return i18nFormatter.formatNumber(value, locale, digitsInfo);
             case GridColumnDataType.Percent:
-                return formatPercent(value, locale, digitsInfo);
+                return i18nFormatter.formatPercent(value, locale, digitsInfo);
             default:
                 return value;
         }
@@ -11981,7 +11996,7 @@ class IgxFilteringService {
                 return formatter(expression.searchVal, undefined);
             }
             const pipeArgs = column.pipeArgs;
-            return formatDate$1(expression.searchVal, pipeArgs.format, this.grid.locale);
+            return this.grid.i18nFormatter.formatDate(expression.searchVal, pipeArgs.format, this.grid.locale);
         }
         else {
             return expression.searchVal;
@@ -15374,7 +15389,7 @@ class IgxPivotDateDimension {
         this._resourceStrings = Object.assign({}, this._resourceStrings, value);
     }
     get resourceStrings() {
-        return this._resourceStrings;
+        return this._resourceStrings || getCurrentResourceStrings(GridResourceStringsEN, false);
     }
     /**
      * Gets/Sets the base dimension that is used by this class to determine the other dimensions and their values.
@@ -15423,9 +15438,8 @@ class IgxPivotDateDimension {
         };
         /** @hidden @internal */
         this.memberName = 'AllPeriods';
-        this._resourceStrings = getCurrentResourceStrings(GridResourceStringsEN);
+        this._resourceStrings = null;
         this._options = {};
-        this._monthIntl = new Intl.DateTimeFormat('default', { month: 'long' });
         /** @hidden @internal */
         this.memberFunction = (_data) => this.resourceStrings.igx_grid_pivot_date_dimension_total;
         this._baseDimension = inBaseDimension;
@@ -15445,7 +15459,8 @@ class IgxPivotDateDimension {
             memberName: 'Months',
             memberFunction: (rec) => {
                 const recordValue = PivotUtil.extractValueFromDimension(inBaseDimension, rec);
-                return recordValue ? this._monthIntl.format(new Date(recordValue)) : rec['Months'];
+                const dateValue = recordValue ? getDateFormatter().createDateFromValue(recordValue) : null;
+                return recordValue ? getDateFormatter().formatDateTime(dateValue, undefined, { month: 'long' }) : rec['Months'];
             },
             enabled: true,
             childLevel: baseDimension
@@ -15455,7 +15470,8 @@ class IgxPivotDateDimension {
             memberName: 'Quarters',
             memberFunction: (rec) => {
                 const recordValue = PivotUtil.extractValueFromDimension(inBaseDimension, rec);
-                return recordValue ? `Q` + Math.ceil((new Date(recordValue).getMonth() + 1) / 3) : rec['Quarters'];
+                const dateValue = recordValue ? getDateFormatter().createDateFromValue(recordValue) : null;
+                return recordValue ? `Q` + Math.ceil((dateValue.getMonth() + 1) / 3) : rec['Quarters'];
             },
             enabled: true,
             childLevel: monthDimension
@@ -15465,7 +15481,8 @@ class IgxPivotDateDimension {
             memberName: 'Years',
             memberFunction: (rec) => {
                 const recordValue = PivotUtil.extractValueFromDimension(inBaseDimension, rec);
-                return recordValue ? (new Date(recordValue)).getFullYear().toString() : rec['Years'];
+                const dateValue = recordValue ? getDateFormatter().createDateFromValue(recordValue) : null;
+                return recordValue ? dateValue.getFullYear().toString() : rec['Years'];
             },
             enabled: true,
             childLevel: quarterDimension
@@ -17279,6 +17296,7 @@ class IgxBaseExporter {
         this.options = options;
         this.locale = grid.locale;
         this.ownerGrid = grid;
+        this.i18nFormatter = grid.i18nFormatter;
         let columns = grid.columns;
         if (this.options.ignoreMultiColumnHeaders) {
             columns = columns.filter(col => col.children === undefined);
@@ -17949,8 +17967,7 @@ class IgxBaseExporter {
             if (isDate) {
                 const timeZoneOffset = recordVal.getTimezoneOffset() * 60000;
                 const isoString = (new Date(recordVal - timeZoneOffset)).toISOString();
-                const pipe = new DatePipe(grid.locale);
-                recordVal = pipe.transform(isoString);
+                recordVal = this.i18nFormatter.formatDate(isoString, 'mediumDate', grid.locale);
             }
             const groupExpressionName = record.column && record.column.header ?
                 record.column.header :
@@ -18038,9 +18055,8 @@ class IgxBaseExporter {
                 columnGroup: isMultiColHeader ? column : null
             };
             if (column.dataType === 'currency') {
-                columnInfo.currencyCode = column.pipeArgs.currencyCode
-                    ? column.pipeArgs.currencyCode
-                    : getLocaleCurrencyCode(this.locale);
+                columnInfo.currencyCode = this.i18nFormatter.getCurrencyCode(this.locale, column.pipeArgs.currencyCode);
+                ;
                 columnInfo.displayFormat = column.pipeArgs.display
                     ? column.pipeArgs.display
                     : 'symbol';
@@ -21259,21 +21275,19 @@ class IgxSummaryCellComponent {
         return this.column.grid;
     }
     /**
-     * @hidden @internal
+     * @hidden
      */
-    get currencyCode() {
-        return this.column.pipeArgs.currencyCode ?
-            this.column.pipeArgs.currencyCode : getLocaleCurrencyCode(this.grid.locale);
+    get i18nFormatter() {
+        return this.grid.i18nFormatter;
     }
     /**
      * @hidden @internal
      */
-    get currencySymbol() {
-        return this.column.pipeArgs.display ?
-            this.column.pipeArgs.display : getLocaleCurrencySymbol(this.grid.locale);
+    get currencyCode() {
+        return this.i18nFormatter.getCurrencyCode(this.locale, this.column.pipeArgs.currencyCode);
     }
     translateSummary(summary) {
-        return this.grid.resourceStrings[`igx_grid_summary_${summary.key}`] || summary.label;
+        return this.gridResourceStrings[`igx_grid_summary_${summary.key}`] || summary.label;
     }
     /**
      * @hidden @internal
@@ -21286,28 +21300,28 @@ class IgxSummaryCellComponent {
             return this.summaryFormatter(summary, this.column.summaries);
         }
         const args = this.column.pipeArgs;
-        const locale = this.grid.locale;
+        const locale = this.locale;
         if (summary.key === 'count') {
-            return formatNumber(summary.summaryResult, locale);
+            return this.i18nFormatter.formatNumber(summary.summaryResult, locale);
         }
         if (summary.defaultFormatting) {
             switch (this.column.dataType) {
                 case GridColumnDataType.Number:
-                    return formatNumber(summary.summaryResult, locale, args.digitsInfo);
+                    return this.i18nFormatter.formatNumber(summary.summaryResult, locale, args.digitsInfo);
                 case GridColumnDataType.Date:
                 case GridColumnDataType.DateTime:
                 case GridColumnDataType.Time:
-                    return formatDate(summary.summaryResult, args.format, locale, args.timezone);
+                    return this.i18nFormatter.formatDate(summary.summaryResult, args.format, locale, args.timezone);
                 case GridColumnDataType.Currency:
-                    return formatCurrency(summary.summaryResult, locale, this.currencySymbol, this.currencyCode, args.digitsInfo);
+                    return this.i18nFormatter.formatCurrency(summary.summaryResult, locale, args.display, this.currencyCode, args.digitsInfo);
                 case GridColumnDataType.Percent:
-                    return formatPercent(summary.summaryResult, locale, args.digitsInfo);
+                    return this.i18nFormatter.formatPercent(summary.summaryResult, locale, args.digitsInfo);
             }
         }
         return summary.summaryResult;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSummaryCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxSummaryCellComponent, isStandalone: true, selector: "igx-grid-summary-cell", inputs: { summaryResults: "summaryResults", column: "column", firstCellIndentation: "firstCellIndentation", hasSummary: ["hasSummary", "hasSummary", booleanAttribute], summaryFormatter: "summaryFormatter", summaryTemplate: "summaryTemplate", active: "active", rowIndex: "rowIndex" }, host: { listeners: { "pointerdown": "activate()" }, properties: { "class.igx-grid-summary--active": "this.active", "attr.data-rowIndex": "this.rowIndex", "attr.data-visibleIndex": "this.visibleColumnIndex", "attr.id": "this.attrCellID" } }, ngImport: i0, template: "@if (hasSummary) {\n    <ng-container *ngTemplateOutlet=\"summaryTemplate ? summaryTemplate : defaultSummary; context: { $implicit: summaryResults }\">\n    </ng-container>\n}\n<ng-template #defaultSummary>\n    @for (summary of summaryResults; track trackSummaryResult(summary)) {\n        <div class=\"igx-grid-summary__item\" [style.height.px]=\"itemHeight\">\n            <span class=\"igx-grid-summary__label\" [title]=\"summary.label\">{{ translateSummary(summary) }}</span>\n            <span class=\"igx-grid-summary__result\" [title]=\"formatSummaryResult(summary)\">\n                {{ formatSummaryResult(summary) }}\n            </span>\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxSummaryCellComponent, isStandalone: true, selector: "igx-grid-summary-cell", inputs: { summaryResults: "summaryResults", column: "column", firstCellIndentation: "firstCellIndentation", hasSummary: ["hasSummary", "hasSummary", booleanAttribute], summaryFormatter: "summaryFormatter", summaryTemplate: "summaryTemplate", locale: "locale", gridResourceStrings: "gridResourceStrings", active: "active", rowIndex: "rowIndex" }, host: { listeners: { "pointerdown": "activate()" }, properties: { "class.igx-grid-summary--active": "this.active", "attr.data-rowIndex": "this.rowIndex", "attr.data-visibleIndex": "this.visibleColumnIndex", "attr.id": "this.attrCellID" } }, ngImport: i0, template: "@if (hasSummary) {\n    <ng-container *ngTemplateOutlet=\"summaryTemplate ? summaryTemplate : defaultSummary; context: { $implicit: summaryResults }\">\n    </ng-container>\n}\n<ng-template #defaultSummary>\n    @for (summary of summaryResults; track trackSummaryResult(summary)) {\n        <div class=\"igx-grid-summary__item\" [style.height.px]=\"itemHeight\">\n            <span class=\"igx-grid-summary__label\" [title]=\"summary.label\">{{ translateSummary(summary) }}</span>\n            <span class=\"igx-grid-summary__result\" [title]=\"formatSummaryResult(summary)\">\n                {{ formatSummaryResult(summary) }}\n            </span>\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSummaryCellComponent, decorators: [{
             type: Component,
@@ -21325,6 +21339,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                 type: Input
             }], summaryTemplate: [{
                 type: Input
+            }], locale: [{
+                type: Input
+            }], gridResourceStrings: [{
+                type: Input
             }], active: [{
                 type: Input
             }, {
@@ -21422,11 +21440,11 @@ class IgxSummaryRowComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSummaryRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxSummaryRowComponent, isStandalone: true, selector: "igx-grid-summary-row", inputs: { summaries: "summaries", gridID: "gridID", index: "index", firstCellIndentation: "firstCellIndentation" }, host: { properties: { "attr.data-rowIndex": "this.dataRowIndex" } }, providers: [IgxForOfSyncService], viewQueries: [{ propertyName: "virtDirRow", first: true, predicate: ["igxDirRef"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "_summaryCells", predicate: IgxSummaryCellComponent, descendants: true, read: IgxSummaryCellComponent }], ngImport: i0, template: "@if (summaries.size) {\n    @if (grid.summariesMargin) {\n        <div\n            class=\"igx-grid__summaries-patch\"\n            [style.min-width.px]=\"grid.summariesMargin\"\n            [style.flex-basis.px]=\"grid.summariesMargin\"\n            (pointerdown)=\"$event.preventDefault()\"\n        ></div>\n    }\n    @if (pinnedStartColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedStartColumns)\"></ng-container>\n    }\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\" [igxForSizePropName]='\"calcPixelWidth\"' #igxDirRef>\n        <igx-grid-summary-cell\n            class=\"igx-grid-summary igx-grid-summary--fw\"\n            role=\"cell\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [rowIndex]=\"index\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [summaryFormatter]=\"col.summaryFormatter\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    </ng-template>\n    @if (pinnedEndColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedEndColumns)\"></ng-container>\n    }\n}\n\n<ng-template #summaryCellTemplate let-col let-columns=\"columns\">\n    @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n        <igx-grid-summary-cell\n            role=\"cell\"\n            class=\"igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-first]=\"col.isFirstPinned\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [rowIndex]=\"index\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxSummaryCellComponent, selector: "igx-grid-summary-cell", inputs: ["summaryResults", "column", "firstCellIndentation", "hasSummary", "summaryFormatter", "summaryTemplate", "active", "rowIndex"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxSummaryRowComponent, isStandalone: true, selector: "igx-grid-summary-row", inputs: { summaries: "summaries", gridID: "gridID", index: "index", firstCellIndentation: "firstCellIndentation" }, host: { properties: { "attr.data-rowIndex": "this.dataRowIndex" } }, providers: [IgxForOfSyncService], viewQueries: [{ propertyName: "virtDirRow", first: true, predicate: ["igxDirRef"], descendants: true, read: IgxGridForOfDirective }, { propertyName: "_summaryCells", predicate: IgxSummaryCellComponent, descendants: true, read: IgxSummaryCellComponent }], ngImport: i0, template: "@if (summaries.size) {\n    @if (grid.summariesMargin) {\n        <div\n            class=\"igx-grid__summaries-patch\"\n            [style.min-width.px]=\"grid.summariesMargin\"\n            [style.flex-basis.px]=\"grid.summariesMargin\"\n            (pointerdown)=\"$event.preventDefault()\"\n        ></div>\n    }\n    @if (pinnedStartColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedStartColumns)\"></ng-container>\n    }\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\" [igxForSizePropName]='\"calcPixelWidth\"' #igxDirRef>\n        <igx-grid-summary-cell\n            class=\"igx-grid-summary igx-grid-summary--fw\"\n            role=\"cell\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\n            [rowIndex]=\"index\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [summaryFormatter]=\"col.summaryFormatter\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    </ng-template>\n    @if (pinnedEndColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedEndColumns)\"></ng-container>\n    }\n}\n\n<ng-template #summaryCellTemplate let-col let-columns=\"columns\">\n    @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n        <igx-grid-summary-cell\n            role=\"cell\"\n            class=\"igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-first]=\"col.isFirstPinned\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [rowIndex]=\"index\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxSummaryCellComponent, selector: "igx-grid-summary-cell", inputs: ["summaryResults", "column", "firstCellIndentation", "hasSummary", "summaryFormatter", "summaryTemplate", "locale", "gridResourceStrings", "active", "rowIndex"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxSummaryRowComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-summary-row', providers: [IgxForOfSyncService], imports: [NgTemplateOutlet, IgxGridForOfDirective, IgxSummaryCellComponent, IgxGridNotGroupedPipe], template: "@if (summaries.size) {\n    @if (grid.summariesMargin) {\n        <div\n            class=\"igx-grid__summaries-patch\"\n            [style.min-width.px]=\"grid.summariesMargin\"\n            [style.flex-basis.px]=\"grid.summariesMargin\"\n            (pointerdown)=\"$event.preventDefault()\"\n        ></div>\n    }\n    @if (pinnedStartColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedStartColumns)\"></ng-container>\n    }\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\" [igxForSizePropName]='\"calcPixelWidth\"' #igxDirRef>\n        <igx-grid-summary-cell\n            class=\"igx-grid-summary igx-grid-summary--fw\"\n            role=\"cell\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [rowIndex]=\"index\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [summaryFormatter]=\"col.summaryFormatter\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    </ng-template>\n    @if (pinnedEndColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedEndColumns)\"></ng-container>\n    }\n}\n\n<ng-template #summaryCellTemplate let-col let-columns=\"columns\">\n    @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n        <igx-grid-summary-cell\n            role=\"cell\"\n            class=\"igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-first]=\"col.isFirstPinned\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [rowIndex]=\"index\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    }\n</ng-template>\n" }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-summary-row', providers: [IgxForOfSyncService], imports: [NgTemplateOutlet, IgxGridForOfDirective, IgxSummaryCellComponent, IgxGridNotGroupedPipe], template: "@if (summaries.size) {\n    @if (grid.summariesMargin) {\n        <div\n            class=\"igx-grid__summaries-patch\"\n            [style.min-width.px]=\"grid.summariesMargin\"\n            [style.flex-basis.px]=\"grid.summariesMargin\"\n            (pointerdown)=\"$event.preventDefault()\"\n        ></div>\n    }\n    @if (pinnedStartColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedStartColumns)\"></ng-container>\n    }\n    <ng-template igxGridFor let-col [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\" [igxForScrollContainer]=\"grid.parentVirtDir\" let-colIndex=\"index\" [igxForScrollOrientation]=\"'horizontal'\" [igxForContainerSize]=\"grid.unpinnedWidth\" [igxForTrackBy]=\"grid.trackColumnChanges\" [igxForSizePropName]='\"calcPixelWidth\"' #igxDirRef>\n        <igx-grid-summary-cell\n            class=\"igx-grid-summary igx-grid-summary--fw\"\n            role=\"cell\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\n            [rowIndex]=\"index\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [summaryFormatter]=\"col.summaryFormatter\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    </ng-template>\n    @if (pinnedEndColumns.length > 0) {\n        <ng-container *ngTemplateOutlet=\"summaryCellTemplate; context: getContext(this, pinnedEndColumns)\"></ng-container>\n    }\n}\n\n<ng-template #summaryCellTemplate let-col let-columns=\"columns\">\n    @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n        <igx-grid-summary-cell\n            role=\"cell\"\n            class=\"igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned\"\n            [class.igx-grid-summary--empty]=\"!col.hasSummary\"\n            [class.igx-grid-summary--pinned-first]=\"col.isFirstPinned\"\n            [class.igx-grid-summary--pinned-last]=\"col.isLastPinned\"\n            [column]=\"col\"\n            [locale]=\"grid.locale\"\n            [gridResourceStrings]=\"grid.resourceStrings\"\n            [firstCellIndentation]=\"firstCellIndentation\"\n            [rowIndex]=\"index\"\n            [summaryResults]=\"getColumnSummaries(col.field)\"\n            [summaryTemplate]=\"col.summaryTemplate\"\n            [hasSummary]=\"col.hasSummary\"\n            [active]=\"isCellActive(col.visibleIndex)\"\n            [style.max-height.px]=\"minHeight\"\n            [style.min-height.px]=\"minHeight\"\n            [style.min-width]=\"col.resolvedWidth\"\n            [style.max-width]=\"col.resolvedWidth\"\n            [style.flex-basis]=\"col.resolvedWidth\">\n        </igx-grid-summary-cell>\n    }\n</ng-template>\n" }]
         }], propDecorators: { summaries: [{
                 type: Input
             }], gridID: [{
@@ -23042,15 +23060,16 @@ class IgxGridCellComponent {
         }
         const args = this.column.pipeArgs;
         const locale = this.grid.locale;
+        const i18nFormatter = this.grid.i18nFormatter;
         switch (this.column.dataType) {
             case GridColumnDataType.Percent:
-                return formatPercent(this.value, locale, args.digitsInfo);
+                return i18nFormatter.formatPercent(this.value, locale, args.digitsInfo);
             case GridColumnDataType.Currency:
-                return formatCurrency$1(this.value, this.currencyCode, args.display, args.digitsInfo, locale);
+                return i18nFormatter.formatCurrency(this.value, locale, args.display, this.currencyCode, args.digitsInfo);
             case GridColumnDataType.Date:
             case GridColumnDataType.DateTime:
             case GridColumnDataType.Time:
-                return formatDate$1(this.value, args.format, locale, args.timezone);
+                return i18nFormatter.formatDate(this.value, args.format, locale, args.timezone);
         }
         return this.value;
     }
@@ -23285,12 +23304,11 @@ class IgxGridCellComponent {
     }
     /** @hidden @internal */
     get currencyCode() {
-        return this.column.pipeArgs.currencyCode ?
-            this.column.pipeArgs.currencyCode : getLocaleCurrencyCode(this.grid.locale);
+        return this.grid.i18nFormatter.getCurrencyCode(this.grid.locale, this.column.pipeArgs.currencyCode);
     }
     /** @hidden @internal */
     get currencyCodeSymbol() {
-        return getCurrencySymbol(this.currencyCode, 'wide', this.grid.locale);
+        return this.grid.i18nFormatter.getCurrencySymbol(this.currencyCode, this.grid.locale);
     }
     /**
      * @hidden
@@ -23607,17 +23625,17 @@ class IgxGridCellComponent {
         return new IgxGridCell(this.grid, rowID, this.column);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxGridCellComponent, isStandalone: true, selector: "igx-grid-cell", inputs: { column: "column", isPlaceholder: "isPlaceholder", isMerged: "isMerged", intRow: "intRow", row: "row", rowData: "rowData", columnData: "columnData", cellTemplate: "cellTemplate", cellValidationErrorTemplate: "cellValidationErrorTemplate", pinnedIndicator: "pinnedIndicator", value: "value", formatter: "formatter", visibleColumnIndex: "visibleColumnIndex", cellSelectionMode: "cellSelectionMode", lastSearchInfo: "lastSearchInfo", lastPinned: "lastPinned", firstPinned: "firstPinned", editMode: ["editMode", "editMode", booleanAttribute], width: "width", active: "active", displayPinnedChip: "displayPinnedChip" }, host: { listeners: { "dblclick": "onDoubleClick($event)", "click": "onClick($event)" }, properties: { "class.igx-grid__td--new": "this.isEmptyAddRowCell", "attr.data-rowIndex": "this.rowIndex", "attr.data-visibleIndex": "this.visibleColumnIndex", "attr.id": "this.attrCellID", "attr.title": "this.title", "class.igx-grid__td--bool-true": "this.booleanClass", "class.igx-grid__td--pinned-last": "this.lastPinned", "class.igx-grid__td--pinned-first": "this.firstPinned", "class.igx-grid__td--editing": "this.editMode", "attr.role": "this.role", "attr.aria-readonly": "this.readonly", "attr.aria-describedby": "this.ariaDescribeBy", "class.igx-grid__td--invalid": "this.isInvalid", "attr.aria-invalid": "this.isInvalid", "class.igx-grid__td--valid": "this.isValidAfterEdit", "class.igx-grid__td--active": "this.active", "attr.aria-selected": "this.ariaSelected", "class.igx-grid__td--selected": "this.selected", "class.igx-grid__td--column-selected": "this.columnSelected", "class.igx-grid__td--row-pinned-first": "this.displayPinnedChip", "style.min-height.px": "this.minHeight", "attr.aria-rowindex": "this.ariaRowIndex", "attr.aria-colindex": "this.ariaColIndex" } }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "errorIcon", first: true, predicate: ["errorIcon"], descendants: true, read: IgxIconComponent }, { propertyName: "defaultErrorTemplate", first: true, predicate: ["defaultError"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCellTemplate", first: true, predicate: ["defaultCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyCellTemplate", first: true, predicate: ["emptyCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultPinnedIndicator", first: true, predicate: ["defaultPinnedIndicator"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inlineEditorTemplate", first: true, predicate: ["inlineEditor"], descendants: true, read: TemplateRef, static: true }, { propertyName: "addRowCellTemplate", first: true, predicate: ["addRowCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "highlight", first: true, predicate: IgxTextHighlightDirective, descendants: true, read: IgxTextHighlightDirective }, { propertyName: "errorTooltip", predicate: ["error"], descendants: true, read: IgxTooltipDirective }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    @if (displayPinnedChip) {\n        <igx-chip\n            class=\"igx-grid__td--pinned-chip\"\n            [disabled]=\"true\"\n            [style.--ig-size]=\"1\"\n        >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight\n            class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"\n                formatter\n                    ? (value | columnFormatter:formatter:rowData:columnData)\n                    : column.dataType === 'number'\n                    ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                    : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                    ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                    : column.dataType === 'currency'\n                    ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                    : column.dataType === 'percent'\n                    ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                    : value\n            \"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\"\n        >{{\n            formatter\n                ? (value | columnFormatter:formatter:rowData:columnData)\n                : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        }}</div>\n    }\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n                (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n                (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n                (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n                (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\"\n        >{{\n            !isEmptyAddRowCell ? value : (column.header || column.field)\n        }}</div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group>\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [igxTextSelection]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [weekStart]=\"column.pipeArgs.weekStart\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultError>\n    @let errors = formControl.errors;\n    @if (errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n        </div>\n    }\n    @if (errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\n        </div>\n    }\n    @if (errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "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", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxGridCellComponent, isStandalone: true, selector: "igx-grid-cell", inputs: { column: "column", isPlaceholder: "isPlaceholder", isMerged: "isMerged", intRow: "intRow", row: "row", rowData: "rowData", columnData: "columnData", cellTemplate: "cellTemplate", cellValidationErrorTemplate: "cellValidationErrorTemplate", pinnedIndicator: "pinnedIndicator", value: "value", formatter: "formatter", visibleColumnIndex: "visibleColumnIndex", cellSelectionMode: "cellSelectionMode", lastSearchInfo: "lastSearchInfo", lastPinned: "lastPinned", firstPinned: "firstPinned", editMode: ["editMode", "editMode", booleanAttribute], width: "width", active: "active", displayPinnedChip: "displayPinnedChip" }, host: { listeners: { "dblclick": "onDoubleClick($event)", "click": "onClick($event)" }, properties: { "class.igx-grid__td--new": "this.isEmptyAddRowCell", "attr.data-rowIndex": "this.rowIndex", "attr.data-visibleIndex": "this.visibleColumnIndex", "attr.id": "this.attrCellID", "attr.title": "this.title", "class.igx-grid__td--bool-true": "this.booleanClass", "class.igx-grid__td--pinned-last": "this.lastPinned", "class.igx-grid__td--pinned-first": "this.firstPinned", "class.igx-grid__td--editing": "this.editMode", "attr.role": "this.role", "attr.aria-readonly": "this.readonly", "attr.aria-describedby": "this.ariaDescribeBy", "class.igx-grid__td--invalid": "this.isInvalid", "attr.aria-invalid": "this.isInvalid", "class.igx-grid__td--valid": "this.isValidAfterEdit", "class.igx-grid__td--active": "this.active", "attr.aria-selected": "this.ariaSelected", "class.igx-grid__td--selected": "this.selected", "class.igx-grid__td--column-selected": "this.columnSelected", "class.igx-grid__td--row-pinned-first": "this.displayPinnedChip", "style.min-height.px": "this.minHeight", "attr.aria-rowindex": "this.ariaRowIndex", "attr.aria-colindex": "this.ariaColIndex" } }, providers: [HammerGesturesManager], viewQueries: [{ propertyName: "errorIcon", first: true, predicate: ["errorIcon"], descendants: true, read: IgxIconComponent }, { propertyName: "defaultErrorTemplate", first: true, predicate: ["defaultError"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCellTemplate", first: true, predicate: ["defaultCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyCellTemplate", first: true, predicate: ["emptyCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultPinnedIndicator", first: true, predicate: ["defaultPinnedIndicator"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inlineEditorTemplate", first: true, predicate: ["inlineEditor"], descendants: true, read: TemplateRef, static: true }, { propertyName: "addRowCellTemplate", first: true, predicate: ["addRowCell"], descendants: true, read: TemplateRef, static: true }, { propertyName: "highlight", first: true, predicate: IgxTextHighlightDirective, descendants: true, read: IgxTextHighlightDirective }, { propertyName: "errorTooltip", predicate: ["error"], descendants: true, read: IgxTooltipDirective }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultPinnedIndicator>\n    @if (displayPinnedChip) {\n        <igx-chip\n            class=\"igx-grid__td--pinned-chip\"\n            [disabled]=\"true\"\n            [style.--ig-size]=\"1\"\n        >{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>\n    }\n</ng-template>\n<ng-template #defaultCell>\n    @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight\n            class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"\n                formatter\n                    ? (value | columnFormatter:formatter:rowData:columnData)\n                    : column.dataType === 'number'\n                    ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                    : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                    ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                    : column.dataType === 'currency'\n                    ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                    : column.dataType === 'percent'\n                    ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                    : value\n            \"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\"\n        >{{\n            formatter\n                ? (value | columnFormatter:formatter:rowData:columnData)\n                : column.dataType === \"number\"\n                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)\n                : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')\n                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)\n                : column.dataType === 'currency'\n                ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)\n                : column.dataType === 'percent'\n                ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)\n                : value\n        }}</div>\n    }\n    @if (column.dataType === 'boolean' && !this.formatter) {\n        <igx-icon\n            family=\"default\"\n            [name]=\"value ? 'confirm' : 'close'\"\n            [ngClass]=\"{ 'igx-icon--success': value, 'igx-icon--error': !value }\">\n        </igx-icon>\n    }\n    @if (column.dataType === 'image') {\n        <img [src]=\"value\" [alt]=\"value | igxCellImageAlt\" />\n    }\n</ng-template>\n\n<ng-template #emptyCell></ng-template>\n<ng-template #addRowCell let-cell=\"cell\">\n    @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) {\n        <div\n            igxTextHighlight class=\"igx-grid__td-text\"\n            [cssClass]=\"highlightClass\"\n            [activeCssClass]=\"activeHighlightClass\"\n            [groupName]=\"gridID\"\n            [value]=\"formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === 'number' ?\n                (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') ?\n                (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' ?\n                (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' ?\n                (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value\"\n            [row]=\"rowData\"\n            [column]=\"this.column.field\"\n            [containerClass]=\"'igx-grid__td-text'\"\n            [metadata]=\"searchMetadata\"\n        >{{\n            !isEmptyAddRowCell ? value : (column.header || column.field)\n        }}</div>\n    }\n</ng-template>\n<ng-template #inlineEditor let-cell=\"cell\">\n    @if (column.dataType === 'string' || column.dataType === 'image') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-input-group>\n                <input\n                    igxInput\n                    [attr.aria-describedby]=\"ariaDescribeBy\"\n                    [attr.aria-invalid]=\"isInvalid\"\n                    [igxFocus]=\"true\"\n                    [igxTextSelection]=\"true\"\n                    [formControl]=\"formControl\"\n                    (compositionstart)=\"grid.crudService.isInCompositionMode = true\"\n                    (compositionend)=\"grid.crudService.isInCompositionMode = false\"\n                />\n            </igx-input-group>\n        </ng-container>\n    }\n    @if (column.dataType === 'number') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'boolean') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-checkbox\n                [checked]=\"editValue\"\n                [igxFocus]=\"true\"\n                [disableRipple]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-checkbox>\n        </ng-container>\n    }\n    @if (column.dataType === 'date') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-date-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [weekStart]=\"column.pipeArgs.weekStart\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n            >\n            </igx-date-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'time') {\n        <ng-container [formGroup]=\"formGroup\">\n            <igx-time-picker\n                [style.width.%]=\"100\"\n                [outlet]=\"grid.outlet\"\n                mode=\"dropdown\"\n                [locale]=\"grid.locale\"\n                [inputFormat]=\"column.editorOptions?.dateTimeFormat\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [(value)]=\"editValue\"\n                [igxFocus]=\"true\"\n                [formControl]=\"formControl\"\n            ></igx-time-picker>\n        </ng-container>\n    }\n    @if (column.dataType === 'dateTime') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                type=\"text\"\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [formControl]=\"formControl\"\n                igxInput\n                [locale]=\"grid.locale\"\n                [igxDateTimeEditor]=\"column.editorOptions?.dateTimeFormat\"\n                [defaultFormatType]=\"column.dataType\"\n                [displayFormat]=\"column.pipeArgs.format\"\n                [igxFocus]=\"true\"\n            />\n        </igx-input-group>\n    }\n    @if (column.dataType === 'currency') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            @if (grid.currencyPositionLeft) {\n                <igx-prefix>{{ currencyCodeSymbol }}</igx-prefix>\n            }\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            @if (!grid.currencyPositionLeft) {\n                <igx-suffix>{{ currencyCodeSymbol }}</igx-suffix>\n            }\n        </igx-input-group>\n    }\n    @if (column.dataType === 'percent') {\n        <igx-input-group [formGroup]=\"formGroup\">\n            <input\n                igxInput\n                [attr.aria-describedby]=\"ariaDescribeBy\"\n                [attr.aria-invalid]=\"isInvalid\"\n                [igxFocus]=\"true\"\n                [igxTextSelection]=\"true\"\n                [step]=\"step\"\n                type=\"number\"\n                [formControl]=\"formControl\"\n            />\n            <igx-suffix> {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} </igx-suffix>\n        </igx-input-group>\n    }\n</ng-template>\n<ng-container *ngTemplateOutlet=\"pinnedIndicatorTemplate; context: context\">\n</ng-container>\n<ng-container *ngTemplateOutlet=\"template; context: context\"></ng-container>\n\n@if (isInvalid) {\n    <igx-icon\n        family=\"default\"\n        name=\"error\"\n        #errorIcon\n        [igxTooltipTarget]=\"tooltipRef\"\n        [igxToggleOutlet]=\"grid.outlet\"\n        (mouseover)='errorShowing = true'\n        (mouseout)='errorShowing = false'>\n    </igx-icon>\n    <div [id]=\"ariaErrorMessage\"\n    igxTooltip #error #tooltipRef=\"tooltip\">\n        <div [style.width]=\"'max-content'\">\n            <ng-container *ngTemplateOutlet=\"cellValidationErrorTemplate || defaultError; context: context\"></ng-container>\n        </div>\n    </div>\n}\n\n<ng-template #defaultError>\n    @let errors = formControl.errors;\n    @if (errors?.['required']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_required_validation_error}}\n        </div>\n    }\n    @if (errors?.['minlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':errors.minlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['maxlength']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':errors.maxlength.requiredLength }}\n        </div>\n    }\n    @if (errors?.['min']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':errors.min.min }}\n        </div>\n    }\n    @if (errors?.['max']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':errors.max.max }}\n        </div>\n    }\n    @if (errors?.['email']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_email_validation_error }}\n        </div>\n    }\n    @if (errors?.['pattern']) {\n        <div>\n            {{grid.resourceStrings.igx_grid_pattern_validation_error}}\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "directive", type: IgxTextHighlightDirective, selector: "[igxTextHighlight]", inputs: ["cssClass", "activeCssClass", "containerClass", "groupName", "value", "row", "column", "metadata"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxFocusDirective, selector: "[igxFocus]", inputs: ["igxFocus"], exportAs: ["igxFocus"] }, { kind: "directive", type: IgxTextSelectionDirective, selector: "[igxTextSelection]", inputs: ["igxTextSelection"], exportAs: ["igxTextSelection"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "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", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "directive", type: IgxPrefixDirective, selector: "igx-prefix,[igxPrefix],[igxStart]" }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "pipe", type: IgxNumberFormatterPipe, name: "number" }, { kind: "pipe", type: IgxPercentFormatterPipe, name: "percent" }, { kind: "pipe", type: IgxCurrencyFormatterPipe, name: "currency" }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxGridCellImageAltPipe, name: "igxCellImageAlt" }, { kind: "pipe", type: IgxStringReplacePipe, name: "igxStringReplace" }, { kind: "pipe", type: IgxColumnFormatterPipe, name: "columnFormatter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxGridCellComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-cell', providers: [HammerGesturesManager], imports: [
                         NgClass,
                         NgTemplateOutlet,
-                        DecimalPipe,
-                        PercentPipe,
-                        CurrencyPipe,
-                        DatePipe,
+                        IgxNumberFormatterPipe,
+                        IgxPercentFormatterPipe,
+                        IgxCurrencyFormatterPipe,
+                        IgxDateFormatterPipe,
                         ReactiveFormsModule,
                         IgxChipComponent,
                         IgxTextHighlightDirective,