@acorex/components 20.4.7 → 20.4.9

package/fesm2022/acorex-components-data-table.mjs

@@ -37,6 +37,12 @@ class AXBaseDataTable extends MXBaseComponent {
          * @defaultValue `parentId`
          */
         this.parentField = undefined;
+        /**
+         * Field name on each row that indicates whether the row has children (for showing expand icon).
+         *
+         * @defaultValue `hasChild`
+         */
+        this.hasChildrenField = 'hasChild';
         this.selectedRowsChange = new EventEmitter();
         this._selectedRows = signal([], ...(ngDevMode ? [{ debugName: "_selectedRows" }] : []));
     }
@@ -140,6 +146,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 type: Input
             }], parentField: [{
                 type: Input
+            }], hasChildrenField: [{
+                type: Input
             }], rowDetailsTemplate: [{
                 type: Input
             }], selectedRowsChange: [{
@@ -361,7 +369,7 @@ class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
     <ng-template #header>{{ caption }}</ng-template>
     <ng-template #cell let-row>
       <div class="ax-flex ax-items-center ax-gap-2">
-        @if (expandHandler) {
+        @if (expandHandler && (row.data?.[grid.hasChildrenField] !== false || (row.data?.children?.length ?? 0) > 0)) {
           <div
             (click)="handleExpandRow(row)"
             class="ax-expand-handler"
@@ -399,7 +407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
     <ng-template #header>{{ caption }}</ng-template>
     <ng-template #cell let-row>
       <div class="ax-flex ax-items-center ax-gap-2">
-        @if (expandHandler) {
+        @if (expandHandler && (row.data?.[grid.hasChildrenField] !== false || (row.data?.children?.length ?? 0) > 0)) {
           <div
             (click)="handleExpandRow(row)"
             class="ax-expand-handler"
@@ -1016,6 +1024,7 @@ class AXRowExpandColumnComponent extends AXDataTableColumnComponent {
         ], viewQueries: [{ propertyName: "_cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "_contentFooterTemplate", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <ng-template #header></ng-template>
     <ng-template #cell let-row>
+      @if (row.data?.[grid.hasChildrenField] !== false || (row.data?.children?.length ?? 0) > 0) {
       <div
         (click)="handleExpandRow(row)"
         class="ax-expand-handler"
@@ -1031,6 +1040,7 @@ class AXRowExpandColumnComponent extends AXDataTableColumnComponent {
           }
         }
       </div>
+      }
     </ng-template>
     <ng-template #footer></ng-template>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
@@ -1042,6 +1052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                     template: `
     <ng-template #header></ng-template>
     <ng-template #cell let-row>
+      @if (row.data?.[grid.hasChildrenField] !== false || (row.data?.children?.length ?? 0) > 0) {
       <div
         (click)="handleExpandRow(row)"
         class="ax-expand-handler"
@@ -1057,6 +1068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
           }
         }
       </div>
+      }
     </ng-template>
     <ng-template #footer></ng-template>
   `,
@@ -1747,10 +1759,12 @@ class AXDataTableComponent extends AXBaseDataTable {
             });
             if (expandedItem[this.getDataSourceKey()] === item[this.getDataSourceKey()]) {
                 const isExpanded = !item?.__meta__?.expanded;
+                const nextChildren = children ? this.toggleExpanded(children, expandedItem, item.children || []) : null;
                 return {
                     ...item,
                     __meta__: { expanded: isExpanded, level: expandedItem?.__meta__?.level ?? 0 },
-                    children: children ? this.toggleExpanded(children, expandedItem, item.children || []) : null,
+                    children: nextChildren,
+                    [this.hasChildrenField]: nextChildren != null && nextChildren.length > 0,
                 };
             }
             else if (item.children) {
@@ -1773,7 +1787,11 @@ class AXDataTableComponent extends AXBaseDataTable {
                 newChildren.forEach((child) => {
                     child.__meta__ = { ...child.__meta__, level: (item.__meta__?.level || 0) + 1 };
                 });
-                return { ...item, children: cloneDeep(newChildren) };
+                return {
+                    ...item,
+                    children: cloneDeep(newChildren),
+                    [this.hasChildrenField]: newChildren.length > 0,
+                };
             }
             else if (item.children) {
                 return { ...item, children: this.updateChildren(item.children, id, newChildren) };
@@ -2178,7 +2196,7 @@ class AXDataTableComponent extends AXBaseDataTable {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXDataTableComponent, isStandalone: true, selector: "ax-data-table", inputs: { dataSource: "dataSource", selectedRows: "selectedRows", parentField: "parentField", rowDetailsTemplate: "rowDetailsTemplate", title: "title", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", noDataTemplate: "noDataTemplate", alternative: "alternative", showHeader: "showHeader", fixedHeader: "fixedHeader", showFooter: "showFooter", fixedFooter: "fixedFooter", itemHeight: "itemHeight", allowReordering: "allowReordering", paging: "paging", fetchDataMode: "fetchDataMode", loading: "loading", focusedRow: "focusedRow" }, outputs: { selectedRowsChange: "selectedRowsChange", focusedRowChange: "focusedRowChange", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", onColumnsOrderChanged: "onColumnsOrderChanged", onColumnSizeChanged: "onColumnSizeChanged", onPageChanged: "onPageChanged" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXDataTableComponent, isStandalone: true, selector: "ax-data-table", inputs: { dataSource: "dataSource", selectedRows: "selectedRows", parentField: "parentField", hasChildrenField: "hasChildrenField", rowDetailsTemplate: "rowDetailsTemplate", title: "title", rowTemplate: "rowTemplate", emptyTemplate: "emptyTemplate", noDataTemplate: "noDataTemplate", alternative: "alternative", showHeader: "showHeader", fixedHeader: "fixedHeader", showFooter: "showFooter", fixedFooter: "fixedFooter", itemHeight: "itemHeight", allowReordering: "allowReordering", paging: "paging", fetchDataMode: "fetchDataMode", loading: "loading", focusedRow: "focusedRow" }, outputs: { selectedRowsChange: "selectedRowsChange", focusedRowChange: "focusedRowChange", onRowClick: "onRowClick", onRowDbClick: "onRowDbClick", onColumnsOrderChanged: "onColumnsOrderChanged", onColumnSizeChanged: "onColumnSizeChanged", onPageChanged: "onPageChanged" }, host: { attributes: { "ngSkipHydration": "true" } }, providers: [
             { provide: AXBaseDataTable, useExisting: AXDataTableComponent },
             AXUnsubscriber,
             { provide: AXComponent, useExisting: AXDataTableComponent },
@@ -2186,7 +2204,7 @@ class AXDataTableComponent extends AXBaseDataTable {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { ngSkipHydration: 'true' }, inputs: ['dataSource', 'selectedRows', 'parentField', 'rowDetailsTemplate', 'title'], outputs: ['selectedRowsChange'], providers: [
+            args: [{ selector: 'ax-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { ngSkipHydration: 'true' }, inputs: ['dataSource', 'selectedRows', 'parentField', 'hasChildrenField', 'rowDetailsTemplate', 'title'], outputs: ['selectedRowsChange'], providers: [
                         { provide: AXBaseDataTable, useExisting: AXDataTableComponent },
                         AXUnsubscriber,
                         { provide: AXComponent, useExisting: AXDataTableComponent },