@acorex/components 21.0.1-next.50 → 21.0.1-next.51

package/data-table/index.d.ts

@@ -42,6 +42,12 @@ declare abstract class AXBaseDataTable extends MXBaseComponent {
      * @defaultValue `parentId`
      */
     parentField: string | undefined;
+    /**
+     * Field name on each row that indicates whether the row has children (for showing expand icon).
+     *
+     * @defaultValue `hasChild`
+     */
+    hasChildrenField: string;
     /**
      * Template for expanded custom row content.
      */
@@ -166,7 +172,7 @@ declare class AXDataTableColumnResizableDirective {
  * @category Components
  */
 declare class AXDataTableTextColumnComponent extends AXDataTableColumnComponent {
-    private grid;
+    protected grid: AXBaseDataTable;
     protected loadingRow: i0.WritableSignal<any>;
     protected initialWidth: string;
     customExpandIcon: string;
@@ -415,7 +421,7 @@ declare class AXRowCommandColumnComponent extends AXBaseRowCommandColumnComponen
  * @category Components
  */
 declare class AXRowExpandColumnComponent extends AXDataTableColumnComponent {
-    private grid;
+    protected grid: AXBaseDataTable;
     protected loadingRow: i0.WritableSignal<any>;
     /**
      *  @ignore
@@ -1214,7 +1220,7 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
         maxWidth?: number;
     }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDataTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableComponent, "ax-data-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "selectedRows": { "alias": "selectedRows"; "required": false; }; "parentField": { "alias": "parentField"; "required": false; }; "rowDetailsTemplate": { "alias": "rowDetailsTemplate"; "required": false; }; "title": { "alias": "title"; "required": false; }; "rowTemplate": { "alias": "rowTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "noDataTemplate": { "alias": "noDataTemplate"; "required": false; }; "alternative": { "alias": "alternative"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "fixedHeader": { "alias": "fixedHeader"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "fixedFooter": { "alias": "fixedFooter"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "allowReordering": { "alias": "allowReordering"; "required": false; }; "paging": { "alias": "paging"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "focusedRow": { "alias": "focusedRow"; "required": false; }; }, { "selectedRowsChange": "selectedRowsChange"; "focusedRowChange": "focusedRowChange"; "onRowClick": "onRowClick"; "onRowDbClick": "onRowDbClick"; "onColumnsOrderChanged": "onColumnsOrderChanged"; "onColumnSizeChanged": "onColumnSizeChanged"; "onPageChanged": "onPageChanged"; }, ["customDataPager", "columns"], ["ax-header", "ax-data-pager", "ax-footer"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXDataTableComponent, "ax-data-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "selectedRows": { "alias": "selectedRows"; "required": false; }; "parentField": { "alias": "parentField"; "required": false; }; "hasChildrenField": { "alias": "hasChildrenField"; "required": false; }; "rowDetailsTemplate": { "alias": "rowDetailsTemplate"; "required": false; }; "title": { "alias": "title"; "required": false; }; "rowTemplate": { "alias": "rowTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "noDataTemplate": { "alias": "noDataTemplate"; "required": false; }; "alternative": { "alias": "alternative"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "fixedHeader": { "alias": "fixedHeader"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "fixedFooter": { "alias": "fixedFooter"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "allowReordering": { "alias": "allowReordering"; "required": false; }; "paging": { "alias": "paging"; "required": false; }; "fetchDataMode": { "alias": "fetchDataMode"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "focusedRow": { "alias": "focusedRow"; "required": false; }; }, { "selectedRowsChange": "selectedRowsChange"; "focusedRowChange": "focusedRowChange"; "onRowClick": "onRowClick"; "onRowDbClick": "onRowDbClick"; "onColumnsOrderChanged": "onColumnsOrderChanged"; "onColumnSizeChanged": "onColumnSizeChanged"; "onPageChanged": "onPageChanged"; }, ["customDataPager", "columns"], ["ax-header", "ax-data-pager", "ax-footer"], true, never>;
 }
 
 declare class AXDataTableModule {

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 && (row.data?.hasChildren !== false || (row.data?.children?.length ?? 0) > 0)) {
+        @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 && (row.data?.hasChildren !== false || (row.data?.children?.length ?? 0) > 0)) {
+        @if (expandHandler && (row.data?.[grid.hasChildrenField] !== false || (row.data?.children?.length ?? 0) > 0)) {
           <div
             (click)="handleExpandRow(row)"
             class="ax-expand-handler"
@@ -1016,7 +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?.hasChildren !== false || (row.data?.children?.length ?? 0) > 0) {
+      @if (row.data?.[grid.hasChildrenField] !== false || (row.data?.children?.length ?? 0) > 0) {
       <div
         (click)="handleExpandRow(row)"
         class="ax-expand-handler"
@@ -1044,7 +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?.hasChildren !== false || (row.data?.children?.length ?? 0) > 0) {
+      @if (row.data?.[grid.hasChildrenField] !== false || (row.data?.children?.length ?? 0) > 0) {
       <div
         (click)="handleExpandRow(row)"
         class="ax-expand-handler"
@@ -1756,7 +1764,7 @@ class AXDataTableComponent extends AXBaseDataTable {
                     ...item,
                     __meta__: { expanded: isExpanded, level: expandedItem?.__meta__?.level ?? 0 },
                     children: nextChildren,
-                    hasChildren: nextChildren != null && nextChildren.length > 0,
+                    [this.hasChildrenField]: nextChildren != null && nextChildren.length > 0,
                 };
             }
             else if (item.children) {
@@ -1782,7 +1790,7 @@ class AXDataTableComponent extends AXBaseDataTable {
                 return {
                     ...item,
                     children: cloneDeep(newChildren),
-                    hasChildren: newChildren.length > 0,
+                    [this.hasChildrenField]: newChildren.length > 0,
                 };
             }
             else if (item.children) {
@@ -2188,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 },
@@ -2196,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 },