@acorex/platform 21.0.0-next.63 → 21.0.0-next.64

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, InjectionToken, inject, ElementRef, effect, untracked, Injector, ChangeDetectorRef, ViewChild, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, input, output, ViewContainerRef, Directive, NgModule } from '@angular/core';
+import { signal, computed, Injectable, InjectionToken, inject, ElementRef, effect, untracked, EventEmitter, Injector, ChangeDetectorRef, ViewChild, Input, Output, ChangeDetectionStrategy, Component, input, output, ViewContainerRef, Directive, NgModule } from '@angular/core';
 import { convertArrayToDataSource, AXDataSource } from '@acorex/cdk/common';
 import { AXPContextStore, AXPDataSourceDefinitionProviderService, extractValue, AXPExpressionEvaluatorService, getSmart } from '@acorex/platform/core';
 export { normalizeDefinitionCategories } from '@acorex/platform/core';
@@ -1163,6 +1163,9 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
         this.pendingEvaluations = new Set();
         this.changeDetectionScheduled = false;
         this.MAX_CACHE_SIZE = 1000; // Limit cache size to prevent memory leaks
+        /** When true, header click cycles sort (handled by parent; synced with list sort state). */
+        this.sortEnabled = false;
+        this.sortToggle = new EventEmitter();
         this.injector = inject(Injector);
         this.cdr = inject(ChangeDetectorRef);
     }
@@ -1210,6 +1213,23 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
     getHeaderTextAlign() {
         return this.resolveAlignForSide('header');
     }
+    getHeaderJustifyContent() {
+        const align = this.getHeaderTextAlign();
+        if (align === 'center') {
+            return 'center';
+        }
+        if (align === 'end') {
+            return 'flex-end';
+        }
+        return 'flex-start';
+    }
+    onHeaderClick(event) {
+        if (!this.sortEnabled) {
+            return;
+        }
+        event.stopPropagation();
+        this.sortToggle.emit(event);
+    }
     /**
      * When true, the cell body uses flex so `justify-content` can place content on the main axis.
      */
@@ -1289,8 +1309,14 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
         });
         this.width = this.mergedOptions().width === 'auto' ? 'auto' : this.customWidth ? this.customWidth : (this.mergedOptions().width ?? '200px');
         this.allowResizing = this.mergedOptions().allowResizing || true;
+        this.allowSorting = this.sortEnabled;
         this.cdr.detectChanges();
     }
