@acorex/platform 20.2.3 → 20.2.4-next.1

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

@@ -1,16 +1,17 @@
 import * as i1$1 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
+import * as i2 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { PortalModule } from '@angular/cdk/portal';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { signal, computed, Injectable, InjectionToken, inject, Injector, ChangeDetectorRef, ViewChild, Input, ChangeDetectionStrategy, Component, EventEmitter, effect, Output, input, output, ViewContainerRef, Directive, Optional, Inject, NgModule, ElementRef } from '@angular/core';
 import { AXDataTableColumnComponent, AXBaseDataTable } from '@acorex/components/data-table';
+import { getSmart, setSmart, AXPExpressionEvaluatorService, AXPDataSourceDefinitionProviderService, extractValue } from '@acorex/platform/core';
 import { set, merge, cloneDeep, isNil, isEqual, get, sum, isEmpty, isString, isUndefined, isObjectLike } from 'lodash-es';
 import { Subject, filter, BehaviorSubject } from 'rxjs';
-import { getSmart, setSmart, AXPExpressionEvaluatorService, AXPDataSourceDefinitionProviderService, extractValue } from '@acorex/platform/core';
 import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
-import { AXTranslationService } from '@acorex/core/translation';
 import { AXUnsubscriber } from '@acorex/core/utils';
 import { convertArrayToDataSource, AXDataSource } from '@acorex/cdk/common';
 
