@acorex-platform/framework-client 0.0.30 → 0.0.33

package/fesm2022/acorex-platform-framework-client-layout-widget-core.mjs

@@ -1364,14 +1364,18 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
      */
     hasExpandableRow(row) {
         const data = row?.data;
-        if (!data)
+        if (!data) {
             return false;
-        if (data['hasChild'] === true)
+        }
+        const hasChildrenField = this.grid.hasChildrenField;
+        if (data[hasChildrenField] !== false) {
             return true;
-        const children = data['__meta__']?.['children'];
+        }
+        const children = data['children'];
         return Array.isArray(children) && children.length > 0;
     }
-    async handleExpandRow(row) {
+    async handleExpandRow(row, event) {
+        event?.stopPropagation();
         this.loadingRow.set(row);
         await this.grid.expandRow(row);
         this.loadingRow.set(null);
@@ -1411,7 +1415,7 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
      * When true, the cell body uses flex so `justify-content` can place content on the main axis.
      */
     getCellUseFlexLayout() {
-        return !!this.expandHandler || this.resolveAlignForSide('cell') !== 'start';
+        return !this.expandHandler && this.resolveAlignForSide('cell') !== 'start';
     }
     /**
      * Flex `justify-content` for the cell wrapper; omit when not using flex layout.
@@ -1722,53 +1726,69 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
       </div>
     </ng-template>
     <ng-template #cell let-row>
-      <div
-        class="w-full"
-        [class.flex]="getCellUseFlexLayout()"
-        [class.gap-2]="expandHandler"
-        [class.items-center]="getCellUseFlexLayout()"
-        [style.justify-content]="getCellJustifyContent()"
-      >
-        @if (expandHandler) {
-          <div
-            (click)="handleExpandRow(row)"
-            class="expand-handler"
-            [class.invisible]="!hasExpandableRow(row)"
-            id="ax-expand-handler-container"
-            [style.padding-inline-start.rem]="row.data?.__meta__?.level * 2"
-          >
-            @if (loadingRow() === row) {
-              <i
-                class="fas fa-spinner-third animate-twSpin animate-infinite"
-              ></i>
-            } @else {
-              @if (row.data?.__meta__?.expanded) {
+      @if (expandHandler) {
+        <div
+          class="ax-data-table-nested-indent w-full"
+          [attr.data-level]="row.data?.__meta__?.level || 0"
+        >
+          @if (hasExpandableRow(row)) {
+            <div
+              (click)="handleExpandRow(row, $event)"
+              class="ax-expand-handler"
+              id="ax-expand-handler-container"
+            >
+              @if (loadingRow() === row) {
                 <i
-                  [class]="
-                    customCollapseIcon ||
-                    'far fa-minus-square text-md opacity-75'
-                  "
+                  class="fas fa-spinner-third animate-twSpin animate-infinite"
                 ></i>
               } @else {
-                <i
-                  [class]="
-                    customExpandIcon || 'far fa-plus-square text-md  opacity-75'
-                  "
-                ></i>
+                @if (row.data?.__meta__?.expanded) {
+                  <i
+                    [class]="
+                      customCollapseIcon ||
+                      'far fa-minus-square text-md opacity-75'
+                    "
+                  ></i>
+                } @else {
+                  <i
+                    [class]="
+                      customExpandIcon || 'far fa-plus-square text-md  opacity-75'
+                    "
+                  ></i>
+                }
               }
-            }
-          </div>
-        }
-        @if (component && row?.data) {
-          <ng-container
-            *ngComponentOutlet="
-              component;
-              injector: getRowInjector(row.data);
-              inputs: getInputs(row.data)
-            "
-          ></ng-container>
-        }
-      </div>
+            </div>
+          }
+          @if (component && row?.data) {
+            <div class="ax-data-table-cell-text min-w-0 flex-1">
+              <ng-container
+                *ngComponentOutlet="
+                  component;
+                  injector: getRowInjector(row.data);
+                  inputs: getInputs(row.data)
+                "
+              ></ng-container>
+            </div>
+          }
+        </div>
+      } @else {
+        <div
+          class="w-full"
+          [class.flex]="getCellUseFlexLayout()"
+          [class.items-center]="getCellUseFlexLayout()"
+          [style.justify-content]="getCellJustifyContent()"
+        >
+          @if (component && row?.data) {
+            <ng-container
+              *ngComponentOutlet="
+                component;
+                injector: getRowInjector(row.data);
+                inputs: getInputs(row.data)
+              "
+            ></ng-container>
+          }
+        </div>
+      }
     </ng-template>
     <ng-template #footer></ng-template>
   `, isInline: true, styles: ["@layer properties;.axp-widget-column-header--sortable{cursor:pointer}.axp-widget-column-header--sortable:hover .axp-widget-column-header__sort,.axp-widget-column-header--sortable:focus-within .axp-widget-column-header__sort,.axp-widget-column-header--sortable.axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}.axp-widget-column-header__caption{min-width:0px}.axp-widget-column-header__caption--with-sort{flex:1;flex:1 1 0}.axp-widget-column-header__sort{opacity:0;transition:opacity .15s ease}.axp-widget-column-header__sort-priority{--tw-leading: 1;line-height:1}:host-context(.ax-data-table-head-cell.ax-interactive:hover) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell.ax-interactive:focus-within) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell) .axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -1818,53 +1838,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       </div>
     </ng-template>
     <ng-template #cell let-row>
-      <div
-        class="w-full"
-        [class.flex]="getCellUseFlexLayout()"
-        [class.gap-2]="expandHandler"
-        [class.items-center]="getCellUseFlexLayout()"
-        [style.justify-content]="getCellJustifyContent()"
-      >
-        @if (expandHandler) {
-          <div
-            (click)="handleExpandRow(row)"
-            class="expand-handler"
-            [class.invisible]="!hasExpandableRow(row)"
-            id="ax-expand-handler-container"
-            [style.padding-inline-start.rem]="row.data?.__meta__?.level * 2"
-          >
-            @if (loadingRow() === row) {
-              <i
-                class="fas fa-spinner-third animate-twSpin animate-infinite"
-              ></i>
-            } @else {
-              @if (row.data?.__meta__?.expanded) {
+      @if (expandHandler) {
+        <div
+          class="ax-data-table-nested-indent w-full"
+          [attr.data-level]="row.data?.__meta__?.level || 0"
+        >
+          @if (hasExpandableRow(row)) {
+            <div
+              (click)="handleExpandRow(row, $event)"
+              class="ax-expand-handler"
+              id="ax-expand-handler-container"
+            >
+              @if (loadingRow() === row) {
                 <i
-                  [class]="
-                    customCollapseIcon ||
-                    'far fa-minus-square text-md opacity-75'
-                  "
+                  class="fas fa-spinner-third animate-twSpin animate-infinite"
                 ></i>
               } @else {
-                <i
-                  [class]="
-                    customExpandIcon || 'far fa-plus-square text-md  opacity-75'
-                  "
-                ></i>
+                @if (row.data?.__meta__?.expanded) {
+                  <i
+                    [class]="
+                      customCollapseIcon ||
+                      'far fa-minus-square text-md opacity-75'
+                    "
+                  ></i>
+                } @else {
+                  <i
+                    [class]="
+                      customExpandIcon || 'far fa-plus-square text-md  opacity-75'
+                    "
+                  ></i>
+                }
               }
-            }
-          </div>
-        }
-        @if (component && row?.data) {
-          <ng-container
-            *ngComponentOutlet="
-              component;
-              injector: getRowInjector(row.data);
-              inputs: getInputs(row.data)
-            "
-          ></ng-container>
-        }
-      </div>
+            </div>
+          }
+          @if (component && row?.data) {
+            <div class="ax-data-table-cell-text min-w-0 flex-1">
+              <ng-container
+                *ngComponentOutlet="
+                  component;
+                  injector: getRowInjector(row.data);
+                  inputs: getInputs(row.data)
+                "
+              ></ng-container>
+            </div>
+          }
+        </div>
+      } @else {
+        <div
+          class="w-full"
+          [class.flex]="getCellUseFlexLayout()"
+          [class.items-center]="getCellUseFlexLayout()"
+          [style.justify-content]="getCellJustifyContent()"
+        >
+          @if (component && row?.data) {
+            <ng-container
+              *ngComponentOutlet="
+                component;
+                injector: getRowInjector(row.data);
+                inputs: getInputs(row.data)
+              "
+            ></ng-container>
+          }
+        </div>
+      }
     </ng-template>
     <ng-template #footer></ng-template>
   `, providers: [
@@ -2232,6 +2268,21 @@ function extractPersistedRootIdentityPatch(current, next) {
     return patch;
 }
 
+/**
+ * Resolves the lazy component factory for a render mode.
+ * `print` falls back to `view` until a dedicated print component exists.
+ */
+function resolveWidgetModeComponent(widget, mode) {
+    const requested = widget?.components?.[mode]?.component;
+    if (requested) {
+        return requested;
+    }
+    if (mode === 'print') {
+        return widget?.components?.view?.component;
+    }
+    return undefined;
+}
+
 class AXPWidgetPlaceholderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPWidgetPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPWidgetPlaceholderComponent, isStandalone: true, selector: "axp-widget-placeholder", ngImport: i0, template: `<div>
@@ -2251,21 +2302,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }] });
 
-/**
- * Resolves the lazy component factory for a render mode.
- * `print` falls back to `view` until a dedicated print component exists.
- */
-function resolveWidgetModeComponent(widget, mode) {
-    const requested = widget?.components?.[mode]?.component;
-    if (requested) {
-        return requested;
-    }
-    if (mode === 'print') {
-        return widget?.components?.view?.component;
-    }
-    return undefined;
-}
-
 class AXPWidgetRendererDirective {
     //#endregion
     //#endregion
@@ -2537,16 +2573,8 @@ class AXPWidgetRendererDirective {
         };
         const evalNorm = normalizePath(evalPath);
         const changedNorm = normalizePath(changedPath);
-        const rawMatch = evalPath === changedPath ||
-            evalPath.startsWith(changedPath + '.') ||
-            changedPath.startsWith(evalPath + '.') ||
-            isSegmentSuffix(evalPath, changedPath) ||
-            isSegmentSuffix(changedPath, evalPath);
-        const normMatch = evalNorm === changedNorm ||
-            evalNorm.startsWith(changedNorm + '.') ||
-            changedNorm.startsWith(evalNorm + '.') ||
-            isSegmentSuffix(evalNorm, changedNorm) ||
-            isSegmentSuffix(changedNorm, evalNorm);
+        const rawMatch = evalPath === changedPath || evalPath.startsWith(changedPath + '.') || changedPath.startsWith(evalPath + '.') || isSegmentSuffix(evalPath, changedPath) || isSegmentSuffix(changedPath, evalPath);
+        const normMatch = evalNorm === changedNorm || evalNorm.startsWith(changedNorm + '.') || changedNorm.startsWith(evalNorm + '.') || isSegmentSuffix(evalNorm, changedNorm) || isSegmentSuffix(changedNorm, evalNorm);
         if (rawMatch || normMatch) {
             return true;
         }
@@ -2732,10 +2760,7 @@ class AXPWidgetRendererDirective {
             //
             const widget = this.widgetRegistery.resolve(this.node().type);
             //
-            const propertiesToProcess = [
-                ...(widget?.properties ?? []),
-                ...(widget?.components[this.mode()]?.properties ?? []),
-            ]?.filter((c) => c.schema.defaultValue != null);
+            const propertiesToProcess = [...(widget?.properties ?? []), ...(widget?.components[this.mode()]?.properties ?? [])]?.filter((c) => c.schema.defaultValue != null);
             // Process default values (evaluate expressions if needed)
             const props = {};
             for (const property of propertiesToProcess) {
@@ -2781,10 +2806,7 @@ class AXPWidgetRendererDirective {
             const defaultValuePath = this.node().path;
             if (typeof defaultValue === 'string' && this.expressionEvaluator.isExpression(defaultValue)) {
                 const existing = defaultValuePath ? this.contextService.getValue(defaultValuePath) : undefined;
-                const shouldEvaluate = !defaultValuePath ||
-                    !this.contextService.hasValue(defaultValuePath) ||
-                    existing === defaultValue ||
-                    existing === this.node().defaultValue;
+                const shouldEvaluate = !defaultValuePath || !this.contextService.hasValue(defaultValuePath) || existing === defaultValue || existing === this.node().defaultValue;
                 if (shouldEvaluate) {
                     defaultValue = await this.evaluateExpression(defaultValue);
                 }
@@ -2939,9 +2961,7 @@ class AXPWidgetRendererDirective {
                 // Cache dynamic expression for later evaluation
                 this.expressionEvaluators.set(currentPath, () => this.evaluateExpression(value));
             }
-            else if (typeof value === 'object' &&
-                value !== null &&
-                (value.constructor === Object || Array.isArray(value))) {
+            else if (typeof value === 'object' && value !== null && (value.constructor === Object || Array.isArray(value))) {
                 // Recursively handle nested objects
                 this.preprocessAndInitialOptions(value, currentPath);
             }
@@ -3161,9 +3181,7 @@ class AXPWidgetRendererDirective {
         return {
             /** Resolved options for this renderer's widget instance (not the host / property-viewer target). */
             options: (path) => {
-                const opts = this.instance && typeof this.instance.options === 'function'
-                    ? this.instance.options()
-                    : this.mergedOptions();
+                const opts = this.instance && typeof this.instance.options === 'function' ? this.instance.options() : this.mergedOptions();
                 if (path == null || path === '') {
                     return opts;
                 }