@acorex/platform 19.1.4 → 19.1.5

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

@@ -1,14 +1,15 @@
+import * as i1$1 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 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, inject, EventEmitter, effect, Component, ChangeDetectionStrategy, Output, Input, InjectionToken, ElementRef, Injector, ChangeDetectorRef, ViewChild, input, ViewContainerRef, Directive, NgModule, Optional, Inject } from '@angular/core';
-import { set, cloneDeep, get, isEqual, merge, isNil, isUndefined, sum } from 'lodash-es';
-import { Subject, BehaviorSubject, filter } from 'rxjs';
-import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
+import { signal, computed, Injectable, InjectionToken, inject, ElementRef, effect, Injector, ChangeDetectorRef, Component, ChangeDetectionStrategy, Input, ViewChild, EventEmitter, Output, input, ViewContainerRef, Directive, NgModule, Optional, Inject } from '@angular/core';
 import { AXDataTableColumnComponent, AXBaseDataTable } from '@acorex/components/data-table';
+import { set, merge, cloneDeep, get, isEqual, isNil, isUndefined, sum } from 'lodash-es';
+import { Subject, BehaviorSubject, filter } from 'rxjs';
 import { convertArrayToDataSource, AXDataSource } from '@acorex/components/common';
+import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
 import { AXUnsubscriber } from '@acorex/core/utils';
 
 var AXPPageStatus;
@@ -121,6 +122,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             type: Injectable
         }] });
 
