@acorex/platform 19.3.0-next.1 → 19.3.0-next.3

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

@@ -4,15 +4,15 @@ 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, ElementRef, effect, Injector, ChangeDetectorRef, ViewChild, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, input, ViewContainerRef, Directive, Optional, Inject, NgModule } 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, get, isEqual, isNil, isUndefined, sum, isEmpty, isString } from 'lodash-es';
-import { Subject, BehaviorSubject, filter } from 'rxjs';
-import { convertArrayToDataSource, AXDataSource } from '@acorex/components/common';
+import { set, merge, cloneDeep, isNil, get, isEqual, sum, isEmpty, isString, isUndefined } from 'lodash-es';
+import { Subject, filter, BehaviorSubject } from 'rxjs';
+import { getSmart, setSmart } from '@acorex/platform/core';
 import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
-import { setSmart, getSmart } from '@acorex/platform/core';
 import { AXTranslationService } from '@acorex/core/translation';
 import { AXUnsubscriber } from '@acorex/core/utils';
+import { convertArrayToDataSource, AXDataSource } from '@acorex/components/common';
 
 var AXPPageStatus;
 (function (AXPPageStatus) {
@@ -160,126 +160,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 }]
         }] });
 
-class AXPLayoutContextChangeEvent {
-}
-const AXPLayoutBuilderContextStore = signalStore(
-// Initial State
-withState(() => ({
-    data: {}, // Shared context data
-    state: 'initiated', // Current state
-    initialSnapshot: {}, // Snapshot of the first initialized state
-    previousSnapshot: {}, // Snapshot of the previous state
-    lastChange: {
-        state: 'initiated',
-    }, // Last change event
-})), 
-// Computed Signals
-withComputed(({ data, state, lastChange, initialSnapshot, previousSnapshot }) => ({
-    isChanged: computed(() => state() === 'changed'),
-    isReset: computed(() => state() === 'restored'),
-    isInitiated: computed(() => state() === 'initiated'),
-    isEmpty: computed(() => Object.keys(data()).length === 0),
-    snapshot: computed(() => cloneDeep(data())), // Current data snapshot
-    initial: computed(() => cloneDeep(initialSnapshot())), // Initial snapshot
-    previous: computed(() => cloneDeep(previousSnapshot())), // Previous snapshot
-    changeEvent: computed(() => lastChange()), // Reactive last change event
-})), 
-// Methods for State Management
-withMethods((store) => ({
-    // Update a specific value
-    update(path, value) {
-        const currentData = cloneDeep(store.data());
-        const oldValue = get(currentData, path);
-        // Skip if the value hasn't changed
-        if (isEqual(oldValue, value)) {
-            return;
-        }
-        // Update the value and prepare the change event
-        const updatedData = 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,
-        });
-    },
-    // Reset to the initial state
-    reset() {
-        const initialData = store.initial();
-        const changeEvent = {
-            oldValue: cloneDeep(store.data()), // Current data becomes old value
-            newValue: cloneDeep(initialData), // Reset to the initial state
-            path: '',
-            state: 'restored',
-            data: initialData,
-        };
-        patchState(store, {
-            previousSnapshot: store.snapshot(), // Save the previous state
-            data: initialData,
-            state: 'restored',
-            lastChange: changeEvent,
-        });
-    },
-    // Initialize the state
-    set(initialData) {
-        const currentData = store.data();
-        if (isEqual(currentData, initialData)) {
-            return; // Skip if the current state matches the initial state
-        }
-        const changeEvent = {
-            oldValue: null,
-            newValue: cloneDeep(initialData),
-            path: '',
-            state: 'initiated',
-            data: initialData,
-        };
-        patchState(store, {
-            initialSnapshot: cloneDeep(initialData), // Save the initial state
-            previousSnapshot: store.snapshot(), // Save the current state as the previous
-            data: initialData,
-            state: 'initiated',
-            lastChange: changeEvent,
-        });
-    },
-    // Get a specific value
-    getValue(path) {
-        return get(store.data(), path);
-    },
-})));
-
-const AXP_WIDGET_DATASOURCE_PROVIDER = new InjectionToken('AXP_WIDGET_DATASOURCE_PROVIDER');
-class AXPWidgetDataSourceProviderService {
-    constructor() {
-        this.providers = inject(AXP_WIDGET_DATASOURCE_PROVIDER, { optional: true });
-    }
-    async items() {
-        const items = [];
-        if (Array.isArray(this.providers)) {
-            for (const provider of this.providers) {
-                items.push(...(await provider.items()));
-            }
-        }
-        return items;
-    }
-    async get(name) {
-        return (await this.items()).find((c) => c.name == name);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetDataSourceProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetDataSourceProviderService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetDataSourceProviderService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 const AXPWidgetsCatalog = {
     documentAttachment: 'document-attachment-editor',
     singleFileBox: 'single-file-box-editor',
@@ -358,6 +238,9 @@ const AXPWidgetsCatalog = {
     weather: 'weather',
     metaData: 'meta-data-editor',
     templateEditor: 'template-box-editor',
+    panel: 'panel',
+    notification: 'notification',
+    taskList: 'task-list',
 };
 
 function cloneProperty(property, values) {
@@ -441,287 +324,45 @@ function createSelectProperty(ctor) {
 }
 const AXP_WIDGET_TOKEN = new InjectionToken('AXP_WIDGET_TOKEN');
 const AXP_WIDGET_COLUMN_TOKEN = new InjectionToken('AXP_WIDGET_COLUMN_TOKEN');
-class AXPWidgetComponent extends AXPLayoutElement {
+
+class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
     constructor() {
         super(...arguments);
-        this.token = inject(AXP_WIDGET_TOKEN);
-        this.host = inject(ElementRef).nativeElement;
-        this.config = this.token.config;
-        this.node = this.token.node;
-        this.name = this.token.node.name;
-        this.path = this.token.node.path;
-        this.defaultValue = this.token.node.defaultValue;
-        this._children = signal(this.token.node.children ?? []);
-        this.children = this._children.asReadonly();
-        this._options = signal(this.token.options ?? {});
-        this.options = this._options.asReadonly();
-        this.layoutService = inject(AXPLayoutBuilderService);
-        this.contextService = inject(AXPLayoutBuilderContextStore);
-        this._isValueWidget = false;
-        this.isValueWidget = () => this._isValueWidget;
-        this._status = signal(AXPWidgetStatus.Rendering);
-        this.status = this._status.asReadonly();
-        this.onStatusChanged = new BehaviorSubject(this._status());
-        this.#statusEffect = effect(() => {
-            this.onStatusChanged.next(this.status());
-        });
-        this.isBusy = computed(() => [AXPWidgetStatus.Rendering, AXPWidgetStatus.Processing].includes(this.status()));
-        this.fullPath = signal(null);
-        this.getValue = computed(() => {
-            return this.fullPath() ? this.extractValue(this.fullPath()) : null;
-        }, { 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,
-            }));
-        });
-    }
-    get id() {
-        return this._id;
-    }
-    #statusEffect;
-    outputs() {
-        return [];
+        this.widgetRegistery = inject(AXPWidgetRegistryService);
+        this.grid = inject(AXBaseDataTable);
+        this.mergedOptions = signal({});
+        this.loadingRow = signal(null);
+        this.injector = inject(Injector);
+        this.cdr = inject(ChangeDetectorRef);
     }
