igniteui-angular 22.2.0 → 22.2.1

package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs

@@ -748,15 +748,6 @@ class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective {
         ref.instance.validators = col.validators;
         return ref;
     }
-    getGridsForIsland(rowIslandID) {
-        return this.gridAPI.getChildGridsForRowIsland(rowIslandID);
-    }
-    getChildGrid(path) {
-        if (!path) {
-            return;
-        }
-        return this.gridAPI.getChildGrid(path);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxHierarchicalGridBaseDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.2.0", type: IgxHierarchicalGridBaseDirective, isStandalone: true, inputs: { hasChildrenKey: "hasChildrenKey", showExpandAll: ["showExpandAll", "showExpandAll", booleanAttribute] }, outputs: { dataPreLoad: "dataPreLoad" }, usesInheritance: true, ngImport: i0 }); }
 }
@@ -783,7 +774,6 @@ const flatten = (arr) => {
 
 class IgxRowIslandAPIService {
     constructor() {
-        this.change = new Subject();
         this.state = new Map();
         this.destroyMap = new Map();
         this.childRowIslands = new Map();
@@ -867,6 +857,11 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
         super(...arguments);
         /* blazorSuppress */
         this.rowIslandAPI = inject(IgxRowIslandAPIService);
+        /**
+         * The row island this one is declared in. Resolved through the injector, since row islands
+         * rendered conditionally are initialized before their parent updates its children.
+         */
+        this.declaringIsland = inject(IgxRowIslandComponent, { optional: true, skipSelf: true });
         /**
          * @hidden
          */
@@ -944,7 +939,7 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
         this.updateGridsResources();
     }
     get resourceStrings() {
-        return super.resourceStrings ?? this.rootGrid.resourceStrings;
+        return this._resourceStrings || !this.rootGrid ? super.resourceStrings : this.rootGrid.resourceStrings;
     }
     /* csSuppress */
     /**
@@ -1033,9 +1028,9 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
     set expandChildren(value) {
         this._defaultExpandState = value;
         this.rowIslandAPI.getChildGrids().forEach((grid) => {
+            grid.expandChildren = value;
             if (this.document.body.contains(grid.nativeElement)) {
                 // Detect changes right away if the grid is visible
-                grid.expandChildren = value;
                 grid.cdr.detectChanges();
             }
             else {
@@ -1084,6 +1079,10 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
      * @hidden
      */
     ngOnInit() {
+        // islands of a grid declared in a row island template resolve that row island too, but belong to another grid
+        if (this.declaringIsland?.gridAPI === this.gridAPI) {
+            this.parentIsland ??= this.declaringIsland;
+        }
         this.filteringService.grid = this;
         this.rootGrid = this.gridAPI.grid;
         this.rowIslandAPI.rowIsland = this;
@@ -1175,7 +1174,8 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
         this._destroyed = true;
         this.rowIslandAPI.unset(this.id);
         if (this.parentIsland) {
-            this.getGridsForIsland(this.key).forEach(grid => {
+            // the grids rendering this row island are the ones created from its parent row island
+            this.parentIsland.rowIslandAPI.getChildGrids().forEach(grid => {
                 this.cleanGridState(grid);
                 grid.gridAPI.unsetChildRowIsland(this);
             });
@@ -1220,9 +1220,6 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
         });
     }
     updateChildren() {
-        if (this.children.first === this) {
-            this.children.reset(this.children.toArray().slice(1));
-        }
         this.children.forEach(child => {
             child.parentIsland = this;
         });
@@ -1300,7 +1297,7 @@ class IgxGridHierarchicalPipe {
     constructor() {
         this.grid = inject(IGX_GRID_BASE);
     }
-    transform(collection, state = new Map(), _id, primaryKey, childKeys, _pipeTrigger) {
+    transform(collection, state, _id, primaryKey, childKeys, _pipeTrigger) {
         if (childKeys.length === 0) {
             return collection;
         }
@@ -1346,7 +1343,7 @@ class IgxGridHierarchicalPagingPipe {
     constructor() {
         this.grid = inject(IGX_GRID_BASE);
     }
-    transform(collection, enabled, page = 0, perPage = 15, _id, _pipeTrigger) {
+    transform(collection, enabled, page, perPage, _id, _pipeTrigger) {
         if (!enabled || this.grid.pagingMode !== 'local') {
             return collection;
         }
@@ -1506,8 +1503,6 @@ class IgxHierarchicalRowComponent extends IgxRowDirective {
         if (this.added) {
             return;
         }
-        // K.D. 28 Feb, 2022 #10634 Don't trigger endEdit/commit upon row expansion state change
-        // this.endEdit(this.grid.rootGrid);
         this.grid.gridAPI.set_row_expansion_state(this.key, !this.expanded);
         this.grid.cdr.detectChanges();
     }
@@ -1529,17 +1524,6 @@ class IgxHierarchicalRowComponent extends IgxRowDirective {
             return this.grid.rowCollapsedIndicatorTemplate || this.defaultCollapsedTemplate;
         }
     }
-    // TODO: consider moving into CRUD
-    endEdit(grid) {
-        if (grid.gridAPI.crudService.cellInEditMode) {
-            grid.gridAPI.crudService.endEdit();
-        }
-        grid.gridAPI.getChildGrids(true).forEach(g => {
-            if (g.gridAPI.crudService.cellInEditMode) {
-                g.gridAPI.crudService.endEdit();
-            }
-        });
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxHierarchicalRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxHierarchicalRowComponent, isStandalone: true, selector: "igx-hierarchical-grid-row", host: { properties: { "class.igx-grid__tr--expanded": "this.expandedClass", "class.igx-grid__tr--highlighted": "this.highlighted" } }, providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxHierarchicalRowComponent) }], viewQueries: [{ propertyName: "expander", first: true, predicate: ["expander"], descendants: true, read: ElementRef }, { propertyName: "defaultExpandedTemplate", first: true, predicate: ["defaultExpandedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultEmptyTemplate", first: true, predicate: ["defaultEmptyTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultCollapsedTemplate", first: true, predicate: ["defaultCollapsedTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "_cells", predicate: i0.forwardRef(() => IgxHierarchicalGridCellComponent), descendants: true, read: IgxHierarchicalGridCellComponent }], usesInheritance: true, ngImport: i0, template: "<ng-container\n  *ngTemplateOutlet=\"addRowUI ? addTemp : defaultTemp\"\n></ng-container>\n<ng-template #defaultExpandedTemplate>\n  <igx-icon family=\"default\" name=\"tree_collapse\" [active]=\"!added\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultCollapsedTemplate>\n  <igx-icon family=\"default\" name=\"tree_expand\" [active]=\"!added\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultEmptyTemplate>\n  <!-- Empty icon used as spacer for size matching-->\n  <igx-icon></igx-icon>\n</ng-template>\n\n<ng-template #addTemp>\n  <div\n    class=\"igx-grid__tr--inner\"\n    [class.igx-grid__tr--add-animate]=\"triggerAddAnimationClass\"\n    (animationend)=\"animationEndHandler()\"\n  >\n    <ng-container *ngTemplateOutlet=\"defaultTemp\"></ng-container>\n  </div>\n</ng-template>\n<ng-template #defaultTemp>\n  <!-- Drag indicator -->\n  @if (rowDraggable) {\n    <div\n      [class]=\"resolveDragIndicatorClasses\"\n      role=\"gridcell\"\n      [igxRowDrag]=\"this\"\n      (click)=\"$event.stopPropagation()\"\n      [ghostTemplate]=\"this.grid.getDragGhostCustomTemplate()!\"\n      (pointerdown)=\"$event.preventDefault()\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          this.grid.dragIndicatorIconTemplate\n            ? this.grid.dragIndicatorIconTemplate\n            : this.grid.dragIndicatorIconBase\n        \"\n      ></ng-container>\n    </div>\n  }\n\n  <!-- Select Row -->\n  @if (showRowSelectors) {\n    <div\n      class=\"igx-grid__cbx-selection igx-grid__tr-action\"\n      role=\"gridcell\"\n      (click)=\"onRowSelectorClick($event)\"\n      (pointerdown)=\"$event.preventDefault()\"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"\n          this.grid.rowSelectorTemplate\n            ? this.grid.rowSelectorTemplate\n            : rowSelectorBaseTemplate;\n          context: {\n            $implicit: {\n              index: viewIndex,\n              rowID: key,\n              key,\n              selected: selected,\n              select: select,\n              deselect: deselect,\n            },\n          }\n        \"\n      >\n      </ng-template>\n    </div>\n  }\n\n  <!-- Row Expander -->\n  @if (hasChildren) {\n    <div\n      (click)=\"expanderClick($event)\"\n      (mousedown)=\"$event.preventDefault()\"\n      [ngClass]=\"expanderClassResolved\"\n      #expander\n    >\n      <ng-container\n        *ngTemplateOutlet=\"iconTemplate; context: { $implicit: this }\"\n      >\n      </ng-container>\n    </div>\n  }\n\n  @if (pinnedStartColumns.length > 0) {\n    <ng-template\n      *ngTemplateOutlet=\"\n        pinnedCellsTemplate;\n        context: { $implicit: this, columns: pinnedStartColumns }\n      \"\n    ></ng-template>\n  }\n\n  <ng-template\n    igxGridFor\n    let-col\n    [igxGridForOf]=\"unpinnedColumns | igxNotGrouped\"\n    [igxForScrollContainer]=\"grid.parentVirtDir\"\n    let-colIndex=\"index\"\n    [igxForSizePropName]=\"'calcPixelWidth'\"\n    [igxForScrollOrientation]=\"'horizontal'\"\n    [igxForContainerSize]=\"grid.unpinnedWidth\"\n    [igxForTrackBy]=\"grid.trackColumnChanges\"\n    #igxDirRef\n  >\n    @if (this.hasMergedCells) {\n      <div\n        [style.height.px]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n            ? getRowHeight()\n            : null\n        \"\n        class=\"igx-grid__mrl-block\"\n        [style.visibility]=\"\n          this.metaData?.cellMergeMeta.get(col.field)?.root\n            ? 'hidden'\n            : 'visible'\n        \"\n        [ngStyle]=\"{\n          'grid-template-rows':\n            this.metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n              ? this.getMergeCellSpan(col)\n              : null,\n        }\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            cellTemplate;\n            context: { $implicit: this, column: col }\n          \"\n        ></ng-container>\n      </div>\n    } @else {\n      <ng-container\n        *ngTemplateOutlet=\"\n          cellTemplate;\n          context: { $implicit: this, column: col }\n        \"\n      ></ng-container>\n    }\n  </ng-template>\n\n  @if (pinnedEndColumns.length > 0) {\n    <ng-template\n      *ngTemplateOutlet=\"\n        pinnedCellsTemplate;\n        context: { $implicit: this, columns: pinnedEndColumns }\n      \"\n    ></ng-template>\n  }\n\n  <ng-template #rowSelectorBaseTemplate>\n    <div class=\"igx-grid__cbx-padding\">\n      <igx-checkbox\n        [tabindex]=\"-1\"\n        [readonly]=\"true\"\n        [checked]=\"selected\"\n        [disableRipple]=\"true\"\n        [disabled]=\"deleted\"\n        [disableTransitions]=\"grid.disableTransitions\"\n        [aria-label]=\"rowCheckboxAriaLabel\"\n      >\n      </igx-checkbox>\n    </div>\n  </ng-template>\n\n  <ng-template #pinnedCellsTemplate let-col let-columns=\"columns\">\n    @for (col of columns | igxNotGrouped; track trackPinnedColumn(col)) {\n      <igx-hierarchical-grid-cell\n        class=\"igx-grid__td igx-grid__td--fw igx-grid__td--pinned\"\n        [class.igx-grid__td--edited]=\"\n          key\n            | transactionState\n              : col.field\n              : grid.rowEditable\n              : grid.transactions\n              : grid.pipeTrigger\n              : grid.gridAPI.crudService.cell\n              : grid.gridAPI.crudService.row\n        \"\n        [class.igx-grid__td--number]=\"\n          col.dataType === 'number' ||\n          col.dataType === 'percent' ||\n          col.dataType === 'currency'\n        \"\n        [ngClass]=\"\n          col.cellClasses\n            | igxCellStyleClasses\n              : data[col.field]\n              : data\n              : col.field\n              : viewIndex\n              : grid.pipeTrigger\n        \"\n        [ngStyle]=\"\n          col.cellStyles\n            | igxCellStyles\n              : data[col.field]\n              : data\n              : col.field\n              : viewIndex\n              : grid.pipeTrigger\n        \"\n        [editMode]=\"\n          col.editable && this.grid.crudService.targetInEdit(index, col.index)\n        \"\n        [column]=\"col\"\n        [formatter]=\"col.formatter\"\n        [intRow]=\"this\"\n        [active]=\"isCellActive(col.visibleIndex)\"\n        [firstPinned]=\"col.isFirstPinned\"\n        [lastPinned]=\"col.isLastPinned\"\n        [rowData]=\"data\"\n        [style.min-width]=\"col.resolvedWidth\"\n        [style.max-width]=\"col.resolvedWidth\"\n        [style.flex-basis]=\"col.resolvedWidth\"\n        [width]=\"col.getCellWidth()\"\n        [visibleColumnIndex]=\"col.visibleIndex\"\n        [value]=\"\n          data\n            | dataMapper\n              : col.field\n              : grid.pipeTrigger\n              : data[col.field]\n              : col.hasNestedPath\n        \"\n        [cellTemplate]=\"col.bodyTemplate\"\n        [cellValidationErrorTemplate]=\"col.errorTemplate\"\n        [lastSearchInfo]=\"grid.lastSearchInfo\"\n        [cellSelectionMode]=\"grid.cellSelection\"\n        [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n      >\n      </igx-hierarchical-grid-cell>\n    }\n  </ng-template>\n</ng-template>\n\n<ng-template #cellTemplate let-col=\"column\">\n  <igx-hierarchical-grid-cell\n    [class.igx-grid__td--merged]=\"\n      metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1\n    \"\n    [isMerged]=\"\n      $safeNavigationMigration(\n        metaData?.cellMergeMeta.get(col.field)?.rowSpan\n      ) > 1\n    \"\n    [isPlaceholder]=\"!!this.metaData?.cellMergeMeta.get(col.field)?.root\"\n    [class.igx-grid__td--merged-selected]=\"isSelectionRoot(col)\"\n    [class.igx-grid__td--merged-hovered]=\"isHoveredRoot(col)\"\n    class=\"igx-grid__td igx-grid__td--fw\"\n    [class.igx-grid__td--edited]=\"\n      key\n        | transactionState\n          : col.field\n          : grid.rowEditable\n          : grid.transactions\n          : grid.pipeTrigger\n          : grid.gridAPI.crudService.cell\n          : grid.gridAPI.crudService.row\n    \"\n    [class.igx-grid__td--number]=\"\n      col.dataType === 'number' ||\n      col.dataType === 'percent' ||\n      col.dataType === 'currency'\n    \"\n    [class.igx-grid__td--bool]=\"col.dataType === 'boolean'\"\n    [ngClass]=\"\n      col.cellClasses\n        | igxCellStyleClasses\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [ngStyle]=\"\n      col.cellStyles\n        | igxCellStyles\n          : data[col.field]\n          : data\n          : col.field\n          : viewIndex\n          : grid.pipeTrigger\n    \"\n    [editMode]=\"\n      col.editable && this.grid.crudService.targetInEdit(index, col.index)\n    \"\n    [column]=\"col\"\n    [formatter]=\"col.formatter\"\n    [intRow]=\"this\"\n    [active]=\"isCellActive(col.visibleIndex)\"\n    [rowData]=\"data\"\n    [style.min-width]=\"col.resolvedWidth\"\n    [style.max-width]=\"col.resolvedWidth\"\n    [style.flex-basis]=\"col.resolvedWidth\"\n    [width]=\"col.getCellWidth()\"\n    [visibleColumnIndex]=\"col.visibleIndex\"\n    [value]=\"\n      data\n        | dataMapper\n          : col.field\n          : grid.pipeTrigger\n          : data[col.field]\n          : col.hasNestedPath\n    \"\n    [cellTemplate]=\"col.bodyTemplate\"\n    [cellValidationErrorTemplate]=\"col.errorTemplate\"\n    [lastSearchInfo]=\"grid.lastSearchInfo\"\n    [cellSelectionMode]=\"grid.cellSelection\"\n    [displayPinnedChip]=\"shouldDisplayPinnedChip(col)\"\n  >\n  </igx-hierarchical-grid-cell>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxRowDragDirective, selector: "[igxRowDrag]", inputs: ["igxRowDrag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IgxGridForOfDirective, selector: "[igxGridFor][igxGridForOf]", inputs: ["igxGridForOf", "igxGridForOfUniqueSizeCache", "igxGridForOfVariableSizes"], outputs: ["dataChanging"] }, { kind: "component", type: IgxHierarchicalGridCellComponent, selector: "igx-hierarchical-grid-cell" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "pipe", type: IgxGridNotGroupedPipe, name: "igxNotGrouped" }, { kind: "pipe", type: IgxGridCellStylesPipe, name: "igxCellStyles" }, { kind: "pipe", type: IgxGridCellStyleClassesPipe, name: "igxCellStyleClasses" }, { kind: "pipe", type: IgxGridDataMapperPipe, name: "dataMapper" }, { kind: "pipe", type: IgxGridTransactionStatePipe, name: "transactionState" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -2498,21 +2482,14 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
             return keys.indexOf(field) === -1;
         });
     }
-    resizeNotifyHandler() {
-        // do not trigger reflow if element is detached or if it is child grid.
-        if (this.nativeElement?.isConnected && !this.parent) {
-            this.notifyChanges(true);
-        }
-    }
     /**
      * @hidden
      */
     initColumns(collection, cb = null) {
-        if (this.hasColumnLayouts) {
+        if (collection.some((col) => col.columnLayout)) {
             // invalid configuration - hierarchical grid should not allow column layouts
             // remove column layouts
-            const nonColumnLayoutColumns = this.columns.filter((col) => !col.columnLayout && !col.columnLayoutChild);
-            this.updateColumns(nonColumnLayoutColumns);
+            collection = collection.filter((col) => !col.columnLayout && !col.columnLayoutChild);
         }
         super.initColumns(collection, cb);
     }
@@ -2620,7 +2597,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
             if (!firstRowData) {
                 return null;
             }
-            const childFirstRowData = firstRowData.length > 0 && firstRowData[childRowIsland.key]?.length > 0 ?
+            const childFirstRowData = firstRowData[childRowIsland.key]?.length > 0 ?
                 firstRowData[childRowIsland.key][0] : null;
             return acc.concat(this.generateChildEntity(childRowIsland, childFirstRowData));
         }, []);