+    ngOnChanges() {
+        this.allowSorting = this.sortEnabled;
+        this.sortOrder = this.headerSortDirection;
+        this.sortIndex = this.headerSortPriority;
+    }
     //#region ----   Performance Optimization Methods   ----
     /**
      * Check if options contain any expressions that need evaluation
@@ -1453,12 +1479,34 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
         return rowInjector;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPWidgetColumnRendererComponent, isStandalone: false, selector: "axp-widget-column-renderer", inputs: { caption: "caption", customExpandIcon: "customExpandIcon", customCollapseIcon: "customCollapseIcon", customWidth: "customWidth", node: "node", footerTemplate: "footerTemplate", expandHandler: "expandHandler", cellTemplate: "cellTemplate", headerTemplate: "headerTemplate" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPWidgetColumnRendererComponent, isStandalone: false, selector: "axp-widget-column-renderer", inputs: { caption: "caption", customExpandIcon: "customExpandIcon", customCollapseIcon: "customCollapseIcon", customWidth: "customWidth", node: "node", footerTemplate: "footerTemplate", expandHandler: "expandHandler", sortEnabled: "sortEnabled", headerSortDirection: "headerSortDirection", headerSortPriority: "headerSortPriority", cellTemplate: "cellTemplate", headerTemplate: "headerTemplate" }, outputs: { sortToggle: "sortToggle" }, providers: [
             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: `
+        ], 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, usesOnChanges: true, ngImport: i0, template: `
     <ng-template #header>
-      <div class="ax-w-full" [style.text-align]="getHeaderTextAlign()">{{ caption | translate | async }}</div>
+      <div
+        class="axp-widget-column-header ax-w-full ax-flex ax-items-center ax-gap-1 ax-select-none"
+        [class.axp-widget-column-header--sortable]="sortEnabled"
+        [style.justify-content]="getHeaderJustifyContent()"
+        (click)="onHeaderClick($event)"
+      >
+        <span class="axp-widget-column-header__caption ax-truncate">{{ caption | translate | async }}</span>
+        @if (sortEnabled) {
+          <span class="axp-widget-column-header__sort ax-flex ax-items-center ax-gap-0.5 ax-shrink-0">
+            @if (headerSortPriority !== undefined && headerSortPriority > 1) {
+              <span class="axp-widget-column-header__sort-priority ax-text-xs ax-opacity-70">{{ headerSortPriority }}</span>
+            }
+            <i
+              class="fa-solid fa-arrow-up-long ax-text-neutral-400"
+              [class.ax-text-primary]="headerSortDirection === 'asc'"
+            ></i>
+            <i
+              class="fa-solid fa-arrow-down-long ax-text-neutral-400"
+              [class.ax-text-primary]="headerSortDirection === 'desc'"
+            ></i>
+          </span>
+        }
+      </div>
     </ng-template>
     <ng-template #cell let-row>
       <div
@@ -1495,15 +1543,35 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
       </div>
     </ng-template>
     <ng-template #footer></ng-template>
-  `, isInline: true, 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 }); }
+  `, isInline: true, styles: [".axp-widget-column-header--sortable{cursor:pointer}.axp-widget-column-header__caption{min-width:0}.axp-widget-column-header__sort{opacity:0;transition:opacity .15s ease}.axp-widget-column-header--sortable:hover .axp-widget-column-header__sort,.axp-widget-column-header--sortable:focus-within .axp-widget-column-header__sort{opacity:1}.axp-widget-column-header__sort-priority{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{opacity:1}\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetColumnRendererComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'axp-widget-column-renderer',
-                    template: `
+            args: [{ selector: 'axp-widget-column-renderer', template: `
     <ng-template #header>
-      <div class="ax-w-full" [style.text-align]="getHeaderTextAlign()">{{ caption | translate | async }}</div>
+      <div
+        class="axp-widget-column-header ax-w-full ax-flex ax-items-center ax-gap-1 ax-select-none"
+        [class.axp-widget-column-header--sortable]="sortEnabled"
+        [style.justify-content]="getHeaderJustifyContent()"
+        (click)="onHeaderClick($event)"
+      >
+        <span class="axp-widget-column-header__caption ax-truncate">{{ caption | translate | async }}</span>
+        @if (sortEnabled) {
+          <span class="axp-widget-column-header__sort ax-flex ax-items-center ax-gap-0.5 ax-shrink-0">
+            @if (headerSortPriority !== undefined && headerSortPriority > 1) {
+              <span class="axp-widget-column-header__sort-priority ax-text-xs ax-opacity-70">{{ headerSortPriority }}</span>
+            }
+            <i
+              class="fa-solid fa-arrow-up-long ax-text-neutral-400"
+              [class.ax-text-primary]="headerSortDirection === 'asc'"
+            ></i>
+            <i
+              class="fa-solid fa-arrow-down-long ax-text-neutral-400"
+              [class.ax-text-primary]="headerSortDirection === 'desc'"
+            ></i>
+          </span>
+        }
+      </div>
     </ng-template>
     <ng-template #cell let-row>
       <div
@@ -1540,15 +1608,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       </div>
     </ng-template>
     <ng-template #footer></ng-template>
-  `,
-                    providers: [
+  `, providers: [
                         AXPWidgetCoreService,
                         { provide: AXDataTableColumnComponent, useExisting: AXPWidgetColumnRendererComponent },
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    inputs: ['caption'],
-                    standalone: false,
-                }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['caption'], standalone: false, styles: [".axp-widget-column-header--sortable{cursor:pointer}.axp-widget-column-header__caption{min-width:0}.axp-widget-column-header__sort{opacity:0;transition:opacity .15s ease}.axp-widget-column-header--sortable:hover .axp-widget-column-header__sort,.axp-widget-column-header--sortable:focus-within .axp-widget-column-header__sort{opacity:1}.axp-widget-column-header__sort-priority{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{opacity:1}\n"] }]
         }], propDecorators: { customExpandIcon: [{
                 type: Input
             }], customCollapseIcon: [{
@@ -1565,6 +1628,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: ['footer']
             }], expandHandler: [{
                 type: Input
+            }], sortEnabled: [{
+                type: Input
+            }], headerSortDirection: [{
+                type: Input
+            }], headerSortPriority: [{
+                type: Input
+            }], sortToggle: [{
+                type: Output
             }], cellTemplate: [{
                 type: Input
             }], _contentCellTemplate: [{