-    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);
-            }
-        }
-        //
-        if (get(this.node, '__meta__.added')) {
-            this.onAdded();
-        }
-        this.setStatus(AXPWidgetStatus.Rendered);
+    get node() {
+        return this._node;
     }
-    extractValue(path) {
-        const rawValue = this.contextService.getValue(path);
-        if (this.node.valueTransforms?.getter) {
-            return this.node.valueTransforms?.getter(rawValue);
-        }
-        return rawValue;
+    set node(v) {
+        this._node = v;
     }
-    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);
-        }
+    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) {
-        this._options.set({ ...this.options(), ...values });
+    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() { }
-    detectFullPath() {
-        const sections = [];
-        const ids = [];
-        //
-        let parent = this;
-        //
-        while (parent) {
-            const isValue = parent.isValueWidget() && parent.index == null;
-            const path = parent.path ?? (isValue ? parent.name : null);
-            const id = parent.name;
-            //
-            if (path) {
-                sections.push(path);
-            }
-            if (parent.index != null && parent.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._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: "19.0.3", ngImport: i0, type: AXPWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-class AXPDataListWidgetComponent extends AXPWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.dataService = inject(AXPWidgetDataSourceProviderService);
-        this.dataSource = signal(convertArrayToDataSource([]));
-        this.textField = computed(() => this.options()['textField'] ?? 'title');
-        this.valueField = computed(() => this.options()['valueField'] ?? 'id');
-        this.selectedItems = signal([]);
-        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([]));
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDataListWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDataListWidgetComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", 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;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPColumnWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPColumnWidgetComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPColumnWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-
-class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
-    constructor() {
-        super(...arguments);
-        this.widgetRegistery = inject(AXPWidgetRegistryService);
-        this.grid = inject(AXBaseDataTable);
-        this.mergedOptions = signal({});
-        this.loadingRow = signal(null);
-        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);
@@ -859,6 +500,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 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),
+    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,
+        });
+    },
+    // Reset to the initial state
+    reset() {
+        const initialData = store.initial();
+        const changeEvent = {
+            oldValue: cloneDeep(store.data()), // Current data becomes old value
+            newValue: cloneDeep(initialData), // Reset to the initial state
+            path: '',
+            state: 'restored',
+            data: initialData,
+        };
+        patchState(store, {
+            previousSnapshot: store.snapshot(), // Save the previous state
+            data: initialData,
+            state: 'restored',
+            lastChange: changeEvent,
+        });
+    },
+    // Initialize the state
+    set(initialData) {
+        const currentData = store.data();
+        if (isEqual(currentData, initialData)) {
+            return; // Skip if the current state matches the initial state
+        }
+        const changeEvent = {
+            oldValue: null,
+            newValue: cloneDeep(initialData),
+            path: '',
+            state: 'initiated',
+            data: initialData,
+        };
+        patchState(store, {
+            initialSnapshot: cloneDeep(initialData), // Save the initial state
+            previousSnapshot: store.snapshot(), // Save the current state as the previous
+            data: initialData,
+            state: 'initiated',
+            lastChange: changeEvent,
+        });
+    },
+    // Get a specific value
+    getValue(path) {
+        return get(store.data(), path);
+    },
+})));
+
 class AXPWidgetContainerComponent {
     set context(value) {
         this.contextService.set(value);
@@ -930,6 +666,8 @@ class AXPWidgetRendererDirective {
         this.node = input.required();
         this._options = signal({});
         this.options = this._options.asReadonly();
+        this.onOptionsChanged = output();
+        this.onValueChanged = output();
         this.mergedOptions = signal({});
         this.injector = inject(Injector);
         this.builderService = inject(AXPLayoutBuilderService);
@@ -1033,6 +771,12 @@ class AXPWidgetRendererDirective {
         this.instance.index = this.index();
         this.instance.mode = this.mode();
         this.instance.setStatus(AXPWidgetStatus.Rendered);
+        this.instance?.onOptionsChanged?.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
+            this.onOptionsChanged.emit({ sender: this, widget: c.sender });
+        });
+        this.instance?.onValueChanged?.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
+            this.onValueChanged.emit({ sender: this, widget: c.sender });
+        });
         await this.updateValueBasedOnFormula();
         await this.assignTriggers();
         //
