@acorex/platform 20.2.4-next.9 → 20.3.0-next.1

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

@@ -1,19 +1,18 @@
-import * as i0 from '@angular/core';
-import { signal, computed, Injectable, InjectionToken, inject, ElementRef, effect, Injector, ChangeDetectorRef, ViewChild, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, input, output, ViewContainerRef, Directive, Optional, Inject, NgModule } from '@angular/core';
-import { convertArrayToDataSource, AXDataSource } from '@acorex/cdk/common';
-import { setSmart, AXPDataSourceDefinitionProviderService, extractValue, getSmart, AXPExpressionEvaluatorService } from '@acorex/platform/core';
-import { set, cloneDeep, isEqual, get, merge, isNil, isUndefined, isObjectLike, sum, isEmpty, isString } from 'lodash-es';
-import { Subject, BehaviorSubject, filter } from 'rxjs';
-import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
 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 { 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';
 
 var AXPPageStatus;
 (function (AXPPageStatus) {
@@ -55,7 +54,6 @@ 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(() => {
@@ -72,7 +70,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;
@@ -118,46 +116,12 @@ class AXPLayoutBuilderService {
     }
     registerWidget(id, widget) {
         this.widgets.set(id, widget);
-        this.onWidgetRegistered.next({ id, widget });
     }
     getWidget(id) {
         return this.widgets.get(id);
     }
-    /**
-     * 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() {
     }
-    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 }); }
 }
@@ -165,117 +129,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
             type: Injectable
         }] });
 
-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),
-    isDirty: computed(() => !isEqual(data(), previousSnapshot())),
-    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 = setSmart(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,
-        });
-    },
-    patch(context) {
-        const currentData = cloneDeep(store.data());
-        // Update the value and prepare the change event
-        const updatedData = { ...currentData, ...context };
-        const changeEvent = {
-            state: 'patch',
-            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
+class AXPWidgetRegistryService {
+    /**
+     *
+     */
+    constructor() {
+        this.types = new Map();
+        AXPWidgetRegistryService.instance = this;
+    }
+    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.`);
         }
-        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);
-    },
-})));
+        return widget;
+    }
+    all() {
+        return Array.from(this.types.values());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetRegistryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetRegistryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
 
 const AXPWidgetsCatalog = {
     timeDuration: 'time-duration',
@@ -305,7 +194,6 @@ const AXPWidgetsCatalog = {
     fileTypeExtension: 'file-type-extension',
     map: 'map',
     imageMarker: 'image-marker',
-    image: 'image',
     gallery: 'gallery',
     signature: 'signature',
     buttonAction: 'button-action',
@@ -326,7 +214,6 @@ const AXPWidgetsCatalog = {
     direction: 'direction',
     border: 'border',
     flexLayout: 'flex-layout',
-    flexItem: 'flex-item-layout',
     avatar: 'avatar',
     themePaletteChooser: 'theme-palette-chooser',
     themeModeChooser: 'theme-mode-chooser',
@@ -334,9 +221,8 @@ const AXPWidgetsCatalog = {
     fontStyleChooser: 'font-style-chooser',
     fontSizeChooser: 'font-size-chooser',
     iconChooser: 'icon-chooser',
-    themeColorChooser: 'theme-color-chooser',
+    colorChooser: 'color-chooser',
     gridOptions: 'grid-options',
-    gridItemOptions: 'grid-item-options',
     advancedGridOptions: 'advanced-grid-options',
     stringFilter: 'string-filter',
     numberFilter: 'number-filter',
@@ -344,7 +230,6 @@ const AXPWidgetsCatalog = {
     booleanFilter: 'boolean-filter',
     lookupFilter: 'lookup-filter',
     flexOptions: 'flex-options',
-    flexItemOptions: 'flex-item-options',
     selectFilter: 'select-filter',
     requiredValidation: 'required-validation',
     regularExpressionValidation: 'regular-expression-validation',
@@ -369,12 +254,8 @@ const AXPWidgetsCatalog = {
     templateEditor: 'template-box-editor',
     panel: 'panel',
     notification: 'notification',
-    taskBoard: 'task-board',
+    taskList: 'task-list',
     comment: 'comment',
-    list: 'list',
-    listToolbar: 'list-toolbar',
-    entityList: 'entity-list',
-    documentUploader: 'document-uploader',
 };
 
 function cloneProperty(property, values) {
@@ -459,685 +340,44 @@ function createSelectProperty(ctor) {
 const AXP_WIDGET_TOKEN = new InjectionToken('AXP_WIDGET_TOKEN');
 const AXP_WIDGET_COLUMN_TOKEN = new InjectionToken('AXP_WIDGET_COLUMN_TOKEN');
 
-class AXPBaseWidgetComponent extends AXPLayoutElement {
+class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
     constructor() {
         super(...arguments);
-        this.token = inject(AXP_WIDGET_TOKEN);
-        this.host = inject(ElementRef).nativeElement;
-        this.layoutService = inject(AXPLayoutBuilderService);
-        this.contextService = inject(AXPLayoutBuilderContextStore);
-        this.config = this.token.config;
-        this.node = this.token.node;
-        this.name = this.token.node.name;
-        this._options = signal(this.token.options ?? {}, ...(ngDevMode ? [{ debugName: "_options" }] : []));
-        this.options = this._options.asReadonly();
-        this.onOptionsChanged = new Subject();
-        this._status = signal(AXPWidgetStatus.Rendering, ...(ngDevMode ? [{ debugName: "_status" }] : []));
-        this.status = this._status.asReadonly();
-        this.onStatusChanged = new BehaviorSubject(this._status());
-        this.#statusEffect = effect(() => {
-            this.onStatusChanged.next(this.status());
-        }, ...(ngDevMode ? [{ debugName: "#statusEffect" }] : []));
-        this.isBusy = computed(() => [AXPWidgetStatus.Rendering, AXPWidgetStatus.Processing].includes(this.status()), ...(ngDevMode ? [{ debugName: "isBusy" }] : []));
-        this._children = signal(this.token.node.children ?? [], ...(ngDevMode ? [{ debugName: "_children" }] : []));
-        this.children = this._children.asReadonly();
+        this.widgetRegistery = inject(AXPWidgetRegistryService);
+        this.grid = inject(AXBaseDataTable);
+        this.mergedOptions = signal({}, ...(ngDevMode ? [{ debugName: "mergedOptions" }] : []));
+        this.loadingRow = signal(null, ...(ngDevMode ? [{ debugName: "loadingRow" }] : []));
+        this.injector = inject(Injector);
+        this.cdr = inject(ChangeDetectorRef);
     }
-    get id() {
-        return this._id;
+    get node() {
+        return this._node;
     }
-    #statusEffect;
-    outputs() {
-        return [];
+    set node(v) {
+        this._node = v;
     }
-    ngOnInit() {
-        if (get(this.node, '__meta__.added')) {
-            this.onAdded();
-        }
-        this.setStatus(AXPWidgetStatus.Rendered);
+    get renderFooterTemplate() {
+        return this.footerTemplate ?? this._contentFooterTemplate;
     }
-    setStatus(status) {
-        this._status.set(status);
-        this.layoutService.updateStatus();
+    get renderCellTemplate() {
+        return this.cellTemplate ?? this._contentCellTemplate;
     }
-    setOptions(values) {
-        const oldValue = this.options();
-        const value = cloneDeep(values);
-        this._options.set({ ...oldValue, ...value });
-        this.onOptionsChanged.next({ sender: this });
+    async handleExpandRow(row) {
+        this.loadingRow.set(row);
+        await this.grid.expandRow(row);
+        this.loadingRow.set(null);
+        // if (row.data?.__meta__?.expanded === undefined) {
+        //   this.width = `${parseInt(this.width as string) + 24}px`;
+        // }
     }
-    output(name) {
-        const outputs = this.outputs().map((c) => (typeof c == 'string' ? { name: c, value: c } : c));
-        if (outputs.some((c) => c.name == name)) {
-            const opt = get(this, name);
-            if (typeof opt == 'function') {
-                return opt();
-            }
-            return opt;
-        }
-        return null;
+    get renderHeaderTemplate() {
+        return this.headerTemplate ?? this._contentHeaderTemplate;
     }
-    call(name, ...args) {
-        const fn = get(this, name);
-        if (fn && typeof fn == 'function') {
-            fn.bind(this)(...args);
-        }
+    get loadingEnabled() {
+        return true;
     }
-    setChildren(children) {
-        this._children.set([...children]);
-    }
-    onAdded() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBaseWidgetComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBaseWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-class AXPLayoutBaseWidgetComponent extends AXPBaseWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBaseWidgetComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBaseWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-class AXPValueWidgetComponent extends AXPLayoutBaseWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.path = this.token.node.path;
-        this.defaultValue = this.token.defaultValue ?? this.token.node.defaultValue;
-        this._isValueWidget = false;
-        this.isValueWidget = () => this._isValueWidget;
-        this.onValueChanged = new Subject();
-        this.fullPath = signal(null, ...(ngDevMode ? [{ debugName: "fullPath" }] : []));
-        this.parentPath = signal(null, ...(ngDevMode ? [{ debugName: "parentPath" }] : []));
-        this.getValue = computed(() => {
-            return this.fullPath() ? this.extractValue(this.fullPath()) : null;
-        }, ...(ngDevMode ? [{ debugName: "getValue", equal: isEqual }] : [{ equal: isEqual }]));
-        this.validationRules = computed(() => {
-            const validationsRaw = this.options()['validations'];
-            if (validationsRaw == null) {
-                return [];
-            }
-            return Object.values(this.options()['validations'])
-                .filter((c) => c != null)
-                .map((c) => ({
-                rule: c.rule,
-                message: c.message,
-                options: c.options,
-            }));
-        }, ...(ngDevMode ? [{ debugName: "validationRules" }] : []));
-    }
-    ngOnInit() {
-        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);
-            }
-        }
-        //
-        super.ngOnInit();
-    }
-    extractValue(path) {
-        const rawValue = this.contextService.getValue(path);
-        if (this.node.valueTransforms?.getter) {
-            return this.node.valueTransforms?.getter(rawValue);
-        }
-        return rawValue;
-    }
-    setValue(value) {
-        if (this.node.valueTransforms?.setter) {
-            value = this.node.valueTransforms?.setter(value);
-        }
-        const oldValue = this.getValue();
-        value = isUndefined(value) ? null : value;
-        if (isNil(value) && isNil(oldValue)) {
-            return;
-        }
-        if (isEqual(oldValue, value)) {
-            return;
-        }
-        if (this.fullPath()) {
-            this.contextService.update(this.fullPath(), value);
-            this.onValueChanged.next({ sender: this });
-        }
-    }
-    detectFullPath() {
-        const sections = [];
-        const ids = [];
-        //
-        let parent = this;
-        //
-        while (parent) {
-            const isValueWidget = parent instanceof AXPValueWidgetComponent && parent.isValueWidget();
-            const valueParent = parent;
-            const path = valueParent.path ?? (isValueWidget ? valueParent.name : null);
-            const id = valueParent.name;
-            //
-            if (path) {
-                sections.push(path);
-            }
-            if (parent.index != null && isValueWidget) {
-                sections.push(`[${parent.index}]`);
-            }
-            if (id) {
-                ids.push(id);
-                if (parent.index != null) {
-                    ids.push(`${parent.index}`);
-                }
-            }
-            parent = parent.parent;
-        }
-        //
-        this.fullPath.set(sections.reverse().join('.'));
-        this.parentPath.set(sections.slice(0, sections.length - 1).join('.'));
-        this._id = this.name || this.parent ? ids.reverse().join('_') : null;
-        if (this._id) {
-            this.layoutService.registerWidget(this._id, this);
-        }
-    }
-    handleValueChanged(e) {
-        if (e.isUserInteraction) {
-            this.setValue(e.value);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPValueWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPValueWidgetComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPValueWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.dataService = inject(AXPDataSourceDefinitionProviderService);
-        this.textField = computed(() => this.options()['textField'] ?? 'title', ...(ngDevMode ? [{ debugName: "textField" }] : []));
-        this.valueField = computed(() => this.options()['valueField'] ?? 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
-        this.dataSource = signal(convertArrayToDataSource([]), ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
-        this.isReady = computed(() => {
-            const key = this.dataSource().config?.key;
-            const valueField = this.valueField();
-            const result = key == valueField;
-            return result;
-        }, ...(ngDevMode ? [{ debugName: "isReady" }] : []));
-        this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
-        this.rf = effect(async () => {
-            const rawValue = this.options()['dataSource'];
-            // static  datasource class
-            if (rawValue instanceof AXDataSource) {
-                this.dataSource.set(rawValue);
-            }
-            // static array datasource
-            else if (Array.isArray(rawValue)) {
-                const ds = new AXDataSource({
-                    key: this.valueField(),
-                    pageSize: 10,
-                    load: async (e) => {
-                        const raw = this.options()['dataSource'];
-                        return {
-                            items: raw,
-                            total: raw.length,
-                        };
-                    },
-                    byKey: (key) => {
-                        const raw = this.options()['dataSource'];
-                        const item = raw.filter((c) => c[this.valueField()] == key);
-                        return Promise.resolve(item[0]);
-                    },
-                });
-                this.dataSource.set(ds);
-            }
-            // resolve data source by name
-            else if (rawValue && (typeof rawValue == 'string' || typeof rawValue == 'object')) {
-                const id = typeof rawValue == 'object' ? rawValue['id'] : rawValue;
-                const c = await this.dataService.get(id);
-                if (this.mode == 'designer' && c?.samples?.length) {
-                    this.dataSource.set(convertArrayToDataSource(c.samples, {
-                        key: this.valueField(),
-                        pageSize: 500,
-                    }));
-                }
-                else {
-                    const ds = c?.source();
-                    if (ds && ds instanceof Promise) {
-                        const d = await ds;
-                        this.dataSource.set(d);
-                    }
-                    else if (ds) {
-                        this.dataSource.set(ds);
-                    }
-                    // empty datasource
-                    else {
-                        this.dataSource.set(convertArrayToDataSource([]));
-                    }
-                }
-            }
-            // empty datasource
-            else {
-                this.dataSource.set(convertArrayToDataSource([]));
-            }
-        }, ...(ngDevMode ? [{ debugName: "rf" }] : []));
-        this.effect2 = effect(async () => {
-            const value = this.getValue();
-            const items = [];
-            if (Array.isArray(value)) {
-                items.push(...(await Promise.all(value.map((item) => this.extractItem(item)))));
-            }
-            else {
-                items.push(await this.extractItem(value));
-            }
-            this.selectedItems.set(items.filter((c) => c != null));
-        }, ...(ngDevMode ? [{ debugName: "effect2" }] : []));
-    }
-    async extractItem(item) {
-        if (isNil(item)) {
-            return null;
-        }
-        if (isObjectLike(item) && get(item, this.textField()) != null) {
-            return item;
-        }
-        const key = extractValue(item, this.valueField());
-        const ds = this.dataSource();
-        if (ds.config?.byKey) {
-            const found = await ds.config?.byKey(key);
-            if (found) {
-                return found;
-            }
-        }
-        return isObjectLike(item)
-            ? item
-            : {
-                [this.valueField()]: item,
-                [this.textField()]: item,
-            };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDataListWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDataListWidgetComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDataListWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-class AXPColumnWidgetComponent {
-    constructor() {
-        this.token = inject(AXP_WIDGET_COLUMN_TOKEN);
-        this.path = this.token.path;
-        this.options = this.token.options ?? {};
-        this.rawValue = null;
-        this.nullText = this.options['nullText'];
-        this.nullValue = this.options['nullValue'];
-        this.value = computed(() => {
-            if (isNil(this.rawValue) && !isNil(this.nullValue)) {
-                return this.nullValue;
-            }
-            return this.rawValue;
-        }, ...(ngDevMode ? [{ debugName: "value" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPColumnWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPColumnWidgetComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPColumnWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-
-class AXPBoxModelLayoutWidgetComponent extends AXPLayoutBaseWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.hostBoxStyle = computed(() => {
-            const options = this.options();
-            const style = {};
-            const spacing = options?.['spacing'];
-            const border = options?.['border'];
-            const backgroundColor = options?.['backgroundColor'];
-            const direction = options?.['direction'];
-            const overflow = options?.['overflow'];
-            const overflowX = options?.['overflowX'];
-            const overflowY = options?.['overflowY'];
-            style['background-color'] = backgroundColor ?? '';
-            style['padding'] = spacing?.padding ?? '';
-            style['margin'] = spacing?.margin ?? '';
-            style['border-radius'] = border?.radius ?? '';
-            style['border-width'] = border?.width ?? '';
-            style['border-color'] = border?.color ?? '';
-            style['border-style'] = border?.style ?? '';
-            style['overflow'] = overflow ?? '';
-            style['overflow-x'] = overflowX ?? '';
-            style['overflow-y'] = overflowY ?? '';
-            style['direction'] = direction ?? '';
-            return style;
-        }, ...(ngDevMode ? [{ debugName: "hostBoxStyle" }] : []));
-        this.blockStyle = computed(() => {
-            const options = this.options();
-            const style = { ...this.hostBoxStyle() };
-            const width = options?.['width'];
-            const minWidth = options?.['minWidth'];
-            const maxWidth = options?.['maxWidth'];
-            const height = options?.['height'];
-            const minHeight = options?.['minHeight'];
-            const maxHeight = options?.['maxHeight'];
-            style['min-width'] = minWidth ?? '';
-            style['width'] = width ?? '';
-            style['max-width'] = maxWidth ?? '';
-            style['min-height'] = minHeight ?? '';
-            style['height'] = height ?? '';
-            style['max-height'] = maxHeight ?? '';
-            return style;
-        }, ...(ngDevMode ? [{ debugName: "blockStyle" }] : []));
-        this.inlineStyle = computed(() => {
-            return { ...this.hostBoxStyle() };
-        }, ...(ngDevMode ? [{ debugName: "inlineStyle" }] : []));
-        this.blockClass = computed(() => {
-            return {
-                'ax-block': true,
-                'ax-w-full': true,
-                'ax-widget-outline': true,
-            };
-        }, ...(ngDevMode ? [{ debugName: "blockClass" }] : []));
-        this.inlineClass = computed(() => {
-            return {
-                'ax-inline-block': true,
-            };
-        }, ...(ngDevMode ? [{ debugName: "inlineClass" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-
-class AXPBlockBaseLayoutWidgetComponent extends AXPBoxModelLayoutWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.hostClass = computed(() => this.blockClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
-        this.hostStyle = computed(() => this.blockStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-
-class AXPFlexBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.flex = computed(() => this.options(), ...(ngDevMode ? [{ debugName: "flex" }] : []));
-        this.hostFlexStyle = computed(() => {
-            const blockStyle = this.blockStyle();
-            const style = { ...blockStyle };
-            const flex = this.flex();
-            if (isNil(flex?.flexDirection)) {
-                style['flex-direction'] = '';
-            }
-            else {
-                style['flex-direction'] = flex.flexDirection;
-            }
-            if (isNil(flex?.flexWrap)) {
-                style['flex-wrap'] = '';
-            }
-            else {
-                style['flex-wrap'] = flex.flexWrap;
-            }
-            //TODO NEED TO FIX LATER
-            style['overflow'] = flex?.flexWrap === 'nowrap' ? 'auto' : '';
-            //END
-            if (isNil(flex?.justifyContent)) {
-                style['justify-content'] = '';
-            }
-            else {
-                style['justify-content'] = flex.justifyContent;
-            }
-            if (isNil(flex?.alignItems)) {
-                style['align-items'] = '';
-            }
-            else {
-                style['align-items'] = flex.alignItems;
-            }
-            if (isNil(flex?.gap)) {
-                style['gap'] = '';
-            }
-            else {
-                style['gap'] = flex.gap;
-            }
-            return style;
-        }, ...(ngDevMode ? [{ debugName: "hostFlexStyle" }] : []));
-        this.hostFlexClass = computed(() => {
-            return {
-                ...this.blockClass(),
-                'ax-flex': true,
-            };
-        }, ...(ngDevMode ? [{ debugName: "hostFlexClass" }] : []));
-        this.hostClass = computed(() => {
-            return this.hostFlexClass();
-        }, ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
-        this.hostStyle = computed(() => {
-            return this.hostFlexStyle();
-        }, ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-
-class AXPInlineBaseLayoutWidgetComponent extends AXPBoxModelLayoutWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.hostClass = computed(() => this.inlineClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
-        this.hostStyle = computed(() => this.inlineStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-
-class AXPFlexItemBaseLayoutWidgetComponent extends AXPInlineBaseLayoutWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.flexItem = computed(() => this.options(), ...(ngDevMode ? [{ debugName: "flexItem" }] : []));
-        this.hostFlexItemStyle = computed(() => {
-            const inlineStyle = this.blockStyle();
-            const style = { ...inlineStyle };
-            const fi = this.flexItem();
-            if (isNil(fi?.order)) {
-                style['order'] = '';
-            }
-            else {
-                style['order'] = fi.order;
-            }
-            if (isNil(fi?.grow)) {
-                style['flex-grow'] = '';
-            }
-            else {
-                style['flex-grow'] = fi.grow;
-            }
-            if (isNil(fi?.shrink)) {
-                style['flex-shrink'] = '';
-            }
-            else {
-                style['flex-shrink'] = fi.shrink;
-            }
-            if (isNil(fi?.basis)) {
-                style['flex-basis'] = '';
-            }
-            else {
-                style['flex-basis'] = fi.basis;
-            }
-            if (isNil(fi?.alignSelf)) {
-                style['align-self'] = '';
-            }
-            else {
-                style['align-self'] = fi.alignSelf;
-            }
-            return style;
-        }, ...(ngDevMode ? [{ debugName: "hostFlexItemStyle" }] : []));
-        this.hostFlexItemClass = computed(() => {
-            return {
-                ...this.blockClass(),
-            };
-        }, ...(ngDevMode ? [{ debugName: "hostFlexItemClass" }] : []));
-        this.hostClass = computed(() => {
-            return this.hostFlexItemClass();
-        }, ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
-        this.hostStyle = computed(() => {
-            return this.hostFlexItemStyle();
-        }, ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-
-class AXPGridBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.grid = computed(() => this.options()?.grid, ...(ngDevMode ? [{ debugName: "grid" }] : []));
-        this.hostGridStyle = computed(() => {
-            const style = { ...this.inlineStyle() };
-            const g = this.grid()?.default;
-            if (g?.gap)
-                style['gap'] = g.gap;
-            return style;
-        }, ...(ngDevMode ? [{ debugName: "hostGridStyle" }] : []));
-        this.hostGridClass = computed(() => {
-            const cls = {
-                ...this.inlineClass(),
-                'ax-grid': true,
-            };
-            const g = this.grid()?.default;
-            if (g?.columns)
-                cls[`lg:ax-grid-cols-${g.columns}`] = true;
-            if (g?.rows)
-                cls[`lg:ax-grid-rows-${g.rows}`] = true;
-            if (g?.justifyItems)
-                cls[`lg:ax-justify-items-${g.justifyItems}`] = true;
-            if (g?.alignItems)
-                cls[`lg:ax-align-items-${g.alignItems}`] = true;
-            if (g?.autoFlow)
-                cls[`lg:ax-grid-flow-${g.autoFlow}`] = true;
-            return cls;
-        }, ...(ngDevMode ? [{ debugName: "hostGridClass" }] : []));
-        this.hostClass = computed(() => this.hostGridClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
-        this.hostStyle = computed(() => this.hostGridStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-
-class AXPGridItemBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.gridItem = computed(() => this.options(), ...(ngDevMode ? [{ debugName: "gridItem" }] : []));
-        this.hostGridItemStyle = computed(() => ({ ...this.inlineStyle() }), ...(ngDevMode ? [{ debugName: "hostGridItemStyle" }] : []));
-        this.hostGridItemClass = computed(() => {
-            const cls = { ...this.inlineClass() };
-            const g = this.gridItem();
-            if (g?.colSpan)
-                cls[`lg:ax-col-span-${g.colSpan}`] = true;
-            if (g?.colStart)
-                cls[`lg:ax-col-start-${g.colStart}`] = true;
-            if (g?.colEnd)
-                cls[`lg:ax-col-end-${g.colEnd}`] = true;
-            if (g?.rowSpan)
-                cls[`lg:ax-row-span-${g.rowSpan}`] = true;
-            if (g?.rowStart)
-                cls[`lg:ax-row-start-${g.rowStart}`] = true;
-            if (g?.rowEnd)
-                cls[`lg:ax-row-end-${g.rowEnd}`] = true;
-            return cls;
-        }, ...(ngDevMode ? [{ debugName: "hostGridItemClass" }] : []));
-        this.hostClass = computed(() => this.hostGridItemClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
-        this.hostStyle = computed(() => this.hostGridItemStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-
-class AXPWidgetRegistryService {
-    /**
-     *
-     */
-    constructor() {
-        this.types = new Map();
-        AXPWidgetRegistryService.instance = this;
-    }
-    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: "20.1.6", ngImport: i0, type: AXPWidgetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetRegistryService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetRegistryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
-    constructor() {
-        super(...arguments);
-        this.widgetRegistery = inject(AXPWidgetRegistryService);
-        this.grid = inject(AXBaseDataTable);
-        this.mergedOptions = signal({}, ...(ngDevMode ? [{ debugName: "mergedOptions" }] : []));
-        this.loadingRow = signal(null, ...(ngDevMode ? [{ debugName: "loadingRow" }] : []));
-        this.injector = inject(Injector);
-        this.cdr = inject(ChangeDetectorRef);
-    }
-    get node() {
-        return this._node;
-    }
-    set node(v) {
-        this._node = v;
-    }
-    get renderFooterTemplate() {
-        return this.footerTemplate ?? this._contentFooterTemplate;
-    }
-    get renderCellTemplate() {
-        return this.cellTemplate ?? this._contentCellTemplate;
-    }
-    async handleExpandRow(row) {
-        this.loadingRow.set(row);
-        await this.grid.expandRow(row);
-        this.loadingRow.set(null);
-        // if (row.data?.__meta__?.expanded === undefined) {
-        //   this.width = `${parseInt(this.width as string) + 24}px`;
-        // }
-    }
-    get renderHeaderTemplate() {
-        return this.headerTemplate ?? this._contentHeaderTemplate;
-    }
-    get loadingEnabled() {
-        return true;
-    }
-    get name() {
-        return `col-${this.node.path}`;
+    get name() {
+        return `col-${this.node.path}`;
     }
     async ngOnInit() {
         const widget = this.widgetRegistery.resolve(this.node.type);
@@ -1165,124 +405,230 @@ 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPWidgetColumnRendererComponent, isStandalone: false, selector: "axp-widget-column-renderer", inputs: { caption: "caption", customExpandIcon: "customExpandIcon", customCollapseIcon: "customCollapseIcon", customWidth: "customWidth", node: "node", footerTemplate: "footerTemplate", expandHandler: "expandHandler", cellTemplate: "cellTemplate", headerTemplate: "headerTemplate" }, providers: [
+            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 #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>
+    </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 }); }
+}
+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 #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>
+    </ng-template>
+    <ng-template #footer></ng-template>
+  `,
+                    providers: [
+                        AXPLayoutBuilderService,
+                        { provide: AXDataTableColumnComponent, useExisting: AXPWidgetColumnRendererComponent },
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    inputs: ['caption'],
+                    standalone: false,
+                }]
+        }], propDecorators: { customExpandIcon: [{
+                type: Input
+            }], customCollapseIcon: [{
+                type: Input
+            }], customWidth: [{
+                type: Input
+            }], node: [{
+                type: Input,
+                args: [{ required: true }]
+            }], footerTemplate: [{
+                type: Input
+            }], _contentFooterTemplate: [{
+                type: ViewChild,
+                args: ['footer']
+            }], expandHandler: [{
+                type: Input
+            }], cellTemplate: [{
+                type: Input
+            }], _contentCellTemplate: [{
+                type: ViewChild,
+                args: ['cell']
+            }], headerTemplate: [{
+                type: Input
+            }], _contentHeaderTemplate: [{
+                type: ViewChild,
+                args: ['header']
+            }] } });
+
+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),
+    isDirty: computed(() => !isEqual(data(), previousSnapshot())),
+    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 = setSmart(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,
+        });
+    },
+    patch(context) {
+        const currentData = cloneDeep(store.data());
+        // Update the value and prepare the change event
+        const updatedData = { ...currentData, ...context };
+        const changeEvent = {
+            state: 'patch',
+            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,
         };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPWidgetColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXPWidgetColumnRendererComponent, isStandalone: false, selector: "axp-widget-column-renderer", inputs: { caption: "caption", customExpandIcon: "customExpandIcon", customCollapseIcon: "customCollapseIcon", customWidth: "customWidth", node: "node", footerTemplate: "footerTemplate", expandHandler: "expandHandler", cellTemplate: "cellTemplate", headerTemplate: "headerTemplate" }, providers: [
-            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 | 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>
-    </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"] }, { 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 | 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>
+        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
         }
-      </div>
-    </ng-template>
-    <ng-template #footer></ng-template>
-  `,
-                    providers: [
-                        AXPLayoutBuilderService,
-                        { provide: AXDataTableColumnComponent, useExisting: AXPWidgetColumnRendererComponent },
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    inputs: ['caption'],
-                    standalone: false,
-                }]
-        }], propDecorators: { customExpandIcon: [{
-                type: Input
-            }], customCollapseIcon: [{
-                type: Input
-            }], customWidth: [{
-                type: Input
-            }], node: [{
-                type: Input,
-                args: [{ required: true }]
-            }], footerTemplate: [{
-                type: Input
-            }], _contentFooterTemplate: [{
-                type: ViewChild,
-                args: ['footer']
-            }], expandHandler: [{
-                type: Input
-            }], cellTemplate: [{
-                type: Input
-            }], _contentCellTemplate: [{
-                type: ViewChild,
-                args: ['cell']
-            }], headerTemplate: [{
-                type: Input
-            }], _contentHeaderTemplate: [{
-                type: ViewChild,
-                args: ['header']
-            }] } });
+        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);
+    },
+})));
 
 class AXPWidgetContainerComponent {
     set context(value) {
@@ -1307,12 +653,6 @@ 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 }); }
 }
@@ -1446,10 +786,8 @@ 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) {
@@ -1555,7 +893,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.
@@ -1856,240 +1194,372 @@ class AXPLayoutBuilderModule {
             f();
         });
     }
-    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, 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, AXTranslationModule],
-                    exports: [...COMPONENTS],
-                    declarations: [...COMPONENTS],
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: ['AXPLayoutBuilderModuleFactory']
-                }] }] });
-
-class AXPPropertyEditorHelper {
-    static expandShorthand(values) {
-        switch (values.length) {
-            case 1:
-                return [values[0], values[0], values[0], values[0]];
-            case 2:
-                return [values[0], values[1], values[0], values[1]];
-            case 3:
-                return [values[0], values[1], values[2], values[1]];
-            case 4:
-                return values;
-            default:
-                throw new Error(`Invalid shorthand value count. Input: ${values}`);
+    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] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutBuilderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule],
+                    exports: [...COMPONENTS],
+                    declarations: [...COMPONENTS],
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: ['AXPLayoutBuilderModuleFactory']
+                }] }] });
+
+const AXP_WIDGETS_LAYOUT_CATEGORY = {
+    name: 'layout',
+    order: 1,
+    title: 'Layout',
+};
+const AXP_WIDGETS_EDITOR_CATEGORY = {
+    name: 'editor',
+    order: 2,
+    title: 'Editors',
+};
+const AXP_WIDGETS_ACTION_CATEGORY = {
+    name: 'action',
+    order: 3,
+    title: 'Action',
+};
+const AXP_WIDGETS_ADVANCE_CATEGORY = {
+    name: 'advance',
+    order: 4,
+    title: 'Advance',
+};
+const AXP_WIDGETS_CATEGORIES = [
+    AXP_WIDGETS_LAYOUT_CATEGORY,
+    AXP_WIDGETS_EDITOR_CATEGORY,
+    AXP_WIDGETS_ACTION_CATEGORY,
+    AXP_WIDGETS_ADVANCE_CATEGORY,
+];
+
+var AXPWidgetGroupEnum;
+(function (AXPWidgetGroupEnum) {
+    AXPWidgetGroupEnum["FormElement"] = "form-element";
+    AXPWidgetGroupEnum["DashboardWidget"] = "dashboard-widget";
+    AXPWidgetGroupEnum["FormTemplate"] = "form-template";
+    AXPWidgetGroupEnum["PropertyEditor"] = "property-editor";
+    AXPWidgetGroupEnum["MetaData"] = "meta-data";
+    AXPWidgetGroupEnum["SettingWidget"] = "setting-widget";
+    AXPWidgetGroupEnum["EntityWidget"] = "entity-widget";
+})(AXPWidgetGroupEnum || (AXPWidgetGroupEnum = {}));
+
+class AXPBaseWidgetComponent extends AXPLayoutElement {
+    constructor() {
+        super(...arguments);
+        this.token = inject(AXP_WIDGET_TOKEN);
+        this.host = inject(ElementRef).nativeElement;
+        this.layoutService = inject(AXPLayoutBuilderService);
+        this.contextService = inject(AXPLayoutBuilderContextStore);
+        this.config = this.token.config;
+        this.node = this.token.node;
+        this.name = this.token.node.name;
+        this._options = signal(this.token.options ?? {}, ...(ngDevMode ? [{ debugName: "_options" }] : []));
+        this.options = this._options.asReadonly();
+        this.onOptionsChanged = new Subject();
+        this._status = signal(AXPWidgetStatus.Rendering, ...(ngDevMode ? [{ debugName: "_status" }] : []));
+        this.status = this._status.asReadonly();
+        this.onStatusChanged = new BehaviorSubject(this._status());
+        this.#statusEffect = effect(() => {
+            this.onStatusChanged.next(this.status());
+        }, ...(ngDevMode ? [{ debugName: "#statusEffect" }] : []));
+        this.isBusy = computed(() => [AXPWidgetStatus.Rendering, AXPWidgetStatus.Processing].includes(this.status()), ...(ngDevMode ? [{ debugName: "isBusy" }] : []));
+        this._children = signal(this.token.node.children ?? [], ...(ngDevMode ? [{ debugName: "_children" }] : []));
+        this.children = this._children.asReadonly();
+    }
+    get id() {
+        return this._id;
+    }
+    #statusEffect;
+    outputs() {
+        return [];
+    }
+    ngOnInit() {
+        if (get(this.node, '__meta__.added')) {
+            this.onAdded();
+        }
+        this.setStatus(AXPWidgetStatus.Rendered);
+    }
+    setStatus(status) {
+        this._status.set(status);
+        this.layoutService.updateStatus();
+    }
+    setOptions(values) {
+        this._options.set({ ...this.options(), ...values });
+        this.onOptionsChanged.next({ sender: this });
+    }
+    output(name) {
+        const outputs = this.outputs().map((c) => (typeof c == 'string' ? { name: c, value: c } : c));
+        if (outputs.some((c) => c.name == name)) {
+            const opt = get(this, name);
+            if (typeof opt == 'function') {
+                return opt();
+            }
+            return opt;
+        }
+        return null;
+    }
+    call(name, ...args) {
+        const fn = get(this, name);
+        if (fn && typeof fn == 'function') {
+            fn.bind(this)(...args);
+        }
+    }
+    setChildren(children) {
+        this._children.set([...children]);
+    }
+    onAdded() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBaseWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPBaseWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXPLayoutWidgetComponent extends AXPBaseWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPLayoutWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXPValueWidgetComponent extends AXPLayoutWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.path = this.token.node.path;
+        this.defaultValue = this.token.defaultValue ?? this.token.node.defaultValue;
+        this._isValueWidget = false;
+        this.isValueWidget = () => this._isValueWidget;
+        this.onValueChanged = new Subject();
+        this.fullPath = signal(null, ...(ngDevMode ? [{ debugName: "fullPath" }] : []));
+        this.parentPath = signal(null, ...(ngDevMode ? [{ debugName: "parentPath" }] : []));
+        this.getValue = computed(() => {
+            return this.fullPath() ? this.extractValue(this.fullPath()) : null;
+        }, ...(ngDevMode ? [{ debugName: "getValue", equal: isEqual }] : [{ equal: isEqual }]));
+        this.validationRules = computed(() => {
+            const validationsRaw = this.options()['validations'];
+            if (validationsRaw == null) {
+                return [];
+            }
+            return Object.values(this.options()['validations'])
+                .filter((c) => c != null)
+                .map((c) => ({
+                rule: c.rule,
+                message: c.message,
+                options: c.options,
+            }));
+        }, ...(ngDevMode ? [{ debugName: "validationRules" }] : []));
+    }
+    ngOnInit() {
+        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);
+            }
         }
+        //
+        super.ngOnInit();
     }
-    static condenseShorthand(values) {
-        if (values.length !== 4) {
-            throw new Error('Expected 4 values for condensation.');
+    extractValue(path) {
+        const rawValue = this.contextService.getValue(path);
+        if (this.node.valueTransforms?.getter) {
+            return this.node.valueTransforms?.getter(rawValue);
         }
-        if (values[0] === values[1] && values[1] === values[2] && values[2] === values[3]) {
-            return `${values[0]}`;
+        return rawValue;
+    }
+    setValue(value) {
+        if (this.node.valueTransforms?.setter) {
+            value = this.node.valueTransforms?.setter(value);
         }
-        else if (values[0] === values[2] && values[1] === values[3]) {
-            return `${values[0]} ${values[1]}`;
+        const oldValue = this.getValue();
+        value = isUndefined(value) ? null : value;
+        if (isNil(value) && isNil(oldValue)) {
+            return;
         }
-        else if (values[1] === values[3]) {
-            return `${values[0]} ${values[1]} ${values[2]}`;
+        if (isEqual(oldValue, value)) {
+            return;
         }
-        else {
-            return `${values[0]} ${values[1]} ${values[2]} ${values[3]}`;
+        if (this.fullPath()) {
+            this.contextService.update(this.fullPath(), value);
+            this.onValueChanged.next({ sender: this });
         }
     }
-    static parseSides(input) {
-        const values = this.expandShorthand(input.match(/(?:rgb\([^)]+\)|[^ ]+)/g)?.map((value) => value.trim()) || []);
-        return { top: values[0], right: values[1], bottom: values[2], left: values[3] };
-    }
-    static parseSidesWithUnits(input) {
-        const values = this.expandShorthand(input.match(/(?:rgb\([^)]+\)|[^ ]+)/g)?.map((value) => value.trim()) || []);
-        return {
-            top: AXPPropertyEditorHelper.getValueWithUnit(values[0]).value,
-            right: AXPPropertyEditorHelper.getValueWithUnit(values[1]).value,
-            bottom: AXPPropertyEditorHelper.getValueWithUnit(values[2]).value,
-            left: AXPPropertyEditorHelper.getValueWithUnit(values[3]).value,
-        };
-    }
-    static parseCorners(input) {
-        const values = this.expandShorthand(input.split(' ').map((value) => value.trim()));
-        return {
-            'top-left': AXPPropertyEditorHelper.getValueWithUnit(values[0]).value,
-            'top-right': AXPPropertyEditorHelper.getValueWithUnit(values[1]).value,
-            'bottom-left': AXPPropertyEditorHelper.getValueWithUnit(values[2]).value,
-            'bottom-right': AXPPropertyEditorHelper.getValueWithUnit(values[3]).value,
-        };
-    }
-    static parseSpacingBox(input) {
-        return {
-            margin: this.parseSidesWithUnits(input.margin),
-            padding: this.parseSidesWithUnits(input.padding),
-        };
-    }
-    static parseBorderBox(input) {
-        return {
-            width: this.parseSidesWithUnits(input.width),
-            radius: this.parseCorners(input.radius),
-            color: this.parseSides(input.color),
-            style: this.parseSides(input.style),
-        };
+    detectFullPath() {
+        const sections = [];
+        const ids = [];
+        //
+        let parent = this;
+        //
+        while (parent) {
+            const isValueWidget = parent instanceof AXPValueWidgetComponent && parent.isValueWidget();
+            const valueParent = parent;
+            const path = valueParent.path ?? (isValueWidget ? valueParent.name : null);
+            const id = valueParent.name;
+            //
+            if (path) {
+                sections.push(path);
+            }
+            if (parent.index != null && isValueWidget) {
+                sections.push(`[${parent.index}]`);
+            }
+            if (id) {
+                ids.push(id);
+                if (parent.index != null) {
+                    ids.push(`${parent.index}`);
+                }
+            }
+            parent = parent.parent;
+        }
+        //
+        this.fullPath.set(sections.reverse().join('.'));
+        this.parentPath.set(sections.slice(0, sections.length - 1).join('.'));
+        this._id = this.name || this.parent ? ids.reverse().join('_') : null;
+        if (this._id) {
+            this.layoutService.registerWidget(this._id, this);
+        }
     }
-    static parseSpacingBoxReverse(input, units) {
-        const format = (value, unit) => `${value}${unit}`;
-        return {
-            margin: AXPPropertyEditorHelper.condenseShorthand([
-                format(input.margin.top, units.margin.top),
-                format(input.margin.right, units.margin.right),
-                format(input.margin.bottom, units.margin.bottom),
-                format(input.margin.left, units.margin.left),
-            ]),
-            padding: AXPPropertyEditorHelper.condenseShorthand([
-                format(input.padding.top, units.padding.top),
-                format(input.padding.right, units.padding.right),
-                format(input.padding.bottom, units.padding.bottom),
-                format(input.padding.left, units.padding.left),
-            ]),
-        };
+    handleValueChanged(e) {
+        if (e.isUserInteraction) {
+            this.setValue(e.value);
+        }
     }
-    static parseBorderBoxReverse(input, units) {
-        const format = (value, unit) => `${value}${unit}`;
-        return {
-            width: AXPPropertyEditorHelper.condenseShorthand([
-                format(input.width.top, units.width.top),
-                format(input.width.right, units.width.right),
-                format(input.width.bottom, units.width.bottom),
-                format(input.width.left, units.width.left),
-            ]),
-            radius: AXPPropertyEditorHelper.condenseShorthand([
-                format(input.radius['top-left'], units.radius['top-left']),
-                format(input.radius['top-right'], units.radius['top-right']),
-                format(input.radius['bottom-right'], units.radius['bottom-right']),
-                format(input.radius['bottom-left'], units.radius['bottom-left']),
-            ]),
-            color: AXPPropertyEditorHelper.condenseShorthand([
-                `${input.color.top}${units.color.top}`,
-                `${input.color.right}${units.color.right}`,
-                `${input.color.bottom}${units.color.bottom}`,
-                `${input.color.left}${units.color.left}`,
-            ]),
-            style: AXPPropertyEditorHelper.condenseShorthand([
-                `${input.style.top}${units.style.top}`,
-                `${input.style.right}${units.style.right}`,
-                `${input.style.bottom}${units.style.bottom}`,
-                `${input.style.left}${units.style.left}`,
-            ]),
-        };
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPValueWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPValueWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPValueWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.dataService = inject(AXPDataSourceDefinitionProviderService);
+        this.textField = computed(() => this.options()['textField'] ?? 'title', ...(ngDevMode ? [{ debugName: "textField" }] : []));
+        this.valueField = computed(() => this.options()['valueField'] ?? 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
+        this.dataSource = signal(convertArrayToDataSource([]), ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+        this.isReady = computed(() => {
+            const key = this.dataSource().config?.key;
+            const valueField = this.valueField();
+            const result = key == valueField;
+            return result;
+        }, ...(ngDevMode ? [{ debugName: "isReady" }] : []));
+        this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+        this.rf = effect(async () => {
+            const rawValue = this.options()['dataSource'];
+            // static  datasource class
+            if (rawValue instanceof AXDataSource) {
+                this.dataSource.set(rawValue);
+            }
+            // static array datasource
+            else if (Array.isArray(rawValue)) {
+                const ds = new AXDataSource({
+                    key: this.valueField(),
+                    pageSize: 10,
+                    load: async (e) => {
+                        const raw = this.options()['dataSource'];
+                        return {
+                            items: raw,
+                            total: raw.length,
+                        };
+                    },
+                    byKey: (key) => {
+                        const raw = this.options()['dataSource'];
+                        const item = raw.filter((c) => c[this.valueField()] == key);
+                        return Promise.resolve(item[0]);
+                    },
+                });
+                this.dataSource.set(ds);
+            }
+            // resolve data source by name
+            else if (rawValue && (typeof rawValue == 'string' || typeof rawValue == 'object')) {
+                const id = typeof rawValue == 'object' ? rawValue['id'] : rawValue;
+                const c = await this.dataService.get(id);
+                if (this.mode == 'designer' && c?.samples?.length) {
+                    this.dataSource.set(convertArrayToDataSource(c.samples, {
+                        key: this.valueField(),
+                        pageSize: 500,
+                    }));
+                }
+                else {
+                    const ds = c?.source();
+                    if (ds && ds instanceof Promise) {
+                        const d = await ds;
+                        this.dataSource.set(d);
+                    }
+                    else if (ds) {
+                        this.dataSource.set(ds);
+                    }
+                    // empty datasource
+                    else {
+                        this.dataSource.set(convertArrayToDataSource([]));
+                    }
+                }
+            }
+            // empty datasource
+            else {
+                this.dataSource.set(convertArrayToDataSource([]));
+            }
+        }, ...(ngDevMode ? [{ debugName: "rf" }] : []));
+        this.effect2 = effect(async () => {
+            const value = this.getValue();
+            const items = [];
+            if (Array.isArray(value)) {
+                items.push(...await Promise.all(value.map((item) => this.extractItem(item))));
+            }
+            else {
+                items.push(await this.extractItem(value));
+            }
+            this.selectedItems.set(items.filter((c) => c != null));
+        }, ...(ngDevMode ? [{ debugName: "effect2" }] : []));
     }
-    static getValueWithUnit(input) {
-        if (typeof input === 'number')
-            return { value: input, unit: 'px' };
-        if (input === 'auto')
-            return { value: 0, unit: 'px' };
-        const match = input.match(/^([0-9.]+)([a-z%]*)$/i);
-        if (!match)
-            throw new Error(`Invalid unit format: ${input}`);
-        return { value: parseFloat(match[1]), unit: match[2] || '' };
-    }
-    static getValueFromUnit(value, unit) {
-        return unit ? `${value}${unit}` : `${value}`;
-    }
-    static parseGap(gap) {
-        const parts = gap.split(/\s+/);
-        const match = parts[0].match(/^(\d+\.?\d*)([a-z%]+)$/);
-        if (!match) {
-            throw new Error('Invalid gap format');
+    async extractItem(item) {
+        if (isNil(item)) {
+            return null;
+        }
+        if (isObjectLike(item) && get(item, this.textField()) != null) {
+            return item;
         }
-        const [, xValue, unit] = match;
-        let yValue = parseFloat(xValue);
-        if (parts.length === 2) {
-            const secondMatch = parts[1].match(/^(\d+\.?\d*)[a-z%]+$/);
-            if (!secondMatch) {
-                throw new Error('Invalid gap format');
+        const key = extractValue(item, this.valueField());
+        const ds = this.dataSource();
+        if (ds.config?.byKey) {
+            const found = await ds.config?.byKey(key);
+            if (found) {
+                return found;
             }
-            yValue = parseFloat(secondMatch[1]);
         }
-        return {
-            values: {
-                x: parseFloat(xValue),
-                y: yValue,
-            },
-            unit,
+        return isObjectLike(item) ? item : {
+            [this.valueField()]: item,
+            [this.textField()]: item,
         };
     }
-    static parseGridTemplate(gridTemplate) {
-        const match = gridTemplate.match(/^repeat\((\d+),\s*(?:1fr|auto|minmax\([^)]*\))\)$/);
-        if (!match) {
-            throw new Error("Invalid grid template format. Expected 'repeat(N, 1fr|auto|minmax(...))'.");
-        }
-        return parseInt(match[1], 10);
-    }
-    static createGridTemplate(repetitionCount) {
-        if (repetitionCount <= 0) {
-            throw new Error('Repetition count must be a positive integer.');
-        }
-        return `repeat(${repetitionCount}, 1fr)`;
-    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDataListWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDataListWidgetComponent }); }
 }
-function findNonEmptyBreakpoints(values) {
-    const breakpoints = ['default', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
-    const nonEmptyBreakpoints = [];
-    for (const breakpoint of breakpoints) {
-        if (values[breakpoint] !== undefined) {
-            nonEmptyBreakpoints.push(breakpoint);
-        }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPDataListWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXPColumnWidgetComponent {
+    constructor() {
+        this.token = inject(AXP_WIDGET_COLUMN_TOKEN);
+        this.path = this.token.path;
+        this.options = this.token.options ?? {};
+        this.rawValue = null;
     }
-    return nonEmptyBreakpoints;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPColumnWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPColumnWidgetComponent }); }
 }
-
-const AXP_WIDGETS_LAYOUT_CATEGORY = {
-    name: 'layout',
-    order: 1,
-    title: 'Layout',
-};
-const AXP_WIDGETS_EDITOR_CATEGORY = {
-    name: 'editor',
-    order: 2,
-    title: 'Editors',
-};
-const AXP_WIDGETS_ACTION_CATEGORY = {
-    name: 'action',
-    order: 3,
-    title: 'Action',
-};
-const AXP_WIDGETS_ADVANCE_CATEGORY = {
-    name: 'advance',
-    order: 4,
-    title: 'Advance',
-};
-const AXP_WIDGETS_CATEGORIES = [
-    AXP_WIDGETS_LAYOUT_CATEGORY,
-    AXP_WIDGETS_EDITOR_CATEGORY,
-    AXP_WIDGETS_ACTION_CATEGORY,
-    AXP_WIDGETS_ADVANCE_CATEGORY,
-];
-
-var AXPWidgetGroupEnum;
-(function (AXPWidgetGroupEnum) {
-    AXPWidgetGroupEnum["FormElement"] = "form-element";
-    AXPWidgetGroupEnum["DashboardWidget"] = "dashboard-widget";
-    AXPWidgetGroupEnum["FormTemplate"] = "form-template";
-    AXPWidgetGroupEnum["PropertyEditor"] = "property-editor";
-    AXPWidgetGroupEnum["MetaData"] = "meta-data";
-    AXPWidgetGroupEnum["SettingWidget"] = "setting-widget";
-    AXPWidgetGroupEnum["EntityWidget"] = "entity-widget";
-})(AXPWidgetGroupEnum || (AXPWidgetGroupEnum = {}));
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXPColumnWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXPBaseWidgetComponent, AXPBlockBaseLayoutWidgetComponent, AXPBoxModelLayoutWidgetComponent, AXPColumnWidgetComponent, AXPDataListWidgetComponent, AXPFlexBaseLayoutWidgetComponent, AXPFlexItemBaseLayoutWidgetComponent, AXPGridBaseLayoutWidgetComponent, AXPGridItemBaseLayoutWidgetComponent, AXPInlineBaseLayoutWidgetComponent, AXPLayoutBaseWidgetComponent, AXPLayoutBuilderContextStore, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPLayoutContextChangeEvent, AXPLayoutElement, AXPPageStatus, AXPPropertyEditorHelper, AXPValueWidgetComponent, AXPWidgetColumnRendererComponent, AXPWidgetContainerComponent, AXPWidgetGroupEnum, AXPWidgetRegistryService, AXPWidgetRendererDirective, AXPWidgetStatus, AXPWidgetsCatalog, AXP_WIDGETS_ACTION_CATEGORY, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_CATEGORIES, AXP_WIDGETS_EDITOR_CATEGORY, AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGET_COLUMN_TOKEN, AXP_WIDGET_TOKEN, cloneProperty, createBooleanProperty, createNumberProperty, createSelectProperty, createStringProperty, findNonEmptyBreakpoints };
+export { AXPBaseWidgetComponent, AXPColumnWidgetComponent, AXPDataListWidgetComponent, AXPLayoutBuilderContextStore, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPLayoutContextChangeEvent, AXPLayoutElement, AXPLayoutWidgetComponent, AXPPageStatus, AXPValueWidgetComponent, AXPWidgetColumnRendererComponent, AXPWidgetContainerComponent, AXPWidgetGroupEnum, AXPWidgetRegistryService, AXPWidgetRendererDirective, AXPWidgetStatus, AXPWidgetsCatalog, AXP_WIDGETS_ACTION_CATEGORY, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_CATEGORIES, AXP_WIDGETS_EDITOR_CATEGORY, AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGET_COLUMN_TOKEN, AXP_WIDGET_TOKEN, cloneProperty, createBooleanProperty, createNumberProperty, createSelectProperty, createStringProperty };
 //# sourceMappingURL=acorex-platform-layout-builder.mjs.map