+class AXPWidgetRegistryService {
+    constructor() {
+        this.types = new Map();
+    }
+    register(widget) {
+        this.types.set(widget.name, widget);
+    }
+    extend(parentName, widget) {
+        const parentWidget = this.resolve(parentName);
+        const newWidget = merge({}, parentWidget, widget);
+        newWidget.name = widget.name;
+        this.register(newWidget);
+    }
+    resolve(name) {
+        const widget = this.types.get(name);
+        if (!widget) {
+            throw new Error(`Widget with name "${name}" does not exist.`);
+        }
+        return widget;
+    }
+    all() {
+        return Array.from(this.types.values());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetRegistryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetRegistryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class AXPLayoutContextChangeEvent {
 }
 const AXPLayoutBuilderContextStore = signalStore(
@@ -216,83 +250,6 @@ withMethods((store) => ({
     },
 })));
 
-class AXPWidgetContainerComponent {
-    set context(value) {
-        this.contextService.set(value);
-    }
-    set functions(v) {
-        this.builderService.setFunctions(v);
-    }
-    constructor() {
-        this.contextService = inject(AXPLayoutBuilderContextStore);
-        this.builderService = inject(AXPLayoutBuilderService);
-        this.onContextChanged = new EventEmitter();
-        this.status = computed(() => {
-            return this.builderService.status();
-        });
-        this.isBusy = computed(() => {
-            return this.builderService.isBusy();
-        });
-        effect(() => {
-            if (this.contextService.isChanged()) {
-                this.onContextChanged.emit(this.contextService.changeEvent());
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", 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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetContainerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'axp-widgets-container',
-                    template: `<ng-content></ng-content>`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { style: 'display: contents;' },
-                    providers: [AXPLayoutBuilderService, AXPLayoutBuilderContextStore],
-                    standalone: false,
-                }]
-        }], ctorParameters: () => [], propDecorators: { onContextChanged: [{
-                type: Output
-            }], context: [{
-                type: Input
-            }], functions: [{
-                type: Input
-            }] } });
-
-class AXPWidgetRegistryService {
-    constructor() {
-        this.types = new Map();
-    }
-    register(widget) {
-        this.types.set(widget.name, widget);
-    }
-    extend(parentName, widget) {
-        const parentWidget = this.resolve(parentName);
-        const newWidget = merge({}, parentWidget, widget);
-        newWidget.name = widget.name;
-        this.register(newWidget);
-    }
-    resolve(name) {
-        const widget = this.types.get(name);
-        if (!widget) {
-            throw new Error(`Widget with name "${name}" does not exist.`);
-        }
-        return widget;
-    }
-    all() {
-        return Array.from(this.types.values());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetRegistryService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetRegistryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 const AXP_WIDGET_DATASOURCE_PROVIDER = new InjectionToken('AXP_WIDGET_DATASOURCE_PROVIDER');
 class AXPWidgetDataSourceProviderService {
     constructor() {
@@ -359,7 +316,12 @@ const AXPWidgetsCatalog = {
     avatar: 'avatar',
     stringFilter: 'string-filter',
     themeColorSelection: 'theme-color-selection',
+    numberFilter: 'number-filter',
+    dateTimeFilter: 'datetime-filter',
+    booleanFilter: 'boolean-filter',
+    lookupFilter: 'lookup-filter',
     flexOptions: 'flex-options',
+    selectFilter: 'select-filter',
 };
 
 function objectKeyValueTransforms(keyName) {
@@ -460,7 +422,9 @@ class AXPWidgetComponent extends AXPLayoutElement {
         this._status = signal(AXPWidgetStatus.Rendering);
         this.status = this._status.asReadonly();
         this.onStatusChanged = new BehaviorSubject(this._status());
-        this.#statusEffect = effect(() => { this.onStatusChanged.next(this.status()); });
+        this.#statusEffect = effect(() => {
+            this.onStatusChanged.next(this.status());
+        });
         this.isBusy = computed(() => [AXPWidgetStatus.Rendering, AXPWidgetStatus.Processing].includes(this.status()));
         this.fullPath = signal(null);
         this.getValue = computed(() => {
@@ -813,6 +777,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 args: ['header']
             }] } });
 
+class AXPWidgetContainerComponent {
+    set context(value) {
+        this.contextService.set(value);
+    }
+    set functions(v) {
+        this.builderService.setFunctions(v);
+    }
+    constructor() {
+        this.contextService = inject(AXPLayoutBuilderContextStore);
+        this.builderService = inject(AXPLayoutBuilderService);
+        this.onContextChanged = new EventEmitter();
+        this.status = computed(() => {
+            return this.builderService.status();
+        });
+        this.isBusy = computed(() => {
+            return this.builderService.isBusy();
+        });
+        effect(() => {
+            if (this.contextService.isChanged()) {
+                this.onContextChanged.emit(this.contextService.changeEvent());
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-widgets-container',
+                    template: `<ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: contents;' },
+                    providers: [AXPLayoutBuilderService, AXPLayoutBuilderContextStore],
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [], propDecorators: { onContextChanged: [{
+                type: Output
+            }], context: [{
+                type: Input
+            }], functions: [{
+                type: Input
+            }] } });
+
+class AXPWidgetPlaceholderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXPWidgetPlaceholderComponent, isStandalone: true, selector: "axp-widget-placeholder", ngImport: i0, template: `<div>
+    <ax-skeleton class="ax-w-full ax-h-10 ax-rounded-md"></ax-skeleton>
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i1$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetPlaceholderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-widget-placeholder',
+                    template: `<div>
+    <ax-skeleton class="ax-w-full ax-h-10 ax-rounded-md"></ax-skeleton>
+  </div>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AXSkeletonModule],
+                    standalone: true,
+                }]
+        }] });
+
 class AXPWidgetRendererDirective {
     constructor() {
         this.parentNode = input();
@@ -892,7 +919,7 @@ class AXPWidgetRendererDirective {
             return { ...acc, ...curr };
         }, {});
         //
-        this.mergedOptions.set(merge(props, this.node().options) || {});
+        this.mergedOptions.set(merge(props, widget?.options, this.node().options) || {});
         this.preprocessAndInitialOptions(cloneDeep(this.node().options));
         await this.updateOptionsBasedOnContext();
         //
@@ -913,6 +940,8 @@ class AXPWidgetRendererDirective {
             ],
         });
         //
+        const loadingRef = this.viewContainerRef.createComponent(AXPWidgetPlaceholderComponent);
+        //
         const com = await widget?.components[this.mode()]?.component();
         this.componentRef = this.viewContainerRef.createComponent(com, { injector: token });
         this.instance = this.componentRef.instance;
@@ -924,7 +953,9 @@ class AXPWidgetRendererDirective {
         await this.updateValueBasedOnFormula();
         await this.assignTriggers();
         //
+        loadingRef.destroy();
         this.isLoading.set(false);
+        //
     }
     applyOptions() {
         if (!this.instance)
@@ -1140,7 +1171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             provide: AXUnsubscriber,
                         },
                     ],
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [] });
 
@@ -1152,13 +1183,14 @@ class AXPLayoutBuilderModule {
             providers: [
                 {
                     provide: 'AXPLayoutBuilderModuleFactory',
-                    useFactory: (registry) => () => {
-                        config?.widgets?.forEach(w => registry.register(w));
+                    useFactory: (registry) => async () => {
+                        await Promise.all(config?.widgets?.map((w) => Promise.resolve(registry.register(w))) || []);
+                        await Promise.all(config?.extendedWidgets?.map((ew) => Promise.resolve(registry.extend(ew.parentName, ew.widget))) || []);
                     },
                     deps: [AXPWidgetRegistryService],
-                    multi: true
+                    multi: true,
                 },
-            ]
+            ],
         };
     }
     static forChild(config) {
@@ -1167,20 +1199,21 @@ class AXPLayoutBuilderModule {
             providers: [
                 {
                     provide: 'AXPLayoutBuilderModuleFactory',
-                    useFactory: (registry) => () => {
-                        config?.widgets?.forEach(w => registry.register(w));
+                    useFactory: (registry) => async () => {
+                        await Promise.all(config?.widgets?.map((w) => Promise.resolve(registry.register(w))) || []);
+                        await Promise.all(config?.extendedWidgets?.map((ew) => Promise.resolve(registry.extend(ew.parentName, ew.widget))) || []);
                     },
                     deps: [AXPWidgetRegistryService],
-                    multi: true
-                }
-            ]
+                    multi: true,
+                },
+            ],
         };
     }
     /**
      * @ignore
      */
     constructor(instances) {
-        instances?.forEach(f => {
+        instances?.forEach((f) => {
             f();
         });
     }