@acorex/platform 19.1.3 → 19.1.5

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

@@ -1,16 +1,40 @@
-import * as i3 from '@acorex/components/skeleton';
+import * as i1$1 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
-import * as i2 from '@angular/cdk/portal';
-import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
+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, Injectable, InjectionToken, inject, ElementRef, afterNextRender, computed, effect, Injector, Component, ChangeDetectionStrategy, Input, EventEmitter, model, Output, ChangeDetectorRef, ViewChild, input, ViewContainerRef, Directive, NgModule, Optional, Inject } from '@angular/core';
-import { AXUnsubscriber } from '@acorex/core/utils';
-import { set, get, isEqual, clone, merge, isNil, cloneDeep, isUndefined, sum } from 'lodash-es';
-import { Subject, filter } from 'rxjs';
-import { convertArrayToDataSource, AXDataSource } from '@acorex/components/common';
+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;
+(function (AXPPageStatus) {
+    // Rendering statuses
+    AXPPageStatus["Rendering"] = "rendering";
+    AXPPageStatus["Rendered"] = "rendered";
+    // Processing statuses
+    AXPPageStatus["Processing"] = "processing";
+    // Submission statuses
+    AXPPageStatus["Submitting"] = "submitting";
+    AXPPageStatus["Submitted"] = "submitted";
+    // Error handling
+    AXPPageStatus["Error"] = "error";
+})(AXPPageStatus || (AXPPageStatus = {}));
+var AXPWidgetStatus;
+(function (AXPWidgetStatus) {
+    // Rendering statuses
+    AXPWidgetStatus["Rendering"] = "rendering";
+    AXPWidgetStatus["Rendered"] = "rendered";
+    // Processing statuses
+    AXPWidgetStatus["Processing"] = "processing";
+    // Error handling
+    AXPWidgetStatus["Error"] = "error";
+})(AXPWidgetStatus || (AXPWidgetStatus = {}));
 
 class AXPLayoutElement {
     api() {
@@ -19,15 +43,15 @@ class AXPLayoutElement {
 }
 class AXPLayoutBuilderService {
     constructor() {
-        this.context$ = signal({});
         this.variables$ = signal({});
         this.functions$ = signal({});
-        this.onChanged = new Subject();
         this.onRefresh = new Subject();
-        this.debouncers = {};
-        this.debouncerSubscriptions = {};
         this.widgets = new Map();
-        this.context = this.context$.asReadonly();
+        this.status$ = signal(AXPPageStatus.Rendering);
+        this.status = this.status$.asReadonly();
+        this.isBusy = computed(() => {
+            return [AXPPageStatus.Processing, AXPPageStatus.Submitting, AXPPageStatus.Rendering].includes(this.status());
+        });
     }
     get variables() {
         return this.variables$();
@@ -35,15 +59,36 @@ class AXPLayoutBuilderService {
     get functions() {
         return this.functions$();
     }
-    initial(value) {
-        this.context$.set(value);
-        this.refresh();
+    updateStatus() {
+        this.status$.update(() => this.detectStatus());
+    }
+    detectStatus() {
+        const statuses = Array.from(this.widgets.values()).map(c => c.status());
+        // Rendering statuses
+        if (statuses.some((status) => status === AXPWidgetStatus.Rendering)) {
+            return AXPPageStatus.Rendering;
+        }
+        if (statuses.every((status) => status === AXPWidgetStatus.Rendered)) {
+            return AXPPageStatus.Rendered;
+        }
+        // Processing statuses
+        if (statuses.some((status) => status === AXPWidgetStatus.Processing)) {
+            return AXPPageStatus.Processing;
+        }
+        // Error handling
+        if (statuses.some((status) => status === AXPWidgetStatus.Error)) {
+            return AXPPageStatus.Error;
+        }
+        return AXPPageStatus.Rendered; // Default to Loaded when all widgets are in a completed state
     }
     refresh() {
         setTimeout(() => {
             this.onRefresh.next();
         }, 0);
     }
+    setStatus(status) {
+        this.status$.set(status);
+    }
     setVariables(...args) {
         if (args.length == 0)
             return;
@@ -62,57 +107,13 @@ class AXPLayoutBuilderService {
             this.functions$.update((v) => set(v, args[0], args[1]));
         }
     }
-    setValue(path, value, init = false) {
-        const oldValue = get(this.context$(), path);
-        if (isEqual(oldValue, value)) {
-            return;
-        }
-        // if (!this.debouncers[path]) {
-        //   // Create a new Subject for debouncing if it doesn't exist
-        //   this.debouncers[path] = new Subject<{ path: string; value: any; init: boolean }>();
-        //   // Subscribe to the subject with debounceTime
-        //   this.debouncerSubscriptions[path] = this.debouncers[path].pipe(debounceTime(150)).subscribe(({ value, init }) => {
-        //     // Only emit onChanged event after debounce time
-        //     this.onChanged.next({
-        //       oldValue: oldValue,
-        //       newValue: value,
-        //       data: this.context(),
-        //       path,
-        //       init,
-        //     });
-        //   });
-        // }
-        // Update context immediately
-        this.context$.update((ctx) => set(clone(ctx), path, value));
-        //
-        this.onChanged.next({
-            oldValue: oldValue,
-            newValue: value,
-            data: this.context(),
-            path,
-            init,
-        });
-        // Emit value through the debouncer subject
-        //this.debouncers[path].next({ path, value, init });
-    }
-    getValue(path) {
-        return get(this.context(), path);
-    }
     registerWidget(id, widget) {
         this.widgets.set(id, widget);
     }
     getWidget(id) {
         return this.widgets.get(id);
     }
-    unsubscribeDebouncers() {
-        Object.keys(this.debouncerSubscriptions).forEach((path) => {
-            this.debouncerSubscriptions[path].unsubscribe();
-            delete this.debouncerSubscriptions[path]; // Clean up the reference
-            delete this.debouncers[path]; // Also clean up the debouncer subject
-        });
-    }
     ngOnDestroy() {
-        this.unsubscribeDebouncers();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLayoutBuilderService }); }
@@ -154,6 +155,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 }]
         }] });
 
