@acorex/platform 21.0.0-next.44 → 21.0.0-next.46

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

@@ -411,7 +411,7 @@ class AXPBaseWidgetComponent extends AXPWidgetCoreElement {
     output(name) {
         const outputs = this.outputs().map((c) => (typeof c == 'string' ? { name: c, value: c } : c));
         if (outputs.some((c) => c.name == name)) {
-            const opt = get(this, name);
+            const opt = outputs.find((c) => c.name == name)?.value;
             if (typeof opt == 'function') {
                 return opt();
             }
@@ -1201,6 +1201,56 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
     get renderHeaderTemplate() {
         return this.headerTemplate ?? this._contentHeaderTemplate;
     }
+    //#region ---- Column alignment (header / cell) ----
+    /**
+     * Resolves `options.align`: string applies to header and cell; object uses optional `header` / `cell` (default start).
+     * Supports designer select values `{ id: 'center' }`.
+     */
+    getHeaderTextAlign() {
+        return this.resolveAlignForSide('header');
+    }
+    /**
+     * 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';
+    }
+    /**
+     * Flex `justify-content` for the cell wrapper; omit when not using flex layout.
+     */
+    getCellJustifyContent() {
+        if (!this.getCellUseFlexLayout()) {
+            return null;
+        }
+        return this.resolveAlignForSide('cell');
+    }
+    resolveAlignForSide(side) {
+        const align = this.mergedOptions().align;
+        if (align == null || align === '') {
+            return 'start';
+        }
+        if (typeof align === 'string') {
+            return this.normalizeColumnAlignment(align);
+        }
+        if (typeof align === 'object' && !Array.isArray(align)) {
+            const raw = side === 'header' ? align.header : align.cell;
+            return this.normalizeColumnAlignment(raw);
+        }
+        return 'start';
+    }
+    normalizeColumnAlignment(value) {
+        if (value === 'center' || value === 'end' || value === 'start') {
+            return value;
+        }
+        if (value && typeof value === 'object' && 'id' in value) {
+            const id = value.id;
+            if (id === 'center' || id === 'end' || id === 'start') {
+                return id;
+            }
+        }
+        return 'start';
+    }
+    //#endregion
     get loadingEnabled() {
         return true;
     }
@@ -1406,9 +1456,17 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
             AXPWidgetCoreService,
             { provide: AXDataTableColumnComponent, useExisting: AXPWidgetColumnRendererComponent },
         ], viewQueries: [{ propertyName: "_contentFooterTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "_contentCellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-    <ng-template #header>{{ caption | translate | async }}</ng-template>
+    <ng-template #header>
+      <div class="ax-w-full" [style.text-align]="getHeaderTextAlign()">{{ caption | translate | async }}</div>
+    </ng-template>
     <ng-template #cell let-row>
-      <div [class]="expandHandler ? 'ax-flex ax-gap-2 ax-items-center' : ''">
+      <div
+        class="ax-w-full"
+        [class.ax-flex]="getCellUseFlexLayout()"
+        [class.ax-gap-2]="expandHandler"
+        [class.ax-items-center]="getCellUseFlexLayout()"
+        [style.justify-content]="getCellJustifyContent()"
+      >
         @if (expandHandler) {
           <div
             (click)="handleExpandRow(row)"
@@ -1443,9 +1501,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     selector: 'axp-widget-column-renderer',
                     template: `
-    <ng-template #header>{{ caption | translate | async }}</ng-template>
+    <ng-template #header>
+      <div class="ax-w-full" [style.text-align]="getHeaderTextAlign()">{{ caption | translate | async }}</div>
+    </ng-template>
     <ng-template #cell let-row>
-      <div [class]="expandHandler ? 'ax-flex ax-gap-2 ax-items-center' : ''">
+      <div
+        class="ax-w-full"
+        [class.ax-flex]="getCellUseFlexLayout()"
+        [class.ax-gap-2]="expandHandler"
+        [class.ax-items-center]="getCellUseFlexLayout()"
+        [style.justify-content]="getCellJustifyContent()"
+      >
         @if (expandHandler) {
           <div
             (click)="handleExpandRow(row)"
@@ -2454,7 +2520,7 @@ class AXPWidgetRendererDirective {
                 }
             },
             output: (name) => {
-                this.instance.output(name);
+                return this.instance.output(name);
             },
             find: (id) => {
                 return this.builderService.getWidget(id);