@@ -1227,7 +971,7 @@ class AXPWidgetRendererDirective {
                     }
                 };
                 const actions = Array.isArray(t.action) ? t.action : [t.action];
-                actions.forEach(a => exec(a));
+                actions.forEach((a) => exec(a));
             });
         });
     }
@@ -1265,7 +1009,7 @@ class AXPWidgetRendererDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetRendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.3", type: AXPWidgetRendererDirective, isStandalone: false, selector: "[axp-widget-renderer]", inputs: { parentNode: { classPropertyName: "parentNode", publicName: "parentNode", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.3", type: AXPWidgetRendererDirective, isStandalone: false, selector: "[axp-widget-renderer]", inputs: { parentNode: { classPropertyName: "parentNode", publicName: "parentNode", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onOptionsChanged: "onOptionsChanged", onValueChanged: "onValueChanged" }, providers: [
             {
                 provide: AXUnsubscriber,
             },
@@ -1345,8 +1089,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     args: ['AXPLayoutBuilderModuleFactory']
                 }] }] });
 
-const AXP_WIDGETS_LAYOUT_CATEGORY = {
-    name: 'layout',
+const AXP_WIDGET_DATASOURCE_PROVIDER = new InjectionToken('AXP_WIDGET_DATASOURCE_PROVIDER');
+class AXPWidgetDataSourceProviderService {
+    constructor() {
+        this.providers = inject(AXP_WIDGET_DATASOURCE_PROVIDER, { optional: true });
+    }
+    async items() {
+        const items = [];
+        if (Array.isArray(this.providers)) {
+            for (const provider of this.providers) {
+                items.push(...(await provider.items()));
+            }
+        }
+        return items;
+    }
+    async get(name) {
+        return (await this.items()).find((c) => c.name == name);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetDataSourceProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetDataSourceProviderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPWidgetDataSourceProviderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const AXP_WIDGETS_LAYOUT_CATEGORY = {
+    name: 'layout',
     order: 1,
     title: 'Layout',
 };
@@ -1383,9 +1152,277 @@ var AXPWidgetGroupEnum;
     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 ?? {});
+        this.options = this._options.asReadonly();
+        this.onOptionsChanged = new Subject();
+        this._status = signal(AXPWidgetStatus.Rendering);
+        this.status = this._status.asReadonly();
+        this.onStatusChanged = new BehaviorSubject(this._status());
+        this.#statusEffect = effect(() => {
+            this.onStatusChanged.next(this.status());
+        });
+        this.isBusy = computed(() => [AXPWidgetStatus.Rendering, AXPWidgetStatus.Processing].includes(this.status()));
+        this._children = signal(this.token.node.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: "19.0.3", ngImport: i0, type: AXPBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBaseWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPBaseWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXPLayoutWidgetComponent extends AXPBaseWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLayoutWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPLayoutWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXPValueWidgetComponent extends AXPLayoutWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.path = this.token.node.path;
+        this.defaultValue = this.token.node.defaultValue;
+        this._isValueWidget = false;
+        this.isValueWidget = () => this._isValueWidget;
+        this.onValueChanged = new Subject();
+        this.fullPath = signal(null);
+        this.getValue = computed(() => {
+            return this.fullPath() ? this.extractValue(this.fullPath()) : null;
+        }, { 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,
+            }));
+        });
+    }
+    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() && parent.index == null;
+            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._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: "19.0.3", ngImport: i0, type: AXPValueWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPValueWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPValueWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.dataService = inject(AXPWidgetDataSourceProviderService);
+        this.dataSource = signal(convertArrayToDataSource([]));
+        this.textField = computed(() => this.options()['textField'] ?? 'title');
+        this.valueField = computed(() => this.options()['valueField'] ?? 'id');
+        this.selectedItems = signal([]);
+        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([]));
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDataListWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPDataListWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", 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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPColumnWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPColumnWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPColumnWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXPColumnWidgetComponent, AXPDataListWidgetComponent, AXPLayoutBuilderContextStore, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPLayoutContextChangeEvent, AXPLayoutElement, AXPPageStatus, AXPWidgetColumnRendererComponent, AXPWidgetComponent, AXPWidgetContainerComponent, AXPWidgetDataSourceProviderService, 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_DATASOURCE_PROVIDER, AXP_WIDGET_TOKEN, cloneProperty, createBooleanProperty, createNumberProperty, createSelectProperty, createStringProperty };
+export { AXPBaseWidgetComponent, AXPColumnWidgetComponent, AXPDataListWidgetComponent, AXPLayoutBuilderContextStore, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPLayoutContextChangeEvent, AXPLayoutElement, AXPLayoutWidgetComponent, AXPPageStatus, AXPValueWidgetComponent, AXPWidgetColumnRendererComponent, AXPWidgetContainerComponent, AXPWidgetDataSourceProviderService, 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_DATASOURCE_PROVIDER, AXP_WIDGET_TOKEN, cloneProperty, createBooleanProperty, createNumberProperty, createSelectProperty, createStringProperty };
 //# sourceMappingURL=acorex-platform-layout-builder.mjs.map