@acorex/platform 20.9.8 → 20.9.9

package/fesm2022/acorex-platform-layout-components.mjs

@@ -14,9 +14,9 @@ import { AXFormatModule, AXFormatService } from '@acorex/core/format';
 import { AXPWorkflowService } from '@acorex/platform/workflow';
 import { AXPLayoutRendererComponent, AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
 import * as i1 from '@angular/common';
-import { CommonModule, NgTemplateOutlet, isPlatformBrowser, AsyncPipe } from '@angular/common';
+import { CommonModule, NgTemplateOutlet, AsyncPipe, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, computed, InjectionToken, Injectable, Directive, viewChild, contentChild, ElementRef, output, afterNextRender, model, untracked, DestroyRef, PLATFORM_ID, linkedSignal, ViewChildren, EventEmitter, Output, TemplateRef, contentChildren, Input } from '@angular/core';
+import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, computed, InjectionToken, Injectable, Directive, viewChild, contentChild, ElementRef, output, afterNextRender, model, EventEmitter, forwardRef, ViewChild, Output, Input, untracked, DestroyRef, PLATFORM_ID, linkedSignal, ViewChildren, TemplateRef, contentChildren } from '@angular/core';
 import { AXAccordionCdkModule } from '@acorex/cdk/accordion';
 import { AXTagModule } from '@acorex/components/tag';
 import * as i1$1 from '@acorex/components/avatar';
@@ -51,7 +51,7 @@ import { AXLabelModule } from '@acorex/components/label';
 import * as i3$3 from '@acorex/platform/layout/widget-core';
 import { AXPWidgetCoreModule, AXPWidgetRegistryService } from '@acorex/platform/layout/widget-core';
 import * as i4$1 from '@acorex/components/data-table';
-import { AXDataTableModule } from '@acorex/components/data-table';
+import { AXDataTableModule, AXDataTableColumnComponent } from '@acorex/components/data-table';
 import * as i3$4 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import { AXBasePageComponent } from '@acorex/components/page';
