@acorex-platform/framework-client 0.0.10

package/fesm2022/acorex-platform-framework-client-layout-widget-core.mjs

@@ -0,0 +1,4711 @@
+import * as i0 from '@angular/core';
+import { signal, computed, effect, untracked, Injectable, inject, ElementRef, DestroyRef, InjectionToken, EventEmitter, Injector, ChangeDetectorRef, ViewChild, Input, Output, ChangeDetectionStrategy, Component, input, output, ViewContainerRef, Directive, NgModule } from '@angular/core';
+import { isSelectionValueEqual, isFormValueEqual, extractValue, getSmart, AXPWidgetsCatalog } from '@acorex-platform/framework-shared/core';
+import { AXPPageStatus, AXPWidgetStatus, AXP_WIDGET_TOKEN, AXP_WIDGET_COLUMN_TOKEN, createStringProperty, createBooleanProperty, createSelectProperty, createNumberProperty, cloneProperty } from '@acorex-platform/framework-shared/widget-core';
+import { convertArrayToDataSource, AXDataSource, AX_STYLE_COLOR_TYPES, AX_STYLE_LOOK_TYPES } from '@acorex/cdk/common';
+import { AXPContextStore, AXPDataSourceDefinitionProviderService, AXPExpressionEvaluatorService } from '@acorex-platform/framework-client/core';
+import { set, get, cloneDeep, isEqual, isNil, isUndefined, isObjectLike, merge, sum, isEmpty, isString } from 'lodash-es';
+import { Subject, BehaviorSubject, filter } from 'rxjs';
+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, NgComponentOutlet } from '@angular/common';
+import { AXDataTableColumnComponent, AXBaseDataTable } from '@acorex/components/data-table';
+import { AXUnsubscriber } from '@acorex/core/utils';
+
+class AXPWidgetCoreElement {
+    api() {
+        return {};
+    }
+    actions() {
+        return [];
+    }
+}
+class AXPWidgetCoreService {
+    constructor() {
+        this.variables$ = signal({}, ...(ngDevMode ? [{ debugName: "variables$" }] : /* istanbul ignore next */ []));
+        this.functions$ = signal({}, ...(ngDevMode ? [{ debugName: "functions$" }] : /* istanbul ignore next */ []));
+        this.onRefresh = new Subject();
+        this.widgets = new Map();
+        this.onWidgetRegistered = new Subject();
+        /** Fires whenever a widget registers, including re-registration after remount (same id, new instance). */
+        this.widgetRegistered$ = this.onWidgetRegistered.asObservable();
+        /** Bumps when widget render/hydration state changes so aggregate computeds re-evaluate. */
+        this.widgetsRevision = signal(0, ...(ngDevMode ? [{ debugName: "widgetsRevision" }] : /* istanbul ignore next */ []));
+        this.status$ = signal(AXPPageStatus.Rendered, ...(ngDevMode ? [{ debugName: "status$" }] : /* istanbul ignore next */ []));
+        this.status = this.status$.asReadonly();
+        this.registeredWidgetsCount = signal(0, ...(ngDevMode ? [{ debugName: "registeredWidgetsCount" }] : /* istanbul ignore next */ []));
+        this.isRendering = computed(() => {
+            this.widgetsRevision();
+            return Array.from(this.widgets.values()).some((widget) => widget.status() === AXPWidgetStatus.Rendering);
+        }, ...(ngDevMode ? [{ debugName: "isRendering" }] : /* istanbul ignore next */ []));
+        this.isHydrating = computed(() => {
+            this.widgetsRevision();
+            return Array.from(this.widgets.values()).some((widget) => widget.isHydrating());
+        }, ...(ngDevMode ? [{ debugName: "isHydrating" }] : /* istanbul ignore next */ []));
+        this.isBusy = computed(() => this.isRendering() || this.isHydrating(), ...(ngDevMode ? [{ debugName: "isBusy" }] : /* istanbul ignore next */ []));
+        this.isStructureReady = computed(() => {
+            this.widgetsRevision();
+            const widgets = Array.from(this.widgets.values());
+            if (!widgets.length) {
+                return false;
+            }
+            return widgets.every((widget) => widget.status() === AXPWidgetStatus.Rendered);
+        }, ...(ngDevMode ? [{ debugName: "isStructureReady" }] : /* istanbul ignore next */ []));
+        this.dirtyWidgetsRevision = signal(0, ...(ngDevMode ? [{ debugName: "dirtyWidgetsRevision" }] : /* istanbul ignore next */ []));
+        this.dirtyWidgetsRevisionSignal = this.dirtyWidgetsRevision.asReadonly();
+        effect(() => {
+            this.widgetsRevision();
+            this.registeredWidgetsCount();
+            untracked(() => {
+                this.status$.set(this.detectAggregateStatus());
+            });
+        });
+    }
+    get variables() {
+        return this.variables$();
+    }
+    get functions() {
+        return this.functions$();
+    }
+    /** Recomputes aggregate container state after a widget registers or changes status/hydration. */
+    notifyWidgetStateChanged() {
+        this.registeredWidgetsCount.set(this.widgets.size);
+        this.widgetsRevision.update((value) => value + 1);
+    }
+    /** @deprecated Prefer {@link notifyWidgetStateChanged}. */
+    updateStatus() {
+        this.notifyWidgetStateChanged();
+    }
+    /** Debug snapshot of registered widget render/hydration state. */
+    getWidgetStateSnapshot() {
+        const widgets = Array.from(this.widgets.entries()).map(([id, widget]) => ({
+            id,
+            status: widget.status(),
+            isHydrating: widget.isHydrating(),
+        }));
+        return {
+            count: widgets.length,
+            isRendering: this.isRendering(),
+            isHydrating: this.isHydrating(),
+            isStructureReady: this.isStructureReady(),
+            isBusy: this.isBusy(),
+            widgets,
+        };
+    }
+    detectAggregateStatus() {
+        const widgets = Array.from(this.widgets.values());
+        if (!widgets.length) {
+            return AXPPageStatus.Rendered;
+        }
+        const statuses = widgets.map((widget) => widget.status());
+        if (statuses.some((status) => status === AXPWidgetStatus.Rendering)) {
+            return AXPPageStatus.Rendering;
+        }
+        if (statuses.some((status) => status === AXPWidgetStatus.Error)) {
+            return AXPPageStatus.Error;
+        }
+        if (widgets.some((widget) => widget.isHydrating())) {
+            return AXPPageStatus.Rendering;
+        }
+        if (statuses.every((status) => status === AXPWidgetStatus.Rendered)) {
+            return AXPPageStatus.Rendered;
+        }
+        return AXPPageStatus.Rendered;
+    }
+    refresh() {
+        setTimeout(() => {
+            this.onRefresh.next();
+        }, 0);
+    }
+    setStatus(status) {
+        this.status$.set(status);
+    }
+    setVariables(...args) {
+        if (args.length == 0)
+            return;
+        else if (args.length == 1)
+            this.variables$.set(args[0]);
+        else if (args.length == 2) {
+            this.variables$.update((v) => set(v, args[0], args[1]));
+        }
+    }
+    setFunctions(...args) {
+        if (args.length == 0)
+            return;
+        else if (args.length == 1)
+            this.functions$.set(args[0]);
+        else if (args.length == 2) {
+            this.functions$.update((v) => set(v, args[0], args[1]));
+        }
+    }
+    registerWidget(id, widget) {
+        this.widgets.set(id, widget);
+        this.onWidgetRegistered.next({ id, widget });
+        this.notifyWidgetStateChanged();
+    }
+    unregisterWidget(id) {
+        if (this.widgets.delete(id)) {
+            this.notifyWidgetStateChanged();
+        }
+    }
+    clearWidgets() {
+        if (this.widgets.size === 0) {
+            return;
+        }
+        this.widgets.clear();
+        this.notifyWidgetStateChanged();
+    }
+    getWidget(id) {
+        return this.widgets.get(id);
+    }
+    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);
+            }
+        });
+    }
+    listRegisteredWidgetNames() {
+        return Array.from(this.widgets.keys());
+    }
+    notifyWidgetDirtyChanged() {
+        this.dirtyWidgetsRevision.update((value) => value + 1);
+    }
+    ngOnDestroy() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetCoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetCoreService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetCoreService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class AXPBaseWidgetComponent extends AXPWidgetCoreElement {
+    constructor() {
+        super(...arguments);
+        this.token = inject(AXP_WIDGET_TOKEN);
+        this.host = inject(ElementRef).nativeElement;
+        this.layoutService = inject(AXPWidgetCoreService);
+        this.contextService = inject(AXPContextStore);
+        /** Unregisters this widget from the container registry when the instance is destroyed. */
+        this.#unregisterFromLayoutOnDestroy = inject(DestroyRef).onDestroy(() => {
+            const registrationId = this._id ?? this.name;
+            if (registrationId) {
+                this.layoutService.unregisterWidget(registrationId);
+            }
+            if (this.hydrationDepth > 0) {
+                this.hydrationDepth = 0;
+                this._isHydrating.set(false);
+                this.layoutService.notifyWidgetStateChanged();
+            }
+        });
+        this.config = this.token.config;
+        this.node = this.token.node;
+        this.name = this.token.node.name;
+        this.component = this;
+        this._options = signal(this.token.options ?? {}, ...(ngDevMode ? [{ debugName: "_options" }] : /* istanbul ignore next */ []));
+        this.options = this._options.asReadonly();
+        this.onOptionsChanged = new Subject();
+        this._status = signal(AXPWidgetStatus.Rendering, ...(ngDevMode ? [{ debugName: "_status" }] : /* istanbul ignore next */ []));
+        this.status = this._status.asReadonly();
+        this.onStatusChanged = new BehaviorSubject(this._status());
+        /** Depth counter so nested async hydration calls share one busy state. */
+        this.hydrationDepth = 0;
+        this._isHydrating = signal(false, ...(ngDevMode ? [{ debugName: "_isHydrating" }] : /* istanbul ignore next */ []));
+        this.isHydrating = this._isHydrating.asReadonly();
+        this.#statusEffect = effect(() => {
+            this.onStatusChanged.next(this.status());
+        }, ...(ngDevMode ? [{ debugName: "#statusEffect" }] : /* istanbul ignore next */ []));
+        this.isBusy = computed(() => this.status() === AXPWidgetStatus.Rendering || this.isHydrating(), ...(ngDevMode ? [{ debugName: "isBusy" }] : /* istanbul ignore next */ []));
+        this._children = signal(this.token.node.children ?? [], ...(ngDevMode ? [{ debugName: "_children" }] : /* istanbul ignore next */ []));
+        this.children = this._children.asReadonly();
+    }
+    /** Unregisters this widget from the container registry when the instance is destroyed. */
+    #unregisterFromLayoutOnDestroy;
+    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.notifyWidgetStateChanged();
+    }
+    /** Marks async data loading (lookup, select, file fetch, etc.). */
+    beginHydration() {
+        this.hydrationDepth += 1;
+        if (this.hydrationDepth === 1) {
+            this._isHydrating.set(true);
+            this.layoutService.notifyWidgetStateChanged();
+        }
+    }
+    /** Clears hydration started by {@link beginHydration}. */
+    endHydration() {
+        if (this.hydrationDepth <= 0) {
+            return;
+        }
+        this.hydrationDepth -= 1;
+        if (this.hydrationDepth === 0) {
+            this._isHydrating.set(false);
+            this.layoutService.notifyWidgetStateChanged();
+        }
+    }
+    setOptions(values) {
+        const oldValue = this.options();
+        const value = cloneDeep(values);
+        this._options.set({ ...oldValue, ...value });
+        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 = outputs.find((c) => c.name == name)?.value;
+            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: "21.2.9", ngImport: i0, type: AXPBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPBaseWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPBaseWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXPLayoutBaseWidgetComponent extends AXPBaseWidgetComponent {
+    //TODO change this approach
+    ngOnInit() {
+        if (this.name && !(this instanceof AXPValueWidgetComponent)) {
+            this.layoutService.registerWidget(this.name, this);
+        }
+        super.ngOnInit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutBaseWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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" }] : /* istanbul ignore next */ []));
+        this.parentPath = signal(null, ...(ngDevMode ? [{ debugName: "parentPath" }] : /* istanbul ignore next */ []));
+        this.getValue = computed(() => {
+            return this.fullPath() ? this.extractValue(this.fullPath()) : null;
+        }, { ...(ngDevMode ? { debugName: "getValue" } : /* istanbul ignore next */ {}), 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" }] : /* istanbul ignore next */ []));
+        this.hasRequiredValidation = computed(() => this.validationRules().some((rule) => rule.rule === 'required'), ...(ngDevMode ? [{ debugName: "hasRequiredValidation" }] : /* istanbul ignore next */ []));
+        this.hasClearButton = computed(() => this.resolveClearButtonOption('hasClearButton'), ...(ngDevMode ? [{ debugName: "hasClearButton" }] : /* istanbul ignore next */ []));
+        this.clearButton = computed(() => this.resolveClearButtonOption('clearButton'), ...(ngDevMode ? [{ debugName: "clearButton" }] : /* istanbul ignore next */ []));
+    }
+    ngOnInit() {
+        this._isValueWidget = this.config.properties?.some((c) => c.name == 'path') ?? false;
+        if (this.isValueWidget()) {
+            this.detectFullPath();
+            // Set defaultValue if it exists and the path doesn't exist in context
+            if (!isNil(this.defaultValue) && this.fullPath() && !this.contextService.hasValue(this.fullPath())) {
+                this.applyDefaultValue(this.defaultValue);
+            }
+        }
+        //
+        super.ngOnInit();
+    }
+    /**
+     * When `hasClearButton` / `clearButton` is not set on the widget, show clear for optional fields
+     * (no `required` validation) and hide it for required fields.
+     */
+    resolveClearButtonOption(optionKey) {
+        const explicit = this.options()[optionKey];
+        if (explicit != null) {
+            return explicit;
+        }
+        return !this.hasRequiredValidation();
+    }
+    extractValue(path) {
+        const rawValue = this.contextService.getValue(path);
+        if (this.node.valueTransforms?.getter) {
+            return this.node.valueTransforms?.getter(rawValue);
+        }
+        return rawValue;
+    }
+    /** Applies schema default without marking the form as user-edited. */
+    applyDefaultValue(value) {
+        if (this.node.valueTransforms?.setter) {
+            value = this.node.valueTransforms?.setter(value);
+        }
+        const path = this.fullPath();
+        if (!path) {
+            return;
+        }
+        value = isUndefined(value) ? null : value;
+        if (isNil(value)) {
+            return;
+        }
+        this.contextService.update(path, value, { origin: 'system' });
+        this.onValueChanged.next({ sender: this });
+    }
+    setValue(value) {
+        if (this.node.valueTransforms?.setter) {
+            value = this.node.valueTransforms?.setter(value);
+        }
+        const path = this.fullPath();
+        if (!path) {
+            return;
+        }
+        const oldValue = this.getValue();
+        value = isUndefined(value) ? null : value;
+        if (isNil(value) && isNil(oldValue)) {
+            return;
+        }
+        const savedAtPath = this.contextService.getSavedValue(path);
+        if (this.contextService.isSavedCommitted() &&
+            isSelectionValueEqual(value, savedAtPath) &&
+            !isFormValueEqual(value, savedAtPath)) {
+            this.contextService.update(path, cloneDeep(savedAtPath), { origin: 'system' });
+            this.onValueChanged.next({ sender: this });
+            return;
+        }
+        // Reordered arrays must persist even when items are deep-equal (e.g. empty row objects).
+        const isArrayReorder = Array.isArray(oldValue) &&
+            Array.isArray(value) &&
+            oldValue.length === value.length &&
+            oldValue.some((v, i) => v !== value[i]);
+        const isArrayLengthChange = Array.isArray(value) && (!Array.isArray(oldValue) || value.length !== oldValue.length);
+        if (!isArrayReorder && !isArrayLengthChange && isFormValueEqual(oldValue, value)) {
+            return;
+        }
+        this.contextService.update(path, value, { origin: 'user' });
+        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: "21.2.9", ngImport: i0, type: AXPValueWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPValueWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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" }] : /* istanbul ignore next */ []));
+        this.valueField = computed(() => this.options()['valueField'] ?? 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []));
+        this.textTemplate = computed(() => isNil(this.options()['textTemplate'])
+            ? undefined
+            : this.options()['textTemplate'].replace(/{/g, '{{').replace(/}/g, '}}'), ...(ngDevMode ? [{ debugName: "textTemplate" }] : /* istanbul ignore next */ []));
+        this.dataSource = signal(convertArrayToDataSource([]), ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+        //#region ----   DataSource Loading Effect   ----
+        /**
+         * Track the last loaded string dataSource reference to prevent infinite loops
+         * Only used for string-based datasources (not arrays or AXDataSource instances)
+         */
+        this.lastStringDataSourceRef = null;
+        this.rf = effect(async () => {
+            const rawValue = this.options()['dataSource'];
+            // For string datasources: prevent infinite loop by checking reference
+            if (typeof rawValue === 'string') {
+                if (rawValue === this.lastStringDataSourceRef) {
+                    return;
+                }
+                this.lastStringDataSourceRef = rawValue;
+            }
+            else {
+                // Reset string reference when dataSource changes to non-string
+                this.lastStringDataSourceRef = null;
+            }
+            this.beginHydration();
+            try {
+                // Process dataSource creation in untracked context
+                await untracked(async () => {
+                    if (rawValue instanceof AXDataSource) {
+                        // For AXDataSource instances, check if config changed
+                        if (!isEqual(rawValue.config, this.dataSource().config)) {
+                            this.dataSource.set(rawValue);
+                        }
+                    }
+                    // static array datasource - always recreate when options change
+                    else if (Array.isArray(rawValue)) {
+                        const ds = new AXDataSource({
+                            key: this.valueField(),
+                            pageSize: 10,
+                            load: async (e) => {
+                                const raw = this.options()['dataSource'];
+                                const skip = e.skip ?? 0;
+                                const take = e.take ?? raw.length;
+                                return {
+                                    items: raw.slice(skip, skip + take),
+                                    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 (string or object with id)
+                    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([]));
+                    }
+                });
+            }
+            finally {
+                this.endHydration();
+            }
+        }, ...(ngDevMode ? [{ debugName: "rf" }] : /* istanbul ignore next */ []));
+        this.effect2 = effect(async () => {
+            this.beginHydration();
+            try {
+                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));
+            }
+            finally {
+                this.endHydration();
+            }
+        }, ...(ngDevMode ? [{ debugName: "effect2" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    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,
+            };
+    }
+    /**
+     * Value used to resolve `selectedItems`. Defaults to the stored value, but
+     * widgets that wrap their value (e.g. filter mode) can override this to expose
+     * the unwrapped scalar/array so item resolution receives a real key.
+     */
+    resolveSelectedItemsValue() {
+        return this.getValue();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDataListWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDataListWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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 ?? {};
+        /** Column header caption when rendered inside `axp-widget-column-renderer`. */
+        this.columnCaption = this.token.caption;
+        this.rawValue = null;
+        this.nullText = this.options['nullText'];
+        this.nullValue = this.options['nullValue'];
+        this.value = () => {
+            if (isNil(this.rawValue) && !isNil(this.nullValue)) {
+                return this.nullValue;
+            }
+            return this.rawValue;
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPColumnWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPColumnWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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" }] : /* istanbul ignore next */ []));
+        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" }] : /* istanbul ignore next */ []));
+        this.inlineStyle = computed(() => {
+            return { ...this.hostBoxStyle() };
+        }, ...(ngDevMode ? [{ debugName: "inlineStyle" }] : /* istanbul ignore next */ []));
+        this.blockClass = computed(() => {
+            return {
+                'ax-block': true,
+                'ax-w-full': true,
+                // 'ax-widget-outline': true,
+            };
+        }, ...(ngDevMode ? [{ debugName: "blockClass" }] : /* istanbul ignore next */ []));
+        this.inlineClass = computed(() => {
+            return {
+                'ax-inline-block': true,
+            };
+        }, ...(ngDevMode ? [{ debugName: "inlineClass" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class AXPBlockBaseLayoutWidgetComponent extends AXPBoxModelLayoutWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.hostClass = computed(() => this.blockClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+        this.hostStyle = computed(() => this.blockStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class AXPFlexBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.flex = computed(() => this.options(), ...(ngDevMode ? [{ debugName: "flex" }] : /* istanbul ignore next */ []));
+        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" }] : /* istanbul ignore next */ []));
+        this.hostFlexClass = computed(() => {
+            return {
+                ...this.blockClass(),
+                'ax-flex': true,
+                'ax-h-full': true,
+            };
+        }, ...(ngDevMode ? [{ debugName: "hostFlexClass" }] : /* istanbul ignore next */ []));
+        this.hostClass = computed(() => {
+            return this.hostFlexClass();
+        }, ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+        this.hostStyle = computed(() => {
+            return this.hostFlexStyle();
+        }, ...(ngDevMode ? [{ debugName: "hostStyle" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class AXPInlineBaseLayoutWidgetComponent extends AXPBoxModelLayoutWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.hostClass = computed(() => this.inlineClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+        this.hostStyle = computed(() => this.inlineStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class AXPFlexItemBaseLayoutWidgetComponent extends AXPInlineBaseLayoutWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.flexItem = computed(() => this.options(), ...(ngDevMode ? [{ debugName: "flexItem" }] : /* istanbul ignore next */ []));
+        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" }] : /* istanbul ignore next */ []));
+        this.hostFlexItemClass = computed(() => {
+            return {
+                ...this.blockClass(),
+            };
+        }, ...(ngDevMode ? [{ debugName: "hostFlexItemClass" }] : /* istanbul ignore next */ []));
+        this.hostClass = computed(() => {
+            return this.hostFlexItemClass();
+        }, ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+        this.hostStyle = computed(() => {
+            return this.hostFlexItemStyle();
+        }, ...(ngDevMode ? [{ debugName: "hostStyle" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class AXPGridBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.grid = computed(() => this.options()?.['grid'], ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
+        this.hostGridStyle = computed(() => {
+            const style = { ...this.inlineStyle() };
+            const g = this.grid()?.default;
+            if (g?.gap)
+                style['gap'] = g.gap;
+            return style;
+        }, ...(ngDevMode ? [{ debugName: "hostGridStyle" }] : /* istanbul ignore next */ []));
+        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" }] : /* istanbul ignore next */ []));
+        this.hostClass = computed(() => this.hostGridClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+        this.hostStyle = computed(() => this.hostGridStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class AXPGridItemBaseLayoutWidgetComponent extends AXPFlexBaseLayoutWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.gridItem = computed(() => this.options(), ...(ngDevMode ? [{ debugName: "gridItem" }] : /* istanbul ignore next */ []));
+        this.hostGridItemStyle = computed(() => {
+            const style = { ...this.hostFlexStyle() };
+            const g = this.gridItem();
+            if (g?.alignSelf)
+                style['align-self'] = g.alignSelf;
+            if (g?.justifySelf)
+                style['justify-self'] = g.justifySelf;
+            return style;
+        }, ...(ngDevMode ? [{ debugName: "hostGridItemStyle" }] : /* istanbul ignore next */ []));
+        this.hostGridItemClass = computed(() => {
+            const cls = { ...this.hostFlexClass() };
+            const g = this.gridItem();
+            // Mobile-first: full width on small screens so items stack vertically and don't overflow
+            cls['ax-col-span-12'] = true;
+            // Large screens: apply defined placement so multi-column layout works on desktop
+            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" }] : /* istanbul ignore next */ []));
+        this.hostClass = computed(() => this.hostGridItemClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+        this.hostStyle = computed(() => this.hostGridItemStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class AXPTableBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.hostTableClass = computed(() => ({
+            ...this.blockClass(),
+        }), ...(ngDevMode ? [{ debugName: "hostTableClass" }] : /* istanbul ignore next */ []));
+        this.hostTableStyle = computed(() => {
+            const style = { ...this.blockStyle() };
+            style['overflow-x'] = 'auto';
+            return style;
+        }, ...(ngDevMode ? [{ debugName: "hostTableStyle" }] : /* istanbul ignore next */ []));
+        this.hostClass = computed(() => this.hostTableClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+        this.hostStyle = computed(() => this.hostTableStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTableBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTableBaseLayoutWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTableBaseLayoutWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class AXPTableItemOpsBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTableItemOpsBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTableItemOpsBaseLayoutWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTableItemOpsBaseLayoutWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class AXPTableItemBaseLayoutWidgetComponent extends AXPTableItemOpsBaseLayoutWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.colSpan = computed(() => {
+            const v = this.options()?.colSpan;
+            return v ? Math.max(1, v) : 1;
+        }, ...(ngDevMode ? [{ debugName: "colSpan" }] : /* istanbul ignore next */ []));
+        this.rowSpan = computed(() => {
+            const v = this.options()?.rowSpan;
+            return v ? Math.max(1, v) : 1;
+        }, ...(ngDevMode ? [{ debugName: "rowSpan" }] : /* istanbul ignore next */ []));
+        this.hostClass = computed(() => this.blockClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+        this.hostStyle = computed(() => this.blockStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTableItemBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTableItemBaseLayoutWidgetComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPTableItemBaseLayoutWidgetComponent, decorators: [{
+            type: Injectable
+        }] });
+
+//#region ----   Imports   ----
+/**
+ * Injection token for widget definition providers.
+ * Modules register their widget providers using this token (multi: true).
+ */
+const AXP_WIDGET_DEFINITION_PROVIDER = new InjectionToken('AXP_WIDGET_DEFINITION_PROVIDER', {
+    factory: () => [],
+});
+//#endregion
+
+//#region ----   Build widget map (shared with tooling / snapshot scripts)   ----
+//TODO RECHECK THIS FUNCTION s.hosseini
+/**
+ * Merges core + extended widgets the same way as AXPWidgetRegistryService.ensureBuilt().
+ * Use with concrete providers (e.g. AXPCoreWidgetsProvider, AXPEntityWidgetsProvider) in Node scripts without DI.
+ */
+function buildWidgetRegistryMapFromProviders(providers) {
+    const types = new Map();
+    const AXPExtendedWidgets = [];
+    for (const provider of providers) {
+        const widgets = provider.getWidgets?.() ?? [];
+        for (const w of widgets) {
+            types.set(w.name, w);
+        }
+        const extended = provider.getExtendedWidgets?.() ?? [];
+        AXPExtendedWidgets.push(...extended);
+    }
+    for (const { parentName, widget } of AXPExtendedWidgets) {
+        const parent = types.get(parentName);
+        if (parent) {
+            const merged = merge({}, parent, widget);
+            merged.name = widget.name;
+            types.set(merged.name, merged);
+        }
+    }
+    return types;
+}
+//#endregion
+//#region ----   Widget Registry Service (Token-Based)   ----
+/**
+ * Aggregates widgets from all AXP_WIDGET_DEFINITION_PROVIDER instances.
+ * Token-based like AXP_MENU_PROVIDER / AXP_PERMISSION_DEFINITION_PROVIDER / AXP_SETTING_DEFINITION_PROVIDER.
+ * No separate registry - widgets come solely from providers.
+ */
+class AXPWidgetRegistryService {
+    constructor() {
+        this._providers = inject(AXP_WIDGET_DEFINITION_PROVIDER, { optional: true }) ?? [];
+        this._types = null;
+    }
+    /**
+     * Lazy-build widget map from all providers.
+     */
+    ensureBuilt() {
+        if (this._types)
+            return this._types;
+        this._types = buildWidgetRegistryMapFromProviders(this._providers);
+        return this._types;
+    }
+    resolve(name) {
+        const widget = this.ensureBuilt().get(name);
+        if (!widget) {
+            throw new Error(`Widget with name "${name}" does not exist.`);
+        }
+        return widget;
+    }
+    /**
+     * Registered widget config when present; otherwise `undefined`. Does not throw — use when
+     * {@link resolve}'s value may be a non-widget id (e.g. data-source row id in dynamic field configurator).
+     */
+    getOptional(name) {
+        return this.ensureBuilt().get(name);
+    }
+    all() {
+        return Array.from(this.ensureBuilt().values());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetRegistryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetRegistryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
+    constructor() {
+        super(...arguments);
+        this.widgetRegistery = inject(AXPWidgetRegistryService);
+        this.grid = inject(AXBaseDataTable);
+        this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
+        this.mergedOptions = signal({}, ...(ngDevMode ? [{ debugName: "mergedOptions" }] : /* istanbul ignore next */ []));
+        this.loadingRow = signal(null, ...(ngDevMode ? [{ debugName: "loadingRow" }] : /* istanbul ignore next */ []));
+        this.rowInjectorsCache = new Map();
+        this.hasExpressions = false;
+        this.pendingEvaluations = new Set();
+        this.changeDetectionScheduled = false;
+        this.MAX_CACHE_SIZE = 1000; // Limit cache size to prevent memory leaks
+        /** When true, header click cycles sort (handled by parent; synced with list sort state). */
+        this.sortEnabled = false;
+        this.sortToggle = new EventEmitter();
+        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;
+    }
+    /**
+     * True when the row should show the expand icon: either hasChild is true (from server/initial load)
+     * or the row has loaded children (e.g. after refreshItemChildren when children go from 0 to 1).
+     */
+    hasExpandableRow(row) {
+        const data = row?.data;
+        if (!data)
+            return false;
+        if (data['hasChild'] === true)
+            return true;
+        const children = data['__meta__']?.['children'];
+        return Array.isArray(children) && children.length > 0;
+    }
+    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;
+    }
+    //#region ---- Column alignment (header / cell) ----
+    /**
+     * Resolves `options.align`: string applies to header and cell; object uses optional `header` / `cell` (default start).
+     * Supports designer select values `{ id: 'center' }`.
+     */
+    getHeaderTextAlign() {
+        return this.resolveAlignForSide('header');
+    }
+    getHeaderJustifyContent() {
+        const align = this.getHeaderTextAlign();
+        if (align === 'center') {
+            return 'center';
+        }
+        if (align === 'end') {
+            return 'flex-end';
+        }
+        return 'flex-start';
+    }
+    onHeaderClick(event) {
+        if (!this.sortEnabled) {
+            return;
+        }
+        event.stopPropagation();
+        this.sortToggle.emit(event);
+    }
+    /**
+     * When true, the cell body uses flex so `justify-content` can place content on the main axis.
+     */
+    getCellUseFlexLayout() {
+        return !!this.expandHandler || this.resolveAlignForSide('cell') !== 'start';
+    }
+    /**
+     * Flex `justify-content` for the cell wrapper; omit when not using flex layout.
+     */
+    getCellJustifyContent() {
+        if (!this.getCellUseFlexLayout()) {
+            return null;
+        }
+        return this.resolveAlignForSide('cell');
+    }
+    resolveAlignForSide(side) {
+        const align = this.mergedOptions().align;
+        if (align == null || align === '') {
+            return 'start';
+        }
+        if (typeof align === 'string') {
+            return this.normalizeColumnAlignment(align);
+        }
+        if (typeof align === 'object' && !Array.isArray(align)) {
+            const raw = side === 'header' ? align.header : align.cell;
+            return this.normalizeColumnAlignment(raw);
+        }
+        return 'start';
+    }
+    normalizeColumnAlignment(value) {
+        if (value === 'center' || value === 'end' || value === 'start') {
+            return value;
+        }
+        if (value && typeof value === 'object' && 'id' in value) {
+            const id = value.id;
+            if (id === 'center' || id === 'end' || id === 'start') {
+                return id;
+            }
+        }
+        return 'start';
+    }
+    //#endregion
+    get loadingEnabled() {
+        return true;
+    }
+    get name() {
+        return `col-${this.node.path}`;
+    }
+    async ngOnInit() {
+        const widget = this.widgetRegistery.resolve(this.node.type);
+        const mode = 'column';
+        this.component = await widget?.components[mode]?.component();
+        //
+        const props = widget?.components[mode]?.properties
+            ?.filter((c) => c.schema.defaultValue)
+            .map((c) => ({ [c.name]: c.schema.defaultValue }))
+            .reduce((acc, curr) => {
+            return { ...acc, ...curr };
+        }, {});
+        //
+        this.mergedOptions.set(merge(props, this.node.options) || {});
+        // Check if options contain expressions (performance optimization)
+        this.hasExpressions = this.checkForExpressions(this.mergedOptions());
+        const tokenValue = {
+            path: this.node.path,
+            options: this.mergedOptions(),
+            caption: this.caption,
+        };
+        this.widgetInjector = Injector.create({
+            parent: this.injector,
+            providers: [
+                {
+                    provide: AXP_WIDGET_COLUMN_TOKEN,
+                    useValue: tokenValue,
+                },
+            ],
+        });
+        this.width = this.mergedOptions().width === 'auto' ? 'auto' : this.customWidth ? this.customWidth : (this.mergedOptions().width ?? '200px');
+        this.allowResizing = this.mergedOptions().allowResizing || true;
+        this.allowSorting = this.sortEnabled;
+        this.cdr.detectChanges();
+        this.fixed = this.columnFixed;
+    }
+    ngOnChanges() {
+        this.allowSorting = this.sortEnabled;
+        this.sortOrder = this.headerSortDirection;
+        this.sortIndex = this.headerSortPriority;
+        this.fixed = this.columnFixed;
+        if (this.customWidth) {
+            this.width = this.customWidth;
+        }
+    }
+    //#region ----   Performance Optimization Methods   ----
+    /**
+     * Check if options contain any expressions that need evaluation
+     */
+    checkForExpressions(obj) {
+        if (typeof obj === 'string') {
+            return this.expressionEvaluator.isExpression(obj);
+        }
+        if (Array.isArray(obj)) {
+            return obj.some((item) => this.checkForExpressions(item));
+        }
+        if (obj && typeof obj === 'object') {
+            return Object.values(obj).some((value) => this.checkForExpressions(value));
+        }
+        return false;
+    }
+    /**
+     * Get cache key for row data - optimized to avoid JSON.stringify when possible
+     */
+    getCacheKey(data) {
+        if (data?.id) {
+            return `row-${data.id}`;
+        }
+        // Use a hash of key properties instead of full JSON.stringify
+        // This is much faster for large objects
+        const keyProps = ['id', 'code', 'name', 'title'];
+        const keyValues = keyProps.map((prop) => data?.[prop]).filter((v) => v != null);
+        if (keyValues.length > 0) {
+            return `row-${keyValues.join('-')}`;
+        }
+        // Fallback to JSON.stringify only if no key properties exist
+        // But limit the stringified size to prevent performance issues
+        try {
+            const str = JSON.stringify(data);
+            return str.length > 1000 ? `row-${str.substring(0, 1000)}` : `row-${str}`;
+        }
+        catch {
+            // If JSON.stringify fails, use a simple hash
+            return `row-${Object.keys(data || {}).length}`;
+        }
+    }
+    /**
+     * Schedule change detection (debounced to batch multiple updates)
+     */
+    scheduleChangeDetection() {
+        if (this.changeDetectionScheduled) {
+            return;
+        }
+        this.changeDetectionScheduled = true;
+        // Use requestAnimationFrame for better performance
+        requestAnimationFrame(() => {
+            this.cdr.detectChanges();
+            this.changeDetectionScheduled = false;
+        });
+    }
+    /**
+     * Limit cache size using simple FIFO eviction
+     */
+    evictCacheIfNeeded() {
+        if (this.rowInjectorsCache.size >= this.MAX_CACHE_SIZE) {
+            // Remove oldest entries (first 25% of cache)
+            const entriesToRemove = Math.floor(this.MAX_CACHE_SIZE * 0.25);
+            const keysToRemove = Array.from(this.rowInjectorsCache.keys()).slice(0, entriesToRemove);
+            keysToRemove.forEach((key) => this.rowInjectorsCache.delete(key));
+        }
+    }
+    //#endregion
+    getInputs(data) {
+        return {
+            rawValue: get(data, this.node.path),
+            rowData: data,
+        };
+    }
+    getRowInjector(data) {
+        // Optimized cache key generation
+        const cacheKey = this.getCacheKey(data);
+        // Check if we have a cached injector for this row
+        let rowInjector = this.rowInjectorsCache.get(cacheKey);
+        if (!rowInjector) {
+            // If no expressions in options, use original options directly (performance optimization)
+            if (!this.hasExpressions) {
+                const tokenValue = {
+                    path: this.node.path,
+                    options: this.mergedOptions(),
+                    caption: this.caption,
+                };
+                rowInjector = Injector.create({
+                    parent: this.injector,
+                    providers: [
+                        {
+                            provide: AXP_WIDGET_COLUMN_TOKEN,
+                            useValue: tokenValue,
+                        },
+                    ],
+                });
+                this.evictCacheIfNeeded();
+                this.rowInjectorsCache.set(cacheKey, rowInjector);
+                return rowInjector;
+            }
+            // Check if evaluation is already pending for this row
+            if (!this.pendingEvaluations.has(cacheKey)) {
+                this.pendingEvaluations.add(cacheKey);
+                // Evaluate expressions in options based on row data
+                const scope = {
+                    ...(data ?? {}),
+                    context: {
+                        eval: (path) => {
+                            return getSmart(data, path);
+                        },
+                    },
+                };
+                // Start async evaluation - will update injector when complete
+                this.expressionEvaluator.evaluate(this.mergedOptions(), scope).then((evaluatedOptions) => {
+                    // Create injector with evaluated options
+                    const tokenValue = {
+                        path: this.node.path,
+                        options: evaluatedOptions,
+                        caption: this.caption,
+                    };
+                    const newInjector = Injector.create({
+                        parent: this.injector,
+                        providers: [
+                            {
+                                provide: AXP_WIDGET_COLUMN_TOKEN,
+                                useValue: tokenValue,
+                            },
+                        ],
+                    });
+                    // Replace cached injector to force component recreation on next render
+                    this.rowInjectorsCache.delete(cacheKey);
+                    this.evictCacheIfNeeded();
+                    this.rowInjectorsCache.set(cacheKey, newInjector);
+                    this.pendingEvaluations.delete(cacheKey);
+                    // Schedule batched change detection (performance optimization)
+                    this.scheduleChangeDetection();
+                }).catch(() => {
+                    // If evaluation fails, keep using the fallback injector
+                    this.pendingEvaluations.delete(cacheKey);
+                });
+            }
+            // Create injector with original options as fallback (will be updated when evaluation completes)
+            const tokenValue = {
+                path: this.node.path,
+                options: this.mergedOptions(),
+                caption: this.caption,
+            };
+            rowInjector = Injector.create({
+                parent: this.injector,
+                providers: [
+                    {
+                        provide: AXP_WIDGET_COLUMN_TOKEN,
+                        useValue: tokenValue,
+                    },
+                ],
+            });
+            // Cache the initial injector
+            this.evictCacheIfNeeded();
+            this.rowInjectorsCache.set(cacheKey, rowInjector);
+        }
+        return rowInjector;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPWidgetColumnRendererComponent, isStandalone: false, selector: "axp-widget-column-renderer", inputs: { caption: "caption", customExpandIcon: "customExpandIcon", customCollapseIcon: "customCollapseIcon", customWidth: "customWidth", node: "node", footerTemplate: "footerTemplate", expandHandler: "expandHandler", sortEnabled: "sortEnabled", headerSortDirection: "headerSortDirection", headerSortPriority: "headerSortPriority", columnFixed: "columnFixed", cellTemplate: "cellTemplate", headerTemplate: "headerTemplate" }, outputs: { sortToggle: "sortToggle" }, providers: [
+            AXPWidgetCoreService,
+            { 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, usesOnChanges: true, ngImport: i0, template: `
+    <ng-template #header>
+      <div
+        class="axp-widget-column-header ax-w-full ax-flex ax-items-center ax-select-none"
+        [class.axp-widget-column-header--sortable]="sortEnabled"
+        [class.axp-widget-column-header--sort-active]="headerSortDirection === 'asc' || headerSortDirection === 'desc'"
+        [class.ax-gap-1]="!sortEnabled"
+        [style.justify-content]="sortEnabled ? 'flex-start' : getHeaderJustifyContent()"
+        (click)="onHeaderClick($event)"
+      >
+        <span
+          class="axp-widget-column-header__caption ax-truncate"
+          [class.axp-widget-column-header__caption--with-sort]="sortEnabled"
+          [style.text-align]="sortEnabled ? getHeaderTextAlign() : null"
+        >{{ caption | translate | async }}</span>
+        @if (sortEnabled) {
+          <span class="axp-widget-column-header__sort ax-flex ax-items-center ax-gap-0.5 ax-shrink-0">
+            @if (headerSortPriority !== undefined && headerSortPriority > 1) {
+              <span class="axp-widget-column-header__sort-priority ax-text-xs ax-opacity-70">{{ headerSortPriority }}</span>
+            }
+            <i
+              class="fa-solid fa-arrow-up-long ax-text-neutral-400"
+              [class.ax-text-primary]="headerSortDirection === 'asc'"
+            ></i>
+            <i
+              class="fa-solid fa-arrow-down-long ax-text-neutral-400"
+              [class.ax-text-primary]="headerSortDirection === 'desc'"
+            ></i>
+          </span>
+        }
+      </div>
+    </ng-template>
+    <ng-template #cell let-row>
+      <div
+        class="ax-w-full"
+        [class.ax-flex]="getCellUseFlexLayout()"
+        [class.ax-gap-2]="expandHandler"
+        [class.ax-items-center]="getCellUseFlexLayout()"
+        [style.justify-content]="getCellJustifyContent()"
+      >
+        @if (expandHandler) {
+          <div
+            (click)="handleExpandRow(row)"
+            class="ax-expand-handler"
+            [class.ax-invisible]="!hasExpandableRow(row)"
+            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 && row?.data) {
+          <ng-container
+            *ngComponentOutlet="component; injector: getRowInjector(row.data); inputs: getInputs(row.data)"
+          ></ng-container>
+        }
+      </div>
+    </ng-template>
+    <ng-template #footer></ng-template>
+  `, isInline: true, styles: [".axp-widget-column-header--sortable{cursor:pointer}.axp-widget-column-header__caption{min-width:0}.axp-widget-column-header__caption--with-sort{flex:1 1 0}.axp-widget-column-header__sort{opacity:0;transition:opacity .15s ease}.axp-widget-column-header--sortable:hover .axp-widget-column-header__sort,.axp-widget-column-header--sortable:focus-within .axp-widget-column-header__sort,.axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}.axp-widget-column-header__sort-priority{line-height:1}:host-context(.ax-data-table-head-cell.ax-interactive:hover) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell.ax-interactive:focus-within) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell) .axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], 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: "21.2.9", ngImport: i0, type: AXPWidgetColumnRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-widget-column-renderer', template: `
+    <ng-template #header>
+      <div
+        class="axp-widget-column-header ax-w-full ax-flex ax-items-center ax-select-none"
+        [class.axp-widget-column-header--sortable]="sortEnabled"
+        [class.axp-widget-column-header--sort-active]="headerSortDirection === 'asc' || headerSortDirection === 'desc'"
+        [class.ax-gap-1]="!sortEnabled"
+        [style.justify-content]="sortEnabled ? 'flex-start' : getHeaderJustifyContent()"
+        (click)="onHeaderClick($event)"
+      >
+        <span
+          class="axp-widget-column-header__caption ax-truncate"
+          [class.axp-widget-column-header__caption--with-sort]="sortEnabled"
+          [style.text-align]="sortEnabled ? getHeaderTextAlign() : null"
+        >{{ caption | translate | async }}</span>
+        @if (sortEnabled) {
+          <span class="axp-widget-column-header__sort ax-flex ax-items-center ax-gap-0.5 ax-shrink-0">
+            @if (headerSortPriority !== undefined && headerSortPriority > 1) {
+              <span class="axp-widget-column-header__sort-priority ax-text-xs ax-opacity-70">{{ headerSortPriority }}</span>
+            }
+            <i
+              class="fa-solid fa-arrow-up-long ax-text-neutral-400"
+              [class.ax-text-primary]="headerSortDirection === 'asc'"
+            ></i>
+            <i
+              class="fa-solid fa-arrow-down-long ax-text-neutral-400"
+              [class.ax-text-primary]="headerSortDirection === 'desc'"
+            ></i>
+          </span>
+        }
+      </div>
+    </ng-template>
+    <ng-template #cell let-row>
+      <div
+        class="ax-w-full"
+        [class.ax-flex]="getCellUseFlexLayout()"
+        [class.ax-gap-2]="expandHandler"
+        [class.ax-items-center]="getCellUseFlexLayout()"
+        [style.justify-content]="getCellJustifyContent()"
+      >
+        @if (expandHandler) {
+          <div
+            (click)="handleExpandRow(row)"
+            class="ax-expand-handler"
+            [class.ax-invisible]="!hasExpandableRow(row)"
+            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 && row?.data) {
+          <ng-container
+            *ngComponentOutlet="component; injector: getRowInjector(row.data); inputs: getInputs(row.data)"
+          ></ng-container>
+        }
+      </div>
+    </ng-template>
+    <ng-template #footer></ng-template>
+  `, providers: [
+                        AXPWidgetCoreService,
+                        { provide: AXDataTableColumnComponent, useExisting: AXPWidgetColumnRendererComponent },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['caption'], standalone: false, styles: [".axp-widget-column-header--sortable{cursor:pointer}.axp-widget-column-header__caption{min-width:0}.axp-widget-column-header__caption--with-sort{flex:1 1 0}.axp-widget-column-header__sort{opacity:0;transition:opacity .15s ease}.axp-widget-column-header--sortable:hover .axp-widget-column-header__sort,.axp-widget-column-header--sortable:focus-within .axp-widget-column-header__sort,.axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}.axp-widget-column-header__sort-priority{line-height:1}:host-context(.ax-data-table-head-cell.ax-interactive:hover) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell.ax-interactive:focus-within) .axp-widget-column-header__sort,:host-context(.ax-data-table-head-cell) .axp-widget-column-header--sort-active .axp-widget-column-header__sort{opacity:1}\n"] }]
+        }], 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
+            }], sortEnabled: [{
+                type: Input
+            }], headerSortDirection: [{
+                type: Input
+            }], headerSortPriority: [{
+                type: Input
+            }], columnFixed: [{
+                type: Input
+            }], sortToggle: [{
+                type: Output
+            }], cellTemplate: [{
+                type: Input
+            }], _contentCellTemplate: [{
+                type: ViewChild,
+                args: ['cell']
+            }], headerTemplate: [{
+                type: Input
+            }], _contentHeaderTemplate: [{
+                type: ViewChild,
+                args: ['header']
+            }] } });
+
+/** Continuous idle period required after widgets settle before committing baseline. */
+const FORM_SAVED_BASELINE_IDLE_MS = 500;
+/** Poll interval while waiting for widgets to settle (~20s max). */
+const FORM_SAVED_BASELINE_POLL_MS = 250;
+/** Max poll attempts for settle / ready (~20s); applies even when widgets are registered. */
+const FORM_SAVED_BASELINE_MAX_SETTLE_POLLS = 80;
+class AXPWidgetContainerComponent {
+    set context(value) {
+        this.syncExternalContext(value);
+    }
+    set functions(v) {
+        this.builderService.setFunctions(v);
+    }
+    constructor() {
+        this.contextService = inject(AXPContextStore);
+        this.builderService = inject(AXPWidgetCoreService);
+        this.onContextChanged = new EventEmitter();
+        this.wasHydrating = false;
+        this.isSavedCommitted = computed(() => this.contextService.isSavedCommitted(), ...(ngDevMode ? [{ debugName: "isSavedCommitted" }] : /* istanbul ignore next */ []));
+        this.isFormDirty = computed(() => {
+            if (!this.contextService.isSavedCommitted()) {
+                return false;
+            }
+            this.contextService.data();
+            return this.contextService.isDirty();
+        }, ...(ngDevMode ? [{ debugName: "isFormDirty" }] : /* istanbul ignore next */ []));
+        this.status = computed(() => this.builderService.status(), ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+        this.isBusy = computed(() => this.builderService.isBusy(), ...(ngDevMode ? [{ debugName: "isBusy" }] : /* istanbul ignore next */ []));
+        this.isHydrating = computed(() => this.builderService.isHydrating(), ...(ngDevMode ? [{ debugName: "isHydrating" }] : /* istanbul ignore next */ []));
+        /** True when registered widgets exist and none are rendering or hydrating. */
+        this.isWidgetsReady = computed(() => {
+            const count = this.builderService.registeredWidgetsCount();
+            if (count === 0) {
+                return false;
+            }
+            return this.builderService.isStructureReady() && !this.builderService.isBusy();
+        }, ...(ngDevMode ? [{ debugName: "isWidgetsReady" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const isDirty = this.isFormDirty();
+            const data = this.contextService.data();
+            const changeEvent = this.contextService.changeEvent();
+            if (!this.contextService.isChanged() && this.lastEmittedFormDirty === isDirty) {
+                return;
+            }
+            this.lastEmittedFormDirty = isDirty;
+            this.onContextChanged.emit({
+                ...changeEvent,
+                data: cloneDeep(data),
+                isFormDirty: isDirty,
+            });
+        });
+        effect(() => {
+            if (this.contextService.isSavedCommitted()) {
+                return;
+            }
+            this.builderService.registeredWidgetsCount();
+            this.builderService.isHydrating();
+            this.builderService.isStructureReady();
+            if (this.builderService.registeredWidgetsCount() === 0) {
+                return;
+            }
+            untracked(() => void this.settleSavedBaseline());
+        });
+        effect(() => {
+            const hydrating = this.builderService.isHydrating();
+            const savedCommitted = this.contextService.isSavedCommitted();
+            if (!savedCommitted) {
+                this.wasHydrating = hydrating;
+                return;
+            }
+            if (this.wasHydrating && !hydrating) {
+                untracked(() => this.scheduleRebaselineAfterHydration());
+            }
+            this.wasHydrating = hydrating;
+        });
+    }
+    refresh() {
+        this.builderService.refresh();
+    }
+    find(name) {
+        return this.builderService.waitForWidget(name);
+    }
+    syncExternalContext(value) {
+        const next = cloneDeep(value ?? {});
+        const current = this.contextService.data();
+        if (isEqual(current, next)) {
+            return;
+        }
+        if (this.contextService.isSavedCommitted() && this.isFormDirty()) {
+            return;
+        }
+        if (this.contextService.isSavedCommitted()) {
+            this.builderService.clearWidgets();
+            this.contextService.set(next);
+            void this.settleSavedBaseline();
+            return;
+        }
+        if (this.contextService.isChanged()) {
+            return;
+        }
+        this.builderService.clearWidgets();
+        this.contextService.set(next);
+        void this.settleSavedBaseline();
+    }
+    /** Commits the current data as saved after widget hydration settles. */
+    settleSavedBaseline() {
+        if (this.settlePromise) {
+            return this.settlePromise;
+        }
+        this.clearSavedBaselineTimer();
+        this.settlePromise = this.waitUntilSettled()
+            .then(() => {
+            this.contextService.commitSaved();
+            this.lastEmittedFormDirty = undefined;
+        })
+            .finally(() => {
+            this.settlePromise = undefined;
+        });
+        return this.settlePromise;
+    }
+    /** Resolves when widgets stay registered, structure-ready, and idle for {@link FORM_SAVED_BASELINE_IDLE_MS}. */
+    waitUntilSettled() {
+        return new Promise((resolve) => {
+            let idleRetries = 0;
+            let stableTimer;
+            let pollTimer;
+            const finish = (reason) => {
+                if (pollTimer) {
+                    clearTimeout(pollTimer);
+                }
+                if (stableTimer) {
+                    clearTimeout(stableTimer);
+                }
+                resolve();
+            };
+            const poll = () => {
+                const snapshot = this.builderService.getWidgetStateSnapshot();
+                const isSettled = snapshot.count > 0 &&
+                    snapshot.isStructureReady &&
+                    !snapshot.isHydrating &&
+                    !snapshot.isRendering;
+                if (isSettled) {
+                    if (!stableTimer) {
+                        stableTimer = setTimeout(() => finish('stable-idle'), FORM_SAVED_BASELINE_IDLE_MS);
+                    }
+                    return;
+                }
+                if (stableTimer) {
+                    clearTimeout(stableTimer);
+                    stableTimer = undefined;
+                }
+                idleRetries += 1;
+                if (idleRetries >= FORM_SAVED_BASELINE_MAX_SETTLE_POLLS) {
+                    finish('max-polls');
+                    return;
+                }
+                pollTimer = setTimeout(poll, FORM_SAVED_BASELINE_POLL_MS);
+            };
+            pollTimer = setTimeout(poll, FORM_SAVED_BASELINE_POLL_MS);
+        });
+    }
+    async replaceContext(value) {
+        this.clearSavedBaselineTimer();
+        this.settlePromise = undefined;
+        this.contextService.set(cloneDeep(value));
+        // Commit immediately so save/replace is clean even when `set()` no-ops (data already matches).
+        this.contextService.commitSaved();
+        this.lastEmittedFormDirty = undefined;
+        await this.settleSavedBaseline();
+    }
+    revertAndSettle() {
+        this.clearSavedBaselineTimer();
+        this.settlePromise = undefined;
+        this.contextService.revertToSaved();
+        this.lastEmittedFormDirty = undefined;
+    }
+    /** Re-commits baseline after post-load hydration when the user has not edited the form. */
+    scheduleRebaselineAfterHydration() {
+        this.clearSavedBaselineTimer();
+        this.savedBaselineTimer = setTimeout(() => {
+            this.savedBaselineTimer = undefined;
+            if (this.contextService.hasUserEditedSinceCommit()) {
+                return;
+            }
+            void this.waitUntilSettled().then(() => {
+                if (this.contextService.hasUserEditedSinceCommit()) {
+                    return;
+                }
+                this.contextService.commitSaved();
+                this.lastEmittedFormDirty = undefined;
+            });
+        }, FORM_SAVED_BASELINE_IDLE_MS);
+    }
+    clearSavedBaselineTimer() {
+        if (this.savedBaselineTimer) {
+            clearTimeout(this.savedBaselineTimer);
+            this.savedBaselineTimer = undefined;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPWidgetContainerComponent, isStandalone: false, selector: "axp-widgets-container", inputs: { context: "context", functions: "functions" }, outputs: { onContextChanged: "onContextChanged" }, host: { styleAttribute: "display: contents;" }, providers: [AXPWidgetCoreService, AXPContextStore], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-widgets-container',
+                    template: `<ng-content></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { style: 'display: contents;' },
+                    providers: [AXPWidgetCoreService, AXPContextStore],
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [], propDecorators: { onContextChanged: [{
+                type: Output
+            }], context: [{
+                type: Input
+            }], functions: [{
+                type: Input
+            }] } });
+
+class AXPWidgetPlaceholderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPWidgetPlaceholderComponent, isStandalone: true, selector: "axp-widget-placeholder", ngImport: i0, template: `<div>
+    <ax-skeleton class="ax-w-full ax-h-10 ax-rounded-md"></ax-skeleton>
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i1$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetPlaceholderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-widget-placeholder',
+                    template: `<div>
+    <ax-skeleton class="ax-w-full ax-h-10 ax-rounded-md"></ax-skeleton>
+  </div>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AXSkeletonModule],
+                    standalone: true,
+                }]
+        }] });
+
+class AXPWidgetRendererDirective {
+    //#endregion
+    //#endregion
+    constructor() {
+        this.parentNode = input(...(ngDevMode ? [undefined, { debugName: "parentNode" }] : /* istanbul ignore next */ []));
+        this.index = input(...(ngDevMode ? [undefined, { debugName: "index" }] : /* istanbul ignore next */ []));
+        this.mode = input.required(...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.node = input.required(...(ngDevMode ? [{ debugName: "node" }] : /* istanbul ignore next */ []));
+        this._options = signal({}, ...(ngDevMode ? [{ debugName: "_options" }] : /* istanbul ignore next */ []));
+        this.options = this._options.asReadonly();
+        this.onOptionsChanged = output();
+        this.onValueChanged = output();
+        this.onLoad = output();
+        //#region ----   Public API   ----
+        /**
+         * Signal that emits the component reference when it's ready
+         */
+        this._componentRefSignal = signal(null, ...(ngDevMode ? [{ debugName: "_componentRefSignal" }] : /* istanbul ignore next */ []));
+        this.componentRefSignal = this._componentRefSignal.asReadonly();
+        //#endregion
+        //#region ----   Properties   ----
+        this.mergedOptions = signal({}, ...(ngDevMode ? [{ debugName: "mergedOptions" }] : /* istanbul ignore next */ []));
+        this.injector = inject(Injector);
+        this.builderService = inject(AXPWidgetCoreService);
+        this.contextService = inject(AXPContextStore);
+        this.widgetRegistery = inject(AXPWidgetRegistryService);
+        this.unsubscriber = inject(AXUnsubscriber);
+        this.translateService = inject(AXTranslationService);
+        this.widgetService = inject(AXPWidgetRegistryService);
+        this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        this.isVisible = signal(true, ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
+        this.expressionEvaluators = new Map();
+        this.renderTimeoutId = null;
+        this.renderGeneration = 0;
+        this.hasInitialRender = false;
+        this.onContextChanged = new Subject();
+        this.onLoadEvent = new Subject();
+        //#region ----   Performance Optimization Properties   ----
+        this.contextUpdateQueue = new Set();
+        this.contextUpdateTimeout = null;
+        this.CONTEXT_UPDATE_DEBOUNCE_MS = 4; // ~250fps for large forms
+        // Removed visibility detection - not needed for current implementation
+        // Expression result caching
+        this.expressionCache = new Map();
+        this.EXPRESSION_CACHE_TTL = 500; // Cache for 500ms (increased for better hit rate)
+        // Options change tracking
+        this.lastAppliedOptions = null;
+        // Expression result tracking
+        this.lastExpressionResults = new Map();
+        // Buffer for context changes that happen before initial render completes
+        this.preRenderContextQueue = new Set();
+        /**
+         * Last context {@link AXPContextChangeEvent} handled by this renderer.
+         * Prevents re-queueing when the effect re-runs while `lastChange` in the store is unchanged
+         * (e.g. cascade refresh clears an already-empty dependent lookup).
+         */
+        this.lastProcessedContextChangeRef = null;
+        effect(async () => {
+            const changed = this.contextService.changeEvent();
+            // Don't trigger re-render during initial setup
+            if (!this.hasInitialRender) {
+                // Handle initial context set (state: 'initiated' with empty path means full context update)
+                if (changed.state === 'initiated' && (!changed.path || changed.path === '')) {
+                    // Mark that we need to re-evaluate all expressions when initial render completes
+                    // This handles the case where context is set before/during widget initialization
+                    this.preRenderContextQueue.add('*'); // Use '*' as a marker for full context initialization
+                    // console.log(`📝 [${this.node().type}] Buffered initial context set`);
+                }
+                else if (changed.path) {
+                    this.preRenderContextQueue.add(changed.path);
+                    // console.log(`📝 [${this.node().type}] Buffered pre-render context change: ${changed.path}`);
+                }
+                return;
+            }
+            // CRITICAL PERFORMANCE FIX: Only respond to relevant context changes
+            // Handle initial context set (full context update)
+            if (changed.state === 'initiated' && (!changed.path || changed.path === '')) {
+                // Full context initialization - trigger re-evaluation of all expressions
+                if (this.markContextChangeHandled(changed)) {
+                    this.clearExpressionCache();
+                    if (this.expressionEvaluators.size > 0) {
+                        await this.updateOptionsBasedOnContext();
+                        this.applyOptions();
+                    }
+                }
+            }
+            else if (changed.path && this.isRelevantContextChange(changed.path)) {
+                const changedPath = changed.path;
+                if (this.markContextChangeHandled(changed)) {
+                    this.queueContextUpdate(changedPath);
+                }
+            }
+            await this.updateVisibility();
+        });
+        this.builderService.onRefresh.pipe(this.unsubscriber.takeUntilDestroy).subscribe(async () => {
+            await this.processBatchedUpdates();
+        });
+    }
+    //#region ----   Expression Caching Methods   ----
+    getCachedExpressionResult(expressionKey) {
+        const cached = this.expressionCache.get(expressionKey);
+        if (cached && performance.now() - cached.timestamp < this.EXPRESSION_CACHE_TTL) {
+            // console.log(`💾 [${this.node().type}] Using cached expression result for '${expressionKey}'`);
+            return cached.value;
+        }
+        return null;
+    }
+    setCachedExpressionResult(expressionKey, value) {
+        this.expressionCache.set(expressionKey, {
+            value,
+            timestamp: performance.now(),
+        });
+    }
+    clearExpressionCache() {
+        this.expressionCache.clear();
+    }
+    isPathAffectingExpressions(changedPath) {
+        // console.log(
+        //   `🔍 [${this.node().type}] Checking if path '${changedPath}' affects expressions. Expression count: ${this.expressionEvaluators.size}`,
+        // );
+        // If widget has no expressions, no need to clear cache
+        if (this.expressionEvaluators.size === 0) {
+            // console.log(`🔍 [${this.node().type}] Path '${changedPath}' - no expressions, keeping cache`);
+            return false;
+        }
+        // Use the same logic as hasExpressionDependency to check for actual dependencies
+        if (this.hasExpressionDependency(changedPath)) {
+            // console.log(`🔍 [${this.node().type}] Path '${changedPath}' affects expressions - clearing cache`);
+            return true;
+        }
+        // console.log(`🔍 [${this.node().type}] Path '${changedPath}' does not affect expressions - keeping cache`);
+        return false;
+    }
+    //#endregion
+    //#region ----   Context Batching Methods   ----
+    /**
+     * Returns false when this renderer already handled the same store change event.
+     * Angular effects can re-run after async work while `changeEvent()` still references
+     * the previous `lastChange` object.
+     */
+    markContextChangeHandled(changed) {
+        if (this.lastProcessedContextChangeRef === changed) {
+            return false;
+        }
+        this.lastProcessedContextChangeRef = changed;
+        return true;
+    }
+    queueContextUpdate(path) {
+        if (path) {
+            // console.log(`🔄 [${this.node().type}] Queueing context update for path: ${path}`);
+            this.contextUpdateQueue.add(path);
+            // Clear existing timeout
+            if (this.contextUpdateTimeout) {
+                clearTimeout(this.contextUpdateTimeout);
+            }
+            // Debounce updates
+            this.contextUpdateTimeout = setTimeout(() => {
+                // console.log(`⚡ [${this.node().type}] Processing batched updates for ${this.contextUpdateQueue.size} paths`);
+                this.processBatchedUpdates();
+            }, this.CONTEXT_UPDATE_DEBOUNCE_MS);
+        }
+    }
+    async processBatchedUpdates() {
+        if (this.contextUpdateQueue.size === 0)
+            return;
+        const startTime = performance.now();
+        const paths = Array.from(this.contextUpdateQueue);
+        this.contextUpdateQueue.clear();
+        // console.log(`📊 [${this.node().type}] Processing ${paths.length} paths:`, paths);
+        // Clear expression cache only if changed paths affect this widget's expressions
+        const shouldClearCache = paths.some((path) => this.isPathAffectingExpressions(path));
+        if (shouldClearCache) {
+            // console.log(`🗑️ [${this.node().type}] Clearing expression cache due to expression-affecting path change`);
+            this.clearExpressionCache();
+        }
+        // Process updates in batches
+        const optionsStartTime = performance.now();
+        const hasOptionsUpdate = await this.updateOptionsBasedOnContext();
+        const optionsTime = performance.now() - optionsStartTime;
+        if (typeof hasOptionsUpdate === 'number' && hasOptionsUpdate > 0) {
+            // console.log(`🔧 [${this.node().type}] Options updated (${optionsTime.toFixed(2)}ms)`);
+            this.applyOptions();
+        }
+        // Check visibility for any of the changed paths
+        const visibilityStartTime = performance.now();
+        const visibilityNeedsUpdate = paths.some((path) => this.hasVisibilityDependency(path));
+        if (visibilityNeedsUpdate) {
+            // console.log(`👁️ [${this.node().type}] Visibility needs update`);
+            await this.updateVisibility();
+        }
+        const visibilityTime = performance.now() - visibilityStartTime;
+        // Emit context changes
+        paths.forEach((path) => {
+            this.onContextChanged.next({ path });
+        });
+        const totalTime = performance.now() - startTime;
+        // console.log(
+        //   `✅ [${this.node().type}] Batch processing completed in ${totalTime.toFixed(2)}ms (options: ${optionsTime.toFixed(2)}ms, visibility: ${visibilityTime.toFixed(2)}ms)`,
+        // );
+    }
+    //#endregion
+    //#region ----   Context Relevance Filtering   ----
+    isRelevantContextChange(changedPath) {
+        const node = this.node();
+        // 1. Direct path match - widget's own field
+        if (node.path === changedPath) {
+            return true;
+        }
+        // 2. Parent path match - widget is inside the changed container
+        if (node.path && changedPath.startsWith(node.path + '.')) {
+            return true;
+        }
+        // 3. Child path match - changed field is inside this widget's container
+        if (node.path && node.path.startsWith(changedPath + '.')) {
+            return true;
+        }
+        // 4. Expression dependency check - if widget has expressions that depend on this path
+        if (this.hasExpressionDependency(changedPath)) {
+            return true;
+        }
+        // 5. Trigger dependency check - if widget has triggers that depend on this path
+        if (this.hasTriggerDependency(changedPath)) {
+            return true;
+        }
+        // 7. Visibility dependency check - if widget's visibility depends on this path
+        if (this.hasVisibilityDependency(changedPath)) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * True when a context store path used in an expression (`context.eval`, `context.options`) is
+     * affected by `changedPath`.
+     */
+    contextStorePathDependsOnChangedPath(evalPath, changedPath) {
+        const normalizePath = (p) => {
+            if (!p)
+                return p;
+            const parts = p.split('.');
+            const last = parts[parts.length - 1];
+            if (last && last.endsWith('Id')) {
+                parts.splice(parts.length - 1, 1, last.slice(0, -2), 'id');
+            }
+            return parts.join('.');
+        };
+        const isSegmentSuffix = (a, b) => {
+            if (!a || !b)
+                return false;
+            const pa = a.split('.');
+            const pb = b.split('.');
+            if (pb.length > pa.length)
+                return false;
+            for (let i = 1; i <= pb.length; i++) {
+                if (pa[pa.length - i] !== pb[pb.length - i])
+                    return false;
+            }
+            return true;
+        };
+        const evalNorm = normalizePath(evalPath);
+        const changedNorm = normalizePath(changedPath);
+        const rawMatch = evalPath === changedPath ||
+            evalPath.startsWith(changedPath + '.') ||
+            changedPath.startsWith(evalPath + '.') ||
+            isSegmentSuffix(evalPath, changedPath) ||
+            isSegmentSuffix(changedPath, evalPath);
+        const normMatch = evalNorm === changedNorm ||
+            evalNorm.startsWith(changedNorm + '.') ||
+            changedNorm.startsWith(evalNorm + '.') ||
+            isSegmentSuffix(evalNorm, changedNorm) ||
+            isSegmentSuffix(changedNorm, evalNorm);
+        if (rawMatch || normMatch) {
+            return true;
+        }
+        return this.isPathAlias(evalPath, changedPath);
+    }
+    /**
+     * Whether an expression template string reads context store paths affected by `changedPath`.
+     */
+    expressionTextDependsOnContextPath(expressionValue, changedPath) {
+        const contextEvalRegex = /context\.eval\(['"]([^'\"]+)['"]\)/g;
+        let match;
+        while ((match = contextEvalRegex.exec(expressionValue)) !== null) {
+            if (this.contextStorePathDependsOnChangedPath(match[1], changedPath)) {
+                return true;
+            }
+        }
+        const contextOptionsQuoted = /context\.options\(\s*['"]([^'"]*)['"]\s*\)/g;
+        while ((match = contextOptionsQuoted.exec(expressionValue)) !== null) {
+            const sub = match[1];
+            const evalPath = sub === '' ? 'options' : `options.${sub}`;
+            if (this.contextStorePathDependsOnChangedPath(evalPath, changedPath)) {
+                return true;
+            }
+        }
+        const contextOptionsEmpty = /context\.options\(\s*\)/g;
+        while ((match = contextOptionsEmpty.exec(expressionValue)) !== null) {
+            if (this.contextStorePathDependsOnChangedPath('options', changedPath)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    hasExpressionDependency(changedPath) {
+        for (const [path, evaluator] of this.expressionEvaluators) {
+            if (path.includes(changedPath)) {
+                return true;
+            }
+            const node = this.node();
+            const expressionValue = this.getExpressionValueFromNode(node, path);
+            if (expressionValue && typeof expressionValue === 'string') {
+                if (this.expressionTextDependsOnContextPath(expressionValue, changedPath)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    isPathAlias(evalPath, changedPath) {
+        // Dynamic path alias detection based on 'Id' suffix pattern
+        // Examples: typeId.id <-> type.id, categoryId.name <-> category.name
+        // Check if evalPath ends with 'Id' and has a property
+        if (evalPath.endsWith('Id') && evalPath.includes('.')) {
+            const basePath = evalPath.substring(0, evalPath.lastIndexOf('Id'));
+            const property = evalPath.substring(evalPath.lastIndexOf('.') + 1);
+            const mappedPath = `${basePath}.${property}`;
+            if (changedPath === mappedPath) {
+                // console.log(`🔍 [${this.node().type}] Path alias detected: '${evalPath}' <-> '${changedPath}'`);
+                return true;
+            }
+        }
+        // Check if changedPath ends with 'Id' and has a property
+        if (changedPath.endsWith('Id') && changedPath.includes('.')) {
+            const basePath = changedPath.substring(0, changedPath.lastIndexOf('Id'));
+            const property = changedPath.substring(changedPath.lastIndexOf('.') + 1);
+            const mappedPath = `${basePath}.${property}`;
+            if (evalPath === mappedPath) {
+                // console.log(`🔍 [${this.node().type}] Path alias detected: '${evalPath}' <-> '${changedPath}'`);
+                return true;
+            }
+        }
+        // Check for direct 'Id' suffix mapping (e.g., typeId <-> type.id)
+        if (evalPath.endsWith('Id') && !evalPath.includes('.')) {
+            const basePath = evalPath.substring(0, evalPath.lastIndexOf('Id'));
+            const mappedPath = `${basePath}.id`;
+            if (changedPath === mappedPath) {
+                // console.log(`🔍 [${this.node().type}] Path alias detected: '${evalPath}' <-> '${changedPath}'`);
+                return true;
+            }
+        }
+        if (changedPath.endsWith('Id') && !changedPath.includes('.')) {
+            const basePath = changedPath.substring(0, changedPath.lastIndexOf('Id'));
+            const mappedPath = `${basePath}.id`;
+            if (evalPath === mappedPath) {
+                // console.log(`🔍 [${this.node().type}] Path alias detected: '${evalPath}' <-> '${changedPath}'`);
+                return true;
+            }
+        }
+        return false;
+    }
+    getExpressionValueFromNode(node, path) {
+        try {
+            // Navigate through the node structure to find the expression value
+            const pathParts = path.split('.');
+            let current = node.options || {};
+            // Navigate through the path parts
+            for (const part of pathParts) {
+                if (current && typeof current === 'object' && part in current) {
+                    current = current[part];
+                }
+                else {
+                    return null;
+                }
+            }
+            return typeof current === 'string' ? current : null;
+        }
+        catch (error) {
+            // console.error('Error extracting expression value from node:', error);
+            return null;
+        }
+    }
+    hasTriggerDependency(changedPath) {
+        const node = this.node();
+        const triggers = node.triggers || node.options?.['triggers'] || this.mergedOptions()?.triggers;
+        if (!triggers)
+            return false;
+        // Check if any trigger event depends on the changed path
+        for (const trigger of triggers) {
+            if (trigger.event && trigger.event.includes(changedPath)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    hasVisibilityDependency(changedPath) {
+        const node = this.node();
+        const visibility = node.options?.['visible'] || this.mergedOptions()?.visible;
+        if (!visibility || typeof visibility !== 'string')
+            return false;
+        if (this.expressionEvaluator.isExpression(visibility)) {
+            return this.expressionTextDependsOnContextPath(visibility, changedPath);
+        }
+        return false;
+    }
+    //#endregion
+    // Removed visibility detection methods - not needed for current implementation
+    // Detect input changes
+    ngOnChanges(changes) {
+        if (changes['mode'] || changes['node']) {
+            // Check if either 'mode' or 'node' has changed
+            this.rerenderComponent();
+        }
+    }
+    rerenderComponent() {
+        if (this.renderTimeoutId) {
+            clearTimeout(this.renderTimeoutId);
+            this.renderTimeoutId = null;
+        }
+        const generation = ++this.renderGeneration;
+        this.renderTimeoutId = setTimeout(async () => {
+            this.renderTimeoutId = null;
+            if (generation !== this.renderGeneration) {
+                return;
+            }
+            await this.loadComponent();
+        }, 0);
+    }
+    ngOnDestroy() {
+        if (this.renderTimeoutId) {
+            clearTimeout(this.renderTimeoutId);
+        }
+        if (this.contextUpdateTimeout) {
+            clearTimeout(this.contextUpdateTimeout);
+        }
+        if (this.componentRef) {
+            this.componentRef.destroy();
+        }
+        this.onLoadEvent.complete();
+    }
+    async loadComponent() {
+        if (this.isLoading()) {
+            return;
+        }
+        this.isLoading.set(true);
+        this.lastProcessedContextChangeRef = null;
+        try {
+            // Destroy the existing component if it exists
+            if (this.componentRef) {
+                this.componentRef.destroy();
+            }
+            this.viewContainerRef.clear();
+            // Reset the component ref signal
+            this._componentRefSignal.set(null);
+            //
+            const widget = this.widgetRegistery.resolve(this.node().type);
+            //
+            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) {
+                const defaultValue = property.schema.defaultValue;
+                if (typeof defaultValue === 'string' && this.expressionEvaluator.isExpression(defaultValue)) {
+                    // Evaluate expression for default value
+                    try {
+                        const evaluatedValue = await this.evaluateExpression(defaultValue);
+                        props[property.name] = evaluatedValue;
+                    }
+                    catch (error) {
+                        // console.error(`Error evaluating default value expression for property ${property.name}:`, error);
+                        props[property.name] = cloneDeep(defaultValue); // Fallback to original value
+                    }
+                }
+                else {
+                    // Use static default value
+                    props[property.name] = cloneDeep(defaultValue);
+                }
+            }
+            //
+            this.mergedOptions.set(merge(props, widget?.options, this.node().options) || {});
+            this.expressionEvaluators.clear();
+            // Register expressions from widget defaults and node options to cover related-entity cases
+            this.preprocessAndInitialOptions(cloneDeep(widget?.options));
+            this.preprocessAndInitialOptions(cloneDeep(this.node().options));
+            // Check if context is available before evaluating expressions
+            // If context is empty, expressions will be re-evaluated after initial render
+            const contextData = this.contextService.data();
+            const hasContextData = contextData && Object.keys(contextData).length > 0;
+            if (hasContextData) {
+                await this.updateOptionsBasedOnContext();
+            }
+            else {
+                // Context not yet available - expressions will be evaluated after initial render
+                // when context is set (handled by the effect and preRenderContextQueue)
+            }
+            //
+            this._options.update((val) => ({ ...val, ...this.mergedOptions() }));
+            // Evaluate default value
+            let defaultValue = this.node().defaultValue;
+            if (typeof defaultValue === 'string' && this.expressionEvaluator.isExpression(defaultValue)) {
+                defaultValue = await this.evaluateExpression(defaultValue);
+            }
+            //
+            const tokenValue = {
+                node: this.node(),
+                defaultValue: defaultValue,
+                options: this.mergedOptions(),
+                config: widget,
+            };
+            const token = Injector.create({
+                parent: this.injector,
+                providers: [
+                    {
+                        provide: AXP_WIDGET_TOKEN,
+                        useValue: tokenValue,
+                    },
+                ],
+            });
+            //
+            const loadingRef = this.viewContainerRef.createComponent(AXPWidgetPlaceholderComponent);
+            //
+            const com = await widget?.components[this.mode()]?.component();
+            if (!com) {
+                // console.error(`${this.node().type} widget component not found with mode: ${this.mode()}`);
+                return;
+            }
+            this.componentRef = this.viewContainerRef.createComponent(com, { injector: token });
+            this.instance = this.componentRef.instance;
+            this.instance.setStatus(AXPWidgetStatus.Rendering);
+            this.instance.parent = this.parentNode();
+            this.instance.index = this.index();
+            this.instance.mode = this.mode();
+            // Update the component ref signal for reactive access
+            this._componentRefSignal.set(this.componentRef);
+            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.updateVisibility();
+            await this.assignTriggers();
+            //
+            loadingRef.destroy();
+            // Mark that initial render is complete
+            this.hasInitialRender = true;
+            // Re-evaluate expressions after initial render to catch late-arriving related context
+            if (this.expressionEvaluators.size > 0) {
+                // console.log(`🔄 [${this.node().type}] Re-evaluating expressions after initial render`);
+                await this.updateOptionsBasedOnContext();
+                this.applyOptions();
+            }
+            // Re-evaluate visibility after initial render
+            await this.updateVisibility();
+            // Process any buffered pre-render context changes now that the component is ready
+            if (this.preRenderContextQueue.size > 0) {
+                // Check if we have a full context initialization marker
+                const hasFullContextInit = this.preRenderContextQueue.has('*');
+                if (hasFullContextInit) {
+                    // Full context was initialized - clear cache and re-evaluate all expressions
+                    // console.log(`🚀 [${this.node().type}] Processing initial context set - full re-evaluation`);
+                    this.clearExpressionCache();
+                    this.preRenderContextQueue.clear();
+                    // Re-evaluate all expressions since context is now available
+                    if (this.expressionEvaluators.size > 0) {
+                        await this.updateOptionsBasedOnContext();
+                        this.applyOptions();
+                    }
+                    await this.updateVisibility();
+                }
+                else {
+                    // console.log(
+                    //   `🚀 [${this.node().type}] Processing ${this.preRenderContextQueue.size} buffered pre-render changes`,
+                    // );
+                    this.preRenderContextQueue.forEach((p) => this.contextUpdateQueue.add(p));
+                    this.preRenderContextQueue.clear();
+                    await this.processBatchedUpdates();
+                }
+            }
+            // Emit load event after widget is fully loaded
+            const loadEvent = { sender: this, widget: this.instance };
+            this.onLoadEvent.next(loadEvent);
+            this.onLoad.emit(loadEvent);
+        }
+        catch (error) {
+            // console.error('Error loading component:', error);
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    applyOptions() {
+        if (!this.instance)
+            return;
+        const currentOptions = this.mergedOptions();
+        // Check if options have actually changed
+        if (this.hasOptionsChanged(currentOptions)) {
+            // console.log('applyOptions', this.node().path, '- options changed');
+            this._options.update((val) => ({ ...val, ...currentOptions }));
+            this.instance.setOptions(currentOptions);
+            this.lastAppliedOptions = cloneDeep(currentOptions); // Deep clone using Lodash
+        }
+        else {
+            // console.log('applyOptions', this.node().path, '- no changes, skipping');
+        }
+    }
+    hasOptionsChanged(newOptions) {
+        if (!this.lastAppliedOptions) {
+            return true; // First time, always apply
+        }
+        // Deep comparison of options using Lodash isEqual
+        return !isEqual(newOptions, this.lastAppliedOptions);
+    }
+    // Removed deepCloneValue method - now using Lodash cloneDeep
+    preprocessAndInitialOptions(obj, pathPrefix = '') {
+        if (!obj) {
+            return;
+        }
+        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.
+            //
+            // ROOT CAUSE: The expression evaluator was processing trigger action expressions (like console.log
+            // or widget.setValue calls) as part of the normal options preprocessing, treating them as dynamic
+            // expressions that needed immediate evaluation.
+            //
+            // SOLUTION: Detect when we're processing trigger actions and store them as static values without
+            // expression evaluation. This ensures trigger actions are only evaluated when the trigger's
+            // subscription callback actually fires (when the event condition is met).
+            //
+            // RESULT: Triggers now only execute when their event filters pass (e.g., when the specified
+            // context path changes), not during widget initialization.
+            if (currentPath.includes('triggers') && (key === 'action' || currentPath.endsWith('.action'))) {
+                // Apply static values directly without expression evaluation
+                this.mergedOptions.update((currentOptions) => {
+                    return set(currentOptions, currentPath, value);
+                });
+                return;
+            }
+            if (typeof value === 'string' && this.expressionEvaluator.isExpression(value)) {
+                // Cache dynamic expression for later evaluation
+                this.expressionEvaluators.set(currentPath, () => this.evaluateExpression(value));
+            }
+            else if (typeof value === 'object' &&
+                value !== null &&
+                (value.constructor === Object || Array.isArray(value))) {
+                // Recursively handle nested objects
+                this.preprocessAndInitialOptions(value, currentPath);
+            }
+            else {
+                // Apply static values directly
+                this.mergedOptions.update((currentOptions) => {
+                    return set(currentOptions, currentPath, value);
+                });
+            }
+        });
+    }
+    async updateOptionsBasedOnContext() {
+        // Early return if no expressions to evaluate
+        if (this.expressionEvaluators.size === 0) {
+            return 0;
+        }
+        // console.log(`🔍 [${this.node().type}] Evaluating ${this.expressionEvaluators.size} expressions`);
+        const updatePromises = Array.from(this.expressionEvaluators).map(async ([path, evaluator]) => {
+            // Check cache first
+            const cachedValue = this.getCachedExpressionResult(path);
+            if (cachedValue !== null) {
+                // console.log(`💾 [${this.node().type}] Using cached expression result for '${path}'`);
+                return { path, newValue: cachedValue, fromCache: true };
+            }
+            // Evaluate expression if not cached
+            const evalStartTime = performance.now();
+            const newValue = await evaluator();
+            const evalTime = performance.now() - evalStartTime;
+            // Check if result has actually changed using Lodash isEqual
+            // Important: We must check if the key exists in the map, not just compare values
+            // This handles the case where the expression evaluates to `undefined` for the first time
+            // Without this check, `undefined` would be incorrectly treated as "no change"
+            // because Map.get() returns `undefined` for non-existent keys
+            const hasLastValue = this.lastExpressionResults.has(path);
+            const lastValue = this.lastExpressionResults.get(path);
+            const hasChanged = !hasLastValue || !isEqual(newValue, lastValue);
+            if (hasChanged) {
+                // console.log(
+                //   `📝 [${this.node().type}] Expression '${path}' evaluated in ${evalTime.toFixed(2)}ms - value changed`,
+                // );
+                // Cache the result and track it
+                this.setCachedExpressionResult(path, newValue);
+                this.lastExpressionResults.set(path, cloneDeep(newValue));
+                return { path, newValue, fromCache: false, hasChanged: true };
+            }
+            else {
+                // console.log(
+                //   `📝 [${this.node().type}] Expression '${path}' evaluated in ${evalTime.toFixed(2)}ms - value unchanged, skipping update`,
+                // );
+                // Cache the result but don't update
+                this.setCachedExpressionResult(path, newValue);
+                this.lastExpressionResults.set(path, cloneDeep(newValue));
+                return { path, newValue, fromCache: false, hasChanged: false };
+            }
+        });
+        // Wait for all evaluators to complete
+        const updates = await Promise.all(updatePromises);
+        // Filter updates to only include those that have actually changed
+        const changedUpdates = updates.filter((update) => update.hasChanged !== false);
+        // Apply updates to mergedOptions only for changed values
+        if (changedUpdates.length > 0) {
+            this.mergedOptions.update((o) => {
+                const updatedOptions = { ...o };
+                changedUpdates.forEach(({ path, newValue }) => {
+                    set(updatedOptions, path, newValue);
+                });
+                return updatedOptions;
+            });
+        }
+        const cacheHits = updates.filter((update) => update.fromCache).length;
+        const skippedUpdates = updates.length - changedUpdates.length;
+        // console.log(
+        //   `📋 [${this.node().type}] Applied ${changedUpdates.length} expression updates (${cacheHits} cache hits, ${skippedUpdates} skipped)`,
+        // );
+        return changedUpdates.length;
+    }
+    async updateVisibility() {
+        const node = this.node();
+        const visibility = node.options?.['visible'] || this.mergedOptions()?.visible;
+        if (visibility === undefined || visibility === null) {
+            // Default to visible if no visibility option is set
+            this.show();
+            return;
+        }
+        let shouldBeVisible;
+        if (typeof visibility === 'boolean') {
+            shouldBeVisible = visibility;
+        }
+        else if (typeof visibility === 'string' && this.expressionEvaluator.isExpression(visibility)) {
+            // Evaluate expression for visibility
+            try {
+                const result = await this.evaluateExpression(visibility);
+                shouldBeVisible = Boolean(result);
+            }
+            catch (error) {
+                // console.error('Error evaluating visibility expression:', error);
+                shouldBeVisible = true; // Default to visible on error
+            }
+        }
+        else {
+            // Treat other values as truthy/falsy
+            shouldBeVisible = Boolean(visibility);
+        }
+        if (shouldBeVisible) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+    }
+    show() {
+        if (!this.isVisible()) {
+            this.isVisible.set(true);
+            if (this.componentRef && this.componentRef.location) {
+                this.loadComponent();
+                // this.componentRef.location.nativeElement.style.display = '';
+            }
+        }
+    }
+    hide() {
+        if (this.isVisible()) {
+            this.isVisible.set(false);
+            if (this.componentRef && this.componentRef.location) {
+                this.componentRef.destroy();
+                // this.componentRef.location.nativeElement.style.display = 'none';
+            }
+        }
+    }
+    async evaluateExpression(templateExpression) {
+        try {
+            const scope = this.buildExpressionScope();
+            return await this.expressionEvaluator.evaluate(templateExpression, scope);
+        }
+        catch (error) {
+            // console.error('Error evaluating expression:', error);
+            return false;
+        }
+    }
+    buildExpressionScope() {
+        return {
+            context: this.getContextScope(),
+            events: this.getEventScope(),
+            widget: this.getWidgetScope(),
+            methods: this.getFunctionScope(),
+            vars: this.getVariablesScope(),
+        };
+    }
+    getContextScope() {
+        return {
+            eval: (path) => {
+                //TODO: Handle array index
+                const fullPath = path.startsWith('>') ? `${this.instance?.parentPath()}.${path.substring(1)}` : path;
+                const value = this.contextService.getValue(fullPath);
+                return value;
+            },
+            set: (path, value) => {
+                this.contextService.update(path, value, { origin: 'user' });
+            },
+            data: () => {
+                return this.contextService.data();
+            },
+            isDirty: () => {
+                if (!this.contextService.isSavedCommitted()) {
+                    return false;
+                }
+                return this.contextService.isDirty();
+            },
+            /**
+             * Host/widget-under-edit `options` from the shared context store (same values as
+             * `context.eval('options' + (path ? '.' + path : ''))`), not `widget.options` on the nested
+             * property field instance. Uses one `getValue` so smart-path behavior matches `context.eval`.
+             */
+            options: (path) => {
+                if (path == null || path === '') {
+                    return this.contextService.getValue('options');
+                }
+                return this.contextService.getValue(`options.${path}`);
+            },
+        };
+    }
+    getEventScope() {
+        return {
+            context: (...paths) => {
+                return this.onContextChanged.pipe(filter((c) => {
+                    const activePaths = paths.filter((p) => !!p && p.trim().length > 0);
+                    // If no path filters specified, pass all events
+                    if (activePaths.length === 0) {
+                        return true;
+                    }
+                    // Ensure c.path exists
+                    if (!c.path) {
+                        return false;
+                    }
+                    return activePaths.some((path) => {
+                        // Pattern: "prefix*" - matches paths that start with prefix
+                        if (path.endsWith('*')) {
+                            const prefix = path.substring(0, path.length - 1);
+                            return c.path.startsWith(prefix);
+                        }
+                        // Pattern: "*suffix" - matches paths that end with suffix
+                        if (path.startsWith('*')) {
+                            const suffix = path.substring(1);
+                            return c.path.endsWith(suffix);
+                        }
+                        // Exact match
+                        return c.path === path;
+                    });
+                }));
+            },
+            from: (event) => get(this.instance.api(), event),
+            load: () => {
+                return this.onLoadEvent.asObservable();
+            },
+        };
+    }
+    getWidgetScope() {
+        return {
+            /** Resolved options for this renderer's widget instance (not the host / property-viewer target). */
+            options: (path) => {
+                const opts = this.instance && typeof this.instance.options === 'function'
+                    ? this.instance.options()
+                    : this.mergedOptions();
+                if (path == null || path === '') {
+                    return opts;
+                }
+                return getSmart(opts, path);
+            },
+            call: (name, ...args) => {
+                this.instance.call(name, ...args);
+            },
+            setValue: (value) => {
+                this.instance.setValue(value);
+            },
+            clear: () => {
+                this.instance.setValue(undefined);
+            },
+            refresh: async () => {
+                await this.updateOptionsBasedOnContext();
+                this.applyOptions();
+                const refresh = this.instance?.['refresh'];
+                if (refresh && typeof refresh === 'function') {
+                    refresh.bind(this.instance)();
+                }
+            },
+            output: (name) => {
+                return this.instance.output(name);
+            },
+            find: (id) => {
+                return this.builderService.getWidget(id);
+            },
+        };
+    }
+    getFunctionScope() {
+        const scope = {
+            sum: (values) => {
+                return sum(values);
+            },
+            translate: (text, options) => {
+                return this.translateService.translateAsync(text, options);
+            },
+            widgetInfo: (name) => {
+                return this.widgetService.resolve(name);
+            },
+        };
+        // Add custom functions from builder service
+        Object.entries(this.builderService.functions).forEach(([key, fn]) => {
+            scope[key] = (...args) => {
+                return fn(...args);
+            };
+        });
+        return scope;
+    }
+    getVariablesScope() {
+        return {
+            eval: (path) => get(this.builderService.variables, path),
+        };
+    }
+    async assignTriggers() {
+        const node = this.node();
+        // Check multiple possible locations for triggers
+        const triggers = node.triggers || node.options?.['triggers'] || this.mergedOptions()?.triggers;
+        if (!triggers) {
+            return;
+        }
+        for (const trigger of triggers) {
+            try {
+                const event = await this.evaluateTrigger(trigger.event);
+                if (event) {
+                    event.pipe(this.unsubscriber.takeUntilDestroy).subscribe(() => {
+                        const exec = async (action) => {
+                            if (!isEmpty(action) && isString(action)) {
+                                await this.evaluateAction(action);
+                            }
+                        };
+                        const actions = Array.isArray(trigger.action) ? trigger.action : [trigger.action];
+                        actions.forEach(async (a) => await exec(a));
+                    });
+                }
+            }
+            catch (error) {
+                // console.error('Error assigning trigger:', error);
+            }
+        }
+    }
+    async evaluateTrigger(templateExpression) {
+        try {
+            const scope = this.buildExpressionScope();
+            const result = await this.expressionEvaluator.evaluate(templateExpression, scope);
+            // Check if result is an Observable
+            if (result && typeof result.subscribe === 'function') {
+                return result;
+            }
+            else {
+                return null;
+            }
+        }
+        catch (error) {
+            // console.error('Error evaluating trigger expression:', error);
+            return null;
+        }
+    }
+    async evaluateAction(templateExpression) {
+        try {
+            const scope = this.buildExpressionScope();
+            await this.expressionEvaluator.evaluate(templateExpression, scope);
+        }
+        catch (error) {
+            // console.error('Error evaluating action expression:', templateExpression, error);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetRendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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", onLoad: "onLoad" }, providers: [
+            {
+                provide: AXUnsubscriber,
+            },
+        ], exportAs: ["widgetRenderer"], usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetRendererDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axp-widget-renderer]',
+                    exportAs: 'widgetRenderer',
+                    providers: [
+                        {
+                            provide: AXUnsubscriber,
+                        },
+                    ],
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [], propDecorators: { parentNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentNode", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], onOptionsChanged: [{ type: i0.Output, args: ["onOptionsChanged"] }], onValueChanged: [{ type: i0.Output, args: ["onValueChanged"] }], onLoad: [{ type: i0.Output, args: ["onLoad"] }] } });
+
+const COMPONENTS = [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective];
+class AXPWidgetCoreModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetCoreModule, declarations: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective], imports: [CommonModule, PortalModule, AXSkeletonModule, AXTranslationModule], exports: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetCoreModule, imports: [CommonModule, PortalModule, AXSkeletonModule, AXTranslationModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetCoreModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, PortalModule, AXSkeletonModule, AXTranslationModule],
+                    exports: [...COMPONENTS],
+                    declarations: [...COMPONENTS],
+                    providers: [],
+                }]
+        }] });
+
+//#endregion
+//#region ---- Mapping ----
+/**
+ * Converts a domain {@link AXPProperty} into a {@link AXPWidgetProperty} row for
+ * the layout property viewer (`AXPPropertyViewerService` and `buildPropertyViewerTabsFromProperties`).
+ */
+function mapAXPPropertyToWidgetProperty(property, options) {
+    const { group, order, valuePathPrefix, resolveTitle, resolveDescription } = options;
+    const path = valuePathPrefix ? `${valuePathPrefix}.${property.name}` : property.name;
+    const iface = property.interface;
+    const widgetType = iface?.type ?? 'text-editor';
+    const description = resolveDescription?.(property);
+    return {
+        name: property.name,
+        title: resolveTitle(property),
+        ...(description !== undefined && description !== '' ? { description } : {}),
+        group,
+        order,
+        schema: {
+            dataType: property.dataType,
+            interface: {
+                path,
+                name: property.name,
+                type: widgetType,
+                options: iface?.options ?? {},
+                ...(iface?.triggers ? { triggers: iface.triggers } : {}),
+            },
+        },
+        validations: property.validations,
+        visible: true,
+    };
+}
+//#endregion
+
+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 condenseShorthand(values) {
+        if (values.length !== 4) {
+            throw new Error('Expected 4 values for condensation.');
+        }
+        if (values[0] === values[1] && values[1] === values[2] && values[2] === values[3]) {
+            return `${values[0]}`;
+        }
+        else if (values[0] === values[2] && values[1] === values[3]) {
+            return `${values[0]} ${values[1]}`;
+        }
+        else if (values[1] === values[3]) {
+            return `${values[0]} ${values[1]} ${values[2]}`;
+        }
+        else {
+            return `${values[0]} ${values[1]} ${values[2]} ${values[3]}`;
+        }
+    }
+    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),
+        };
+    }
+    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),
+            ]),
+        };
+    }
+    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 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');
+        }
+        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');
+            }
+            yValue = parseFloat(secondMatch[1]);
+        }
+        return {
+            values: {
+                x: parseFloat(xValue),
+                y: yValue,
+            },
+            unit,
+        };
+    }
+    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)`;
+    }
+}
+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);
+        }
+    }
+    return nonEmptyBreakpoints;
+}
+
+//#region ----   Imports   ----
+//#endregion
+//#region ----   Helper Class   ----
+/**
+ * Helper class for serializing and deserializing AXPWidgetNode to/from JSON
+ */
+class AXPWidgetSerializationHelper {
+    /**
+     * Removes non-serializable properties from widget node
+     * @param node - The widget node to clean
+     * @param options - Serialization options
+     * @returns Cleaned widget node ready for JSON serialization
+     */
+    static cleanNode(node, options = {}) {
+        const { removeMeta = true, removeFunctions = true } = options;
+        // Deep clone to avoid mutating original
+        const cleaned = cloneDeep(node);
+        // Remove meta property if requested
+        if (removeMeta && 'meta' in cleaned) {
+            delete cleaned.meta;
+        }
+        // Remove functions from options, triggers, and valueTransforms
+        if (removeFunctions) {
+            this.removeFunctions(cleaned);
+        }
+        // Recursively clean children
+        if (cleaned.children && Array.isArray(cleaned.children)) {
+            cleaned.children = cleaned.children.map((child) => this.cleanNode(child, options));
+        }
+        return cleaned;
+    }
+    /**
+     * Recursively removes functions from object properties
+     */
+    static removeFunctions(obj) {
+        if (obj === null || obj === undefined) {
+            return;
+        }
+        if (Array.isArray(obj)) {
+            obj.forEach((item) => this.removeFunctions(item));
+            return;
+        }
+        if (typeof obj === 'object') {
+            for (const key in obj) {
+                if (typeof obj[key] === 'function') {
+                    delete obj[key];
+                }
+                else if (typeof obj[key] === 'object') {
+                    this.removeFunctions(obj[key]);
+                }
+            }
+        }
+    }
+    /**
+     * Converts AXPWidgetNode to JSON string
+     * @param node - The widget node to serialize
+     * @param options - Serialization options
+     * @returns JSON string representation of the widget node
+     */
+    static toJson(node, options = {}) {
+        const { pretty = false, ...cleanOptions } = options;
+        const cleaned = this.cleanNode(node, cleanOptions);
+        if (pretty) {
+            return JSON.stringify(cleaned, null, 2);
+        }
+        return JSON.stringify(cleaned);
+    }
+    /**
+     * Converts JSON string to AXPWidgetNode
+     * @param json - JSON string to deserialize
+     * @returns Parsed AXPWidgetNode object
+     * @throws Error if JSON is invalid or doesn't match AXPWidgetNode structure
+     */
+    static fromJson(json) {
+        try {
+            const parsed = JSON.parse(json);
+            // Basic validation - ensure it has at least a type property
+            if (!parsed || typeof parsed !== 'object') {
+                throw new Error('Invalid JSON: Expected an object');
+            }
+            if (!parsed.type) {
+                throw new Error('Invalid AXPWidgetNode: Missing required property "type"');
+            }
+            // Recursively validate and parse children if they exist
+            if (parsed.children && Array.isArray(parsed.children)) {
+                parsed.children = parsed.children.map((child) => this.fromJson(JSON.stringify(child)));
+            }
+            return parsed;
+        }
+        catch (error) {
+            if (error instanceof SyntaxError) {
+                throw new Error(`Invalid JSON string: ${error.message}`);
+            }
+            throw error;
+        }
+    }
+    /**
+     * Removes meta property from widget node (similar to designer service)
+     * @param node - The widget node to process
+     * @returns Widget node without meta property
+     */
+    static removeMeta(node) {
+        return this.cleanNode(node, { removeMeta: true, removeFunctions: false });
+    }
+}
+//#endregion
+
+//#region ---- Editor sub-categories (widget picker) ----
+const AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS = {
+    name: 'editor-text-inputs',
+    order: 1,
+    title: '@platform-layout-widgets:subcategories.editor-text-inputs.title',
+};
+const AXP_WIDGETS_EDITOR_SUB_NUMERIC = {
+    name: 'editor-numeric',
+    order: 2,
+    title: '@platform-layout-widgets:subcategories.editor-numeric.title',
+};
+const AXP_WIDGETS_EDITOR_SUB_DATETIME = {
+    name: 'editor-datetime',
+    order: 3,
+    title: '@platform-layout-widgets:subcategories.editor-datetime.title',
+};
+const AXP_WIDGETS_EDITOR_SUB_CHOICE = {
+    name: 'editor-choice',
+    order: 4,
+    title: '@platform-layout-widgets:subcategories.editor-choice.title',
+};
+const AXP_WIDGETS_EDITOR_SUB_RICH = {
+    name: 'editor-rich',
+    order: 5,
+    title: '@platform-layout-widgets:subcategories.editor-rich.title',
+};
+const AXP_WIDGETS_EDITOR_SUB_VISUAL = {
+    name: 'editor-visual',
+    order: 6,
+    title: '@platform-layout-widgets:subcategories.editor-visual.title',
+};
+const AXP_WIDGETS_EDITOR_SUB_COMPOSITE = {
+    name: 'editor-composite',
+    order: 7,
+    title: '@platform-layout-widgets:subcategories.editor-composite.title',
+};
+const AXP_WIDGETS_EDITOR_SUB_CONFIG = {
+    name: 'editor-config',
+    order: 8,
+    title: '@platform-layout-widgets:subcategories.editor-config.title',
+};
+//#endregion
+//#region ---- Layout sub-categories (widget picker) ----
+const AXP_WIDGETS_LAYOUT_SUB_SHELL = {
+    name: 'layout-shell',
+    order: 1,
+    title: '@platform-layout-widgets:subcategories.layout-shell.title',
+};
+const AXP_WIDGETS_LAYOUT_SUB_GRID = {
+    name: 'layout-grid',
+    order: 2,
+    title: '@platform-layout-widgets:subcategories.layout-grid.title',
+};
+const AXP_WIDGETS_LAYOUT_SUB_SURFACES = {
+    name: 'layout-surfaces',
+    order: 3,
+    title: '@platform-layout-widgets:subcategories.layout-surfaces.title',
+};
+const AXP_WIDGETS_LAYOUT_SUB_TABS = {
+    name: 'layout-tabs',
+    order: 4,
+    title: '@platform-layout-widgets:subcategories.layout-tabs.title',
+};
+const AXP_WIDGETS_LAYOUT_SUB_LISTS = {
+    name: 'layout-lists',
+    order: 5,
+    title: '@platform-layout-widgets:subcategories.layout-lists.title',
+};
+const AXP_WIDGETS_LAYOUT_SUB_UTILITY = {
+    name: 'layout-utility',
+    order: 6,
+    title: '@platform-layout-widgets:subcategories.layout-utility.title',
+};
+//#endregion
+//#region ---- Action sub-categories (widget picker) ----
+const AXP_WIDGETS_ACTION_SUB_CONTROLS = {
+    name: 'action-controls',
+    order: 1,
+    title: '@platform-layout-widgets:subcategories.action-controls.title',
+};
+//#endregion
+//#region ---- Advance sub-categories (widget picker) ----
+const AXP_WIDGETS_ADVANCE_SUB_MEDIA = {
+    name: 'advance-media',
+    order: 1,
+    title: '@platform-layout-widgets:subcategories.advance-media.title',
+};
+const AXP_WIDGETS_ADVANCE_SUB_INPUT = {
+    name: 'advance-input',
+    order: 2,
+    title: '@platform-layout-widgets:subcategories.advance-input.title',
+};
+const AXP_WIDGETS_ADVANCE_SUB_DATA = {
+    name: 'advance-data',
+    order: 3,
+    title: '@platform-layout-widgets:subcategories.advance-data.title',
+};
+const AXP_WIDGETS_ADVANCE_SUB_TOOLS = {
+    name: 'advance-tools',
+    order: 4,
+    title: '@platform-layout-widgets:subcategories.advance-tools.title',
+};
+//#endregion
+/** Normalizes widget categories to an array for iteration and serialization. */
+function normalizeWidgetCategories(categories) {
+    if (categories == null) {
+        return [];
+    }
+    return Array.isArray(categories) ? categories : [categories];
+}
+const AXP_WIDGETS_LAYOUT_CATEGORY = {
+    name: 'layout',
+    order: 1,
+    title: '@platform-layout-widgets:categories.layout.title',
+};
+const AXP_WIDGETS_EDITOR_CATEGORY = {
+    name: 'editor',
+    order: 2,
+    title: '@platform-layout-widgets:categories.editor.title',
+};
+const AXP_WIDGETS_ACTION_CATEGORY = {
+    name: 'action',
+    order: 3,
+    title: '@platform-layout-widgets:categories.action.title',
+};
+const AXP_WIDGETS_ADVANCE_CATEGORY = {
+    name: 'advance',
+    order: 4,
+    title: '@platform-layout-widgets:categories.advance.title',
+};
+/** AI category tab in the widget picker (metadata); unrelated to Widgets:GetForAI listing scope. */
+const AXP_WIDGETS_AI_CATEGORY = {
+    name: 'ai',
+    order: 5,
+    title: '@platform-layout-widgets:categories.ai.title',
+};
+const AXP_WIDGETS_CATEGORIES = [
+    AXP_WIDGETS_LAYOUT_CATEGORY,
+    AXP_WIDGETS_EDITOR_CATEGORY,
+    AXP_WIDGETS_ACTION_CATEGORY,
+    AXP_WIDGETS_ADVANCE_CATEGORY,
+    AXP_WIDGETS_AI_CATEGORY,
+];
+
+/**
+ * Standalone cell renderer using the same column-mode widget pipeline as {@link AXPWidgetColumnRendererComponent}.
+ */
+class AXPWidgetColumnCellComponent {
+    constructor() {
+        this.caption = '';
+        this.mergedOptions = signal({}, ...(ngDevMode ? [{ debugName: "mergedOptions" }] : /* istanbul ignore next */ []));
+        this.rowInjectorsCache = new Map();
+        this.hasExpressions = false;
+        this.pendingEvaluations = new Set();
+        this.changeDetectionScheduled = false;
+        this.injector = inject(Injector);
+        this.cdr = inject(ChangeDetectorRef);
+        this.widgetRegistry = inject(AXPWidgetRegistryService);
+        this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
+    }
+    async ngOnInit() {
+        await this.resolveComponent();
+    }
+    ngOnChanges(changes) {
+        if (changes['node'] && !changes['node'].firstChange) {
+            void this.resolveComponent();
+        }
+        if (changes['rowData'] && !changes['rowData'].firstChange) {
+            this.rowInjectorsCache.clear();
+            this.cdr.markForCheck();
+        }
+    }
+    getInputs(data) {
+        return {
+            rawValue: get(data, this.node.path),
+            rowData: data,
+        };
+    }
+    getRowInjector(data) {
+        const cacheKey = this.getCacheKey(data);
+        let rowInjector = this.rowInjectorsCache.get(cacheKey);
+        if (!rowInjector) {
+            if (!this.hasExpressions) {
+                rowInjector = this.createRowInjector(this.mergedOptions());
+                this.rowInjectorsCache.set(cacheKey, rowInjector);
+                return rowInjector;
+            }
+            if (!this.pendingEvaluations.has(cacheKey)) {
+                this.pendingEvaluations.add(cacheKey);
+                const scope = {
+                    ...(data ?? {}),
+                    context: {
+                        eval: (path) => getSmart(data, path),
+                    },
+                };
+                void this.expressionEvaluator.evaluate(this.mergedOptions(), scope).then((evaluatedOptions) => {
+                    const newInjector = this.createRowInjector(evaluatedOptions);
+                    this.rowInjectorsCache.delete(cacheKey);
+                    this.rowInjectorsCache.set(cacheKey, newInjector);
+                    this.pendingEvaluations.delete(cacheKey);
+                    this.scheduleChangeDetection();
+                }).catch(() => {
+                    this.pendingEvaluations.delete(cacheKey);
+                });
+            }
+            rowInjector = this.createRowInjector(this.mergedOptions());
+            this.rowInjectorsCache.set(cacheKey, rowInjector);
+        }
+        return rowInjector;
+    }
+    async resolveComponent() {
+        const widget = this.widgetRegistry.resolve(this.node.type);
+        const mode = 'column';
+        this.component = await widget?.components[mode]?.component();
+        const props = widget?.components[mode]?.properties
+            ?.filter((c) => c.schema.defaultValue)
+            .map((c) => ({ [c.name]: c.schema.defaultValue }))
+            .reduce((acc, curr) => ({ ...acc, ...curr }), {});
+        this.mergedOptions.set(merge(props, this.node.options) || {});
+        this.hasExpressions = this.checkForExpressions(this.mergedOptions());
+        this.rowInjectorsCache.clear();
+        this.cdr.markForCheck();
+    }
+    createRowInjector(options) {
+        return Injector.create({
+            parent: this.injector,
+            providers: [
+                {
+                    provide: AXP_WIDGET_COLUMN_TOKEN,
+                    useValue: {
+                        path: this.node.path,
+                        options,
+                        caption: this.caption,
+                    },
+                },
+            ],
+        });
+    }
+    getCacheKey(data) {
+        const id = data['id'];
+        if (id != null) {
+            return `row-${String(id)}`;
+        }
+        return `row-${Object.keys(data).length}`;
+    }
+    checkForExpressions(obj) {
+        if (typeof obj === 'string') {
+            return this.expressionEvaluator.isExpression(obj);
+        }
+        if (Array.isArray(obj)) {
+            return obj.some((item) => this.checkForExpressions(item));
+        }
+        if (obj && typeof obj === 'object') {
+            return Object.values(obj).some((value) => this.checkForExpressions(value));
+        }
+        return false;
+    }
+    scheduleChangeDetection() {
+        if (this.changeDetectionScheduled) {
+            return;
+        }
+        this.changeDetectionScheduled = true;
+        requestAnimationFrame(() => {
+            this.cdr.markForCheck();
+            this.changeDetectionScheduled = false;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetColumnCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPWidgetColumnCellComponent, isStandalone: true, selector: "axp-widget-column-cell", inputs: { node: "node", rowData: "rowData", caption: "caption" }, usesOnChanges: true, ngImport: i0, template: `
+    @if (component && rowData) {
+      <ng-container
+        *ngComponentOutlet="component; injector: getRowInjector(rowData); inputs: getInputs(rowData)"
+      ></ng-container>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetColumnCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-widget-column-cell',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgComponentOutlet],
+                    template: `
+    @if (component && rowData) {
+      <ng-container
+        *ngComponentOutlet="component; injector: getRowInjector(rowData); inputs: getInputs(rowData)"
+      ></ng-container>
+    }
+  `,
+                }]
+        }], propDecorators: { node: [{
+                type: Input,
+                args: [{ required: true }]
+            }], rowData: [{
+                type: Input,
+                args: [{ required: true }]
+            }], caption: [{
+                type: Input
+            }] } });
+
+/** Trace namespace for lookup cascade / widget trigger diagnostics (Debug Mode only). */
+const WIDGET_CASCADE_TRACE_NS = 'widget-cascade';
+
+const AXP_STYLING_PROPERTY_GROUP = {
+    name: 'styling',
+    order: 1,
+    title: 'Styling',
+};
+const AXP_DATA_PROPERTY_GROUP = {
+    name: 'data',
+    order: 7,
+    title: 'Data',
+};
+const AXP_BEHAVIOR_PROPERTY_GROUP = {
+    name: 'behavior',
+    order: 2,
+    title: 'Behavior',
+};
+const AXP_WIDGET_PROPERTY_GROUP = {
+    name: 'widget',
+    order: 0,
+    title: 'Widget',
+};
+const AXP_VALIDATION_PROPERTY_GROUP = {
+    name: 'validation',
+    order: 4,
+    title: 'Validation',
+};
+const AXP_APPEARANCE_PROPERTY_GROUP = {
+    name: 'appearance',
+    order: 2,
+    title: 'Appearance',
+};
+const AXP_ANIMATION_PROPERTY_GROUP = {
+    name: 'animation',
+    order: 5,
+    title: 'Animation',
+};
+const AXP_TRIGGERS_PROPERTY_GROUP = {
+    name: 'triggers',
+    order: 3,
+    title: 'Triggers',
+};
+
+/**
+ * Single property that edits all data-source-related options (dataSource, valueField, textField, filters)
+ * in one dedicated widget. Uses path: 'options' and setValue with merge (same pattern as flex-options).
+ */
+const AXP_DATA_SOURCE_OPTIONS_PROPERTY = {
+    name: 'dataSourceOptions',
+    title: 'Data Source',
+    group: AXP_DATA_PROPERTY_GROUP,
+    showLabel: false,
+    schema: {
+        dataType: 'object',
+        interface: {
+            name: 'dataSourceOptions',
+            path: 'options',
+            type: 'data-source-options',
+            options: {},
+        },
+    },
+    visible: true,
+};
+// export const AXP_DATA_SOURCE_PROPERTY: AXPWidgetProperty = {
+//   name: 'dataSource',
+//   title: 'Data Source',
+//   group: AXP_DATA_PROPERTY_GROUP,
+//   schema: {
+//     dataType: 'object',
+//     interface: {
+//       name: 'dataSource',
+//       path: 'options.dataSource',
+//       type: AXPWidgetsCatalog.select,
+//       valueTransforms: objectKeyValueTransforms('name'),
+//       options: {
+//         valueField: 'name',
+//         textField: 'title',
+//         dataSource: 'dataSources',
+//         hasClearButton: true,
+//         allowSearch: true,
+//       },
+//     },
+//   },
+//   visible: true,
+// };
+// export const AXP_DATA_SOURCE_VALUE_FIELD: AXPWidgetProperty = {
+//   name: 'valueField',
+//   title: 'Value Field',
+//   group: AXP_DATA_PROPERTY_GROUP,
+//   schema: {
+//     dataType: 'string',
+//     interface: {
+//       name: 'valueField',
+//       path: 'options.valueField',
+//       type: AXPWidgetsCatalog.text,
+//       options: {
+//         hasClearButton: true,
+//       },
+//       triggers: [
+//         {
+//           event: `{{ events.context('options.dataSource') }}`,
+//           action: `{{ context.set('options.valueField',widget.find('dataSource').output('item').valueField?.name);  }}`,
+//         },
+//       ],
+//     },
+//   },
+//   visible: true,
+// };
+// export const AXP_DATA_SOURCE_TEXT_FIELD: AXPWidgetProperty = {
+//   name: 'textField',
+//   title: 'Text Field',
+//   group: AXP_DATA_PROPERTY_GROUP,
+//   schema: {
+//     dataType: 'string',
+//     interface: {
+//       name: 'textField',
+//       path: 'options.textField',
+//       type: AXPWidgetsCatalog.text,
+//       options: {
+//         hasClearButton: true,
+//       },
+//       triggers: [
+//         {
+//           event: `{{ events.context('options.dataSource') }}`,
+//           action: `{{ context.set('options.textField',widget.find('dataSource').output('item').textField?.name);  }}`,
+//         },
+//       ],
+//     },
+//   },
+//   visible: true,
+// };
+// /** Use AXP_DATA_SOURCE_OPTIONS_PROPERTY for a single unified data-source editor, or the three below for separate fields. */
+// export const AXP_DATA_SOURCE_PROPERTIES = [
+//   AXP_DATA_SOURCE_PROPERTY,
+//   AXP_DATA_SOURCE_VALUE_FIELD,
+//   AXP_DATA_SOURCE_TEXT_FIELD,
+// ];
+
+const AXP_NAME_PROPERTY = createStringProperty({
+    name: 'name',
+    title: 'Name',
+    group: AXP_WIDGET_PROPERTY_GROUP,
+});
+const AXP_THEME_PROPERTY = {
+    name: 'theme',
+    title: 'Theme',
+    group: AXP_STYLING_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        defaultValue: { id: 'default', title: 'Default' },
+        interface: {
+            name: 'theme',
+            path: 'options.theme',
+            type: AXPWidgetsCatalog.select,
+            options: {
+                dataSource: [
+                    {
+                        id: 'default',
+                        title: 'Default',
+                    },
+                    {
+                        id: 'light',
+                        title: 'Light',
+                    },
+                    {
+                        id: 'dark',
+                        title: 'Dark',
+                    },
+                ],
+            },
+        },
+    },
+    visible: true,
+};
+const AXP_DIRECTION_PROPERTY = {
+    name: 'direction',
+    title: 'Direction',
+    group: AXP_STYLING_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        defaultValue: { id: 'horizontal' },
+        interface: {
+            name: 'direction',
+            path: 'options.direction',
+            type: AXPWidgetsCatalog.select,
+            options: {
+                dataSource: [
+                    {
+                        id: 'horizontal',
+                        title: 'Horizontal',
+                    },
+                    {
+                        id: 'vertical',
+                        title: 'Vertical',
+                    },
+                ],
+            },
+        },
+    },
+    visible: true,
+};
+const AXP_COLOR_PROPERTY = {
+    name: 'color',
+    title: 'Color',
+    group: AXP_STYLING_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        interface: {
+            path: 'options.color',
+            options: {
+                hasClearButton: true,
+            },
+            type: AXPWidgetsCatalog.color,
+        },
+    },
+    visible: true,
+};
+const AXP_FONT_SIZE_PROPERTY = {
+    name: 'fontSize',
+    title: 'Font Size',
+    group: AXP_STYLING_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        defaultValue: '12px',
+        interface: {
+            name: 'fontSize',
+            path: 'options.fontSize',
+            type: AXPWidgetsCatalog.text,
+        },
+    },
+    visible: true,
+};
+const AXP_BG_COLOR_PROPERTY = {
+    name: 'backgroundColor',
+    title: 'Background Color',
+    group: AXP_STYLING_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        interface: {
+            path: 'options.backgroundColor',
+            options: {
+                hasClearButton: true,
+            },
+            type: AXPWidgetsCatalog.color,
+        },
+    },
+    visible: true,
+};
+
+const AXP_CONTENT_PROPERTY = createStringProperty({
+    name: 'content',
+    title: 'Content',
+    path: 'options.content',
+    group: AXP_DATA_PROPERTY_GROUP,
+});
+const AXP_PLACEHOLDER_PROPERTY = createStringProperty({
+    name: 'placeholder',
+    title: 'Placeholder',
+    path: 'options.placeholder',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_DATA_PATH_PROPERTY = createStringProperty({
+    name: 'path',
+    title: 'Data Path',
+    group: AXP_DATA_PROPERTY_GROUP,
+});
+const AXP_DISABLED_PROPERTY = createBooleanProperty({
+    name: 'disabled',
+    title: 'Disabled',
+    path: 'options.disabled',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_READONLY_PROPERTY = createBooleanProperty({
+    name: 'readonly',
+    title: 'Readonly',
+    path: 'options.readonly',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_ALLOW_MULTIPLE_PROPERTY = createBooleanProperty({
+    name: 'multiple',
+    title: 'Multiple',
+    path: 'options.multiple',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_ALLOW_CLEAR_PROPERTY = createBooleanProperty({
+    name: 'allowClear',
+    title: 'Allow Clear',
+    path: 'options.allowClear',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_HAS_LABEL_PROPERTY = createBooleanProperty({
+    name: 'hasLabel',
+    title: 'Label',
+    path: 'options.hasLabel',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    defaultValue: true,
+});
+const AXP_HAS_ICON_PROPERTY = createBooleanProperty({
+    name: 'hasIcon',
+    title: 'Icon',
+    path: 'options.hasIcon',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    defaultValue: true,
+});
+const AXP_ICON_PROPERTY = createStringProperty({
+    name: 'icon',
+    title: 'Icon Name',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    path: 'options.icon',
+});
+const AXP_IS_LOADING_PROPERTY = createBooleanProperty({
+    name: 'loading',
+    title: 'Is Loading',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    path: 'options.loading',
+});
+const AXP_HAS_CLEAR_BUTTON_PROPERTY = createBooleanProperty({
+    name: 'hasClearButton',
+    title: 'Clear Button',
+    path: 'options.hasClearButton',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    defaultValue: false,
+});
+const AXP_ALLOW_SEARCH_PROPERTY = createBooleanProperty({
+    name: 'allowSearch',
+    title: 'Allow Search',
+    path: 'options.allowSearch',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    defaultValue: false,
+});
+const AXP_HAS_COPY_ICON_PROPERTY = createBooleanProperty({
+    name: 'hasCopyIcon',
+    title: 'Copy Icon',
+    path: 'options.hasCopyIcon',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    defaultValue: true,
+});
+const AXP_HAS_EYE_ICON_PROPERTY = createBooleanProperty({
+    name: 'hasEyeIcon',
+    title: 'Eye Icon',
+    path: 'options.hasEyeIcon',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    defaultValue: true,
+});
+const AXP_DOWNLOADABLE_PROPERTY = createBooleanProperty({
+    name: 'downloadable',
+    title: 'Downloadable',
+    path: 'options.downloadable',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    defaultValue: true,
+});
+// Converted with createStringProperty
+const AXP_TRULY_TEXT_PROPERTY = createStringProperty({
+    name: 'trulyText',
+    title: 'Truly Text',
+    path: 'options.trulyText',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_FALSY_TEXT_PROPERTY = createStringProperty({
+    name: 'falsyText',
+    title: 'Falsy Text',
+    path: 'options.falsyText',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_TEXT_PROPERTY = createStringProperty({
+    name: 'text',
+    title: 'Text',
+    path: 'options.text',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_TITLE_PROPERTY = createStringProperty({
+    name: 'title',
+    title: 'Title',
+    path: 'options.title',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_LABEL_PROPERTY = createStringProperty({
+    name: 'label',
+    title: 'Label',
+    path: 'options.label',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    defaultValue: '',
+});
+const AXP_VALUE_FIELD_PROPERTY = createStringProperty({
+    name: 'valueField',
+    title: 'Value Field',
+    path: 'options.valueField',
+    group: AXP_DATA_PROPERTY_GROUP,
+    defaultValue: 'id',
+});
+const AXP_TEXT_FIELD_PROPERTY = createStringProperty({
+    name: 'textField',
+    title: 'Text Field',
+    path: 'options.textField',
+    group: AXP_DATA_PROPERTY_GROUP,
+    defaultValue: 'title',
+});
+const AXP_DESCRIPTION_PROPERTY = createStringProperty({
+    name: 'description',
+    title: 'Description',
+    path: 'options.description',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_STYLE_COLOR_PROPERTY = createSelectProperty({
+    name: 'color',
+    title: 'Color',
+    dataSource: AX_STYLE_COLOR_TYPES,
+    defaultValue: 'primary',
+    path: 'options.color',
+    group: AXP_STYLING_PROPERTY_GROUP,
+});
+const AXP_STYLE_LOOK_PROPERTY = createSelectProperty({
+    name: 'look',
+    title: 'Look',
+    dataSource: AX_STYLE_LOOK_TYPES,
+    defaultValue: 'solid',
+    path: 'options.look',
+    group: AXP_STYLING_PROPERTY_GROUP,
+});
+const AXP_TEXT_ALIGN_PROPERTY = createSelectProperty({
+    name: 'textAlign',
+    title: 'Text Align',
+    path: 'options.textAlign',
+    group: AXP_STYLING_PROPERTY_GROUP,
+    defaultValue: { id: 'left', title: 'Left' },
+    dataSource: [
+        { id: 'left', title: 'Left' },
+        { id: 'center', title: 'Center' },
+        { id: 'right', title: 'Right' },
+        { id: 'justify', title: 'Justify' },
+    ],
+});
+const AXP_VERTICAL_ALIGN_PROPERTY = createSelectProperty({
+    name: 'verticalAlign',
+    title: 'Vertical Align',
+    path: 'options.verticalAlign',
+    group: AXP_STYLING_PROPERTY_GROUP,
+    defaultValue: { id: 'top', title: 'Top' },
+    dataSource: [
+        { id: 'top', title: 'Top' },
+        { id: 'middle', title: 'Middle' },
+        { id: 'bottom', title: 'Bottom' },
+        { id: 'baseline', title: 'Baseline' },
+    ],
+});
+const AXP_DATE_FORMAT_PROPERTY = createSelectProperty({
+    name: 'format',
+    title: 'Format',
+    dataSource: [
+        { id: 'date', title: 'Date' },
+        { id: 'datetime', title: 'DateTime' },
+        { id: 'time', title: 'Time' },
+    ],
+    defaultValue: { id: 'date', title: 'Date' },
+    path: 'options.format',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_DATE_DEPTH_PROPERTY = createSelectProperty({
+    name: 'depth',
+    title: 'Input Depth',
+    dataSource: [
+        { id: 'year', title: 'Year' },
+        { id: 'month', title: 'Month' },
+        { id: 'day', title: 'Day' },
+    ],
+    path: 'options.depth',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    defaultValue: { id: 'day', title: 'Day' },
+});
+/** Max span in days between from/to when filter operation is `between`. */
+const AXP_DATE_RANGE_LIMIT_PROPERTY = createNumberProperty({
+    name: 'limit',
+    title: 'Range Limit (Days)',
+    path: 'options.limit',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+function booleanDefaultProperty(defaultValue = false) {
+    return {
+        name: 'defaultValue',
+        title: 'Default Value',
+        group: AXP_DATA_PROPERTY_GROUP,
+        schema: {
+            dataType: 'boolean',
+            defaultValue: defaultValue,
+            interface: {
+                name: 'defaultValue',
+                path: 'defaultValue',
+                type: AXPWidgetsCatalog.toggle,
+            },
+        },
+        visible: true,
+    };
+}
+function plainTextDefaultProperty() {
+    return {
+        name: 'defaultValue',
+        title: 'Default Value',
+        group: AXP_DATA_PROPERTY_GROUP,
+        schema: {
+            dataType: 'string',
+            interface: {
+                name: 'defaultValue',
+                path: 'defaultValue',
+                type: AXPWidgetsCatalog.text,
+                options: {
+                    placeholder: '@layout-designer:property-editor.placeholders.default-value-plain-text',
+                },
+            },
+        },
+        visible: true,
+    };
+}
+function largeTextDefaultProperty() {
+    return {
+        name: 'defaultValue',
+        title: 'Default Value',
+        group: AXP_DATA_PROPERTY_GROUP,
+        schema: {
+            dataType: 'string',
+            interface: {
+                name: 'defaultValue',
+                path: 'defaultValue',
+                type: AXPWidgetsCatalog.largeText,
+                options: {
+                    placeholder: '@layout-designer:property-editor.placeholders.default-value-large-text',
+                },
+            },
+        },
+        visible: true,
+    };
+}
+function richTextDefaultProperty() {
+    return {
+        name: 'defaultValue',
+        title: 'Default Value',
+        group: AXP_DATA_PROPERTY_GROUP,
+        schema: {
+            dataType: 'string',
+            interface: {
+                name: 'defaultValue',
+                path: 'defaultValue',
+                type: AXPWidgetsCatalog.richText,
+                options: {
+                    placeholder: '@layout-designer:property-editor.placeholders.default-value-rich-text',
+                },
+            },
+        },
+        visible: true,
+    };
+}
+/**
+ * Default value editor for select-editor: uses `context.options(key)` so the default picker reads
+ * the **host** widget's options from the shared context (not the nested property field's `widget`).
+ */
+function selectEditorDefaultValueProperty() {
+    return {
+        name: 'defaultValue',
+        title: 'Default Value',
+        group: AXP_DATA_PROPERTY_GROUP,
+        schema: {
+            dataType: 'object',
+            interface: {
+                name: 'defaultValue',
+                path: 'defaultValue',
+                type: AXPWidgetsCatalog.select,
+                options: {
+                    placeholder: '@layout-designer:property-editor.placeholders.default-value-select',
+                    dataSource: '{{ context.options("dataSource") }}',
+                    valueField: '{{ context.options("valueField") }}',
+                    textField: '{{ context.options("textField") }}',
+                    multiple: '{{ context.options("multiple") }}',
+                    hasClearButton: true,
+                },
+            },
+        },
+        visible: true,
+    };
+}
+/**
+ * Default value editor for selection-list-editor: uses the select widget in the designer so picking
+ * a default matches select UX while still binding to the host's dataSource / fields via `context.options`.
+ */
+function selectionListEditorDefaultValueProperty() {
+    return {
+        name: 'defaultValue',
+        title: 'Default Value',
+        group: AXP_DATA_PROPERTY_GROUP,
+        schema: {
+            dataType: 'object',
+            interface: {
+                name: 'defaultValue',
+                path: 'defaultValue',
+                type: AXPWidgetsCatalog.select,
+                options: {
+                    placeholder: '@layout-designer:property-editor.placeholders.default-value-select',
+                    dataSource: '{{ context.options("dataSource") }}',
+                    valueField: '{{ context.options("valueField") }}',
+                    textField: '{{ context.options("textField") }}',
+                    multiple: '{{ context.options("multiple") }}',
+                    hasClearButton: true,
+                },
+            },
+        },
+        visible: true,
+    };
+}
+function numberDefaultProperty() {
+    return {
+        name: 'defaultValue',
+        title: 'Default Value',
+        group: AXP_DATA_PROPERTY_GROUP,
+        schema: {
+            dataType: 'number',
+            interface: {
+                name: 'defaultValue',
+                path: 'defaultValue',
+                type: AXPWidgetsCatalog.number,
+                options: {
+                    placeholder: '@layout-designer:property-editor.placeholders.default-value-number',
+                },
+            },
+        },
+        visible: true,
+    };
+}
+function numberMinValueProperty(value) {
+    return {
+        name: 'minValue',
+        title: 'Min Value',
+        group: AXP_BEHAVIOR_PROPERTY_GROUP,
+        order: 9,
+        schema: {
+            dataType: 'number',
+            defaultValue: value,
+            interface: {
+                name: 'minValue',
+                path: 'options.minValue',
+                type: AXPWidgetsCatalog.number,
+                options: {
+                    placeholder: '@layout-designer:property-editor.placeholders.number-min-value',
+                },
+            },
+        },
+        visible: true,
+    };
+}
+function numberMaxValueProperty(value) {
+    return {
+        name: 'maxValue',
+        title: 'Max Value',
+        group: AXP_BEHAVIOR_PROPERTY_GROUP,
+        order: 10,
+        schema: {
+            dataType: 'number',
+            defaultValue: value,
+            interface: {
+                name: 'maxValue',
+                path: 'options.maxValue',
+                type: AXPWidgetsCatalog.number,
+                options: {
+                    placeholder: '@layout-designer:property-editor.placeholders.number-max-value',
+                },
+            },
+        },
+        visible: true,
+    };
+}
+const AXP_MULTI_LANGUAGE_PROPERTY = createBooleanProperty({
+    name: 'multiLanguage',
+    title: 'Multi Language',
+    path: 'options.multiLanguage',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    defaultValue: false,
+});
+const AXP_SPIN_BUTTON_PROPERTY = createBooleanProperty({
+    name: 'spinButton',
+    title: 'Spin Button',
+    path: 'options.spinButton',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_NUMBER_SEPARATOR_PROPERTY = createStringProperty({
+    name: 'seprator',
+    title: 'Thousands Separator',
+    path: 'options.seprator',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_DEFAULT_ROW_COUNT_PROPERTY = createNumberProperty({
+    name: 'defaultRowCount',
+    title: 'Default Row Count',
+    path: 'options.defaultRowCount',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_MIN_LINE_COUNT_PROPERTY = createNumberProperty({
+    name: 'minLineCount',
+    title: 'Min Line Count',
+    path: 'options.minLineCount',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_MAX_LINE_COUNT_PROPERTY = createNumberProperty({
+    name: 'maxLineCount',
+    title: 'Max Line Count',
+    path: 'options.maxLineCount',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_FIT_LINE_COUNT_PROPERTY = createBooleanProperty({
+    name: 'fitLineCount',
+    title: 'Fit Line Count',
+    path: 'options.fitLineCount',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_SHOW_PASSWORD_PROPERTY = createBooleanProperty({
+    name: 'showPassword',
+    title: 'Show Password',
+    path: 'options.showPassword',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+});
+const AXP_TRIGGERS_PROPERTY = {
+    name: 'triggers',
+    title: 'Triggers',
+    group: AXP_TRIGGERS_PROPERTY_GROUP,
+    showLabel: false,
+    schema: {
+        dataType: 'object',
+        interface: {
+            name: 'triggers',
+            path: 'triggers',
+            type: 'triggers-editor',
+        },
+    },
+    visible: true,
+};
+
+const AXP_LAYOUT_GRID_PROPERTY_GROUP = {
+    name: 'grid',
+    order: 1,
+    title: 'Grid Layout',
+};
+const AXP_LAYOUT_FLEX_PROPERTY_GROUP = {
+    name: 'flex',
+    order: 1,
+    title: 'Flex Layout',
+};
+const AXP_BOX_MODEL_PROPERTY_GROUP = {
+    name: 'box',
+    order: 1,
+    title: 'Box Model',
+};
+const AXP_LAYOUT_TABLE_PROPERTY_GROUP = {
+    name: 'table',
+    order: 1,
+    title: 'Table Layout',
+};
+const AXP_LAYOUT_GAP_PROPERTY = {
+    name: 'gap',
+    title: 'Gap',
+    group: AXP_LAYOUT_GRID_PROPERTY_GROUP,
+    schema: {
+        dataType: 'number',
+        defaultValue: 2,
+        interface: {
+            name: 'gap',
+            path: 'options.gap',
+            type: AXPWidgetsCatalog.number,
+            options: {
+                minValue: 0,
+                maxValue: 12,
+            },
+        },
+    },
+    visible: true,
+};
+const AXP_LAYOUT_COLUMNS_PROPERTY = {
+    name: 'cols',
+    title: 'Columns',
+    group: AXP_LAYOUT_GRID_PROPERTY_GROUP,
+    schema: {
+        dataType: 'number',
+        defaultValue: 1,
+        interface: {
+            name: 'cols',
+            path: 'options.cols',
+            type: AXPWidgetsCatalog.number,
+            options: {
+                minValue: 1,
+                maxValue: 12,
+            },
+        },
+    },
+    visible: true,
+};
+const AXP_LAYOUT_ROWS_PROPERTY = {
+    name: 'rows',
+    title: 'Rows',
+    group: AXP_LAYOUT_GRID_PROPERTY_GROUP,
+    schema: {
+        dataType: 'number',
+        defaultValue: 1,
+        interface: {
+            name: 'rows',
+            path: 'options.rows',
+            type: AXPWidgetsCatalog.number,
+            options: {
+                minValue: 1,
+                maxValue: 100,
+            },
+        },
+    },
+    visible: true,
+};
+const AXP_LAYOUT_GRID_PROPERTIES = [
+    AXP_LAYOUT_GAP_PROPERTY,
+    AXP_LAYOUT_COLUMNS_PROPERTY,
+    AXP_LAYOUT_ROWS_PROPERTY,
+];
+const AXP_LAYOUT_GRID_ROW_PROPERTIES = [
+    AXP_LAYOUT_GAP_PROPERTY,
+    cloneProperty(AXP_LAYOUT_COLUMNS_PROPERTY, { schema: { defaultValue: 12 } }),
+];
+const AXP_LAYOUT_GRID_ITEM_PROPERTY = {
+    name: 'gridItem',
+    title: 'Grid Item',
+    group: AXP_LAYOUT_GRID_PROPERTY_GROUP,
+    schema: {
+        dataType: 'object',
+        interface: {
+            name: 'gridItem',
+            path: 'options',
+            type: AXPWidgetsCatalog.gridItemOptions,
+            options: {},
+        },
+    },
+    visible: true,
+};
+const AXP_LAYOUT_SPACING_PROPERTY = {
+    name: 'spacing',
+    title: 'Spacing',
+    group: AXP_BOX_MODEL_PROPERTY_GROUP,
+    schema: {
+        dataType: 'object',
+        interface: {
+            name: 'spacing',
+            path: 'options.spacing',
+            type: AXPWidgetsCatalog.spacing,
+            options: {},
+        },
+    },
+    visible: true,
+};
+const AXP_LAYOUT_BORDER_PROPERTY = {
+    name: 'border',
+    title: 'Border',
+    group: AXP_BOX_MODEL_PROPERTY_GROUP,
+    schema: {
+        dataType: 'object',
+        interface: {
+            name: 'border',
+            path: 'options.border',
+            type: AXPWidgetsCatalog.border,
+            options: {},
+        },
+    },
+    visible: true,
+};
+const AXP_LAYOUT_FLEX_PROPERTY = {
+    name: 'flex',
+    title: 'Flex',
+    group: AXP_LAYOUT_FLEX_PROPERTY_GROUP,
+    schema: {
+        dataType: 'object',
+        interface: {
+            name: 'flex',
+            path: 'options',
+            type: AXPWidgetsCatalog.flexOptions,
+            options: {},
+        },
+    },
+    visible: true,
+};
+const AXP_LAYOUT_FLEX_ITEM_PROPERTY = {
+    name: 'flexItem',
+    title: 'Flex Item',
+    group: AXP_LAYOUT_FLEX_PROPERTY_GROUP,
+    schema: {
+        dataType: 'object',
+        interface: {
+            name: 'flexItem',
+            path: 'options',
+            type: AXPWidgetsCatalog.flexItemOptions,
+            options: {},
+        },
+    },
+    visible: true,
+};
+const AXP_LAYOUT_GRID_PROPERTY = {
+    name: 'grid',
+    title: 'Grid',
+    group: AXP_LAYOUT_GRID_PROPERTY_GROUP,
+    schema: {
+        dataType: 'object',
+        interface: {
+            name: 'grid',
+            path: 'options.grid',
+            type: AXPWidgetsCatalog.gridOptions,
+            options: {},
+        },
+    },
+    visible: true,
+};
+const AXP_TABLE_COLUMNS_PROPERTY = {
+    name: 'columns',
+    title: 'Columns',
+    group: AXP_LAYOUT_TABLE_PROPERTY_GROUP,
+    schema: {
+        dataType: 'number',
+        defaultValue: 3,
+        interface: {
+            name: 'columns',
+            path: 'options.columns',
+            type: AXPWidgetsCatalog.number,
+            options: {
+                minValue: 1,
+                maxValue: 12,
+            },
+        },
+    },
+    visible: true,
+};
+// Removed rowHeight/rows from table properties
+const AXP_TABLE_ITEM_COLSPAN_PROPERTY = {
+    name: 'colSpan',
+    title: 'Column Span',
+    group: AXP_LAYOUT_TABLE_PROPERTY_GROUP,
+    schema: {
+        dataType: 'number',
+        defaultValue: 1,
+        interface: {
+            name: 'colSpan',
+            path: 'options.colSpan',
+            type: AXPWidgetsCatalog.number,
+            options: {
+                minValue: 1,
+                maxValue: 24,
+            },
+        },
+    },
+    visible: true,
+};
+const AXP_TABLE_ITEM_ROWSPAN_PROPERTY = {
+    name: 'rowSpan',
+    title: 'Row Span',
+    group: AXP_LAYOUT_TABLE_PROPERTY_GROUP,
+    schema: {
+        dataType: 'number',
+        defaultValue: 1,
+        interface: {
+            name: 'rowSpan',
+            path: 'options.rowSpan',
+            type: AXPWidgetsCatalog.number,
+            options: {
+                minValue: 1,
+                maxValue: 100,
+            },
+        },
+    },
+    visible: true,
+};
+// Removed header/footer/sticky related table properties
+const AXP_LAYOUT_ADVANCED_GRID_PROPERTY = {
+    name: 'advancedGrid',
+    title: 'Advanced Grid',
+    group: AXP_LAYOUT_GRID_PROPERTY_GROUP,
+    schema: {
+        dataType: 'object',
+        interface: {
+            name: 'advancedGrid',
+            path: 'options.advancedGrid',
+            type: AXPWidgetsCatalog.advancedGridOptions,
+            options: {},
+        },
+    },
+    visible: true,
+};
+const AXP_LAYOUT_SHOW_HEADER_PROPERTY = createBooleanProperty({
+    name: 'showHeader',
+    title: 'Show Header',
+    group: AXP_BEHAVIOR_PROPERTY_GROUP,
+    path: 'options.showHeader',
+    defaultValue: true,
+});
+const AXP_LAYOUT_DIRECTION_PROPERTY = {
+    name: 'direction',
+    title: 'Direction',
+    group: AXP_BOX_MODEL_PROPERTY_GROUP,
+    order: 99,
+    schema: {
+        dataType: 'string',
+        interface: {
+            name: 'direction',
+            path: 'options.direction',
+            type: AXPWidgetsCatalog.direction,
+            options: {},
+        },
+    },
+    visible: true,
+};
+
+const TABLE_COLUMN_ALIGN_DATA_SOURCE = [
+    { id: 'start', title: 'Start' },
+    { id: 'center', title: 'Center' },
+    { id: 'end', title: 'End' },
+];
+const AXP_TABLE_COLUMN_HEADER_ALIGN_PROPERTY = {
+    name: 'alignHeader',
+    title: 'Header alignment',
+    group: AXP_STYLING_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        defaultValue: 'start',
+        interface: {
+            name: 'alignHeader',
+            path: 'options.align.header',
+            type: AXPWidgetsCatalog.select,
+            options: {
+                dataSource: [...TABLE_COLUMN_ALIGN_DATA_SOURCE],
+            },
+        },
+    },
+    visible: true,
+};
+const AXP_TABLE_COLUMN_CELL_ALIGN_PROPERTY = {
+    name: 'alignCell',
+    title: 'Cell alignment',
+    group: AXP_STYLING_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        defaultValue: 'start',
+        interface: {
+            name: 'alignCell',
+            path: 'options.align.cell',
+            type: AXPWidgetsCatalog.select,
+            options: {
+                dataSource: [...TABLE_COLUMN_ALIGN_DATA_SOURCE],
+            },
+        },
+    },
+    visible: true,
+};
+/** Optional column designer fields; spread next to `AXP_TABLE_COLUMN_WIDTH_PROPERTY` where needed. */
+const AXP_TABLE_COLUMN_ALIGNMENT_PROPERTIES = [
+    AXP_TABLE_COLUMN_HEADER_ALIGN_PROPERTY,
+    AXP_TABLE_COLUMN_CELL_ALIGN_PROPERTY,
+];
+const AXP_TABLE_COLUMN_WIDTH_PROPERTY = {
+    name: 'width',
+    title: 'Width',
+    group: AXP_STYLING_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        defaultValue: '300px',
+        interface: {
+            name: 'width',
+            path: 'options.width',
+            type: AXPWidgetsCatalog.text,
+        },
+    },
+    visible: true,
+};
+const AXP_TABLE_COLUMN_HEIGHT_PROPERTY = {
+    name: 'height',
+    title: 'Height',
+    group: AXP_STYLING_PROPERTY_GROUP,
+    schema: {
+        dataType: 'string',
+        defaultValue: '300px',
+        interface: {
+            name: 'height',
+            path: 'options.height',
+            type: AXPWidgetsCatalog.text,
+        },
+    },
+    visible: true,
+};
+
+const AXP_REQUIRED_VALIDATION_PROPERTY = {
+    name: 'requiredValidation',
+    title: 'Required',
+    group: AXP_VALIDATION_PROPERTY_GROUP,
+    schema: {
+        dataType: 'object',
+        interface: {
+            name: 'requiredValidation',
+            path: 'options.validations.required',
+            type: AXPWidgetsCatalog.requiredValidation,
+            defaultValue: false,
+        },
+    },
+    visible: true,
+};
+const AXP_MIN_LENGTH_VALIDATION_PROPERTY = {
+    name: 'minLengthValidation',
+    title: 'Minimum Length',
+    group: AXP_VALIDATION_PROPERTY_GROUP,
+    schema: {
+        dataType: 'object',
+        interface: {
+            name: 'minLengthValidation',
+            path: 'options.validations.minLength',
+            type: AXPWidgetsCatalog.minLengthValidation,
+            defaultValue: null,
+        },
+    },
+    visible: true,
+};
+const AXP_MAX_LENGTH_VALIDATION_PROPERTY = {
+    name: 'maxLengthValidation',
+    title: 'Maximum Length',
+    group: AXP_VALIDATION_PROPERTY_GROUP,
+    schema: {
+        dataType: 'object',
+        interface: {
+            name: 'maxLengthValidation',
+            path: 'options.validations.maxLength',
+            type: AXPWidgetsCatalog.maxLengthValidation,
+            defaultValue: null,
+        },
+    },
+    visible: true,
+};
+const AXP_REGULAR_EXPRESSION_VALIDATION_PROPERTY = {
+    name: 'regularExpressionValidation',
+    title: 'Regular Expression',
+    group: AXP_VALIDATION_PROPERTY_GROUP,
+    schema: {
+        dataType: 'object',
+        interface: {
+            name: 'regularExpressionValidation',
+            path: 'options.validations.regex',
+            type: AXPWidgetsCatalog.regularExpressionValidation,
+            defaultValue: false,
+        },
+    },
+    visible: true,
+};
+const AXP_LESS_THAN_VALIDATION_PROPERTY = {
+    name: 'lessThanValidation',
+    title: 'Less Than',
+    group: AXP_VALIDATION_PROPERTY_GROUP,
+    schema: {
+        dataType: 'object',
+        interface: {
+            name: 'lessThanValidation',
+            path: 'options.validations.lessThan',
+            type: AXPWidgetsCatalog.lessThanValidation,
+            defaultValue: false,
+        },
+    },
+    visible: true,
+};
+const AXP_GREATER_THAN_VALIDATION_PROPERTY = {
+    name: 'greaterThanValidation',
+    title: 'Greater Than',
+    group: AXP_VALIDATION_PROPERTY_GROUP,
+    schema: {
+        dataType: 'object',
+        interface: {
+            name: 'greaterThanValidation',
+            path: 'options.validations.greaterThan',
+            type: AXPWidgetsCatalog.greaterThanValidation,
+            defaultValue: false,
+        },
+    },
+    visible: true,
+};
+const AXP_BETWEEN_VALIDATION_PROPERTY = {
+    name: 'betweenValidation',
+    title: 'Between',
+    group: AXP_VALIDATION_PROPERTY_GROUP,
+    schema: {
+        dataType: 'object',
+        interface: {
+            name: 'betweenValidation',
+            path: 'options.validations.between',
+            type: AXPWidgetsCatalog.betweenValidation,
+            defaultValue: false,
+        },
+    },
+    visible: true,
+};
+const AXP_EQUAL_VALIDATION_PROPERTY = {
+    name: 'equalValidation',
+    title: 'Equal',
+    group: AXP_VALIDATION_PROPERTY_GROUP,
+    schema: {
+        dataType: 'object',
+        interface: {
+            name: 'equalValidation',
+            path: 'options.validations.equal',
+            type: AXPWidgetsCatalog.equalValidation,
+            defaultValue: false,
+        },
+    },
+    visible: true,
+};
+const AXP_CALLBACK_VALIDATION_PROPERTY = {
+    name: 'callbackValidation',
+    title: 'Callback',
+    group: AXP_VALIDATION_PROPERTY_GROUP,
+    schema: {
+        dataType: 'object',
+        interface: {
+            name: 'callbackValidation',
+            path: 'options.validations.callback',
+            type: AXPWidgetsCatalog.callbackValidation,
+            defaultValue: false,
+        },
+    },
+    visible: true,
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXPBaseWidgetComponent, AXPBlockBaseLayoutWidgetComponent, AXPBoxModelLayoutWidgetComponent, AXPColumnWidgetComponent, AXPDataListWidgetComponent, AXPFlexBaseLayoutWidgetComponent, AXPFlexItemBaseLayoutWidgetComponent, AXPGridBaseLayoutWidgetComponent, AXPGridItemBaseLayoutWidgetComponent, AXPInlineBaseLayoutWidgetComponent, AXPLayoutBaseWidgetComponent, AXPPropertyEditorHelper, AXPTableBaseLayoutWidgetComponent, AXPTableItemBaseLayoutWidgetComponent, AXPTableItemOpsBaseLayoutWidgetComponent, AXPValueWidgetComponent, AXPWidgetColumnCellComponent, AXPWidgetColumnRendererComponent, AXPWidgetContainerComponent, AXPWidgetCoreElement, AXPWidgetCoreModule, AXPWidgetCoreService, AXPWidgetRegistryService, AXPWidgetRendererDirective, AXPWidgetSerializationHelper, AXP_ALLOW_CLEAR_PROPERTY, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_ALLOW_SEARCH_PROPERTY, AXP_ANIMATION_PROPERTY_GROUP, AXP_APPEARANCE_PROPERTY_GROUP, AXP_BEHAVIOR_PROPERTY_GROUP, AXP_BETWEEN_VALIDATION_PROPERTY, AXP_BG_COLOR_PROPERTY, AXP_BOX_MODEL_PROPERTY_GROUP, AXP_CALLBACK_VALIDATION_PROPERTY, AXP_COLOR_PROPERTY, AXP_CONTENT_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_DATA_SOURCE_OPTIONS_PROPERTY, AXP_DATE_DEPTH_PROPERTY, AXP_DATE_FORMAT_PROPERTY, AXP_DATE_RANGE_LIMIT_PROPERTY, AXP_DEFAULT_ROW_COUNT_PROPERTY, AXP_DESCRIPTION_PROPERTY, AXP_DIRECTION_PROPERTY, AXP_DISABLED_PROPERTY, AXP_DOWNLOADABLE_PROPERTY, AXP_EQUAL_VALIDATION_PROPERTY, AXP_FALSY_TEXT_PROPERTY, AXP_FIT_LINE_COUNT_PROPERTY, AXP_FONT_SIZE_PROPERTY, AXP_GREATER_THAN_VALIDATION_PROPERTY, AXP_HAS_CLEAR_BUTTON_PROPERTY, AXP_HAS_COPY_ICON_PROPERTY, AXP_HAS_EYE_ICON_PROPERTY, AXP_HAS_ICON_PROPERTY, AXP_HAS_LABEL_PROPERTY, AXP_ICON_PROPERTY, AXP_IS_LOADING_PROPERTY, AXP_LABEL_PROPERTY, AXP_LAYOUT_ADVANCED_GRID_PROPERTY, AXP_LAYOUT_BORDER_PROPERTY, AXP_LAYOUT_COLUMNS_PROPERTY, AXP_LAYOUT_DIRECTION_PROPERTY, AXP_LAYOUT_FLEX_ITEM_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY, AXP_LAYOUT_FLEX_PROPERTY_GROUP, AXP_LAYOUT_GAP_PROPERTY, AXP_LAYOUT_GRID_ITEM_PROPERTY, AXP_LAYOUT_GRID_PROPERTIES, AXP_LAYOUT_GRID_PROPERTY, AXP_LAYOUT_GRID_PROPERTY_GROUP, AXP_LAYOUT_GRID_ROW_PROPERTIES, AXP_LAYOUT_ROWS_PROPERTY, AXP_LAYOUT_SHOW_HEADER_PROPERTY, AXP_LAYOUT_SPACING_PROPERTY, AXP_LAYOUT_TABLE_PROPERTY_GROUP, AXP_LESS_THAN_VALIDATION_PROPERTY, AXP_MAX_LENGTH_VALIDATION_PROPERTY, AXP_MAX_LINE_COUNT_PROPERTY, AXP_MIN_LENGTH_VALIDATION_PROPERTY, AXP_MIN_LINE_COUNT_PROPERTY, AXP_MULTI_LANGUAGE_PROPERTY, AXP_NAME_PROPERTY, AXP_NUMBER_SEPARATOR_PROPERTY, AXP_PLACEHOLDER_PROPERTY, AXP_READONLY_PROPERTY, AXP_REGULAR_EXPRESSION_VALIDATION_PROPERTY, AXP_REQUIRED_VALIDATION_PROPERTY, AXP_SHOW_PASSWORD_PROPERTY, AXP_SPIN_BUTTON_PROPERTY, AXP_STYLE_COLOR_PROPERTY, AXP_STYLE_LOOK_PROPERTY, AXP_STYLING_PROPERTY_GROUP, AXP_TABLE_COLUMNS_PROPERTY, AXP_TABLE_COLUMN_ALIGNMENT_PROPERTIES, AXP_TABLE_COLUMN_CELL_ALIGN_PROPERTY, AXP_TABLE_COLUMN_HEADER_ALIGN_PROPERTY, AXP_TABLE_COLUMN_HEIGHT_PROPERTY, AXP_TABLE_COLUMN_WIDTH_PROPERTY, AXP_TABLE_ITEM_COLSPAN_PROPERTY, AXP_TABLE_ITEM_ROWSPAN_PROPERTY, AXP_TEXT_ALIGN_PROPERTY, AXP_TEXT_FIELD_PROPERTY, AXP_TEXT_PROPERTY, AXP_THEME_PROPERTY, AXP_TITLE_PROPERTY, AXP_TRIGGERS_PROPERTY, AXP_TRIGGERS_PROPERTY_GROUP, AXP_TRULY_TEXT_PROPERTY, AXP_VALIDATION_PROPERTY_GROUP, AXP_VALUE_FIELD_PROPERTY, AXP_VERTICAL_ALIGN_PROPERTY, AXP_WIDGETS_ACTION_CATEGORY, AXP_WIDGETS_ACTION_SUB_CONTROLS, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_ADVANCE_SUB_DATA, AXP_WIDGETS_ADVANCE_SUB_INPUT, AXP_WIDGETS_ADVANCE_SUB_MEDIA, AXP_WIDGETS_ADVANCE_SUB_TOOLS, AXP_WIDGETS_AI_CATEGORY, AXP_WIDGETS_CATEGORIES, AXP_WIDGETS_EDITOR_CATEGORY, AXP_WIDGETS_EDITOR_SUB_CHOICE, AXP_WIDGETS_EDITOR_SUB_COMPOSITE, AXP_WIDGETS_EDITOR_SUB_CONFIG, AXP_WIDGETS_EDITOR_SUB_DATETIME, AXP_WIDGETS_EDITOR_SUB_NUMERIC, AXP_WIDGETS_EDITOR_SUB_RICH, AXP_WIDGETS_EDITOR_SUB_TEXT_INPUTS, AXP_WIDGETS_EDITOR_SUB_VISUAL, AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGETS_LAYOUT_SUB_GRID, AXP_WIDGETS_LAYOUT_SUB_LISTS, AXP_WIDGETS_LAYOUT_SUB_SHELL, AXP_WIDGETS_LAYOUT_SUB_SURFACES, AXP_WIDGETS_LAYOUT_SUB_TABS, AXP_WIDGETS_LAYOUT_SUB_UTILITY, AXP_WIDGET_DEFINITION_PROVIDER, AXP_WIDGET_PROPERTY_GROUP, WIDGET_CASCADE_TRACE_NS, booleanDefaultProperty, buildWidgetRegistryMapFromProviders, findNonEmptyBreakpoints, largeTextDefaultProperty, mapAXPPropertyToWidgetProperty, normalizeWidgetCategories, numberDefaultProperty, numberMaxValueProperty, numberMinValueProperty, plainTextDefaultProperty, richTextDefaultProperty, selectEditorDefaultValueProperty, selectionListEditorDefaultValueProperty };
+//# sourceMappingURL=acorex-platform-framework-client-layout-widget-core.mjs.map