@@ -54,6 +55,7 @@ class AXPLayoutBuilderService {
         this.functions$ = signal({}, ...(ngDevMode ? [{ debugName: "functions$" }] : []));
         this.onRefresh = new Subject();
         this.widgets = new Map();
+        this.onWidgetRegistered = new Subject();
         this.status$ = signal(AXPPageStatus.Rendering, ...(ngDevMode ? [{ debugName: "status$" }] : []));
         this.status = this.status$.asReadonly();
         this.isBusy = computed(() => {
@@ -70,7 +72,7 @@ class AXPLayoutBuilderService {
         this.status$.update(() => this.detectStatus());
     }
     detectStatus() {
-        const statuses = Array.from(this.widgets.values()).map(c => c.status());
+        const statuses = Array.from(this.widgets.values()).map((c) => c.status());
         // Rendering statuses
         if (statuses.some((status) => status === AXPWidgetStatus.Rendering)) {
             return AXPPageStatus.Rendering;
@@ -116,12 +118,46 @@ class AXPLayoutBuilderService {
     }
     registerWidget(id, widget) {
         this.widgets.set(id, widget);
+        this.onWidgetRegistered.next({ id, widget });
     }
     getWidget(id) {
         return this.widgets.get(id);
     }
-    ngOnDestroy() {
+    /**
+     * Waits until a widget with the given id is registered, then resolves with it.
+     * If the widget is already registered, resolves immediately.
+     * Optionally accepts a timeout (in ms) after which it resolves with undefined.
+     */
+    async waitForWidget(id, timeoutMs) {
+        const existing = this.widgets.get(id);
+        if (existing) {
+            return existing;
+        }
+        return new Promise((resolve) => {
+            let resolved = false;
+            let timer = null;
+            const sub = this.onWidgetRegistered.subscribe(({ id: registeredId, widget }) => {
+                if (registeredId === id && !resolved) {
+                    resolved = true;
+                    sub.unsubscribe();
+                    if (timer) {
+                        clearTimeout(timer);
+                    }
+                    resolve(widget);
+                }
+            });
+            if (timeoutMs != null && timeoutMs > 0) {
+                timer = setTimeout(() => {
+                    if (!resolved) {
+                        resolved = true;
+                        sub.unsubscribe();
+                        resolve(undefined);
+                    }
+                }, timeoutMs);
+            }
+        });
     }
+    ngOnDestroy() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBuilderService }); }
 }
@@ -194,6 +230,7 @@ const AXPWidgetsCatalog = {
     fileTypeExtension: 'file-type-extension',
     map: 'map',
     imageMarker: 'image-marker',
+    image: 'image',
     gallery: 'gallery',
     signature: 'signature',
     buttonAction: 'button-action',
@@ -221,7 +258,7 @@ const AXPWidgetsCatalog = {
     fontStyleChooser: 'font-style-chooser',
     fontSizeChooser: 'font-size-chooser',
     iconChooser: 'icon-chooser',
-    colorChooser: 'color-chooser',
+    themeColorChooser: 'theme-color-chooser',
     gridOptions: 'grid-options',
     advancedGridOptions: 'advanced-grid-options',
     stringFilter: 'string-filter',
@@ -254,8 +291,11 @@ const AXPWidgetsCatalog = {
     templateEditor: 'template-box-editor',
     panel: 'panel',
     notification: 'notification',
-    taskList: 'task-list',
+    taskBoard: 'task-board',
     comment: 'comment',
+    list: 'list',
+    listToolbar: 'list-toolbar',
+    entityList: 'entity-list',
 };
 
 function cloneProperty(property, values) {
@@ -405,14 +445,14 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
                 },
             ],
         });
-        this.width = this.customWidth ? this.customWidth : this.mergedOptions().width ?? '200px';
+        this.width = this.customWidth ? this.customWidth : (this.mergedOptions().width ?? '200px');
         this.allowResizing = this.mergedOptions().allowResizing || true;
         this.cdr.detectChanges();
     }
     getInputs(data) {
         return {
             rawValue: getSmart(data, this.node.path),
-            rowData: data
+            rowData: data,
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -420,63 +460,69 @@ class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
             AXPLayoutBuilderService,
             { 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 }}</ng-template>
+    <ng-template #header>{{ caption | translate | async }}</ng-template>
     <ng-template #cell let-row>
       <div class="ax-flex ax-gap-2 ax-items-center">
         @if (expandHandler) {
-        <div
-          (click)="handleExpandRow(row)"
-          class="ax-expand-handler"
-          [class.ax-invisible]="row.data.hasChild === false"
-          id="ax-expand-handler-container"
-          [style.padding-inline-start.rem]="row.data?.__meta__?.level * 2"
-        >
-          @if (loadingRow() === row) {
-          <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
-          } @else { @if (row.data?.__meta__?.expanded) {
-          <i [class]="customCollapseIcon || 'far fa-minus-square ax-text-md ax-opacity-75'"></i>
-          } @else {
-          <i [class]="customExpandIcon || 'far fa-plus-square ax-text-md  ax-opacity-75'"></i>
-          } }
-        </div>
-        } @if(component && widgetInjector && row?.data) {
-        <ng-container
-          *ngComponentOutlet="component; injector: widgetInjector; inputs: getInputs(row.data)"
-        ></ng-container>
+          <div
+            (click)="handleExpandRow(row)"
+            class="ax-expand-handler"
+            [class.ax-invisible]="row.data.hasChild === false"
+            id="ax-expand-handler-container"
+            [style.padding-inline-start.rem]="row.data?.__meta__?.level * 2"
+          >
+            @if (loadingRow() === row) {
+              <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
+            } @else {
+              @if (row.data?.__meta__?.expanded) {
+                <i [class]="customCollapseIcon || 'far fa-minus-square ax-text-md ax-opacity-75'"></i>
+              } @else {
+                <i [class]="customExpandIcon || 'far fa-plus-square ax-text-md  ax-opacity-75'"></i>
+              }
+            }
+          </div>
+        }
+        @if (component && widgetInjector && row?.data) {
+          <ng-container
+            *ngComponentOutlet="component; injector: widgetInjector; inputs: getInputs(row.data)"
+          ></ng-container>
         }
       </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", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], 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: "20.1.6", ngImport: i0, type: AXPWidgetColumnRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-widget-column-renderer',
                     template: `
-    <ng-template #header>{{ caption }}</ng-template>
+    <ng-template #header>{{ caption | translate | async }}</ng-template>
     <ng-template #cell let-row>
       <div class="ax-flex ax-gap-2 ax-items-center">
         @if (expandHandler) {
-        <div
-          (click)="handleExpandRow(row)"
-          class="ax-expand-handler"
-          [class.ax-invisible]="row.data.hasChild === false"
-          id="ax-expand-handler-container"
-          [style.padding-inline-start.rem]="row.data?.__meta__?.level * 2"
-        >
-          @if (loadingRow() === row) {
-          <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
-          } @else { @if (row.data?.__meta__?.expanded) {
-          <i [class]="customCollapseIcon || 'far fa-minus-square ax-text-md ax-opacity-75'"></i>
-          } @else {
-          <i [class]="customExpandIcon || 'far fa-plus-square ax-text-md  ax-opacity-75'"></i>
-          } }
-        </div>
-        } @if(component && widgetInjector && row?.data) {
-        <ng-container
-          *ngComponentOutlet="component; injector: widgetInjector; inputs: getInputs(row.data)"
-        ></ng-container>
+          <div
+            (click)="handleExpandRow(row)"
+            class="ax-expand-handler"
+            [class.ax-invisible]="row.data.hasChild === false"
+            id="ax-expand-handler-container"
+            [style.padding-inline-start.rem]="row.data?.__meta__?.level * 2"
+          >
+            @if (loadingRow() === row) {
+              <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
+            } @else {
+              @if (row.data?.__meta__?.expanded) {
+                <i [class]="customCollapseIcon || 'far fa-minus-square ax-text-md ax-opacity-75'"></i>
+              } @else {
+                <i [class]="customExpandIcon || 'far fa-plus-square ax-text-md  ax-opacity-75'"></i>
+              }
+            }
+          </div>
+        }
+        @if (component && widgetInjector && row?.data) {
+          <ng-container
+            *ngComponentOutlet="component; injector: widgetInjector; inputs: getInputs(row.data)"
+          ></ng-container>
         }
       </div>
     </ng-template>
@@ -653,6 +699,12 @@ class AXPWidgetContainerComponent {
             }
         });
     }
+    refresh() {
+        this.builderService.refresh();
+    }
+    find(name) {
+        return this.builderService.waitForWidget(name);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: AXPWidgetContainerComponent, isStandalone: false, selector: "axp-widgets-container", inputs: { context: "context", functions: "functions" }, outputs: { onContextChanged: "onContextChanged" }, host: { styleAttribute: "display: contents;" }, providers: [AXPLayoutBuilderService, AXPLayoutBuilderContextStore], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -786,8 +838,10 @@ 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) {
@@ -893,7 +947,7 @@ class AXPWidgetRendererDirective {
         Object.entries(obj).forEach(([key, value]) => {
             const currentPath = pathPrefix ? `${pathPrefix}.${key}` : key;
             // CRITICAL FIX: Skip trigger actions during options processing
-            // 
+            //
             // PROBLEM: Trigger actions were being evaluated immediately during widget setup/options processing,
             // causing them to execute before the actual trigger event occurred. This meant triggers would fire
             // during initialization instead of when the specified context path actually changed.
@@ -1195,13 +1249,13 @@ class AXPLayoutBuilderModule {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBuilderModule, deps: [{ token: 'AXPLayoutBuilderModuleFactory', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBuilderModule, declarations: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective], imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule], exports: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBuilderModule, imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBuilderModule, declarations: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective], imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule, AXTranslationModule], exports: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBuilderModule, imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule, AXTranslationModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBuilderModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule],
+                    imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule, AXTranslationModule],
                     exports: [...COMPONENTS],
                     declarations: [...COMPONENTS],
                 }]