@@ -2235,6 +2235,215 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+//#endregion
+//#region ----   Text Command Column   ----
+/**
+ * Data-table column that renders a field value as a clickable text link and emits a command event on click.
+ */
+class AXPTextCommandColumnComponent extends AXDataTableColumnComponent {
+    constructor() {
+        super(...arguments);
+        this.caption = '';
+        /** Row field path used to resolve the link label. */
+        this.textField = '';
+        this.sortEnabled = false;
+        this.disabled = false;
+        this.emptyDisplay = '---';
+        this.commandClick = new EventEmitter();
+        this.sortToggle = new EventEmitter();
+    }
+    get loadingEnabled() {
+        return false;
+    }
+    get name() {
+        return `col-${this.textField}`;
+    }
+    get renderFooterTemplate() {
+        return this.footerTemplate ?? this.contentFooterTemplate;
+    }
+    get renderHeaderTemplate() {
+        return this.headerTemplate;
+    }
+    get renderCellTemplate() {
+        return this.cellTemplate;
+    }
+    ngOnInit() {
+        this.syncColumnState();
+    }
+    ngOnChanges() {
+        this.syncColumnState();
+    }
+    resolveLabel(rowData) {
+        const value = get(rowData, this.textField);
+        if (value == null || value === '') {
+            return null;
+        }
+        return String(value);
+    }
+    handleClick(rowData) {
+        if (this.disabled) {
+            return;
+        }
+        this.commandClick.emit({
+            data: rowData,
+            textField: this.textField,
+        });
+    }
+    onHeaderClick(event) {
+        if (!this.sortEnabled) {
+            return;
+        }
+        event.stopPropagation();
+        this.sortToggle.emit(event);
+    }
+    syncColumnState() {
+        this.allowSorting = this.sortEnabled;
+        this.sortOrder = this.headerSortDirection;
+        this.sortIndex = this.headerSortPriority;
+        this.fixed = this.columnFixed;
+        if (this.customWidth) {
+            this.width = this.customWidth;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTextCommandColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPTextCommandColumnComponent, isStandalone: true, selector: "axp-text-command-column", inputs: { caption: "caption", textField: "textField", customWidth: "customWidth", columnFixed: "columnFixed", footerTemplate: "footerTemplate", sortEnabled: "sortEnabled", headerSortDirection: "headerSortDirection", headerSortPriority: "headerSortPriority", disabled: "disabled", emptyDisplay: "emptyDisplay" }, outputs: { commandClick: "commandClick", sortToggle: "sortToggle" }, providers: [
+            {
+                provide: AXDataTableColumnComponent,
+                useExisting: forwardRef(() => AXPTextCommandColumnComponent),
+            },
+        ], viewQueries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true, static: true }, { propertyName: "cellTemplate", first: true, predicate: ["cell"], descendants: true, static: true }, { propertyName: "contentFooterTemplate", first: true, predicate: ["footer"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    <ng-template #header>
+      <div
+        class="axp-widget-column-header ax-w-full ax-flex ax-items-center ax-select-none"
+        [class.axp-widget-column-header--sortable]="sortEnabled"
+        [class.axp-widget-column-header--sort-active]="headerSortDirection === 'asc' || headerSortDirection === 'desc'"
+        [class.ax-gap-1]="!sortEnabled"
+        (click)="onHeaderClick($event)"
+      >
+        <span
+          class="axp-widget-column-header__caption ax-truncate"
+          [class.axp-widget-column-header__caption--with-sort]="sortEnabled"
+        >{{ 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>
+      @if (resolveLabel(row.data); as label) {
+        <span
+          class="ax-text-primary ax-cursor-pointer hover:ax-underline"
+          [class.ax-opacity-50]="disabled"
+          [class.ax-pointer-events-none]="disabled"
+          (click)="handleClick(row.data)"
+        >{{ label | translate | async }}</span>
+      } @else {
+        <span class="ax-text-muted">{{ emptyDisplay }}</span>
+      }
+    </ng-template>
+    <ng-template #footer></ng-template>
+  `, isInline: true, styles: [".axp-widget-column-header--sortable{cursor:pointer}.axp-widget-column-header__caption{min-width:0}.axp-widget-column-header__caption--with-sort{flex:1 1 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,.axp-widget-column-header--sort-active .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,:host-context(.ax-data-table-head-cell) .axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTextCommandColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-text-command-column', template: `
+    <ng-template #header>
+      <div
+        class="axp-widget-column-header ax-w-full ax-flex ax-items-center ax-select-none"
+        [class.axp-widget-column-header--sortable]="sortEnabled"
+        [class.axp-widget-column-header--sort-active]="headerSortDirection === 'asc' || headerSortDirection === 'desc'"
+        [class.ax-gap-1]="!sortEnabled"
+        (click)="onHeaderClick($event)"
+      >
+        <span
+          class="axp-widget-column-header__caption ax-truncate"
+          [class.axp-widget-column-header__caption--with-sort]="sortEnabled"
+        >{{ 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>
+      @if (resolveLabel(row.data); as label) {
+        <span
+          class="ax-text-primary ax-cursor-pointer hover:ax-underline"
+          [class.ax-opacity-50]="disabled"
+          [class.ax-pointer-events-none]="disabled"
+          (click)="handleClick(row.data)"
+        >{{ label | translate | async }}</span>
+      } @else {
+        <span class="ax-text-muted">{{ emptyDisplay }}</span>
+      }
+    </ng-template>
+    <ng-template #footer></ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXTranslationModule, AsyncPipe], providers: [
+                        {
+                            provide: AXDataTableColumnComponent,
+                            useExisting: forwardRef(() => AXPTextCommandColumnComponent),
+                        },
+                    ], styles: [".axp-widget-column-header--sortable{cursor:pointer}.axp-widget-column-header__caption{min-width:0}.axp-widget-column-header__caption--with-sort{flex:1 1 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,.axp-widget-column-header--sort-active .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,:host-context(.ax-data-table-head-cell) .axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}\n"] }]
+        }], propDecorators: { caption: [{
+                type: Input,
+                args: [{ required: true }]
+            }], textField: [{
+                type: Input,
+                args: [{ required: true }]
+            }], customWidth: [{
+                type: Input
+            }], columnFixed: [{
+                type: Input
+            }], footerTemplate: [{
+                type: Input
+            }], sortEnabled: [{
+                type: Input
+            }], headerSortDirection: [{
+                type: Input
+            }], headerSortPriority: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], emptyDisplay: [{
+                type: Input
+            }], commandClick: [{
+                type: Output
+            }], sortToggle: [{
+                type: Output
+            }], headerTemplate: [{
+                type: ViewChild,
+                args: ['header', { static: true }]
+            }], cellTemplate: [{
+                type: ViewChild,
+                args: ['cell', { static: true }]
+            }], contentFooterTemplate: [{
+                type: ViewChild,
+                args: ['footer', { static: true }]
+            }] } });
+
 class AXPDragDropListComponent {
     constructor() {
         // Inputs
@@ -3098,10 +3307,9 @@ class AXPQueryFiltersComponent {
             const editingField = this.activeFilter()?.field;
             void this.translationEpoch();
             Promise.all(filters.map(async (filter) => {
-                const isEditingThisFilter = editingField === filter.field;
                 const committedEntry = this.getCommittedFilterEntry(filter, context, editingField);
                 const val = committedEntry?.value ?? filter.value;
-                const displayText = isEditingThisFilter ? undefined : committedEntry?.displayText;
+                const displayText = committedEntry?.displayText;
                 const rawDisplay = displayText != null && displayText !== '' ? displayText : await this.getDisplayValue(filter, val);
                 const displayValue = await this.formatFilterDisplayValue(rawDisplay);
                 const operatorType = committedEntry?.operation?.type ?? filter.operator?.type;
@@ -9798,5 +10006,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPActivityLogComponent, AXPAvatarComponent, AXPCategoryTreeComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPConditionBuilderComponent, AXPConditionBuilderConditionComponent, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPExpressionFieldDefinitions, AXPImageEditorPopupComponent, AXPImageEditorService, AXPItemConfiguratorComponent, AXPLayoutFloatingZoomBarComponent, AXPLayoutSideDetailPanelComponent, AXPLayoutSideDetailPanelSectionDirective, AXPLogoComponent, AXPMarkdownTemplateDirective, AXPMarkdownViewerComponent, AXPMenuBadgeHelper, AXPMenuCustomizerComponent, AXPMenuCustomizerService, AXPOutcomeResultsViewerComponent, AXPPageComponentRegistryService, AXPPreloadFiltersComponent, AXPPropertyViewerComponent, AXPPropertyViewerPopupComponent, AXPPropertyViewerService, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPRepeaterRowsLayoutComponent, AXPResourceAppointmentBoardProvider, AXPResourceAppointmentComponent, AXPResourceAppointmentService, AXPSectionItemsBuilderComponent, AXPSignatureEditorService, AXPSpreadsheetComponent, AXPStandardSectionItemsBuilderComponent, AXPStateMessageComponent, AXPStopwatchComponent, AXPTableColumnsEditorComponent, AXPTableColumnsEditorPopupComponent, AXPTableColumnsEditorService, AXPTableDataEditorComponent, AXPTableDataEditorPopupComponent, AXPTableDataEditorService, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPVirtualKeypadComponent, AXPWidgetFieldConfiguratorComponent, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXPRESSION_LOGIC_DEFINITIONS, AXP_EXPRESSION_OPERATION_DEFINITIONS, AXP_MENU_CUSTOMIZER_SERVICE, AXP_PAGE_COMPONENT_PROVIDER, AXP_RESOURCE_APPOINTMENT_PROVIDER, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, STANDARD_SECTION_ITEMS_SECTION_TABS, buildPropertyViewerInitialContextFromProperties, buildPropertyViewerTabsFromProperties, buildTableColumnsEditorLayout, getFieldDefinitions, getLogicDefinition, getOperationDefinition, isPropertyBindingExpressionFormValue, preparePropertyForViewer, preparePropertyViewerTabs, registerFieldDefinitions, withValidationsOnEditorNode };
+export { AXPActivityLogComponent, AXPAvatarComponent, AXPCategoryTreeComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPConditionBuilderComponent, AXPConditionBuilderConditionComponent, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPExpressionFieldDefinitions, AXPImageEditorPopupComponent, AXPImageEditorService, AXPItemConfiguratorComponent, AXPLayoutFloatingZoomBarComponent, AXPLayoutSideDetailPanelComponent, AXPLayoutSideDetailPanelSectionDirective, AXPLogoComponent, AXPMarkdownTemplateDirective, AXPMarkdownViewerComponent, AXPMenuBadgeHelper, AXPMenuCustomizerComponent, AXPMenuCustomizerService, AXPOutcomeResultsViewerComponent, AXPPageComponentRegistryService, AXPPreloadFiltersComponent, AXPPropertyViewerComponent, AXPPropertyViewerPopupComponent, AXPPropertyViewerService, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPRepeaterRowsLayoutComponent, AXPResourceAppointmentBoardProvider, AXPResourceAppointmentComponent, AXPResourceAppointmentService, AXPSectionItemsBuilderComponent, AXPSignatureEditorService, AXPSpreadsheetComponent, AXPStandardSectionItemsBuilderComponent, AXPStateMessageComponent, AXPStopwatchComponent, AXPTableColumnsEditorComponent, AXPTableColumnsEditorPopupComponent, AXPTableColumnsEditorService, AXPTableDataEditorComponent, AXPTableDataEditorPopupComponent, AXPTableDataEditorService, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPTextCommandColumnComponent, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPVirtualKeypadComponent, AXPWidgetFieldConfiguratorComponent, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXPRESSION_LOGIC_DEFINITIONS, AXP_EXPRESSION_OPERATION_DEFINITIONS, AXP_MENU_CUSTOMIZER_SERVICE, AXP_PAGE_COMPONENT_PROVIDER, AXP_RESOURCE_APPOINTMENT_PROVIDER, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, STANDARD_SECTION_ITEMS_SECTION_TABS, buildPropertyViewerInitialContextFromProperties, buildPropertyViewerTabsFromProperties, buildTableColumnsEditorLayout, getFieldDefinitions, getLogicDefinition, getOperationDefinition, isPropertyBindingExpressionFormValue, preparePropertyForViewer, preparePropertyViewerTabs, registerFieldDefinitions, withValidationsOnEditorNode };
 //# sourceMappingURL=acorex-platform-layout-components.mjs.map