igniteui-angular 16.1.16 → 16.1.18

package/fesm2022/igniteui-angular.mjs

@@ -4050,7 +4050,7 @@ class IgxBaseExporter {
             let currKey = '';
             let summaryKey = '';
             if (this._setChildSummaries) {
-                currKey = `'${groupExpressionName}': '${recordVal}'`;
+                currKey = `'${record.expression.fieldName}': '${recordVal}'`;
                 summaryKeysArr = summaryKeysArr.filter(a => a !== previousKey);
                 previousKey = currKey;
                 summaryKeysArr.push(currKey);
@@ -5193,7 +5193,7 @@ class WorksheetFile {
         if (worksheetData.hasSummaries && (isValidRecordType || (worksheetData.isGroupedGrid && isSummaryRecord))) {
             this.setSummaryCoordinates(columnName, key, fullRow.hierarchicalOwner, worksheetData.isGroupedGrid && isSummaryRecord);
         }
-        if (fullRow.summaryKey && fullRow.summaryKey === GRID_ROOT_SUMMARY && key !== GRID_LEVEL_COL && !this.isValidGrid) {
+        if (fullRow.summaryKey && fullRow.summaryKey === GRID_ROOT_SUMMARY && key !== GRID_LEVEL_COL && worksheetData.isGroupedGrid) {
             this.setRootSummaryStartCoordinate(column, key);
             if (this.firstColumn > column) {
                 this.setRootSummaryStartCoordinate(worksheetData.columnCount + 1, GRID_LEVEL_COL);
@@ -5337,8 +5337,9 @@ class WorksheetFile {
     }
     setRootSummaryStartCoordinate(column, key) {
         const firstDataRecordColName = ExcelStrings.getExcelColumn(column) + (this.firstDataRow);
-        if (this.dimensionMap.get(key).startCoordinate !== firstDataRecordColName) {
-            this.dimensionMap.get(key).startCoordinate = firstDataRecordColName;
+        const targetMap = this.hierarchicalDimensionMap.get(GRID_PARENT);
+        if (targetMap.get(key).startCoordinate !== firstDataRecordColName) {
+            targetMap.get(key).startCoordinate = firstDataRecordColName;
         }
     }
     printHeaders(worksheetData, headersForLevel, i, isVertical) {
@@ -10135,9 +10136,7 @@ class IgxButtonDirective extends DisplayDensityBase {
     set selected(value) {
         if (this._selected !== value) {
             this._selected = value;
-            this.buttonSelected.emit({
-                button: this
-            });
+            this._renderer.setAttribute(this.nativeElement, 'data-selected', value.toString());
         }
     }
     get selected() {
@@ -10182,6 +10181,13 @@ class IgxButtonDirective extends DisplayDensityBase {
          */
         this._selected = false;
     }
+    ngAfterContentInit() {
+        this.nativeElement.addEventListener('click', () => {
+            this.buttonSelected.emit({
+                button: this
+            });
+        });
+    }
     /**
      * @hidden
      * @internal
@@ -10328,7 +10334,7 @@ class IgxButtonDirective extends DisplayDensityBase {
      * @internal
      */
     deselect() {
-        this._selected = false;
+        this.selected = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DisplayDensityToken, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.8", type: IgxButtonDirective, isStandalone: true, selector: "[igxButton]", inputs: { selected: "selected", type: ["igxButton", "type"], color: ["igxButtonColor", "color"], background: ["igxButtonBackground", "background"], label: ["igxLabel", "label"], disabled: "disabled" }, outputs: { buttonClick: "buttonClick", buttonSelected: "buttonSelected" }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.role": "this.role", "class.igx-button": "this._cssClass", "class.igx-button--disabled": "this.disabled", "class.igx-button--flat": "this.flat", "class.igx-button--raised": "this.raised", "class.igx-button--outlined": "this.outlined", "class.igx-button--icon": "this.icon", "class.igx-button--fab": "this.fab", "style.--component-size": "this.componentSize", "attr.disabled": "this.disabledAttribute" } }, usesInheritance: true, ngImport: i0 }); }
@@ -29633,10 +29639,14 @@ class IgxButtonGroupComponent extends DisplayDensityBase {
          */
         this.selectedIndexes = [];
         this.buttonClickNotifier$ = new Subject();
-        this.buttonSelectedNotifier$ = new Subject();
         this.queryListNotifier$ = new Subject();
         this._disabled = false;
         this._selectionMode = 'single';
+        this.observerConfig = {
+            attributeFilter: ["data-selected"],
+            childList: true,
+            subtree: true,
+        };
     }
     /**
      * Gets the selected button/buttons.
@@ -29668,6 +29678,7 @@ class IgxButtonGroupComponent extends DisplayDensityBase {
         if (index >= this.buttons.length || index < 0) {
             return;
         }
+        this.updateSelected(index);
         const button = this.buttons[index];
         button.select();
     }
@@ -29680,24 +29691,19 @@ class IgxButtonGroupComponent extends DisplayDensityBase {
         if (this.selectedIndexes.indexOf(index) === -1) {
             this.selectedIndexes.push(index);
         }
-        if (button.selected) {
-            this._renderer.setAttribute(button.nativeElement, 'aria-pressed', 'true');
-            this._renderer.addClass(button.nativeElement, 'igx-button-group__item--selected');
-            const indexInViewButtons = this.viewButtons.toArray().indexOf(button);
-            if (indexInViewButtons !== -1) {
-                this.values[indexInViewButtons].selected = true;
-            }
-            // deselect other buttons if selectionMode is not multi
-            if (this.selectionMode !== 'multi' && this.selectedIndexes.length > 1) {
-                this.buttons.forEach((_, i) => {
-                    if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {
-                        this.deselectButton(i);
-                    }
-                });
-            }
+        this._renderer.setAttribute(button.nativeElement, 'aria-pressed', 'true');
+        this._renderer.addClass(button.nativeElement, 'igx-button-group__item--selected');
+        const indexInViewButtons = this.viewButtons.toArray().indexOf(button);
+        if (indexInViewButtons !== -1) {
+            this.values[indexInViewButtons].selected = true;
         }
-        else {
-            this.deselectButton(index);
+        // deselect other buttons if selectionMode is not multi
+        if (this.selectionMode !== 'multi' && this.selectedIndexes.length > 1) {
+            this.buttons.forEach((_, i) => {
+                if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {
+                    this.deselectButton(i);
+                }
+            });
         }
     }
     /**
@@ -29756,15 +29762,14 @@ class IgxButtonGroupComponent extends DisplayDensityBase {
                     this.updateSelected(index);
                 }
                 button.buttonClick.pipe(takeUntil(this.buttonClickNotifier$)).subscribe((_) => this._clickHandler(index));
-                button.buttonSelected
-                    .pipe(takeUntil(this.buttonSelectedNotifier$))
-                    .subscribe((_) => this.updateSelected(index));
             });
         };
         this.viewButtons.changes.pipe(takeUntil(this.queryListNotifier$)).subscribe(() => initButtons());
         this.templateButtons.changes.pipe(takeUntil(this.queryListNotifier$)).subscribe(() => initButtons());
         initButtons();
         this._cdr.detectChanges();
+        this.mutationObserver = this.setMutationsObserver();
+        this.mutationObserver.observe(this._el.nativeElement, this.observerConfig);
     }
     /**
      * @hidden
@@ -29772,15 +29777,15 @@ class IgxButtonGroupComponent extends DisplayDensityBase {
     ngOnDestroy() {
         this.buttonClickNotifier$.next();
         this.buttonClickNotifier$.complete();
-        this.buttonSelectedNotifier$.next();
-        this.buttonSelectedNotifier$.complete();
         this.queryListNotifier$.next();
         this.queryListNotifier$.complete();
+        this.mutationObserver.disconnect();
     }
     /**
      * @hidden
      */
     _clickHandler(index) {
+        this.mutationObserver.disconnect();
         const button = this.buttons[index];
         const args = { owner: this, button, index };
         if (this.selectionMode !== 'multi') {
@@ -29800,6 +29805,43 @@ class IgxButtonGroupComponent extends DisplayDensityBase {
                 this.deselected.emit(args);
             }
         }
+        this.mutationObserver.observe(this._el.nativeElement, this.observerConfig);
+    }
+    setMutationsObserver() {
+        return new MutationObserver((records, observer) => {
+            // Stop observing while handling changes
+            observer.disconnect();
+            const updatedButtons = this.getUpdatedButtons(records);
+            if (updatedButtons.length > 0) {
+                updatedButtons.forEach((button) => {
+                    const index = this.buttons.map((b) => b.nativeElement).indexOf(button);
+                    const args = { owner: this, button: this.buttons[index], index };
+                    this.updateButtonSelectionState(index, args);
+                });
+            }
+            // Watch for changes again
+            observer.observe(this._el.nativeElement, this.observerConfig);
+        });
+    }
+    getUpdatedButtons(records) {
+        const updated = [];
+        records
+            .filter((x) => x.type === 'attributes')
+            .reduce((prev, curr) => {
+            prev.push(curr.target);
+            return prev;
+        }, updated);
+        return updated;
+    }
+    updateButtonSelectionState(index, args) {
+        if (this.selectedIndexes.indexOf(index) === -1) {
+            this.selectButton(index);
+            this.selected.emit(args);
+        }
+        else {
+            this.deselectButton(index);
+            this.deselected.emit(args);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxButtonGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DisplayDensityToken, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: IgxButtonGroupComponent, isStandalone: true, selector: "igx-buttongroup", inputs: { id: "id", itemContentCssClass: "itemContentCssClass", multiSelection: "multiSelection", selectionMode: "selectionMode", values: "values", disabled: "disabled", alignment: "alignment" }, outputs: { selected: "selected", deselected: "deselected" }, host: { properties: { "attr.id": "this.id", "style.zIndex": "this.zIndex" } }, queries: [{ propertyName: "templateButtons", predicate: IgxButtonDirective }], viewQueries: [{ propertyName: "viewButtons", predicate: IgxButtonDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-button-group\" role=\"group\" [class.igx-button-group--vertical]=\"isVertical\">\n    <button *ngFor=\"let button of values; let i = 'index'\"\n        type=\"button\"\n        igxButton=\"flat\"\n        [displayDensity]=\"displayDensity\"\n        [selected]=\"button.selected\"\n        [attr.data-togglable]=\"button.togglable\"\n        [disabled]=\"disabled || button.disabled\"\n        [igxButtonColor]=\"button.color\"\n        [igxButtonBackground]=\"button.bgcolor\"\n        [igxLabel]=\"button.label\"\n        [igxRipple]=\"button.ripple\"\n    >\n        <span class=\"igx-button-group__item-content {{ itemContentCssClass }}\">\n            <igx-icon *ngIf=\"button.icon\">{{button.icon}}</igx-icon>\n            <span class=\"igx-button-group__button-text\" *ngIf=\"button.label\">{{button.label}}</span>\n        </span>\n    </button>\n    <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxButtonColor", "igxButtonBackground", "igxLabel", "disabled"], outputs: ["buttonClick", "buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "active", "name"] }] }); }
@@ -30918,8 +30960,10 @@ class IgxCalendarBaseDirective {
      * @hidden
      */
     selectSingle(value) {
-        this.selectedDates = this.getDateOnly(value);
-        this._onChangeCallback(this.selectedDates);
+        if (!isEqual(this.selectedDates, value)) {
+            this.selectedDates = this.getDateOnly(value);
+            this._onChangeCallback(this.selectedDates);
+        }
     }
     /**
      * Performs a multiple selection
@@ -45108,6 +45152,9 @@ class IgxColumnGroupComponent extends IgxColumnComponent {
         }
         this.children.forEach(child => {
             child.parent = this;
+            if (this.pinned) {
+                child.pinned = this.pinned;
+            }
         });
         if (this.collapsible) {
             this.setExpandCollapseState();
@@ -45115,10 +45162,20 @@ class IgxColumnGroupComponent extends IgxColumnComponent {
         this.children.changes
             .pipe(takeUntil(this.destroy$))
             .subscribe((change) => {
-            change.forEach(x => x.parent = this);
+            let shouldReinitPinning = false;
+            change.forEach(x => {
+                x.parent = this;
+                if (this.pinned && x.pinned !== this.pinned) {
+                    shouldReinitPinning = true;
+                    x.pinned = this.pinned;
+                }
+            });
             if (this.collapsible) {
                 this.setExpandCollapseState();
             }
+            if (shouldReinitPinning) {
+                this.grid.initPinning();
+            }
         });
     }
     /** @hidden @internal **/
@@ -67415,16 +67472,21 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         if (diff) {
             let added = false;
             let removed = false;
+            let pinning = false;
             diff.forEachAddedItem((record) => {
                 added = true;
                 if (record.item.pinned) {
                     this._pinnedColumns.push(record.item);
+                    pinning = true;
                 }
                 else {
                     this._unpinnedColumns.push(record.item);
                 }
             });
             this.initColumns(this.columnList.toArray(), (col) => this.columnInit.emit(col));
+            if (pinning) {
+                this.initPinning();
+            }
             diff.forEachRemovedItem((record) => {
                 const isColumnGroup = record.item instanceof IgxColumnGroupComponent;
                 if (!isColumnGroup) {
@@ -67990,42 +68052,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * @hidden
      */
     initPinning() {
-        const pinnedColumns = [];
-        const unpinnedColumns = [];
         this.calculateGridWidth();
         this.resetCaches();
-        // When a column is a group or is inside a group, pin all related.
-        this._pinnedColumns.forEach(col => {
-            if (col.parent) {
-                col.parent.pinned = true;
-            }
-            if (col.columnGroup) {
-                col.children.forEach(child => child.pinned = true);
-            }
-        });
-        // Make sure we don't exceed unpinned area min width and get pinned and unpinned col collections.
-        // We take into account top level columns (top level groups and non groups).
-        // If top level is unpinned the pinning handles all children to be unpinned as well.
-        for (const column of this._columns) {
-            if (column.pinned && !column.parent) {
-                pinnedColumns.push(column);
-            }
-            else if (column.pinned && column.parent) {
-                if (column.topLevelParent.pinned) {
-                    pinnedColumns.push(column);
-                }
-                else {
-                    column.pinned = false;
-                    unpinnedColumns.push(column);
-                }
-            }
-            else {
-                unpinnedColumns.push(column);
-            }
-        }
-        // Assign the applicable collections.
-        this._pinnedColumns = pinnedColumns;
-        this._unpinnedColumns = unpinnedColumns;
+        this.handleColumnPinningForGroups();
         this.notifyChanges();
     }
     /**
@@ -68411,6 +68440,42 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         settings.target = targetRow.element.nativeElement;
         this.toggleRowEditingOverlay(true);
     }
+    handleColumnPinningForGroups() {
+        // When a column is a group or is inside a group, pin all related.
+        const pinnedColumns = [];
+        const unpinnedColumns = [];
+        this._pinnedColumns.forEach(col => {
+            if (col.parent) {
+                col.parent.pinned = true;
+            }
+            if (col.columnGroup) {
+                col.children.forEach(child => child.pinned = true);
+            }
+        });
+        // Make sure we don't exceed unpinned area min width and get pinned and unpinned col collections.
+        // We take into account top level columns (top level groups and non groups).
+        // If top level is unpinned the pinning handles all children to be unpinned as well.
+        for (const column of this._columns) {
+            if (column.pinned && !column.parent) {
+                pinnedColumns.push(column);
+            }
+            else if (column.pinned && column.parent) {
+                if (column.topLevelParent.pinned) {
+                    pinnedColumns.push(column);
+                }
+                else {
+                    column.pinned = false;
+                    unpinnedColumns.push(column);
+                }
+            }
+            else {
+                unpinnedColumns.push(column);
+            }
+        }
+        // Assign the applicable collections.
+        this._pinnedColumns = pinnedColumns;
+        this._unpinnedColumns = unpinnedColumns;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: IgxGridBaseDirective, deps: [{ token: IgxGridValidationService }, { token: IgxGridSelectionService }, { token: IgxColumnResizingService }, { token: IGX_GRID_SERVICE_BASE }, { token: IgxFlatTransactionFactory }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: i0.IterableDiffers }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.EnvironmentInjector }, { token: IgxGridNavigationService }, { token: IgxFilteringService }, { token: IgxOverlayService }, { token: IgxGridSummaryService }, { token: DisplayDensityToken, optional: true }, { token: LOCALE_ID }, { token: PlatformUtil }, { token: IgxGridTransaction, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.8", type: IgxGridBaseDirective, inputs: { snackbarDisplayTime: "snackbarDisplayTime", autoGenerate: "autoGenerate", autoGenerateExclude: "autoGenerateExclude", moving: "moving", emptyGridTemplate: "emptyGridTemplate", addRowEmptyTemplate: "addRowEmptyTemplate", loadingGridTemplate: "loadingGridTemplate", summaryRowHeight: "summaryRowHeight", dataCloneStrategy: "dataCloneStrategy", clipboardOptions: "clipboardOptions", rowClasses: "rowClasses", rowStyles: "rowStyles", primaryKey: "primaryKey", uniqueColumnValuesStrategy: "uniqueColumnValuesStrategy", dragGhostCustomTemplate: "dragGhostCustomTemplate", rowEditTextTemplate: "rowEditTextTemplate", rowAddTextTemplate: "rowAddTextTemplate", rowEditActionsTemplate: "rowEditActionsTemplate", rowExpandedIndicatorTemplate: "rowExpandedIndicatorTemplate", rowCollapsedIndicatorTemplate: "rowCollapsedIndicatorTemplate", headerExpandedIndicatorTemplate: "headerExpandedIndicatorTemplate", headerCollapsedIndicatorTemplate: "headerCollapsedIndicatorTemplate", excelStyleHeaderIconTemplate: "excelStyleHeaderIconTemplate", sortAscendingHeaderIconTemplate: "sortAscendingHeaderIconTemplate", sortDescendingHeaderIconTemplate: "sortDescendingHeaderIconTemplate", sortHeaderIconTemplate: "sortHeaderIconTemplate", resourceStrings: "resourceStrings", filteringLogic: "filteringLogic", filteringExpressionsTree: "filteringExpressionsTree", advancedFilteringExpressionsTree: "advancedFilteringExpressionsTree", locale: "locale", pagingMode: "pagingMode", hideRowSelectors: "hideRowSelectors", rowDraggable: "rowDraggable", validationTrigger: "validationTrigger", rowEditable: "rowEditable", height: "height", width: "width", rowHeight: "rowHeight", columnWidth: "columnWidth", emptyGridMessage: "emptyGridMessage", isLoading: "isLoading", emptyFilteredGridMessage: "emptyFilteredGridMessage", pinning: "pinning", allowFiltering: "allowFiltering", allowAdvancedFiltering: "allowAdvancedFiltering", filterMode: "filterMode", summaryPosition: "summaryPosition", summaryCalculationMode: "summaryCalculationMode", showSummaryOnCollapse: "showSummaryOnCollapse", filterStrategy: "filterStrategy", sortStrategy: "sortStrategy", sortingOptions: "sortingOptions", selectedRows: "selectedRows", headSelectorTemplate: "headSelectorTemplate", rowSelectorTemplate: "rowSelectorTemplate", dragIndicatorIconTemplate: "dragIndicatorIconTemplate", sortingExpressions: "sortingExpressions", batchEditing: "batchEditing", cellSelection: "cellSelection", rowSelection: "rowSelection", columnSelection: "columnSelection", expansionStates: "expansionStates", outlet: "outlet", totalRecords: "totalRecords", selectRowOnClick: "selectRowOnClick" }, outputs: { filteringExpressionsTreeChange: "filteringExpressionsTreeChange", advancedFilteringExpressionsTreeChange: "advancedFilteringExpressionsTreeChange", gridScroll: "gridScroll", cellClick: "cellClick", formGroupCreated: "formGroupCreated", validationStatusChange: "validationStatusChange", selected: "selected", rowSelectionChanging: "rowSelectionChanging", columnSelectionChanging: "columnSelectionChanging", columnPin: "columnPin", columnPinned: "columnPinned", cellEditEnter: "cellEditEnter", cellEditExit: "cellEditExit", cellEdit: "cellEdit", cellEditDone: "cellEditDone", rowEditEnter: "rowEditEnter", rowEdit: "rowEdit", rowEditDone: "rowEditDone", rowEditExit: "rowEditExit", columnInit: "columnInit", sorting: "sorting", sortingDone: "sortingDone", filtering: "filtering", filteringDone: "filteringDone", rowAdded: "rowAdded", rowDeleted: "rowDeleted", rowDelete: "rowDelete", rowAdd: "rowAdd", columnResized: "columnResized", contextMenu: "contextMenu", doubleClick: "doubleClick", columnVisibilityChanging: "columnVisibilityChanging", columnVisibilityChanged: "columnVisibilityChanged", columnMovingStart: "columnMovingStart", columnMoving: "columnMoving", columnMovingEnd: "columnMovingEnd", gridKeydown: "gridKeydown", rowDragStart: "rowDragStart", rowDragEnd: "rowDragEnd", gridCopy: "gridCopy", expansionStatesChange: "expansionStatesChange", rowToggle: "rowToggle", rowPinning: "rowPinning", rowPinned: "rowPinned", activeNodeChange: "activeNodeChange", sortingExpressionsChange: "sortingExpressionsChange", toolbarExporting: "toolbarExporting", rangeSelected: "rangeSelected", rendered: "rendered", localeChange: "localeChange", dataChanging: "dataChanging", dataChanged: "dataChanged" }, host: { listeners: { "mouseleave": "hideActionStrip()" }, properties: { "attr.tabindex": "this.tabindex", "attr.role": "this.hostRole", "class.igx-grid": "this.baseClass", "style.--component-size": "this.hostStyles", "style.height": "this.height", "style.width": "this.hostWidth" } }, queries: [{ propertyName: "actionStrip", first: true, predicate: IgxActionStripComponent, descendants: true }, { propertyName: "excelStyleLoadingValuesTemplateDirective", first: true, predicate: IgxExcelStyleLoadingValuesTemplateDirective, descendants: true, read: IgxExcelStyleLoadingValuesTemplateDirective, static: true }, { propertyName: "rowAddText", first: true, predicate: IgxRowAddTextDirective, descendants: true, read: TemplateRef }, { propertyName: "rowExpandedIndicatorDirectiveTemplate", first: true, predicate: IgxRowExpandedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "rowCollapsedIndicatorDirectiveTemplate", first: true, predicate: IgxRowCollapsedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerExpandedIndicatorDirectiveTemplate", first: true, predicate: IgxHeaderExpandedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "headerCollapsedIndicatorDirectiveTemplate", first: true, predicate: IgxHeaderCollapsedIndicatorDirective, descendants: true, read: TemplateRef }, { propertyName: "excelStyleHeaderIconDirectiveTemplate", first: true, predicate: IgxExcelStyleHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortAscendingHeaderIconDirectiveTemplate", first: true, predicate: IgxSortAscendingHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortDescendingHeaderIconDirectiveTemplate", first: true, predicate: IgxSortDescendingHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "sortHeaderIconDirectiveTemplate", first: true, predicate: IgxSortHeaderIconDirective, descendants: true, read: TemplateRef }, { propertyName: "excelStyleFilteringComponents", predicate: IgxGridExcelStyleFilteringComponent, read: IgxGridExcelStyleFilteringComponent }, { propertyName: "columnList", predicate: IgxColumnComponent, descendants: true, read: IgxColumnComponent }, { propertyName: "headSelectorsTemplates", predicate: IgxHeadSelectorDirective, read: TemplateRef }, { propertyName: "rowSelectorsTemplates", predicate: IgxRowSelectorDirective, read: TemplateRef }, { propertyName: "dragGhostCustomTemplates", predicate: IgxRowDragGhostDirective, read: TemplateRef }, { propertyName: "rowEditCustomDirectives", predicate: IgxRowEditTemplateDirective, read: TemplateRef }, { propertyName: "rowEditTextDirectives", predicate: IgxRowEditTextDirective, read: TemplateRef }, { propertyName: "rowEditActionsDirectives", predicate: IgxRowEditActionsDirective, read: TemplateRef }, { propertyName: "dragIndicatorIconTemplates", predicate: IgxDragIndicatorIconDirective, read: TemplateRef }, { propertyName: "rowEditTabsCUSTOM", predicate: IgxRowEditTabStopDirective, descendants: true }, { propertyName: "toolbar", predicate: IgxGridToolbarComponent }, { propertyName: "paginationComponents", predicate: IgxPaginatorComponent }], viewQueries: [{ propertyName: "addRowSnackbar", first: true, predicate: IgxSnackbarComponent, descendants: true }, { propertyName: "resizeLine", first: true, predicate: IgxGridColumnResizerComponent, descendants: true }, { propertyName: "loadingOverlay", first: true, predicate: ["loadingOverlay"], descendants: true, read: IgxToggleDirective, static: true }, { propertyName: "loadingOutlet", first: true, predicate: ["igxLoadingOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "emptyFilteredGridTemplate", first: true, predicate: ["emptyFilteredGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "emptyGridDefaultTemplate", first: true, predicate: ["defaultEmptyGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "loadingGridDefaultTemplate", first: true, predicate: ["defaultLoadingGrid"], descendants: true, read: TemplateRef, static: true }, { propertyName: "parentVirtDir", first: true, predicate: ["scrollContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "verticalScrollContainer", first: true, predicate: ["verticalScrollContainer"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "verticalScroll", first: true, predicate: ["verticalScrollHolder"], descendants: true, read: IgxGridForOfDirective, static: true }, { propertyName: "scr", first: true, predicate: ["scr"], descendants: true, read: ElementRef, static: true }, { propertyName: "headerSelectorBaseTemplate", first: true, predicate: ["headSelectorBaseTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true, read: ElementRef }, { propertyName: "theadRow", first: true, predicate: IgxGridHeaderRowComponent, descendants: true, static: true }, { propertyName: "groupArea", first: true, predicate: IgxGridGroupByAreaComponent, descendants: true }, { propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true, static: true }, { propertyName: "pinContainer", first: true, predicate: ["pinContainer"], descendants: true, read: ElementRef }, { propertyName: "tfoot", first: true, predicate: ["tfoot"], descendants: true, static: true }, { propertyName: "rowEditingOutletDirective", first: true, predicate: ["igxRowEditingOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "dragIndicatorIconBase", first: true, predicate: ["dragIndicatorIconBase"], descendants: true, read: TemplateRef, static: true }, { propertyName: "rowEditingOverlay", first: true, predicate: ["rowEditingOverlay"], descendants: true, read: IgxToggleDirective }, { propertyName: "_outletDirective", first: true, predicate: ["igxFilteringOverlayOutlet"], descendants: true, read: IgxOverlayOutletDirective, static: true }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultESFHeaderIconTemplate", first: true, predicate: ["defaultESFHeaderIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultRowEditTemplate", first: true, predicate: ["defaultRowEditTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "tmpOutlets", predicate: IgxTemplateOutletDirective, descendants: true, read: IgxTemplateOutletDirective }, { propertyName: "rowEditTabsDEFAULT", predicate: IgxRowEditTabStopDirective, descendants: true }, { propertyName: "_summaryRowList", predicate: ["summaryRow"], descendants: true, read: IgxSummaryRowComponent }, { propertyName: "_rowList", predicate: ["row"], descendants: true }, { propertyName: "_pinnedRowList", predicate: ["pinnedRow"], descendants: true }, { propertyName: "_dataRowList", predicate: IgxRowDirective, descendants: true, read: IgxRowDirective }], usesInheritance: true, ngImport: i0 }); }
 }
@@ -82122,8 +82187,8 @@ class IgxChildGridRowComponent {
     }
     set data(value) {
         this._data = value;
-        if (this.hGrid) {
-            this.hGrid.data = this._data.childGridsData[this.layout.key];
+        if (this.hGrid && !this.hGrid.dataSetByUser) {
+            this.hGrid.setDataInternal(this._data.childGridsData[this.layout.key]);
         }
     }
     /**
@@ -82179,7 +82244,7 @@ class IgxChildGridRowComponent {
     ngOnInit() {
         const ref = this.container.createComponent(IgxHierarchicalGridComponent, { injector: this.container.injector });
         this.hGrid = ref.instance;
-        this.hGrid.data = this.data.childGridsData[this.layout.key];
+        this.hGrid.setDataInternal(this.data.childGridsData[this.layout.key]);
         this.layout.layoutChange.subscribe((ch) => {
             this._handleLayoutChanges(ch);
         });
@@ -82278,6 +82343,8 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
          * @hidden
          */
         this.childLayoutKeys = [];
+        /** @hidden @internal */
+        this.dataSetByUser = false;
         /**
          * @hidden
          */
@@ -82322,20 +82389,8 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
      * @memberof IgxHierarchicalGridComponent
      */
     set data(value) {
-        this._data = value || [];
-        this.summaryService.clearSummaryCache();
-        if (!this._init) {
-            this.validation.updateAll(this._data);
-        }
-        if (this.shouldGenerate) {
-            this.setupColumns();
-            this.reflow();
-        }
-        this.cdr.markForCheck();
-        if (this.parent && (this.height === null || this.height.indexOf('%') !== -1)) {
-            // If the height will change based on how much data there is, recalculate sizes in igxForOf.
-            this.notifyChanges(true);
-        }
+        this.setDataInternal(value);
+        this.dataSetByUser = true;
     }
     /**
      * Returns an array of data set to the `IgxHierarchicalGridComponent`.
@@ -82640,6 +82695,23 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
         const row = this.getRowByKey(rowID);
         return super.pinRow(rowID, index, row);
     }
+    /** @hidden @internal */
+    setDataInternal(value) {
+        this._data = value || [];
+        this.summaryService.clearSummaryCache();
+        if (!this._init) {
+            this.validation.updateAll(this._data);
+        }
+        if (this.shouldGenerate) {
+            this.setupColumns();
+            this.reflow();
+        }
+        this.cdr.markForCheck();
+        if (this.parent && (this.height === null || this.height.indexOf('%') !== -1)) {
+            // If the height will change based on how much data there is, recalculate sizes in igxForOf.
+            this.notifyChanges(true);
+        }
+    }
     unpinRow(rowID) {
         const row = this.getRowByKey(rowID);
         return super.unpinRow(rowID, row);