@acorex/platform 20.8.5 → 20.8.7

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

@@ -1268,6 +1268,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;
     }
@@ -1469,9 +1519,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)"
@@ -1506,9 +1564,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
             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)"