igniteui-angular 19.2.8 → 19.2.10

package/fesm2022/igniteui-angular.mjs

@@ -238,17 +238,9 @@ const getResizeObserver = () => globalThis.window?.ResizeObserver;
 /**
  * @hidden
  */
-const cloneArray = (array, deep) => {
-    const arr = [];
-    if (!array) {
-        return arr;
-    }
-    let i = array.length;
-    while (i--) {
-        arr[i] = deep ? cloneValue(array[i]) : array[i];
-    }
-    return arr;
-};
+function cloneArray(array, deep = false) {
+    return deep ? (array ?? []).map(cloneValue) : (array ?? []).slice();
+}
 /**
  * Doesn't clone leaf items
  *
@@ -306,7 +298,7 @@ const cloneValue = (value) => {
         return new Date(value.getTime());
     }
     if (Array.isArray(value)) {
-        return [...value];
+        return value.slice();
     }
     if (value instanceof Map || value instanceof Set) {
         return value;
@@ -613,10 +605,8 @@ const resizeObservable = (target) => {
             return unsubscribe;
         });
     }
-    else {
-        // if on a server env return a empty observable that does not complete immediately
-        return NEVER;
-    }
+    // if on a server env return a empty observable that does not complete immediately
+    return NEVER;
 };
 /**
  * @hidden
@@ -626,7 +616,7 @@ const resizeObservable = (target) => {
  */
 const compareMaps = (map1, map2) => {
     if (!map2) {
-        return !map1 ? true : false;
+        return !map1;
     }
     if (map1.size !== map2.size) {
         return false;
@@ -646,24 +636,34 @@ const compareMaps = (map1, map2) => {
     }
     return match;
 };
+function _isObject(entity) {
+    return entity != null && typeof entity === 'object';
+}
+function columnFieldPath(path) {
+    return path?.split('.') ?? [];
+}
 /**
- *
  * Given a property access path in the format `x.y.z` resolves and returns
  * the value of the `z` property in the passed object.
  *
  * @hidden
  * @internal
  */
-const resolveNestedPath = (obj, path) => {
-    const parts = path?.split('.') ?? [];
-    let current = obj[parts.shift()];
-    parts.forEach(prop => {
-        if (current) {
-            current = current[prop];
+function resolveNestedPath(obj, pathParts, defaultValue) {
+    if (!_isObject(obj) || pathParts.length < 1) {
+        return defaultValue;
+    }
+    let current = obj;
+    for (const key of pathParts) {
+        if (_isObject(current) && key in current) {
+            current = current[key];
         }
-    });
+        else {
+            return defaultValue;
+        }
+    }
     return current;
-};
+}
 /**
  *
  * Given a property access path in the format `x.y.z` and a value
@@ -779,7 +779,6 @@ function getComponentCssSizeVar(size) {
             return 'var(--ig-size, var(--ig-size-small))';
         case "2":
             return 'var(--ig-size, var(--ig-size-medium))';
-        case "3":
         default:
             return 'var(--ig-size, var(--ig-size-large))';
     }
@@ -1050,7 +1049,7 @@ class IgxSorting {
    * @internal
    */
     getFieldValue(obj, key, isDate = false, isTime = false) {
-        let resolvedValue = resolveNestedPath(obj, key);
+        let resolvedValue = resolveNestedPath(obj, columnFieldPath(key));
         const date = parseDate(resolvedValue);
         if (date && isDate && isTime) {
             resolvedValue = date;
@@ -3349,9 +3348,6 @@ class BaseFilteringStrategy {
             if (!records) { // child grid is not yet created
                 return true;
             }
-            else if (records.length === 0) { // child grid is empty
-                return false;
-            }
             for (let index = 0; index < records.length; index++) {
                 const record = records[index];
                 if ((shouldMatchRecords && this.matchRecord(record, expr.searchTree, grid, expr.searchTree.entity)) ||
@@ -3373,7 +3369,7 @@ class BaseFilteringStrategy {
                 const expressionsTree = expressions;
                 const operator = expressionsTree.operator;
                 let matchOperand;
-                if (expressionsTree.filteringOperands && expressionsTree.filteringOperands.length) {
+                if (expressionsTree.filteringOperands?.length) {
                     for (const operand of expressionsTree.filteringOperands) {
                         matchOperand = this.matchRecord(rec, operand, grid, entity);
                         // Return false if at least one operand does not match and the filtering logic is And
@@ -3423,15 +3419,14 @@ class BaseFilteringStrategy {
         return null;
     }
     getFilterItems(column, tree) {
+        const applyFormatter = column.formatter && this.shouldFormatFilterValues(column);
         let data = column.grid.gridAPI.filterDataByExpressions(tree);
         data = column.grid.gridAPI.sortDataByExpressions(data, [{ fieldName: column.field, dir: SortingDirection.Asc, ignoreCase: column.sortingIgnoreCase }]);
-        const columnField = column.field;
+        const pathParts = columnFieldPath(column.field);
         let filterItems = data.map(record => {
-            let value = resolveNestedPath(record, columnField);
-            const applyFormatter = column.formatter && this.shouldFormatFilterValues(column);
-            value = applyFormatter ?
-                column.formatter(value, record) :
-                value;
+            const value = applyFormatter ?
+                column.formatter(resolveNestedPath(record, pathParts), record) :
+                resolveNestedPath(record, pathParts);
             return {
                 value,
                 label: this.getFilterItemLabel(column, value, !applyFormatter, record)
@@ -3508,31 +3503,18 @@ class NoopFilteringStrategy extends BaseFilteringStrategy {
 }
 class FilteringStrategy extends BaseFilteringStrategy {
     static { this._instance = null; }
-    constructor() {
-        super();
-    }
     static instance() {
         return this._instance || (this._instance = new this());
     }
     filter(data, expressionsTree, advancedExpressionsTree, grid) {
-        let i;
-        let rec;
-        const len = data.length;
-        const res = [];
-        if ((FilteringExpressionsTree.empty(expressionsTree) && FilteringExpressionsTree.empty(advancedExpressionsTree)) || !len) {
+        if ((FilteringExpressionsTree.empty(expressionsTree) && FilteringExpressionsTree.empty(advancedExpressionsTree))) {
             return data;
         }
-        for (i = 0; i < len; i++) {
-            rec = data[i];
-            if (this.matchRecord(rec, expressionsTree, grid) && this.matchRecord(rec, advancedExpressionsTree, grid)) {
-                res.push(rec);
-            }
-        }
-        return res;
+        return data.filter(record => this.matchRecord(record, expressionsTree, grid) && this.matchRecord(record, advancedExpressionsTree, grid));
     }
     getFieldValue(rec, fieldName, isDate = false, isTime = false, grid) {
         const column = grid?.getColumnByName(fieldName);
-        let value = resolveNestedPath(rec, fieldName);
+        let value = resolveNestedPath(rec, columnFieldPath(fieldName));
         value = column?.formatter && this.shouldFormatFilterValues(column) ?
             column.formatter(value, rec) :
             value && (isDate || isTime) ? parseDate(value) : value;
@@ -3568,14 +3550,14 @@ class TreeGridFilteringStrategy extends BaseFilteringStrategy {
         const hierarchicalRecord = rec;
         let value = this.isHierarchicalFilterField(fieldName) ?
             this.getHierarchicalFieldValue(hierarchicalRecord, fieldName) :
-            resolveNestedPath(hierarchicalRecord.data, fieldName);
+            resolveNestedPath(hierarchicalRecord.data, columnFieldPath(fieldName));
         value = column?.formatter && this.shouldFormatFilterValues(column) ?
             column.formatter(value, rec.data) :
             value && (isDate || isTime) ? parseDate(value) : value;
         return value;
     }
     getHierarchicalFieldValue(record, field) {
-        const value = resolveNestedPath(record.data, field);
+        const value = resolveNestedPath(record.data, columnFieldPath(field));
         return record.parent ?
             `${this.getHierarchicalFieldValue(record.parent, field)}${value ? `.[${value}]` : ''}` :
             `[${value}]`;
@@ -3618,8 +3600,9 @@ class TreeGridFilteringStrategy extends BaseFilteringStrategy {
         return Promise.resolve(items);
     }
     getHierarchicalFilterItems(records, column, parent) {
+        const pathParts = columnFieldPath(column.field);
         return records?.map(record => {
-            let value = resolveNestedPath(record.data, column.field);
+            let value = resolveNestedPath(record.data, pathParts);
             const applyFormatter = column.formatter && this.shouldFormatFilterValues(column);
             value = applyFormatter ?
                 column.formatter(value, record.data) :
@@ -4061,7 +4044,7 @@ class IgxBaseExporter {
                 }
                 record.data = columns.reduce((a, e) => {
                     if (!e.skip) {
-                        let rawValue = resolveNestedPath(record.data, e.field);
+                        let rawValue = resolveNestedPath(record.data, columnFieldPath(e.field));
                         const shouldApplyFormatter = e.formatter && !e.skipFormatter && record.type !== ExportRecordType.GroupedRecord;
                         const isOfDateType = e.dataType === 'date' || e.dataType === 'dateTime' || e.dataType === 'time';
                         if (isOfDateType &&
@@ -31701,7 +31684,7 @@ class IgxCalendarBaseDirective {
             case 'month':
                 return `${this.resourceStrings.igx_calendar_previous_month}, ${detail}`;
             case 'year':
-                return this.resourceStrings.igx_calendar_previous_year.replace('{0}', '15');
+                return this.resourceStrings.igx_calendar_previous_year;
             case 'decade':
                 return this.resourceStrings.igx_calendar_previous_years.replace('{0}', '15');
         }
@@ -31711,7 +31694,7 @@ class IgxCalendarBaseDirective {
             case 'month':
                 return `${this.resourceStrings.igx_calendar_next_month}, ${detail}`;
             case 'year':
-                return this.resourceStrings.igx_calendar_next_year.replace('{0}', '15');
+                return this.resourceStrings.igx_calendar_next_year;
             case 'decade':
                 return this.resourceStrings.igx_calendar_next_years.replace('{0}', '15');
         }
@@ -34141,7 +34124,7 @@ class IgxMonthPickerComponent extends IgxCalendarBaseDirective {
                 multi: false,
                 provide: KeyboardNavigationService
             },
-        ], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "monthsView", first: true, predicate: ["months"], descendants: true, read: IgxMonthsViewComponent }, { propertyName: "dacadeView", first: true, predicate: ["decade"], descendants: true, read: IgxYearsViewComponent }, { propertyName: "daysView", first: true, predicate: ["days"], descendants: true, read: IgxDaysViewComponent }, { propertyName: "yearsBtn", first: true, predicate: ["yearsBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevYearDate(viewDate) | date: 'YYYY'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        (mousedown)=\"previousPage()\"\n        (keydown)=\"changePageKB($event, false)\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextYearDate(viewDate) | date: 'YYYY'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        (mousedown)=\"nextPage()\"\n        (keydown)=\"changePageKB($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                    *ngTemplateOutlet=\"defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<div\n    #wrapper\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <caption id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        {{ resourceStrings.igx_calendar_singular_single_selection}}\n    </caption>\n\n    <section class=\"igx-calendar__pickers\">\n        @if (isDefaultView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\">\n        @if (isDefaultView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectMonth($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            >\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectYear($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\"\n            >\n            </igx-years-view>\n        }\n    </section>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxMonthsViewComponent, selector: "igx-months-view", inputs: ["id", "standalone", "monthFormat", "formatView"] }, { kind: "component", type: IgxYearsViewComponent, selector: "igx-years-view", inputs: ["standalone", "yearFormat"] }] }); }
+        ], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "monthsView", first: true, predicate: ["months"], descendants: true, read: IgxMonthsViewComponent }, { propertyName: "dacadeView", first: true, predicate: ["decade"], descendants: true, read: IgxYearsViewComponent }, { propertyName: "daysView", first: true, predicate: ["days"], descendants: true, read: IgxDaysViewComponent }, { propertyName: "yearsBtn", first: true, predicate: ["yearsBtn"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevYearDate(viewDate) | date: 'yyyy'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        (mousedown)=\"previousPage()\"\n        (keydown)=\"changePageKB($event, false)\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextYearDate(viewDate) | date: 'yyyy'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        (mousedown)=\"nextPage()\"\n        (keydown)=\"changePageKB($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                    *ngTemplateOutlet=\"defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<div\n    #wrapper\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <caption id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        {{ resourceStrings.igx_calendar_singular_single_selection}}\n    </caption>\n\n    <section class=\"igx-calendar__pickers\">\n        @if (isDefaultView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\">\n        @if (isDefaultView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectMonth($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            >\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectYear($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\"\n            >\n            </igx-years-view>\n        }\n    </section>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxMonthsViewComponent, selector: "igx-months-view", inputs: ["id", "standalone", "monthFormat", "formatView"] }, { kind: "component", type: IgxYearsViewComponent, selector: "igx-years-view", inputs: ["standalone", "yearFormat"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IgxMonthPickerComponent, decorators: [{
             type: Component,
@@ -34161,7 +34144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         IgxIconComponent,
                         IgxMonthsViewComponent,
                         IgxYearsViewComponent,
-                    ], template: "<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevYearDate(viewDate) | date: 'YYYY'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        (mousedown)=\"previousPage()\"\n        (keydown)=\"changePageKB($event, false)\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextYearDate(viewDate) | date: 'YYYY'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        (mousedown)=\"nextPage()\"\n        (keydown)=\"changePageKB($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                    *ngTemplateOutlet=\"defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<div\n    #wrapper\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <caption id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        {{ resourceStrings.igx_calendar_singular_single_selection}}\n    </caption>\n\n    <section class=\"igx-calendar__pickers\">\n        @if (isDefaultView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\">\n        @if (isDefaultView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectMonth($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            >\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectYear($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\"\n            >\n            </igx-years-view>\n        }\n    </section>\n</div>\n" }]
+                    ], template: "<!-- Previous arrow icon -->\n<ng-template #prevArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_prev\"></igx-icon>\n</ng-template>\n\n<!-- Next arrow icon -->\n<ng-template #nextArrow let-obj>\n    <igx-icon aria-hidden=\"true\" family=\"default\" name=\"arrow_next\"></igx-icon>\n</ng-template>\n\n<!-- Previous picker button -->\n<ng-template #prevPageButton let-obj>\n    <div\n        #prevPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__prev\"\n        role=\"button\"\n        [attr.aria-label]=\"prevNavLabel((getPrevYearDate(viewDate) | date: 'yyyy'))\"\n        data-action=\"prev\"\n        igxCalendarScrollPage\n        (mousedown)=\"previousPage()\"\n        (keydown)=\"changePageKB($event, false)\"\n    >\n        <ng-container *ngTemplateOutlet=\"prevArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Next picker button -->\n<ng-template #nextPageButton let-obj>\n    <div\n        #nextPageBtn\n        tabindex=\"0\"\n        class=\"igx-calendar-picker__next\"\n        role=\"button\"\n        [attr.aria-label]=\"nextNavLabel((getNextYearDate(viewDate) | date: 'yyyy'))\"\n        data-action=\"next\"\n        igxCalendarScrollPage\n        (mousedown)=\"nextPage()\"\n        (keydown)=\"changePageKB($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"nextArrow\"></ng-container>\n    </div>\n</ng-template>\n\n<!-- Year -->\n<ng-template #defaultYear let-obj>\n    @if (activeView === 'year') {\n        <span class=\"igx-calendar__aria-off-screen\" aria-live=\"polite\">{{ formattedYear(obj.date) }}</span>\n    }\n    <span\n        #yearsBtn\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"(obj.date | date: 'yyyy') + ', ' + resourceStrings.igx_calendar_select_year\"\n        (keydown)=\"onActiveViewDecadeKB(obj.date, $event, obj.index)\"\n        (mousedown)=\"onActiveViewDecade($event, obj.date, obj.index)\"\n        class=\"igx-calendar-picker__date\">\n        {{ formattedYear(obj.date) }}\n    </span>\n</ng-template>\n\n<!-- Decade -->\n<ng-template #defaultDecade>\n    <span>{{ getDecadeRange().start }} - {{ getDecadeRange().end }}</span>\n</ng-template>\n\n<!-- PICKER IN MONTHS -->\n<ng-template #calendarYearPicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\">\n            <ng-container\n                *ngTemplateOutlet=\"defaultYear; context: getContext(0)\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<!-- PICKER IN YEARS -->\n<ng-template #calendarDecadePicker>\n    <section class=\"igx-calendar-picker\">\n        <div class=\"igx-calendar-picker__dates\" aria-live=\"polite\">\n            <ng-container\n                    *ngTemplateOutlet=\"defaultDecade;\">\n            </ng-container>\n        </div>\n        <div class=\"igx-calendar-picker__nav\">\n            <ng-container *ngTemplateOutlet=\"prevPageButton\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"nextPageButton\"></ng-container>\n        </div>\n    </section>\n</ng-template>\n\n<div\n    #wrapper\n    [tabIndex]=\"0\"\n    class=\"igx-calendar__wrapper\"\n    [attr.aria-activedescendant]=\"activeDescendant\"\n    [attr.aria-multiselectable]=\"selection !== 'single'\"\n    aria-labelledby=\"calendar-desc\"\n    role=\"grid\"\n    (focus)=\"this.onWrapperFocus($event)\"\n    (blur)=\"this.onWrapperBlur($event)\"\n    >\n    <caption id=\"calendar-desc\" tabindex=\"-1\" class=\"igx-calendar__aria-off-screen\">\n        {{ resourceStrings.igx_calendar_singular_single_selection}}\n    </caption>\n\n    <section class=\"igx-calendar__pickers\">\n        @if (isDefaultView) {\n            <ng-container *ngTemplateOutlet=\"calendarYearPicker\"></ng-container>\n        }\n\n        @if (isDecadeView) {\n            <ng-container *ngTemplateOutlet=\"calendarDecadePicker\"></ng-container>\n        }\n    </section>\n\n    <section class=\"igx-calendar__body\">\n        @if (isDefaultView) {\n            <igx-months-view\n                #months\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.month\"\n                [monthFormat]=\"formatOptions.month\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectMonth($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\">\n            >\n            </igx-months-view>\n        }\n\n        @if (isDecadeView) {\n            <igx-years-view\n                #decade\n                role=\"rowgroup\"\n                [tabIndex]=\"-1\"\n                [date]=\"viewDate\"\n                [locale]=\"locale\"\n                [formatView]=\"formatViews.year\"\n                [yearFormat]=\"formatOptions.year\"\n                [showActive]=\"showActiveDay\"\n                [standalone]=\"false\"\n                (swiperight)=\"previousPage()\"\n                (swipeleft)=\"nextPage()\"\n                (selected)=\"selectYear($event)\"\n                (pageChanged)=\"updateDate($event)\"\n                (mousedown)=\"$event.preventDefault()\"\n            >\n            </igx-years-view>\n        }\n    </section>\n</div>\n" }]
         }], propDecorators: { id: [{
                 type: HostBinding,
                 args: ["attr.id"]
@@ -43041,7 +43024,7 @@ class IgxGridCell {
         // will return undefined for a column layout, because getCellByColumnVisibleIndex may return the column layout at that index.
         // getCellByColumnVisibleIndex is deprecated and will be removed in future version
         return this.column.field ?
-            this.column.hasNestedPath ? resolveNestedPath(this.row?.data, this.column.field) : this.row?.data[this.column.field]
+            this.column.hasNestedPath ? resolveNestedPath(this.row?.data, columnFieldPath(this.column.field)) : this.row?.data[this.column.field]
             : undefined;
     }
     /**
@@ -61048,10 +61031,11 @@ class IgxGridCellStyleClassesPipe {
             return '';
         }
         const result = [];
+        const pathParts = columnFieldPath(field);
         for (const cssClass of Object.keys(cssClasses)) {
             const callbackOrValue = cssClasses[cssClass];
             const apply = typeof callbackOrValue === 'function' ?
-                callbackOrValue(data, field, resolveNestedPath(data, field), index) : callbackOrValue;
+                callbackOrValue(data, field, resolveNestedPath(data, pathParts), index) : callbackOrValue;
             if (apply) {
                 result.push(cssClass);
             }
@@ -61078,9 +61062,10 @@ class IgxGridCellStylesPipe {
         if (!styles) {
             return css;
         }
+        const pathParts = columnFieldPath(field);
         for (const prop of Object.keys(styles)) {
             const res = styles[prop];
-            css[prop] = typeof res === 'function' ? res(data, field, resolveNestedPath(data, field), index) : res;
+            css[prop] = typeof res === 'function' ? res(data, field, resolveNestedPath(data, pathParts), index) : res;
         }
         return css;
     }
@@ -61374,7 +61359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 }] }], propDecorators: { transform: [] } });
 class IgxGridDataMapperPipe {
     transform(data, field, _, val, isNestedPath) {
-        return isNestedPath ? resolveNestedPath(data, field) : val;
+        return isNestedPath ? resolveNestedPath(data, columnFieldPath(field)) : val;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IgxGridDataMapperPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: IgxGridDataMapperPipe, isStandalone: true, name: "dataMapper" }); }
@@ -61405,14 +61390,14 @@ class IgxGridTransactionStatePipe {
         if (rowEditable) {
             const rowCurrentState = transactions.getAggregatedValue(row_id, false);
             if (rowCurrentState) {
-                const value = resolveNestedPath(rowCurrentState, field);
+                const value = resolveNestedPath(rowCurrentState, columnFieldPath(field));
                 return value !== undefined && value !== null;
             }
         }
         else {
             const transaction = transactions.getState(row_id);
-            const value = resolveNestedPath(transaction?.value ?? {}, field);
-            return transaction && transaction.value && (value || value === 0 || value === false);
+            const value = resolveNestedPath(transaction?.value ?? {}, columnFieldPath(field));
+            return transaction?.value && (value || value === 0 || value === false);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IgxGridTransactionStatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
@@ -62773,7 +62758,7 @@ class IgxGridValidationService {
     * @internal
     */
     addFormControl(formGroup, data, column) {
-        const value = resolveNestedPath(data || {}, column.field);
+        const value = resolveNestedPath(data || {}, columnFieldPath(column.field));
         const field = this.getFieldKey(column.field);
         const control = new FormControl(value, { updateOn: this.grid.validationTrigger });
         control.addValidators(column.validators);
@@ -63690,7 +63675,7 @@ class IgxGridSummaryService {
         }
         if (!args) {
             this.summaryCacheMap.clear();
-            if (this.grid && this.grid.rootSummariesEnabled) {
+            if (this.grid?.rootSummariesEnabled) {
                 this.retriggerRootPipe++;
             }
             return;
@@ -63779,15 +63764,17 @@ class IgxGridSummaryService {
         if (!this.hasSummarizedColumns || !data) {
             return rowSummaries;
         }
-        this.grid.columns.filter(col => col.hasSummary).forEach((column) => {
+        const columns = this.grid.columns.filter(col => col.hasSummary);
+        const columnPathParts = columns.map(col => columnFieldPath(col.field));
+        for (const [idx, column] of columns.entries()) {
             if (!rowSummaries.get(column.field)) {
-                let summaryResult = column.summaries.operate(data.map(r => resolveNestedPath(r, column.field)), data, column.field, groupRecord, this.grid.locale, column.pipeArgs);
+                let summaryResult = column.summaries.operate(data.map(r => resolveNestedPath(r, columnPathParts[idx])), data, column.field, groupRecord, this.grid.locale, column.pipeArgs);
                 summaryResult = column.disabledSummaries.length > 0
                     ? summaryResult.filter(s => !column.disabledSummaries.includes(s.key))
                     : summaryResult;
                 rowSummaries.set(column.field, summaryResult);
             }
-        });
+        }
         return rowSummaries;
     }
     resetSummaryHeight() {
@@ -69285,7 +69272,7 @@ class IgxGridBaseDirective {
         });
     }
     getColumnList() {
-        return this.columnList.toArray();
+        return this.columnList.toArray().filter((col) => col.grid === this);
     }
     /**
      * @hidden
@@ -69339,6 +69326,9 @@ class IgxGridBaseDirective {
             let removed = false;
             let pinning = false;
             diff.forEachAddedItem((record) => {
+                if (record.item.grid !== this) {
+                    return;
+                }
                 added = true;
                 if (record.item.pinned) {
                     this._pinnedColumns.push(record.item);
@@ -69348,11 +69338,14 @@ class IgxGridBaseDirective {
                     this._unpinnedColumns.push(record.item);
                 }
             });
-            this.initColumns(this.columnList.toArray(), (col) => this.columnInit.emit(col));
+            this.initColumns(this.getColumnList(), (col) => this.columnInit.emit(col));
             if (pinning) {
                 this.initPinning();
             }
             diff.forEachRemovedItem((record) => {
+                if (record.item.grid !== this) {
+                    return;
+                }
                 const isColumnGroup = record.item instanceof IgxColumnGroupComponent;
                 if (!isColumnGroup) {
                     // Clear Grouping
@@ -69798,7 +69791,7 @@ class IgxGridBaseDirective {
                         const key = this.type !== 'pivot' && headers ? col.header || col.field : col.field;
                         const rowData = source[row].ghostRecord ? source[row].recordRef : source[row];
                         const value = this.type === 'pivot' ? rowData.aggregationValues.get(col.field)
-                            : resolveNestedPath(rowData, col.field);
+                            : resolveNestedPath(rowData, columnFieldPath(col.field));
                         record[key] = formatters && col.formatter ? col.formatter(value, rowData) : value;
                         if (columnData) {
                             if (!record[key]) {
@@ -70267,14 +70260,15 @@ class IgxGridBaseDirective {
         const searchText = caseSensitive ? this._lastSearchInfo.searchText : this._lastSearchInfo.searchText.toLowerCase();
         const data = this.filteredSortedData;
         const columnItems = this.visibleColumns.filter((c) => !c.columnGroup).sort((c1, c2) => c1.visibleIndex - c2.visibleIndex);
+        const columnsPathParts = columnItems.map(col => columnFieldPath(col.field));
         data.forEach((dataRow, rowIndex) => {
-            columnItems.forEach((c) => {
+            columnItems.forEach((c, cid) => {
                 const pipeArgs = this.getColumnByName(c.field).pipeArgs;
-                const value = c.formatter ? c.formatter(resolveNestedPath(dataRow, c.field), dataRow) :
-                    c.dataType === 'number' ? formatNumber(resolveNestedPath(dataRow, c.field), this.locale, pipeArgs.digitsInfo) :
+                const value = c.formatter ? c.formatter(resolveNestedPath(dataRow, columnsPathParts[cid]), dataRow) :
+                    c.dataType === 'number' ? formatNumber(resolveNestedPath(dataRow, columnsPathParts[cid]), this.locale, pipeArgs.digitsInfo) :
                         c.dataType === 'date'
-                            ? formatDate(resolveNestedPath(dataRow, c.field), pipeArgs.format, this.locale, pipeArgs.timezone)
-                            : resolveNestedPath(dataRow, c.field);
+                            ? formatDate(resolveNestedPath(dataRow, columnsPathParts[cid]), pipeArgs.format, this.locale, pipeArgs.timezone)
+                            : resolveNestedPath(dataRow, columnsPathParts[cid]);
                 if (value !== undefined && value !== null && c.searchable) {
                     let searchValue = caseSensitive ? String(value) : String(value).toLowerCase();
                     if (exactMatch) {
@@ -77299,10 +77293,11 @@ class IgxPivotGridCellStyleClassesPipe {
             return '';
         }
         const result = [];
+        const pathParts = columnFieldPath(columnData.field);
         for (const cssClass of Object.keys(cssClasses)) {
             const callbackOrValue = cssClasses[cssClass];
             const apply = typeof callbackOrValue === 'function' ?
-                callbackOrValue(rowData, columnData, resolveNestedPath(rowData, columnData.field), index) : callbackOrValue;
+                callbackOrValue(rowData, columnData, resolveNestedPath(rowData, pathParts), index) : callbackOrValue;
             if (apply) {
                 result.push(cssClass);
             }
@@ -86194,7 +86189,7 @@ class IgxGridHierarchicalPipe {
                     v[childKey] = [];
                 }
                 const hasNestedPath = childKey?.includes('.');
-                const childData = !hasNestedPath ? v[childKey] : resolveNestedPath(v, childKey);
+                const childData = !hasNestedPath ? v[childKey] : resolveNestedPath(v, columnFieldPath(childKey));
                 childGridsData[childKey] = childData;
             });
             if (grid.gridAPI.get_row_expansion_state(v)) {