+class AXPLayoutContextChangeEvent {
+}
+const AXPLayoutBuilderContextStore = signalStore(
+// Initial State
+withState(() => ({
+    data: {}, // Shared context data
+    state: 'initiated', // Current state
+    initialSnapshot: {}, // Snapshot of the first initialized state
+    previousSnapshot: {}, // Snapshot of the previous state
+    lastChange: {
+        state: 'initiated',
+    }, // Last change event
+})), 
+// Computed Signals
+withComputed(({ data, state, lastChange, initialSnapshot, previousSnapshot }) => ({
+    isChanged: computed(() => state() === 'changed'),
+    isReset: computed(() => state() === 'restored'),
+    isInitiated: computed(() => state() === 'initiated'),
+    isEmpty: computed(() => Object.keys(data()).length === 0),
+    snapshot: computed(() => cloneDeep(data())), // Current data snapshot
+    initial: computed(() => cloneDeep(initialSnapshot())), // Initial snapshot
+    previous: computed(() => cloneDeep(previousSnapshot())), // Previous snapshot
+    changeEvent: computed(() => lastChange()), // Reactive last change event
+})), 
+// Methods for State Management
+withMethods((store) => ({
+    // Update a specific value
+    update(path, value) {
+        const currentData = cloneDeep(store.data());
+        const oldValue = get(currentData, path);
+        // Skip if the value hasn't changed
+        if (isEqual(oldValue, value)) {
+            return;
+        }
+        // Update the value and prepare the change event
+        const updatedData = set(currentData, path, value);
+        const changeEvent = {
+            oldValue,
+            newValue: value,
+            path,
+            state: 'changed',
+            data: updatedData,
+        };
+        // Patch the state
+        patchState(store, {
+            previousSnapshot: store.snapshot(), // Save the previous state
+            data: updatedData,
+            state: 'changed',
+            lastChange: changeEvent,
+        });
+    },
+    // Reset to the initial state
+    reset() {
+        const initialData = store.initial();
+        const changeEvent = {
+            oldValue: cloneDeep(store.data()), // Current data becomes old value
+            newValue: cloneDeep(initialData), // Reset to the initial state
+            path: '',
+            state: 'restored',
+            data: initialData,
+        };
+        patchState(store, {
+            previousSnapshot: store.snapshot(), // Save the previous state
+            data: initialData,
+            state: 'restored',
+            lastChange: changeEvent,
+        });
+    },
+    // Initialize the state
+    set(initialData) {
+        const currentData = store.data();
+        if (isEqual(currentData, initialData)) {
+            return; // Skip if the current state matches the initial state
+        }
+        const changeEvent = {
+            oldValue: null,
+            newValue: cloneDeep(initialData),
+            path: '',
+            state: 'initiated',
+            data: initialData,
+        };
+        patchState(store, {
+            initialSnapshot: cloneDeep(initialData), // Save the initial state
+            previousSnapshot: store.snapshot(), // Save the current state as the previous
+            data: initialData,
+            state: 'initiated',
+            lastChange: changeEvent,
+        });
+    },
+    // Get a specific value
+    getValue(path) {
+        return get(store.data(), path);
+    },
+})));
+
 const AXP_WIDGET_DATASOURCE_PROVIDER = new InjectionToken('AXP_WIDGET_DATASOURCE_PROVIDER');
 class AXPWidgetDataSourceProviderService {
     constructor() {
@@ -217,6 +313,15 @@ const AXPWidgetsCatalog = {
     cronJob: 'cron-job',
     spacing: 'spacing',
     border: 'border',
+    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) {
@@ -230,7 +335,7 @@ function objectKeyValueTransforms(keyName) {
             if (isNil(value))
                 return undefined;
             return typeof value == 'object' ? value[keyName] : value;
-        }
+        },
     };
 }
 function cloneProperty(property, values) {
@@ -310,22 +415,18 @@ class AXPWidgetComponent extends AXPLayoutElement {
         this.children = this._children.asReadonly();
         this._options = signal(this.token.options ?? {});
         this.options = this._options.asReadonly();
-        this.contextService = inject(AXPLayoutBuilderService);
-        this.onReady = new Subject();
-        this.isRendered = false;
+        this.layoutService = inject(AXPLayoutBuilderService);
+        this.contextService = inject(AXPLayoutBuilderContextStore);
         this._isValueWidget = false;
         this.isValueWidget = () => this._isValueWidget;
-        this.fullPath = signal(null);
-        this.nextRender = afterNextRender(() => {
-            //
-            if (!this.isRendered) {
-                this.detectFullPath();
-                //
-                this.onReady.next();
-                //
-                this.isRendered = true;
-            }
+        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.isBusy = computed(() => [AXPWidgetStatus.Rendering, AXPWidgetStatus.Processing].includes(this.status()));
+        this.fullPath = signal(null);
         this.getValue = computed(() => {
             return this.fullPath() ? this.extractValue(this.fullPath()) : null;
         });
@@ -333,33 +434,32 @@ class AXPWidgetComponent extends AXPLayoutElement {
     get id() {
         return this._id;
     }
+    #statusEffect;
     outputs() {
         return [];
     }
     ngOnInit() {
-        this.initRender();
-    }
-    initRender() {
         this._isValueWidget = this.config.properties?.some((c) => c.name == 'path') ?? false;
         if (this.isValueWidget()) {
             this.detectFullPath();
             if (!isNil(this.defaultValue) && isNil(this.getValue())) {
-                this.setValue(this.defaultValue, true);
+                this.setValue(this.defaultValue);
             }
         }
         //
         if (get(this.node, '__meta__.added')) {
             this.onAdded();
         }
+        this.setStatus(AXPWidgetStatus.Rendered);
     }
     extractValue(path) {
-        const rawValue = get(this.contextService.context(), path);
+        const rawValue = this.contextService.getValue(path);
         if (this.node.valueTransforms?.getter) {
             return this.node.valueTransforms?.getter(rawValue);
         }
         return rawValue;
     }
-    setValue(value, init = false) {
+    setValue(value) {
         if (this.node.valueTransforms?.setter) {
             value = this.node.valueTransforms?.setter(value);
         }
@@ -372,9 +472,12 @@ class AXPWidgetComponent extends AXPLayoutElement {
             return;
         }
         if (this.fullPath()) {
-            this.contextService.setValue(this.fullPath(), value, init);
+            this.contextService.update(this.fullPath(), value);
         }
-        this.onValueChanged(oldValue, value, init);
+    }
+    setStatus(status) {
+        this._status.set(status);
+        this.layoutService.updateStatus();
     }
     setOptions(values) {
         this._options.set({ ...this.options(), ...values });
@@ -397,7 +500,6 @@ class AXPWidgetComponent extends AXPLayoutElement {
     setChildren(children) {
         this._children.set([...children]);
     }
-    onValueChanged(oldValue, newValue, init = false) { }
     onAdded() { }
     detectFullPath() {
         const sections = [];
@@ -427,7 +529,7 @@ class AXPWidgetComponent extends AXPLayoutElement {
         this.fullPath.set(sections.reverse().join('.'));
         this._id = this.name || this.parent ? ids.reverse().join('_') : null;
         if (this._id) {
-            this.contextService.registerWidget(this._id, this);
+            this.layoutService.registerWidget(this._id, this);
         }
     }
     handleValueChanged(e) {
@@ -508,358 +610,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             type: Injectable
         }] });
 
-class AXPWidgetRendererComponent {
-    get node() {
-        return this._node;
-    }
-    set node(v) {
-        this._node = v;
-        this.loadComponent();
-    }
-    get mode() {
-        return this._mode;
-    }
-    set mode(v) {
-        this._mode = v;
-    }
-    constructor() {
-        this._mode = 'edit';
-        this.mergedOptions = signal({});
-        this.injector = inject(Injector);
-        this.builderService = inject(AXPLayoutBuilderService);
-        this.widgetRegistery = inject(AXPWidgetRegistryService);
-        this.unsubscriber = inject(AXUnsubscriber);
-        this.isLoading = signal(true);
-        this.expressionCache = new Map();
-        this.expressionEvaluators = new Map();
-        this.scope = null;
-        this.builderService.onChanged.pipe(this.unsubscriber.takeUntilDestroy).subscribe(async (e) => {
-            if ((await this.updateOptionsBasedOnContext()) > 0) {
-                this.applyOptions();
-            }
-            if (this.checkFormulaForUpdate(this.node.formula, e.path)) {
-                await this.updateValueBasedOnFormula();
-            }
-        });
-    }
-    async loadComponent() {
-        this.isLoading.set(true);
-        const widget = this.widgetRegistery.resolve(this.node.type);
-        //
-        const props = widget?.components[this.mode]?.properties
-            ?.filter((c) => c.schema.defaultValue != null)
-            .map((c) => ({ [c.name]: c.schema.defaultValue }))
-            .reduce((acc, curr) => {
-            return { ...acc, ...curr };
-        }, {});
-        //
-        this.mergedOptions.set(merge(props, this.node.options) || {});
-        this.preprocessAndInitialOptions(cloneDeep(this.node.options));
-        await this.updateOptionsBasedOnContext();
-        const tokenValue = {
-            node: this.node,
-            options: this.mergedOptions(),
-            config: widget,
-        };
-        const token = Injector.create({
-            parent: this.injector,
-            providers: [
-                {
-                    provide: AXP_WIDGET_TOKEN,
-                    useValue: tokenValue,
-                },
-            ],
-        });
-        var com = await widget?.components[this.mode]?.component();
-        this.portal = new ComponentPortal(com, null, token);
-        this.isLoading.set(false);
-    }
-    async handleAttached(portalOutletRef) {
-        portalOutletRef = portalOutletRef;
-        this.instance = portalOutletRef.instance;
-        this.instance.parent = this.parentNode;
-        this.instance.index = this.index;
-        this.instance.mode = this.mode;
-        await this.updateValueBasedOnFormula();
-        await this.assignTriggers();
-    }
-    applyOptions() {
-        if (!this.instance)
-            return;
-        this.instance.setOptions(this.mergedOptions());
-    }
-    checkFormulaForUpdate(formula, path) {
-        if (formula) {
-            const regex = /context\.eval\('([^']+)'\)/g;
-            const matches = formula.match(regex);
-            const nodes = matches ? matches.map((match) => match.match(/'([^']+)'/)[1]) : [];
-            return nodes.includes(path);
-        }
-        else
-            return false;
-    }
-    preprocessAndInitialOptions(obj, pathPrefix = '') {
-        if (!obj)
-            return;
-        Object.entries(obj).forEach(([key, value]) => {
-            const currentPath = pathPrefix ? `${pathPrefix}.${key}` : key;
-            if (typeof value === 'string' && value.includes('{{')) {
-                // Cache dynamic expression for later evaluation
-                this.expressionEvaluators.set(currentPath, () => this.evaluateExpression(value));
-            }
-            else if (typeof value === 'object' &&
-                value !== null &&
-                (value.constructor === Object || Array.isArray(value))) {
-                // Recursively handle nested objects
-                this.preprocessAndInitialOptions(value, currentPath);
-            }
-            else {
-                // Apply static values directly
-                this.mergedOptions.update((currentOptions) => {
-                    return set(currentOptions, currentPath, value);
-                });
-            }
-        });
-    }
-    async updateOptionsBasedOnContext() {
-        const updates = [];
-        for (let [path, evaluator] of this.expressionEvaluators) {
-            const newValue = await evaluator();
-            updates.push({ path, newValue });
-        }
-        // Apply updates to mergedOptions
-        if (updates.length > 0) {
-            this.mergedOptions.update((o) => {
-                const updatedOptions = { ...o };
-                updates.forEach(({ path, newValue }) => {
-                    // Set the new value in the updatedOptions object by path
-                    set(updatedOptions, path, newValue); // Assuming 'set' can handle paths like 'property.subproperty'
-                });
-                return updatedOptions;
-            });
-        }
-        return updates.length;
-    }
-    async updateValueBasedOnFormula() {
-        if (this.node.formula) {
-            const value = await this.evaluateExpression(this.node.formula);
-            this.instance.setValue(value);
-        }
-    }
-    async evaluateExpression(templateExpression) {
-        try {
-            // Check cache first, but cache the function for evaluation, not the evaluated value
-            if (!this.expressionCache.has(templateExpression)) {
-                const expressionMatch = templateExpression.match(/\{\{\s*(.*?)\s*\}\}/);
-                if (!expressionMatch) {
-                    throw Error(`No valid expression found in "${templateExpression}"`);
-                }
-                const expression = expressionMatch[1];
-                // Cache the evaluation function instead of the result
-                const scope = this.getGlobalScope();
-                const evaluationFunction = async () => {
-                    const sandbox = new Function('scope', `with (scope) { return (async function() { return ${expression}; })(); }`);
-                    return await sandbox(scope);
-                };
-                this.expressionCache.set(templateExpression, evaluationFunction);
-            }
-            // Retrieve the function from the cache and call it to evaluate the expression
-            const evaluate = this.expressionCache.get(templateExpression);
-            if (evaluate) {
-                const result = await evaluate();
-                return result;
-            }
-            else {
-                throw Error(`Failed to retrieve evaluation function for expression: "${templateExpression}"`);
-            }
-        }
-        catch (error) {
-            console.error('Error evaluating expression:', error);
-            return false;
-        }
-    }
-    getGlobalScope() {
-        if (this.scope)
-            return this.scope;
-        this.scope = {};
-        set(this.scope, 'context', this.getContextScope());
-        set(this.scope, 'events', this.getEventScope());
-        set(this.scope, 'widget', this.getWidgetScope());
-        set(this.scope, 'methods', this.getFunctionScope());
-        set(this.scope, 'vars', this.getVariablesScope());
-        return this.scope;
-    }
-    getContextScope() {
-        const scope = {};
-        set(scope, 'eval', (path) => this.builderService.getValue(path));
-        return scope;
-    }
-    getEventScope() {
-        const scope = {};
-        set(scope, 'context', (path) => this.builderService.onChanged.pipe(filter((c) => c.path == path)));
-        set(scope, 'from', (event) => get(this.instance.api(), event));
-        return scope;
-    }
-    getWidgetScope() {
-        const scope = {};
-        set(scope, 'call', (name, ...args) => {
-            this.instance.call(name, ...args);
-        });
-        set(scope, 'find', (id) => {
-            return this.builderService.getWidget(id)?.api();
-        });
-        return scope;
-    }
-    getFunctionScope() {
-        const scope = {};
-        set(scope, 'sum', (values) => {
-            return sum(values);
-        });
-        Object.entries(this.builderService.functions).forEach((i) => {
-            set(scope, i[0], (...args) => {
-                return i[1](...args);
-            });
-        });
-        return scope;
-    }
-    getVariablesScope() {
-        const scope = {};
-        set(scope, 'eval', (path) => get(this.builderService.variables, path));
-        return scope;
-    }
-    async assignTriggers() {
-        this.node.triggers?.forEach((t) => {
-            const event = this.evaluateTrigger(t.event);
-            event?.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
-                this.evaluateAction(t.action);
-            });
-        });
-    }
-    evaluateTrigger(templateExpression) {
-        try {
-            const expressionMatch = templateExpression.match(/\{\{\s*(.*?)\s*\}\}/);
-            if (!expressionMatch) {
-                throw Error(`No valid expression found in "${templateExpression}"`);
-            }
-            const expression = expressionMatch[1];
-            // Cache the evaluation function instead of the result
-            const scope = this.getGlobalScope();
-            const sandbox = new Function('scope', `with (scope) { return (  function() { return ${expression}; })(); }`);
-            return sandbox(scope);
-        }
-        catch (error) {
-            console.error('Error evaluating expression:', error);
-            return null;
-        }
-    }
-    evaluateAction(templateExpression) {
-        try {
-            const expressionMatch = templateExpression.match(/\{\{\s*(.*?)\s*\}\}/);
-            if (!expressionMatch) {
-                throw Error(`No valid expression found in "${templateExpression}"`);
-            }
-            const expression = expressionMatch[1];
-            // Cache the evaluation function instead of the result
-            const scope = this.getGlobalScope();
-            const sandbox = new Function('scope', `with (scope) {  ${expression} }`);
-            sandbox(scope);
-        }
-        catch (error) {
-            console.error('Error evaluating expression:', error);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPWidgetRendererComponent, isStandalone: false, selector: "axp-widget-renderer", inputs: { node: "node", mode: "mode", parentNode: "parentNode", index: "index" }, providers: [
-            {
-                provide: AXUnsubscriber,
-            },
-        ], ngImport: i0, template: `
-    @if(mergedOptions().isVisible!=false) { @if(isLoading()){
-    <ax-skeleton [animated]="true" class="ax-w-full  lg:ax-w-[50%] ax-h-8 ax-rounded"></ax-skeleton>
-    } @else {
-    <ng-container *ngTemplateOutlet="tt"></ng-container>
-    } }
-    <ng-template #tt>
-      <ng-template [cdkPortalOutlet]="portal" (attached)="handleAttached($event)"></ng-template>
-    </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i3.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetRendererComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'axp-widget-renderer',
-                    template: `
-    @if(mergedOptions().isVisible!=false) { @if(isLoading()){
-    <ax-skeleton [animated]="true" class="ax-w-full  lg:ax-w-[50%] ax-h-8 ax-rounded"></ax-skeleton>
-    } @else {
-    <ng-container *ngTemplateOutlet="tt"></ng-container>
-    } }
-    <ng-template #tt>
-      <ng-template [cdkPortalOutlet]="portal" (attached)="handleAttached($event)"></ng-template>
-    </ng-template>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [
-                        {
-                            provide: AXUnsubscriber,
-                        },
-                    ],
-                    standalone: false
-                }]
-        }], ctorParameters: () => [], propDecorators: { node: [{
-                type: Input,
-                args: [{ required: true }]
-            }], mode: [{
-                type: Input
-            }], parentNode: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }] } });
-
-class AXPWidgetContainerComponent {
-    constructor() {
-        this.onChanged = new EventEmitter();
-        this.context = model({});
-        this.unsubscriber = inject(AXUnsubscriber);
-        this.builderService = inject(AXPLayoutBuilderService);
-        this.ef = effect(() => {
-            this.builderService.initial(this.context());
-        });
-    }
-    set variables(v) {
-        this.builderService.setVariables(v);
-    }
-    set functions(v) {
-        this.builderService.setFunctions(v);
-    }
-    ngOnInit() {
-        this.builderService.onChanged.pipe(this.unsubscriber.takeUntilDestroy).subscribe((e) => {
-            this.context.set(e.data);
-            this.onChanged.emit(e);
-        });
-    }
-    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: "17.1.0", version: "19.0.3", type: AXPWidgetContainerComponent, isStandalone: false, selector: "axp-widgets-container", inputs: { context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, variables: { classPropertyName: "variables", publicName: "variables", isSignal: false, isRequired: false, transformFunction: null }, functions: { classPropertyName: "functions", publicName: "functions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged", context: "contextChange" }, host: { styleAttribute: "display: contents;" }, providers: [AXPLayoutBuilderService, AXUnsubscriber], 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, AXUnsubscriber],
-                    standalone: false
-                }]
-        }], propDecorators: { onChanged: [{
-                type: Output
-            }], variables: [{
-                type: Input
-            }], functions: [{
-                type: Input
-            }] } });
-
 class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
     constructor() {
         super(...arguments);
@@ -1027,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();
@@ -1038,6 +851,7 @@ class AXPWidgetRendererDirective {
         this.mergedOptions = signal({});
         this.injector = inject(Injector);
         this.builderService = inject(AXPLayoutBuilderService);
+        this.contextService = inject(AXPLayoutBuilderContextStore);
         this.widgetRegistery = inject(AXPWidgetRegistryService);
         this.unsubscriber = inject(AXUnsubscriber);
         this.viewContainerRef = inject(ViewContainerRef);
@@ -1045,13 +859,19 @@ class AXPWidgetRendererDirective {
         this.expressionCache = new Map();
         this.expressionEvaluators = new Map();
         this.scope = null;
-        this.builderService.onChanged.pipe(this.unsubscriber.takeUntilDestroy).subscribe(async (e) => {
+        this.onContextChanged = new Subject();
+        effect(async () => {
+            const changed = this.contextService.changeEvent();
             if ((await this.updateOptionsBasedOnContext()) > 0) {
                 this.applyOptions();
             }
-            if (this.checkFormulaForUpdate(this.node().formula, e.path)) {
+            if (this.checkFormulaForUpdate(this.node().formula, changed.path)) {
                 await this.updateValueBasedOnFormula();
             }
+            //
+            if (changed.path) {
+                this.onContextChanged.next({ path: changed.path });
+            }
         });
         this.builderService.onRefresh.pipe(this.unsubscriber.takeUntilDestroy).subscribe(async () => {
             if ((await this.updateOptionsBasedOnContext()) > 0) {
@@ -1099,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();
         //
@@ -1120,16 +940,22 @@ 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;
+        this.instance.setStatus(AXPWidgetStatus.Rendering);
         this.instance.parent = this.parentNode();
         this.instance.index = this.index();
         this.instance.mode = this.mode();
+        this.instance.setStatus(AXPWidgetStatus.Rendered);
         await this.updateValueBasedOnFormula();
         await this.assignTriggers();
         //
+        loadingRef.destroy();
         this.isLoading.set(false);
+        //
     }
     applyOptions() {
         if (!this.instance)
@@ -1242,15 +1068,15 @@ class AXPWidgetRendererDirective {
     }
     getContextScope() {
         const scope = {};
-        set(scope, 'eval', (path) => this.builderService.getValue(path));
+        set(scope, 'eval', (path) => this.contextService.getValue(path));
         set(scope, 'set', (path, value) => {
-            this.builderService.setValue(path, value);
+            this.contextService.update(path, value);
         });
         return scope;
     }
     getEventScope() {
         const scope = {};
-        set(scope, 'context', (path) => this.builderService.onChanged.pipe(filter((c) => c.path == path)));
+        set(scope, 'context', (path) => this.onContextChanged.pipe(filter((c) => c.path == path)));
         set(scope, 'from', (event) => get(this.instance.api(), event));
         return scope;
     }
@@ -1345,11 +1171,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                             provide: AXUnsubscriber,
                         },
                     ],
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [] });
 
-const COMPONENTS = [AXPWidgetContainerComponent, AXPWidgetRendererComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective];
+const COMPONENTS = [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective];
 class AXPLayoutBuilderModule {
     static forRoot(config) {
         return {
@@ -1357,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) {
@@ -1372,25 +1199,26 @@ 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();
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLayoutBuilderModule, deps: [{ token: 'AXPLayoutBuilderModuleFactory', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXPLayoutBuilderModule, declarations: [AXPWidgetContainerComponent, AXPWidgetRendererComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective], imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule], exports: [AXPWidgetContainerComponent, AXPWidgetRendererComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", 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: "19.0.3", ngImport: i0, type: AXPLayoutBuilderModule, imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLayoutBuilderModule, decorators: [{
@@ -1427,16 +1255,22 @@ const AXP_WIDGETS_ADVANCE_GROUP = {
     order: 4,
     title: 'Advance',
 };
+const AXP_WIDGETS_FILTER_GROUP = {
+    name: 'filter',
+    order: 5,
+    title: 'Filters',
+};
 const AXP_WIDGETS_GROUPS = [
     AXP_WIDGETS_EDITOR_GROUP,
     AXP_WIDGETS_ACTION_GROUP,
     AXP_WIDGETS_LAYOUT_GROUP,
     AXP_WIDGETS_ADVANCE_GROUP,
+    AXP_WIDGETS_FILTER_GROUP,
 ];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXPColumnWidgetComponent, AXPDataListWidgetComponent, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPLayoutElement, AXPWidgetColumnRendererComponent, AXPWidgetComponent, AXPWidgetContainerComponent, AXPWidgetDataSourceProviderService, AXPWidgetRegistryService, AXPWidgetRendererComponent, AXPWidgetRendererDirective, AXPWidgetsCatalog, AXP_WIDGETS_ACTION_GROUP, AXP_WIDGETS_ADVANCE_GROUP, AXP_WIDGETS_EDITOR_GROUP, AXP_WIDGETS_GROUPS, AXP_WIDGETS_LAYOUT_GROUP, AXP_WIDGET_COLUMN_TOKEN, AXP_WIDGET_DATASOURCE_PROVIDER, AXP_WIDGET_TOKEN, cloneProperty, createBooleanProperty, createSelectProperty, createStringProperty, objectKeyValueTransforms };
+export { AXPColumnWidgetComponent, AXPDataListWidgetComponent, AXPLayoutBuilderContextStore, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPLayoutContextChangeEvent, AXPLayoutElement, AXPPageStatus, AXPWidgetColumnRendererComponent, AXPWidgetComponent, AXPWidgetContainerComponent, AXPWidgetDataSourceProviderService, AXPWidgetRegistryService, AXPWidgetRendererDirective, AXPWidgetStatus, AXPWidgetsCatalog, AXP_WIDGETS_ACTION_GROUP, AXP_WIDGETS_ADVANCE_GROUP, AXP_WIDGETS_EDITOR_GROUP, AXP_WIDGETS_FILTER_GROUP, AXP_WIDGETS_GROUPS, AXP_WIDGETS_LAYOUT_GROUP, AXP_WIDGET_COLUMN_TOKEN, AXP_WIDGET_DATASOURCE_PROVIDER, AXP_WIDGET_TOKEN, cloneProperty, createBooleanProperty, createSelectProperty, createStringProperty, objectKeyValueTransforms };
 //# sourceMappingURL=acorex-platform-layout-builder.mjs.map