@acorex/platform 20.3.0-next.2 → 20.3.0-next.21

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

@@ -1,2104 +1,2103 @@
-import * as i0 from '@angular/core';
-import { signal, computed, Injectable, InjectionToken, inject, ElementRef, effect, Injector, ChangeDetectorRef, ViewChild, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, input, output, ViewContainerRef, Directive, Optional, Inject, NgModule } from '@angular/core';
-import { convertArrayToDataSource, AXDataSource } from '@acorex/cdk/common';
-import { setSmart, AXPDataSourceDefinitionProviderService, extractValue, getSmart, AXPExpressionEvaluatorService } from '@acorex/platform/core';
-import { set, cloneDeep, isEqual, get, merge, isNil, isUndefined, isObjectLike, sum, isEmpty, isString } from 'lodash-es';
-import { Subject, BehaviorSubject, filter } from 'rxjs';
-import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
-import * as i1$1 from '@acorex/components/skeleton';
-import { AXSkeletonModule } from '@acorex/components/skeleton';
-import * as i2 from '@acorex/core/translation';
-import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
-import { PortalModule } from '@angular/cdk/portal';
-import * as i1 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { AXDataTableColumnComponent, AXBaseDataTable } from '@acorex/components/data-table';
-import { AXUnsubscriber } from '@acorex/core/utils';
-
-var AXPPageStatus;
-(function (AXPPageStatus) {
-    // Idle statuses
-    AXPPageStatus["Idle"] = "idle";
-    // Rendering statuses
-    AXPPageStatus["Rendering"] = "rendering";
-    AXPPageStatus["Rendered"] = "rendered";
-    // Processing statuses
-    AXPPageStatus["Processing"] = "processing";
-    // Submission statuses
-    AXPPageStatus["Submitting"] = "submitting";
-    AXPPageStatus["Submitted"] = "submitted";
-    // Validation statuses
-    AXPPageStatus["Validating"] = "validating";
-    AXPPageStatus["Validated"] = "validated";
-    // Error handling
-    AXPPageStatus["Error"] = "error";
-})(AXPPageStatus || (AXPPageStatus = {}));
-var AXPWidgetStatus;
-(function (AXPWidgetStatus) {
-    // Rendering statuses
-    AXPWidgetStatus["Rendering"] = "rendering";
-    AXPWidgetStatus["Rendered"] = "rendered";
-    // Processing statuses
-    AXPWidgetStatus["Processing"] = "processing";
-    // Error handling
-    AXPWidgetStatus["Error"] = "error";
-})(AXPWidgetStatus || (AXPWidgetStatus = {}));
+import * as i0 from '@angular/core';
+import { inject, Injectable, input, model, signal, effect, output, viewChild, ChangeDetectionStrategy, Component, NgModule, EventEmitter, Output, Input } from '@angular/core';
+import { AXPopupService } from '@acorex/components/popup';
+import * as i2 from '@acorex/components/form';
+import { AXFormComponent, AXFormModule } from '@acorex/components/form';
+import { AXPExpressionEvaluatorService } from '@acorex/platform/core';
+import * as i1 from '@acorex/platform/layout/widget-core';
+import { AXPWidgetContainerComponent, AXPPageStatus, AXPWidgetCoreModule } from '@acorex/platform/layout/widget-core';
+import { isEqual, get, cloneDeep } from 'lodash-es';
+import { Subject, debounceTime, distinctUntilChanged, startWith } from 'rxjs';
+import * as i2$1 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i3 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i4 from '@acorex/components/loading';
+import { AXLoadingModule } from '@acorex/components/loading';
+import { AXBasePageComponent } from '@acorex/components/page';
+import * as i5 from '@acorex/core/translation';
+import { AXTranslationModule } from '@acorex/core/translation';
 
-class AXPLayoutElement {
-    api() {
-        return {};
+//#region ----   Inheritance Utilities   ----
+/**
+ * Resolves inherited properties from context and local values
+ */
+function resolveInheritedProperties(context, localValues = {}) {
+    return {
+        mode: localValues.mode ?? context.mode ?? 'edit',
+        disabled: localValues.disabled ?? context.disabled,
+        readonly: localValues.readonly ?? context.readonly,
+        direction: localValues.direction ?? context.direction,
+        visible: localValues.visible ?? context.visible,
+    };
+}
+/**
+ * Merges inheritance context with local overrides
+ */
+function mergeInheritanceContext(parentContext, localOverrides = {}) {
+    return {
+        ...parentContext,
+        ...localOverrides,
+    };
+}
+/**
+ * Generates a random string for path/name generation
+ */
+function generateRandomId() {
+    return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+}
+/**
+ * Converts label to a valid path/name
+ */
+function labelToPath(label) {
+    return label
+        .toLowerCase()
+        .replace(/[^a-z0-9\s]/g, '') // Remove special characters
+        .replace(/\s+/g, '_') // Replace spaces with underscores
+        .substring(0, 50); // Limit length
+}
+/**
+ * Generates path for value widgets based on hierarchy
+ */
+function generateValueWidgetPath(widgetName, formFieldName, formFieldLabel) {
+    // Priority: widget name -> form field name -> generated from label -> random
+    if (widgetName) {
+        return widgetName;
+    }
+    if (formFieldName) {
+        return formFieldName;
     }
+    if (formFieldLabel) {
+        return labelToPath(formFieldLabel);
+    }
+    return generateRandomId();
 }
+//#endregion
+//#region ----   Service Implementation   ----
 class AXPLayoutBuilderService {
     constructor() {
-        this.variables$ = signal({}, ...(ngDevMode ? [{ debugName: "variables$" }] : []));
-        this.functions$ = signal({}, ...(ngDevMode ? [{ debugName: "functions$" }] : []));
-        this.onRefresh = new Subject();
-        this.widgets = new Map();
-        this.onWidgetRegistered = new Subject();
-        this.status$ = signal(AXPPageStatus.Rendering, ...(ngDevMode ? [{ debugName: "status$" }] : []));
-        this.status = this.status$.asReadonly();
-        this.isBusy = computed(() => {
-            return [AXPPageStatus.Processing, AXPPageStatus.Submitting, AXPPageStatus.Rendering].includes(this.status());
-        }, ...(ngDevMode ? [{ debugName: "isBusy" }] : []));
-    }
-    get variables() {
-        return this.variables$();
-    }
-    get functions() {
-        return this.functions$();
-    }
-    updateStatus() {
-        this.status$.update(() => this.detectStatus());
-    }
-    detectStatus() {
-        const statuses = Array.from(this.widgets.values()).map((c) => c.status());
-        // Rendering statuses
-        if (statuses.some((status) => status === AXPWidgetStatus.Rendering)) {
-            return AXPPageStatus.Rendering;
-        }
-        if (statuses.every((status) => status === AXPWidgetStatus.Rendered)) {
-            return AXPPageStatus.Rendered;
-        }
-        // Processing statuses
-        if (statuses.some((status) => status === AXPWidgetStatus.Processing)) {
-            return AXPPageStatus.Processing;
-        }
-        // Error handling
-        if (statuses.some((status) => status === AXPWidgetStatus.Error)) {
-            return AXPPageStatus.Error;
-        }
-        return AXPPageStatus.Rendered; // Default to Loaded when all widgets are in a completed state
-    }
-    refresh() {
-        setTimeout(() => {
-            this.onRefresh.next();
-        }, 0);
-    }
-    setStatus(status) {
-        this.status$.set(status);
-    }
-    setVariables(...args) {
-        if (args.length == 0)
-            return;
-        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 });
-    }
-    getWidget(id) {
-        return this.widgets.get(id);
+        this.popupService = inject(AXPopupService);
     }
     /**
-     * Waits until a widget with the given id is registered, then resolves with it.
-     * If the widget is already registered, resolves immediately.
-     * Optionally accepts a timeout (in ms) after which it resolves with undefined.
+     * Create a new layout builder
      */
-    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);
-            }
-        });
+    create() {
+        return new LayoutBuilder(this.popupService);
     }
-    ngOnDestroy() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutBuilderService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPLayoutBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPLayoutBuilderService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPLayoutBuilderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }] });
-
-class AXPLayoutContextChangeEvent {
-}
-const AXPLayoutBuilderContextStore = signalStore(
-// Initial State
-withState(() => ({
-    data: {}, // Shared context data
-    state: 'initiated', // Current state
-    initialSnapshot: {}, // Snapshot of the first initialized state
-    previousSnapshot: {}, // Snapshot of the previous state
-    lastChange: {
-        state: 'initiated',
-    }, // Last change event
-})), 
-// Computed Signals
-withComputed(({ data, state, lastChange, initialSnapshot, previousSnapshot }) => ({
-    isChanged: computed(() => state() === 'changed'),
-    isReset: computed(() => state() === 'restored'),
-    isInitiated: computed(() => state() === 'initiated'),
-    isEmpty: computed(() => Object.keys(data()).length === 0),
-    isDirty: computed(() => !isEqual(data(), previousSnapshot())),
-    snapshot: computed(() => cloneDeep(data())), // Current data snapshot
-    initial: computed(() => cloneDeep(initialSnapshot())), // Initial snapshot
-    previous: computed(() => cloneDeep(previousSnapshot())), // Previous snapshot
-    changeEvent: computed(() => lastChange()), // Reactive last change event
-})), 
-// Methods for State Management
-withMethods((store) => ({
-    // Update a specific value
-    update(path, value) {
-        const currentData = cloneDeep(store.data());
-        const oldValue = get(currentData, path);
-        // Skip if the value hasn't changed
-        if (isEqual(oldValue, value)) {
-            return;
-        }
-        // Update the value and prepare the change event
-        const updatedData = setSmart(currentData, path, value);
-        const changeEvent = {
-            oldValue,
-            newValue: value,
-            path,
-            state: 'changed',
-            data: updatedData,
-        };
-        // Patch the state
-        patchState(store, {
-            previousSnapshot: store.snapshot(), // Save the previous state
-            data: updatedData,
-            state: 'changed',
-            lastChange: changeEvent,
-        });
-    },
-    patch(context) {
-        const currentData = cloneDeep(store.data());
-        // Update the value and prepare the change event
-        const updatedData = { ...currentData, ...context };
-        const changeEvent = {
-            state: 'patch',
-            data: updatedData,
-        };
-        // Patch the state
-        patchState(store, {
-            previousSnapshot: store.snapshot(), // Save the previous state
-            data: updatedData,
-            state: 'changed',
-            lastChange: changeEvent,
-        });
-    },
-    // Reset to the initial state
-    reset() {
-        const initialData = store.initial();
-        const changeEvent = {
-            oldValue: cloneDeep(store.data()), // Current data becomes old value
-            newValue: cloneDeep(initialData), // Reset to the initial state
-            path: '',
-            state: 'restored',
-            data: initialData,
+//#endregion
+//#region ----   Layout Builder Implementation   ----
+/**
+ * Main layout builder - Single Responsibility: Layout orchestration
+ * Open/Closed: Extensible through container delegates
+ */
+class LayoutBuilder {
+    constructor(popupService) {
+        this.popupService = popupService;
+        this.root = {
+            children: [],
+            mode: 'edit',
+            type: 'flex-layout',
         };
-        patchState(store, {
-            previousSnapshot: store.snapshot(), // Save the previous state
-            data: initialData,
-            state: 'restored',
-            lastChange: changeEvent,
-        });
-    },
-    // Initialize the state
-    set(initialData) {
-        const currentData = store.data();
-        if (isEqual(currentData, initialData)) {
-            return; // Skip if the current state matches the initial state
-        }
-        const changeEvent = {
-            oldValue: null,
-            newValue: cloneDeep(initialData),
-            path: '',
-            state: 'initiated',
-            data: initialData,
+        this.inheritanceContext = {
+            mode: 'edit',
         };
-        patchState(store, {
-            initialSnapshot: cloneDeep(initialData), // Save the initial state
-            previousSnapshot: store.snapshot(), // Save the current state as the previous
-            data: initialData,
-            state: 'initiated',
-            lastChange: changeEvent,
-        });
-    },
-    // Get a specific value
-    getValue(path) {
-        return get(store.data(), path);
-    },
-})));
-
-const AXPWidgetsCatalog = {
-    timeDuration: 'time-duration',
-    tagable: 'tagable-editor',
-    checkbox: 'checkbox-editor',
-    color: 'color-editor',
-    contact: 'contact-editor',
-    dateTime: 'date-time-editor',
-    email: 'email-editor',
-    largeText: 'large-text-editor',
-    link: 'link-editor',
-    number: 'number-editor',
-    numberUnit: 'number-unit-editor',
-    password: 'password-editor',
-    phone: 'phone-editor',
-    richText: 'rich-text-editor',
-    select: 'select-editor',
-    selectionList: 'selection-list-editor',
-    text: 'text-editor',
-    table: 'table-editor',
-    toggle: 'toggle-editor',
-    blockLayout: 'block-layout',
-    pageLayout: 'page-layout',
-    repeaterLayout: 'repeater-layout',
-    textBlockLayout: 'text-block-layout',
-    fileUploader: 'file-uploader',
-    fileTypeExtension: 'file-type-extension',
-    map: 'map',
-    imageMarker: 'image-marker',
-    image: 'image',
-    gallery: 'gallery',
-    signature: 'signature',
-    buttonAction: 'button-action',
-    document: 'document-layout',
-    lookup: 'lookup-editor',
-    formField: 'form-field',
-    qrcode: 'qrcode',
-    advancedGrid: 'advanced-grid-layout',
-    advancedGridItem: 'advanced-grid-item-layout',
-    grid: 'grid-layout',
-    gridItem: 'grid-item-layout',
-    gridRow: 'grid-row-layout',
-    widgetSelector: 'widget-selector',
-    template: 'template',
-    templateDesigner: 'template-designer',
-    cronJob: 'cron-job',
-    spacing: 'spacing',
-    direction: 'direction',
-    border: 'border',
-    flexLayout: 'flex-layout',
-    flexItem: 'flex-item-layout',
-    avatar: 'avatar',
-    themePaletteChooser: 'theme-palette-chooser',
-    themeModeChooser: 'theme-mode-chooser',
-    menuOrientationChooser: 'menu-orientation-chooser',
-    fontStyleChooser: 'font-style-chooser',
-    fontSizeChooser: 'font-size-chooser',
-    iconChooser: 'icon-chooser',
-    themeColorChooser: 'theme-color-chooser',
-    gridOptions: 'grid-options',
-    gridItemOptions: 'grid-item-options',
-    advancedGridOptions: 'advanced-grid-options',
-    stringFilter: 'string-filter',
-    numberFilter: 'number-filter',
-    dateTimeFilter: 'datetime-filter',
-    booleanFilter: 'boolean-filter',
-    lookupFilter: 'lookup-filter',
-    flexOptions: 'flex-options',
-    flexItemOptions: 'flex-item-options',
-    selectFilter: 'select-filter',
-    requiredValidation: 'required-validation',
-    regularExpressionValidation: 'regular-expression-validation',
-    minLengthValidation: 'min-length-validation',
-    maxLengthValidation: 'max-length-validation',
-    lessThanValidation: 'less-than-validation',
-    greaterThanValidation: 'greater-than-validation',
-    betweenValidation: 'between-validation',
-    equalValidation: 'equal-validation',
-    callbackValidation: 'callback-validation',
-    donutChart: 'donut-chart',
-    lineChart: 'line-chart',
-    barChart: 'bar-chart',
-    gaugeChart: 'gauge-chart',
-    stickyNote: 'sticky-note',
-    clockCalendar: 'clock-calendar',
-    analogClock: 'analog-clock',
-    weather: 'weather',
-    minimalWeather: 'minimal-weather',
-    advancedWeather: 'advanced-weather',
-    metaData: 'meta-data-editor',
-    templateEditor: 'template-box-editor',
-    panel: 'panel',
-    notification: 'notification',
-    taskBoard: 'task-board',
-    comment: 'comment',
-    list: 'list',
-    listToolbar: 'list-toolbar',
-    entityList: 'entity-list',
-    documentUploader: 'document-uploader',
-};
-
-function cloneProperty(property, values) {
-    return merge(cloneDeep(property), values);
-}
-function createStringProperty(ctor) {
-    return {
-        name: ctor.name,
-        title: ctor.title,
-        group: ctor.group,
-        schema: {
-            dataType: 'string',
-            defaultValue: ctor.defaultValue,
-            interface: {
-                name: ctor.name,
-                path: ctor.path ?? ctor.name,
-                type: AXPWidgetsCatalog.text,
-            },
-        },
-        visible: !isNil(ctor.visible) ? ctor.visible : true,
-    };
-}
-function createNumberProperty(ctor) {
-    return {
-        name: ctor.name,
-        title: ctor.title,
-        group: ctor.group,
-        schema: {
-            dataType: 'number',
-            defaultValue: ctor.defaultValue,
-            interface: {
-                name: ctor.name,
-                path: ctor.path ?? ctor.name,
-                type: AXPWidgetsCatalog.number,
-                options: ctor.options,
-            },
-        },
-        visible: !isNil(ctor.visible) ? ctor.visible : true,
-    };
-}
-function createBooleanProperty(ctor) {
-    return {
-        name: ctor.name,
-        title: ctor.title,
-        group: ctor.group,
-        schema: {
-            dataType: 'boolean',
-            defaultValue: ctor.defaultValue ?? false,
-            interface: {
-                name: ctor.name,
-                path: ctor.path ?? ctor.name,
-                type: AXPWidgetsCatalog.toggle,
-            },
-        },
-        visible: ctor.visible ?? true,
-    };
-}
-function createSelectProperty(ctor) {
-    return {
-        name: ctor.name,
-        title: ctor.title,
-        group: ctor.group,
-        schema: {
-            dataType: 'string',
-            defaultValue: Array.isArray(ctor.defaultValue)
-                ? ctor.defaultValue.map((item) => (typeof item === 'string' ? { id: item } : item))
-                : typeof ctor.defaultValue === 'string'
-                    ? { id: ctor.defaultValue, title: ctor.defaultValue }
-                    : ctor.defaultValue,
-            interface: {
-                name: ctor.name,
-                path: ctor.path ?? ctor.name,
-                type: AXPWidgetsCatalog.select,
-                options: {
-                    dataSource: ctor.dataSource.map((item) => (typeof item === 'string' ? { id: item, title: item } : item)),
-                },
-            },
-        },
-        visible: ctor.visible ?? true,
-    };
-}
-const AXP_WIDGET_TOKEN = new InjectionToken('AXP_WIDGET_TOKEN');
-const AXP_WIDGET_COLUMN_TOKEN = new InjectionToken('AXP_WIDGET_COLUMN_TOKEN');
-
-class AXPBaseWidgetComponent extends AXPLayoutElement {
-    constructor() {
-        super(...arguments);
-        this.token = inject(AXP_WIDGET_TOKEN);
-        this.host = inject(ElementRef).nativeElement;
-        this.layoutService = inject(AXPLayoutBuilderService);
-        this.contextService = inject(AXPLayoutBuilderContextStore);
-        this.config = this.token.config;
-        this.node = this.token.node;
-        this.name = this.token.node.name;
-        this._options = signal(this.token.options ?? {}, ...(ngDevMode ? [{ debugName: "_options" }] : []));
-        this.options = this._options.asReadonly();
-        this.onOptionsChanged = new Subject();
-        this._status = signal(AXPWidgetStatus.Rendering, ...(ngDevMode ? [{ debugName: "_status" }] : []));
-        this.status = this._status.asReadonly();
-        this.onStatusChanged = new BehaviorSubject(this._status());
-        this.#statusEffect = effect(() => {
-            this.onStatusChanged.next(this.status());
-        }, ...(ngDevMode ? [{ debugName: "#statusEffect" }] : []));
-        this.isBusy = computed(() => [AXPWidgetStatus.Rendering, AXPWidgetStatus.Processing].includes(this.status()), ...(ngDevMode ? [{ debugName: "isBusy" }] : []));
-        this._children = signal(this.token.node.children ?? [], ...(ngDevMode ? [{ debugName: "_children" }] : []));
-        this.children = this._children.asReadonly();
-    }
-    get id() {
-        return this._id;
-    }
-    #statusEffect;
-    outputs() {
-        return [];
     }
-    ngOnInit() {
-        if (get(this.node, '__meta__.added')) {
-            this.onAdded();
-        }
-        this.setStatus(AXPWidgetStatus.Rendered);
-    }
-    setStatus(status) {
-        this._status.set(status);
-        this.layoutService.updateStatus();
-    }
-    setOptions(values) {
-        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 = get(this, name);
-            if (typeof opt == 'function') {
-                return opt();
-            }
-            return opt;
+    // Predefined layout containers at root level - delegate pattern required
+    grid(delegate) {
+        const container = new GridContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
+        }
+        //this.state.children!.push(container.build());
+        this.root = container.build();
+        return this;
+    }
+    flex(delegate) {
+        const container = new FlexContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
+        }
+        this.root.children.push(container.build());
+        return this;
+    }
+    panel(delegate) {
+        const container = new PanelContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
+        }
+        this.root.children.push(container.build());
+        return this;
+    }
+    page(delegate) {
+        const container = new PageContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
+        }
+        this.root.children.push(container.build());
+        return this;
+    }
+    tabset(delegate) {
+        const container = new TabsetContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
+        }
+        this.root.children.push(container.build());
+        return this;
+    }
+    fieldset(delegate) {
+        const container = new FieldsetContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
         }
-        return null;
+        this.root.children.push(container.build());
+        return this;
     }
-    call(name, ...args) {
-        const fn = get(this, name);
-        if (fn && typeof fn == 'function') {
-            fn.bind(this)(...args);
+    dialog(delegate) {
+        const container = new DialogContainerBuilder(this.popupService);
+        if (delegate) {
+            delegate(container);
         }
+        return container;
     }
-    setChildren(children) {
-        this._children.set([...children]);
+    formField(label, delegate) {
+        const field = new FormFieldBuilder(label);
+        field.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(field);
+        }
+        this.root.children.push(field.build());
+        return this;
+    }
+    build() {
+        return {
+            type: this.root.type,
+            children: this.root.children,
+            mode: this.root.mode,
+        };
     }
-    onAdded() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPBaseWidgetComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPBaseWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-class AXPLayoutBaseWidgetComponent extends AXPBaseWidgetComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutBaseWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutBaseWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutBaseWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-class AXPValueWidgetComponent extends AXPLayoutBaseWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.path = this.token.node.path;
-        this.defaultValue = this.token.defaultValue ?? this.token.node.defaultValue;
-        this._isValueWidget = false;
-        this.isValueWidget = () => this._isValueWidget;
-        this.onValueChanged = new Subject();
-        this.fullPath = signal(null, ...(ngDevMode ? [{ debugName: "fullPath" }] : []));
-        this.parentPath = signal(null, ...(ngDevMode ? [{ debugName: "parentPath" }] : []));
-        this.getValue = computed(() => {
-            return this.fullPath() ? this.extractValue(this.fullPath()) : null;
-        }, ...(ngDevMode ? [{ debugName: "getValue", equal: isEqual }] : [{ equal: isEqual }]));
-        this.validationRules = computed(() => {
-            const validationsRaw = this.options()['validations'];
-            if (validationsRaw == null) {
-                return [];
+//#endregion
+//#region ----   Container Builder Implementation   ----
+/**
+ * Abstract base container builder - Open/Closed Principle
+ * Provides common functionality for all container types
+ */
+class BaseContainerBuilder {
+    constructor(containerType) {
+        this.containerState = {
+            mode: 'edit',
+            type: 'flex-layout',
+            children: [],
+        };
+        this.inheritanceContext = {};
+        this.containerState.type = containerType;
+    }
+    // Base methods shared by all containers
+    ensureChildren() {
+        this.containerState.children = this.containerState.children || [];
+    }
+    addWidget(type, options) {
+        const child = new WidgetBuilder();
+        child.type(type);
+        // For value widgets, ensure path is provided
+        const widgetOptions = options ?? {};
+        const path = widgetOptions.path;
+        const name = widgetOptions.name;
+        if (this.isValueWidget(type) && !path) {
+            throw new Error(`Value widget '${type}' requires a 'path' property`);
+        }
+        // Set name and path in widget state, not options
+        if (name) {
+            child.name(name);
+        }
+        if (path) {
+            child.path(path);
+        }
+        // Remove name and path from options
+        const { name: _, path: __, ...cleanOptions } = widgetOptions;
+        // IMPORTANT: Apply inheritance context BEFORE setting options
+        // This ensures that inherited properties (readonly, disabled, etc.) are applied first
+        // Then user-provided options will override them if explicitly set
+        child.withInheritanceContext(this.inheritanceContext);
+        child.options(cleanOptions);
+        this.ensureChildren();
+        this.containerState.children.push(child.build());
+        return this;
+    }
+    isValueWidget(type) {
+        const valueWidgetTypes = [
+            'text-editor',
+            'large-text-editor',
+            'rich-text-editor',
+            'password-editor',
+            'number-editor',
+            'select-editor',
+            'lookup-editor',
+            'selection-list-editor',
+            'date-time-editor',
+            'toggle-editor',
+            'color-editor',
+        ];
+        return valueWidgetTypes.includes(type);
+    }
+    build() {
+        const result = {
+            type: this.containerState.type,
+            children: this.containerState.children,
+            options: this.containerState.options,
+            mode: this.containerState.mode,
+            visible: this.containerState.visible,
+        };
+        // Add name with _form_field suffix for form fields
+        if (this.containerState.type === 'form-field') {
+            if (this.containerState.name) {
+                result.name = this.containerState.name;
             }
-            return Object.values(this.options()['validations'])
-                .filter((c) => c != null)
-                .map((c) => ({
-                rule: c.rule,
-                message: c.message,
-                options: c.options,
-            }));
-        }, ...(ngDevMode ? [{ debugName: "validationRules" }] : []));
-    }
-    ngOnInit() {
-        this._isValueWidget = this.config.properties?.some((c) => c.name == 'path') ?? false;
-        if (this.isValueWidget()) {
-            this.detectFullPath();
-            if (!isNil(this.defaultValue) && isNil(this.getValue())) {
-                this.setValue(this.defaultValue);
+            else if (this.containerState.options?.['label']) {
+                result.name = labelToPath(this.containerState.options['label']) + '_form_field';
             }
+            // Form fields don't have path
         }
-        //
-        super.ngOnInit();
-    }
-    extractValue(path) {
-        const rawValue = this.contextService.getValue(path);
-        if (this.node.valueTransforms?.getter) {
-            return this.node.valueTransforms?.getter(rawValue);
-        }
-        return rawValue;
-    }
-    setValue(value) {
-        if (this.node.valueTransforms?.setter) {
-            value = this.node.valueTransforms?.setter(value);
-        }
-        const oldValue = this.getValue();
-        value = isUndefined(value) ? null : value;
-        if (isNil(value) && isNil(oldValue)) {
-            return;
-        }
-        if (isEqual(oldValue, value)) {
-            return;
-        }
-        if (this.fullPath()) {
-            this.contextService.update(this.fullPath(), value);
-            this.onValueChanged.next({ sender: this });
-        }
-    }
-    detectFullPath() {
-        const sections = [];
-        const ids = [];
-        //
-        let parent = this;
-        //
-        while (parent) {
-            const isValueWidget = parent instanceof AXPValueWidgetComponent && parent.isValueWidget();
-            const valueParent = parent;
-            const path = valueParent.path ?? (isValueWidget ? valueParent.name : null);
-            const id = valueParent.name;
-            //
-            if (path) {
-                sections.push(path);
+        else {
+            // Other containers can have name and path
+            if (this.containerState.name) {
+                result.name = this.containerState.name;
             }
-            if (parent.index != null && isValueWidget) {
-                sections.push(`[${parent.index}]`);
+            if (this.containerState.path) {
+                result.path = this.containerState.path;
             }
-            if (id) {
-                ids.push(id);
-                if (parent.index != null) {
-                    ids.push(`${parent.index}`);
-                }
+            if (this.containerState.defaultValue !== undefined) {
+                result.defaultValue = this.containerState.defaultValue;
             }
-            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);
         }
+        return result;
     }
-    handleValueChanged(e) {
-        if (e.isUserInteraction) {
-            this.setValue(e.value);
-        }
+}
+/**
+ * Base container builder mixin - Interface Segregation Principle
+ * Provides common container operations
+ */
+class BaseContainerMixin extends BaseContainerBuilder {
+    name(name) {
+        this.containerState.name = name;
+        return this;
+    }
+    path(path) {
+        this.containerState.path = path;
+        return this;
+    }
+    mode(mode) {
+        this.containerState.mode = mode;
+        this.inheritanceContext.mode = mode;
+        return this;
+    }
+    visible(condition) {
+        if (!this.containerState.options)
+            this.containerState.options = {};
+        this.containerState.options['visible'] = condition;
+        this.inheritanceContext.visible = condition;
+        return this;
+    }
+    disabled(condition) {
+        if (!this.containerState.options)
+            this.containerState.options = {};
+        this.containerState.options['disabled'] = condition;
+        this.inheritanceContext.disabled = condition;
+        return this;
+    }
+    readonly(condition) {
+        if (!this.containerState.options)
+            this.containerState.options = {};
+        this.containerState.options['readonly'] = condition;
+        this.inheritanceContext.readonly = condition;
+        return this;
+    }
+    direction(direction) {
+        if (!this.containerState.options)
+            this.containerState.options = {};
+        this.containerState.options['direction'] = direction;
+        this.inheritanceContext.direction = direction;
+        return this;
+    }
+    // Inheritance context methods
+    withInheritanceContext(context) {
+        this.inheritanceContext = mergeInheritanceContext(context);
+        return this;
+    }
+    getInheritanceContext() {
+        return { ...this.inheritanceContext };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPValueWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPValueWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPValueWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-class AXPDataListWidgetComponent extends AXPValueWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.dataService = inject(AXPDataSourceDefinitionProviderService);
-        this.textField = computed(() => this.options()['textField'] ?? 'title', ...(ngDevMode ? [{ debugName: "textField" }] : []));
-        this.valueField = computed(() => this.options()['valueField'] ?? 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
-        this.dataSource = signal(convertArrayToDataSource([]), ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
-        this.isReady = computed(() => {
-            const key = this.dataSource().config?.key;
-            const valueField = this.valueField();
-            const result = key == valueField;
-            return result;
-        }, ...(ngDevMode ? [{ debugName: "isReady" }] : []));
-        this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
-        this.rf = effect(async () => {
-            const rawValue = this.options()['dataSource'];
-            // static  datasource class
-            if (rawValue instanceof AXDataSource) {
-                this.dataSource.set(rawValue);
-            }
-            // static array datasource
-            else if (Array.isArray(rawValue)) {
-                const ds = new AXDataSource({
-                    key: this.valueField(),
-                    pageSize: 10,
-                    load: async (e) => {
-                        const raw = this.options()['dataSource'];
-                        return {
-                            items: raw,
-                            total: raw.length,
-                        };
-                    },
-                    byKey: (key) => {
-                        const raw = this.options()['dataSource'];
-                        const item = raw.filter((c) => c[this.valueField()] == key);
-                        return Promise.resolve(item[0]);
-                    },
-                });
-                this.dataSource.set(ds);
-            }
-            // resolve data source by name
-            else if (rawValue && (typeof rawValue == 'string' || typeof rawValue == 'object')) {
-                const id = typeof rawValue == 'object' ? rawValue['id'] : rawValue;
-                const c = await this.dataService.get(id);
-                if (this.mode == 'designer' && c?.samples?.length) {
-                    this.dataSource.set(convertArrayToDataSource(c.samples, {
-                        key: this.valueField(),
-                        pageSize: 500,
-                    }));
-                }
-                else {
-                    const ds = c?.source();
-                    if (ds && ds instanceof Promise) {
-                        const d = await ds;
-                        this.dataSource.set(d);
-                    }
-                    else if (ds) {
-                        this.dataSource.set(ds);
-                    }
-                    // empty datasource
-                    else {
-                        this.dataSource.set(convertArrayToDataSource([]));
-                    }
+/**
+ * Layout container mixin - Interface Segregation Principle
+ * Provides layout-specific operations
+ */
+class LayoutContainerMixin extends BaseContainerMixin {
+    layout(value) {
+        // Map layout intent to grid item sizing so containers like `form-field`
+        // can span multiple columns inside grid/fieldset layouts.
+        if (!this.containerState.options)
+            this.containerState.options = {};
+        if (typeof value === 'number') {
+            // Direct numeric shorthand → colSpan
+            this.containerState.options.colSpan = value;
+        }
+        else if (value) {
+            // Try to extract a reasonable colSpan from breakpoint positions
+            const positions = value.positions;
+            if (positions) {
+                const colSpan = positions?.lg?.colSpan ??
+                    positions?.xl?.colSpan ??
+                    positions?.xxl?.colSpan ??
+                    positions?.md?.colSpan ??
+                    positions?.sm?.colSpan;
+                if (colSpan != null) {
+                    this.containerState.options.colSpan = colSpan;
                 }
             }
-            // empty datasource
-            else {
-                this.dataSource.set(convertArrayToDataSource([]));
-            }
-        }, ...(ngDevMode ? [{ debugName: "rf" }] : []));
-        this.effect2 = effect(async () => {
-            const value = this.getValue();
-            const items = [];
-            if (Array.isArray(value)) {
-                items.push(...(await Promise.all(value.map((item) => this.extractItem(item)))));
-            }
-            else {
-                items.push(await this.extractItem(value));
-            }
-            this.selectedItems.set(items.filter((c) => c != null));
-        }, ...(ngDevMode ? [{ debugName: "effect2" }] : []));
+        }
+        return this;
     }
-    async extractItem(item) {
-        if (isNil(item)) {
-            return null;
+}
+/**
+ * Child container mixin - Interface Segregation Principle
+ * Provides child container management
+ */
+class ChildContainerMixin extends LayoutContainerMixin {
+    grid(delegate) {
+        const container = new GridContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
         }
-        if (isObjectLike(item) && get(item, this.textField()) != null) {
-            return item;
+        this.ensureChildren();
+        this.containerState.children.push(container.build());
+        return this;
+    }
+    flex(delegate) {
+        const container = new FlexContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
         }
-        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;
-            }
+        this.ensureChildren();
+        this.containerState.children.push(container.build());
+        return this;
+    }
+    panel(delegate) {
+        const container = new PanelContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
         }
-        return isObjectLike(item)
-            ? item
-            : {
-                [this.valueField()]: item,
-                [this.textField()]: item,
-            };
+        this.ensureChildren();
+        this.containerState.children.push(container.build());
+        return this;
+    }
+    page(delegate) {
+        const container = new PageContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
+        }
+        this.ensureChildren();
+        this.containerState.children.push(container.build());
+        return this;
+    }
+    tabset(delegate) {
+        const container = new TabsetContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
+        }
+        this.ensureChildren();
+        this.containerState.children.push(container.build());
+        return this;
+    }
+    fieldset(delegate) {
+        const container = new FieldsetContainerBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
+        }
+        this.ensureChildren();
+        this.containerState.children.push(container.build());
+        return this;
+    }
+    dialog(delegate) {
+        const container = new DialogContainerBuilder(); // Will use inject() fallback
+        if (delegate) {
+            delegate(container);
+        }
+        return container;
+    }
+    formField(label, delegate) {
+        const field = new FormFieldBuilder(label);
+        field.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(field);
+        }
+        this.ensureChildren();
+        this.containerState.children.push(field.build());
+        return this;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDataListWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDataListWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPDataListWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-class AXPColumnWidgetComponent {
-    constructor() {
-        this.token = inject(AXP_WIDGET_COLUMN_TOKEN);
-        this.path = this.token.path;
-        this.options = this.token.options ?? {};
-        this.rawValue = null;
-        this.nullText = this.options['nullText'];
-        this.nullValue = this.options['nullValue'];
-        this.value = computed(() => {
-            if (isNil(this.rawValue) && !isNil(this.nullValue)) {
-                return this.nullValue;
-            }
-            return this.rawValue;
-        }, ...(ngDevMode ? [{ debugName: "value" }] : []));
+/**
+ * Widget container mixin - Interface Segregation Principle
+ * Provides widget creation operations
+ */
+class WidgetContainerMixin extends ChildContainerMixin {
+    textBox(options) {
+        this.addWidget('text-editor', options);
+        return this;
+    }
+    largeTextBox(options) {
+        this.addWidget('large-text-editor', options);
+        return this;
+    }
+    richText(options) {
+        this.addWidget('rich-text-editor', options);
+        return this;
+    }
+    passwordBox(options) {
+        this.addWidget('password-editor', options);
+        return this;
+    }
+    numberBox(options) {
+        this.addWidget('number-editor', options);
+        return this;
+    }
+    selectBox(options) {
+        this.addWidget('select-editor', options);
+        return this;
+    }
+    lookupBox(options) {
+        this.addWidget('lookup-editor', options);
+        return this;
+    }
+    selectionList(options) {
+        this.addWidget('selection-list-editor', options);
+        return this;
+    }
+    dateTimeBox(options) {
+        this.addWidget('date-time-editor', options);
+        return this;
+    }
+    toggleSwitch(options) {
+        this.addWidget('toggle-editor', options);
+        return this;
+    }
+    colorBox(options) {
+        this.addWidget('color-editor', options);
+        return this;
+    }
+    list(delegate) {
+        const container = new ListWidgetBuilder();
+        container.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(container);
+        }
+        this.ensureChildren();
+        this.containerState.children.push(container.build());
+        return this;
+    }
+    customWidget(type, options) {
+        this.addWidget(type, options);
+        return this;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPColumnWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPColumnWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPColumnWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-
-class AXPBoxModelLayoutWidgetComponent extends AXPLayoutBaseWidgetComponent {
+/**
+ * Flex Container Builder - Liskov Substitution Principle
+ * Extends WidgetContainerMixin to inherit all common functionality
+ */
+class FlexContainerBuilder extends WidgetContainerMixin {
     constructor() {
-        super(...arguments);
-        this.hostBoxStyle = computed(() => {
-            const options = this.options();
-            const style = {};
-            const spacing = options?.['spacing'];
-            const border = options?.['border'];
-            const backgroundColor = options?.['backgroundColor'];
-            const direction = options?.['direction'];
-            const overflow = options?.['overflow'];
-            const overflowX = options?.['overflowX'];
-            const overflowY = options?.['overflowY'];
-            style['background-color'] = backgroundColor ?? '';
-            style['padding'] = spacing?.padding ?? '';
-            style['margin'] = spacing?.margin ?? '';
-            style['border-radius'] = border?.radius ?? '';
-            style['border-width'] = border?.width ?? '';
-            style['border-color'] = border?.color ?? '';
-            style['border-style'] = border?.style ?? '';
-            style['overflow'] = overflow ?? '';
-            style['overflow-x'] = overflowX ?? '';
-            style['overflow-y'] = overflowY ?? '';
-            style['direction'] = direction ?? '';
-            return style;
-        }, ...(ngDevMode ? [{ debugName: "hostBoxStyle" }] : []));
-        this.blockStyle = computed(() => {
-            const options = this.options();
-            const style = { ...this.hostBoxStyle() };
-            const width = options?.['width'];
-            const minWidth = options?.['minWidth'];
-            const maxWidth = options?.['maxWidth'];
-            const height = options?.['height'];
-            const minHeight = options?.['minHeight'];
-            const maxHeight = options?.['maxHeight'];
-            style['min-width'] = minWidth ?? '';
-            style['width'] = width ?? '';
-            style['max-width'] = maxWidth ?? '';
-            style['min-height'] = minHeight ?? '';
-            style['height'] = height ?? '';
-            style['max-height'] = maxHeight ?? '';
-            return style;
-        }, ...(ngDevMode ? [{ debugName: "blockStyle" }] : []));
-        this.inlineStyle = computed(() => {
-            return { ...this.hostBoxStyle() };
-        }, ...(ngDevMode ? [{ debugName: "inlineStyle" }] : []));
-        this.blockClass = computed(() => {
-            return {
-                'ax-block': true,
-                'ax-w-full': true,
-                // 'ax-widget-outline': true,
-            };
-        }, ...(ngDevMode ? [{ debugName: "blockClass" }] : []));
-        this.inlineClass = computed(() => {
-            return {
-                'ax-inline-block': true,
-            };
-        }, ...(ngDevMode ? [{ debugName: "inlineClass" }] : []));
+        super('flex-layout');
+    }
+    setOptions(options) {
+        this.containerState.options = { ...this.containerState.options, ...options };
+        return this;
+    }
+    // Individual fluent methods for Flex
+    setDirection(direction) {
+        return this.setOptions({ flexDirection: direction });
+    }
+    setWrap(wrap) {
+        return this.setOptions({ flexWrap: wrap });
+    }
+    setJustifyContent(justify) {
+        return this.setOptions({ justifyContent: justify });
+    }
+    setAlignItems(align) {
+        return this.setOptions({ alignItems: align });
+    }
+    setGap(gap) {
+        return this.setOptions({ gap });
+    }
+    setBackgroundColor(color) {
+        return this.setOptions({ backgroundColor: color });
+    }
+    setPadding(padding) {
+        return this.setOptions({ spacing: { padding } });
+    }
+    setMargin(margin) {
+        return this.setOptions({ spacing: { margin } });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPBoxModelLayoutWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-
-class AXPBlockBaseLayoutWidgetComponent extends AXPBoxModelLayoutWidgetComponent {
+/**
+ * Grid Container Builder - Liskov Substitution Principle
+ * Extends WidgetContainerMixin to inherit all common functionality
+ */
+class GridContainerBuilder extends WidgetContainerMixin {
     constructor() {
-        super(...arguments);
-        this.hostClass = computed(() => this.blockClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
-        this.hostStyle = computed(() => this.blockStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
+        super('grid-layout');
+    }
+    setOptions(options) {
+        this.containerState.options = { ...this.containerState.options, ...options };
+        return this;
+    }
+    // Individual fluent methods for Grid
+    setColumns(columns) {
+        return this.setOptions({ grid: { default: { columns } } });
+    }
+    setRows(rows) {
+        return this.setOptions({ grid: { default: { rows } } });
+    }
+    setGap(gap) {
+        return this.setOptions({ grid: { default: { gap } } });
+    }
+    setJustifyItems(justify) {
+        return this.setOptions({ grid: { default: { justifyItems: justify } } });
+    }
+    setAlignItems(align) {
+        return this.setOptions({ grid: { default: { alignItems: align } } });
+    }
+    setAutoFlow(flow) {
+        return this.setOptions({ grid: { default: { autoFlow: flow } } });
+    }
+    setBackgroundColor(color) {
+        return this.setOptions({ backgroundColor: color });
+    }
+    setPadding(padding) {
+        return this.setOptions({ spacing: { padding } });
+    }
+    setMargin(margin) {
+        return this.setOptions({ spacing: { margin } });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPBlockBaseLayoutWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-
-class AXPFlexBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent {
+/**
+ * Panel Container Builder - Liskov Substitution Principle
+ * Extends WidgetContainerMixin to inherit all common functionality
+ */
+class PanelContainerBuilder extends WidgetContainerMixin {
     constructor() {
-        super(...arguments);
-        this.flex = computed(() => this.options(), ...(ngDevMode ? [{ debugName: "flex" }] : []));
-        this.hostFlexStyle = computed(() => {
-            const blockStyle = this.blockStyle();
-            const style = { ...blockStyle };
-            const flex = this.flex();
-            if (isNil(flex?.flexDirection)) {
-                style['flex-direction'] = '';
-            }
-            else {
-                style['flex-direction'] = flex.flexDirection;
-            }
-            if (isNil(flex?.flexWrap)) {
-                style['flex-wrap'] = '';
-            }
-            else {
-                style['flex-wrap'] = flex.flexWrap;
-            }
-            //TODO NEED TO FIX LATER
-            style['overflow'] = flex?.flexWrap === 'nowrap' ? 'auto' : '';
-            //END
-            if (isNil(flex?.justifyContent)) {
-                style['justify-content'] = '';
-            }
-            else {
-                style['justify-content'] = flex.justifyContent;
-            }
-            if (isNil(flex?.alignItems)) {
-                style['align-items'] = '';
-            }
-            else {
-                style['align-items'] = flex.alignItems;
-            }
-            if (isNil(flex?.gap)) {
-                style['gap'] = '';
-            }
-            else {
-                style['gap'] = flex.gap;
-            }
-            return style;
-        }, ...(ngDevMode ? [{ debugName: "hostFlexStyle" }] : []));
-        this.hostFlexClass = computed(() => {
-            return {
-                ...this.blockClass(),
-                'ax-flex': true,
-                'ax-h-full': true,
-            };
-        }, ...(ngDevMode ? [{ debugName: "hostFlexClass" }] : []));
-        this.hostClass = computed(() => {
-            return this.hostFlexClass();
-        }, ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
-        this.hostStyle = computed(() => {
-            return this.hostFlexStyle();
-        }, ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent }); }
+        super('panel-layout');
+    }
+    setOptions(options) {
+        this.containerState.options = { ...this.containerState.options, ...options };
+        return this;
+    }
+    // Individual fluent methods for Panel
+    setCaption(caption) {
+        return this.setOptions({ caption });
+    }
+    setIcon(icon) {
+        return this.setOptions({ icon });
+    }
+    setLook(look) {
+        return this.setOptions({ look });
+    }
+    setShowHeader(show) {
+        return this.setOptions({ showHeader: show });
+    }
+    setCollapsed(collapsed) {
+        return this.setOptions({ collapsed });
+    }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPFlexBaseLayoutWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-
-class AXPInlineBaseLayoutWidgetComponent extends AXPBoxModelLayoutWidgetComponent {
+/**
+ * Page Container Builder - Liskov Substitution Principle
+ * Extends WidgetContainerMixin to inherit all common functionality
+ */
+class PageContainerBuilder extends WidgetContainerMixin {
     constructor() {
-        super(...arguments);
-        this.hostClass = computed(() => this.inlineClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
-        this.hostStyle = computed(() => this.inlineStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
+        super('page-layout');
+    }
+    setOptions(options) {
+        this.containerState.options = { ...this.containerState.options, ...options };
+        return this;
+    }
+    // Individual fluent methods for Page
+    setBackgroundColor(color) {
+        return this.setOptions({ backgroundColor: color });
+    }
+    setTheme(theme) {
+        return this.setOptions({ theme });
+    }
+    setHasHeader(hasHeader) {
+        return this.setOptions({ hasHeader });
+    }
+    setHasFooter(hasFooter) {
+        return this.setOptions({ hasFooter });
+    }
+    setDirection(direction) {
+        return this.setOptions({ direction });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPInlineBaseLayoutWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-
-class AXPFlexItemBaseLayoutWidgetComponent extends AXPInlineBaseLayoutWidgetComponent {
+/**
+ * Tabset Container Builder - Liskov Substitution Principle
+ * Extends WidgetContainerMixin to inherit all common functionality
+ */
+class TabsetContainerBuilder extends WidgetContainerMixin {
     constructor() {
-        super(...arguments);
-        this.flexItem = computed(() => this.options(), ...(ngDevMode ? [{ debugName: "flexItem" }] : []));
-        this.hostFlexItemStyle = computed(() => {
-            const inlineStyle = this.blockStyle();
-            const style = { ...inlineStyle };
-            const fi = this.flexItem();
-            if (isNil(fi?.order)) {
-                style['order'] = '';
-            }
-            else {
-                style['order'] = fi.order;
-            }
-            if (isNil(fi?.grow)) {
-                style['flex-grow'] = '';
-            }
-            else {
-                style['flex-grow'] = fi.grow;
-            }
-            if (isNil(fi?.shrink)) {
-                style['flex-shrink'] = '';
-            }
-            else {
-                style['flex-shrink'] = fi.shrink;
-            }
-            if (isNil(fi?.basis)) {
-                style['flex-basis'] = '';
-            }
-            else {
-                style['flex-basis'] = fi.basis;
-            }
-            if (isNil(fi?.alignSelf)) {
-                style['align-self'] = '';
-            }
-            else {
-                style['align-self'] = fi.alignSelf;
-            }
-            return style;
-        }, ...(ngDevMode ? [{ debugName: "hostFlexItemStyle" }] : []));
-        this.hostFlexItemClass = computed(() => {
-            return {
-                ...this.blockClass(),
-            };
-        }, ...(ngDevMode ? [{ debugName: "hostFlexItemClass" }] : []));
-        this.hostClass = computed(() => {
-            return this.hostFlexItemClass();
-        }, ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
-        this.hostStyle = computed(() => {
-            return this.hostFlexItemStyle();
-        }, ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent }); }
+        super('tabset-layout');
+    }
+    setOptions(options) {
+        this.containerState.options = { ...this.containerState.options, ...options };
+        return this;
+    }
+    // Individual fluent methods for Tabset
+    setLook(look) {
+        return this.setOptions({ look });
+    }
+    setOrientation(orientation) {
+        return this.setOptions({ orientation });
+    }
+    setActiveIndex(index) {
+        return this.setOptions({ activeIndex: index });
+    }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPFlexItemBaseLayoutWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-
-class AXPGridBaseLayoutWidgetComponent extends AXPBlockBaseLayoutWidgetComponent {
-    constructor() {
-        super(...arguments);
-        this.grid = computed(() => this.options()?.grid, ...(ngDevMode ? [{ debugName: "grid" }] : []));
-        this.hostGridStyle = computed(() => {
-            const style = { ...this.inlineStyle() };
-            const g = this.grid()?.default;
-            if (g?.gap)
-                style['gap'] = g.gap;
-            return style;
-        }, ...(ngDevMode ? [{ debugName: "hostGridStyle" }] : []));
-        this.hostGridClass = computed(() => {
-            const cls = {
-                ...this.inlineClass(),
-                'ax-grid': true,
-            };
-            const g = this.grid()?.default;
-            if (g?.columns)
-                cls[`lg:ax-grid-cols-${g.columns}`] = true;
-            if (g?.rows)
-                cls[`lg:ax-grid-rows-${g.rows}`] = true;
-            if (g?.justifyItems)
-                cls[`lg:ax-justify-items-${g.justifyItems}`] = true;
-            if (g?.alignItems)
-                cls[`lg:ax-align-items-${g.alignItems}`] = true;
-            if (g?.autoFlow)
-                cls[`lg:ax-grid-flow-${g.autoFlow}`] = true;
-            return cls;
-        }, ...(ngDevMode ? [{ debugName: "hostGridClass" }] : []));
-        this.hostClass = computed(() => this.hostGridClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
-        this.hostStyle = computed(() => this.hostGridStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent }); }
+/**
+ * Form Field Builder - Liskov Substitution Principle
+ * Can only contain ONE widget with automatic path generation
+ */
+class FormFieldBuilder extends LayoutContainerMixin {
+    constructor(label) {
+        super('form-field');
+        this.hasWidget = false;
+        this.containerState.options = { label, showLabel: true };
+    }
+    setOptions(options) {
+        this.containerState.options = { ...this.containerState.options, ...options };
+        return this;
+    }
+    setLabel(label) {
+        return this.setOptions({ label });
+    }
+    setShowLabel(showLabel) {
+        return this.setOptions({ showLabel });
+    }
+    // Single widget methods with automatic path generation
+    addSingleWidget(type, options) {
+        if (this.hasWidget) {
+            throw new Error('Form field can only contain one widget');
+        }
+        const formFieldName = this.containerState.name;
+        const formFieldPath = this.containerState.path; // Get explicit path from form field
+        const formFieldLabel = this.containerState.options?.['label'];
+        const widgetName = options?.name;
+        // Generate widget path: explicit path -> widget name -> form field name -> label -> random
+        let widgetPath;
+        if (formFieldPath) {
+            widgetPath = formFieldPath; // Use explicit form field path first
+        }
+        else if (widgetName) {
+            widgetPath = widgetName;
+        }
+        else if (formFieldName) {
+            widgetPath = formFieldName; // Use form field name as default path
+        }
+        else if (formFieldLabel) {
+            widgetPath = labelToPath(formFieldLabel);
+        }
+        else {
+            widgetPath = generateRandomId();
+        }
+        const finalName = widgetName || formFieldName || widgetPath;
+        const child = new WidgetBuilder();
+        child.type(type);
+        child.name(finalName);
+        child.path(widgetPath);
+        // Remove name from options since it's now in state
+        const { name: _, ...cleanOptions } = (options || {});
+        child.withInheritanceContext(this.inheritanceContext);
+        child.options(cleanOptions);
+        // IMPORTANT: Store the widget builder, don't build it yet!
+        // This allows properties set after this method (like disabled, readonly) to be applied
+        this.childWidget = child;
+        this.hasWidget = true;
+        return this;
+    }
+    textBox(options) {
+        return this.addSingleWidget('text-editor', options);
+    }
+    largeTextBox(options) {
+        return this.addSingleWidget('large-text-editor', options);
+    }
+    richText(options) {
+        return this.addSingleWidget('rich-text-editor', options);
+    }
+    passwordBox(options) {
+        return this.addSingleWidget('password-editor', options);
+    }
+    numberBox(options) {
+        return this.addSingleWidget('number-editor', options);
+    }
+    selectBox(options) {
+        return this.addSingleWidget('select-editor', options);
+    }
+    lookupBox(options) {
+        return this.addSingleWidget('lookup-editor', options);
+    }
+    selectionList(options) {
+        return this.addSingleWidget('selection-list-editor', options);
+    }
+    dateTimeBox(options) {
+        return this.addSingleWidget('date-time-editor', options);
+    }
+    toggleSwitch(options) {
+        return this.addSingleWidget('toggle-editor', options);
+    }
+    colorBox(options) {
+        return this.addSingleWidget('color-editor', options);
+    }
+    customWidget(type, options) {
+        return this.addSingleWidget(type, options);
+    }
+    // Override property setters to propagate changes to child widget
+    disabled(condition) {
+        super.disabled(condition);
+        if (this.childWidget) {
+            this.childWidget.withInheritanceContext(this.inheritanceContext);
+        }
+        return this;
+    }
+    readonly(condition) {
+        super.readonly(condition);
+        if (this.childWidget) {
+            this.childWidget.withInheritanceContext(this.inheritanceContext);
+        }
+        return this;
+    }
+    visible(condition) {
+        super.visible(condition);
+        if (this.childWidget) {
+            this.childWidget.withInheritanceContext(this.inheritanceContext);
+        }
+        return this;
+    }
+    direction(direction) {
+        super.direction(direction);
+        if (this.childWidget) {
+            this.childWidget.withInheritanceContext(this.inheritanceContext);
+        }
+        return this;
+    }
+    mode(mode) {
+        super.mode(mode);
+        if (this.childWidget) {
+            this.childWidget.withInheritanceContext(this.inheritanceContext);
+        }
+        return this;
+    }
+    // Override withInheritanceContext to pass it to the child widget if it exists
+    withInheritanceContext(context) {
+        // Call parent implementation first
+        super.withInheritanceContext(context);
+        // If we have a child widget, update its inheritance context too
+        if (this.childWidget) {
+            this.childWidget.withInheritanceContext(this.inheritanceContext);
+        }
+        return this;
+    }
+    // Override build() to build the child widget at the last moment
+    build() {
+        // Build the child widget and add it to children before building the form field
+        if (this.childWidget) {
+            this.ensureChildren();
+            this.containerState.children.push(this.childWidget.build());
+        }
+        // Call parent build
+        return super.build();
+    }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPGridBaseLayoutWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-
-class AXPGridItemBaseLayoutWidgetComponent extends AXPFlexBaseLayoutWidgetComponent {
+/**
+ * Fieldset Container Builder - Liskov Substitution Principle
+ * Extends LayoutContainerMixin to inherit layout functionality
+ * Specialized for form fields only
+ */
+class FieldsetContainerBuilder extends LayoutContainerMixin {
     constructor() {
-        super(...arguments);
-        this.gridItem = computed(() => this.options(), ...(ngDevMode ? [{ debugName: "gridItem" }] : []));
-        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" }] : []));
-        this.hostGridItemClass = computed(() => {
-            const cls = { ...this.hostFlexClass() };
-            const g = this.gridItem();
-            if (g?.colSpan)
-                cls[`lg:ax-col-span-${g.colSpan}`] = true;
-            if (g?.colStart)
-                cls[`lg:ax-col-start-${g.colStart}`] = true;
-            if (g?.colEnd)
-                cls[`lg:ax-col-end-${g.colEnd}`] = true;
-            if (g?.rowSpan)
-                cls[`lg:ax-row-span-${g.rowSpan}`] = true;
-            if (g?.rowStart)
-                cls[`lg:ax-row-start-${g.rowStart}`] = true;
-            if (g?.rowEnd)
-                cls[`lg:ax-row-end-${g.rowEnd}`] = true;
-            return cls;
-        }, ...(ngDevMode ? [{ debugName: "hostGridItemClass" }] : []));
-        this.hostClass = computed(() => this.hostGridItemClass(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
-        this.hostStyle = computed(() => this.hostGridItemStyle(), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent }); }
+        super('fieldset-layout');
+        this.containerState.options = {};
+    }
+    setOptions(options) {
+        this.containerState.options = { ...this.containerState.options, ...options };
+        return this;
+    }
+    // Individual fluent methods for Fieldset
+    setTitle(title) {
+        return this.setOptions({ title });
+    }
+    setDescription(description) {
+        return this.setOptions({ description });
+    }
+    setIcon(icon) {
+        return this.setOptions({ icon });
+    }
+    setCollapsible(collapsible) {
+        return this.setOptions({ collapsible });
+    }
+    setIsOpen(isOpen) {
+        return this.setOptions({ isOpen });
+    }
+    setLook(look) {
+        return this.setOptions({ look });
+    }
+    setShowHeader(showHeader) {
+        return this.setOptions({ showHeader });
+    }
+    setCols(cols) {
+        return this.setOptions({ cols });
+    }
+    // Only form fields are allowed in fieldset
+    formField(label, delegate) {
+        const field = new FormFieldBuilder(label);
+        field.withInheritanceContext(this.inheritanceContext);
+        if (delegate) {
+            delegate(field);
+        }
+        this.ensureChildren();
+        this.containerState.children.push(field.build());
+        return this;
+    }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPGridItemBaseLayoutWidgetComponent, decorators: [{
-            type: Injectable
-        }] });
-
-class AXPWidgetRegistryService {
-    /**
-     *
-     */
+/**
+ * List Widget Builder - Liskov Substitution Principle
+ * Extends WidgetContainerMixin to inherit all common functionality
+ */
+class ListWidgetBuilder extends WidgetContainerMixin {
     constructor() {
-        this.types = new Map();
-        AXPWidgetRegistryService.instance = this;
+        super('list');
     }
-    register(widget) {
-        this.types.set(widget.name, widget);
+    setOptions(options) {
+        this.containerState.options = { ...this.containerState.options, ...options };
+        return this;
     }
-    extend(parentName, widget) {
-        const parentWidget = this.resolve(parentName);
-        const newWidget = merge({}, parentWidget, widget);
-        newWidget.name = widget.name;
-        this.register(newWidget);
+    // Individual fluent methods for List Widget
+    setDataSource(dataSource) {
+        return this.setOptions({ dataSource });
     }
-    resolve(name) {
-        const widget = this.types.get(name);
-        if (!widget) {
-            throw new Error(`Widget with name "${name}" does not exist.`);
-        }
-        return widget;
+    setColumns(columns) {
+        return this.setOptions({ columns });
+    }
+    // Event handlers
+    setOnRowClick(handler) {
+        return this.setOptions({ onRowClick: handler });
+    }
+    setOnRowDoubleClick(handler) {
+        return this.setOptions({ onRowDoubleClick: handler });
+    }
+    setOnSelectionChange(handler) {
+        return this.setOptions({ onSelectionChange: handler });
+    }
+    setOnRowCommand(handler) {
+        return this.setOptions({ onRowCommand: handler });
+    }
+    // Table features
+    setPaging(paging) {
+        return this.setOptions({ paging });
+    }
+    setShowHeader(show) {
+        return this.setOptions({ showHeader: show });
+    }
+    setShowFooter(show) {
+        return this.setOptions({ showFooter: show });
+    }
+    setFixHeader(fix) {
+        return this.setOptions({ fixHeader: fix });
+    }
+    setFixFooter(fix) {
+        return this.setOptions({ fixFooter: fix });
+    }
+    setFetchDataMode(mode) {
+        return this.setOptions({ fetchDataMode: mode });
+    }
+    setParentField(field) {
+        return this.setOptions({ parentField: field });
     }
-    all() {
-        return Array.from(this.types.values());
+    setMinHeight(height) {
+        return this.setOptions({ minHeight: height });
+    }
+    // Selection & Index
+    setShowIndex(show) {
+        return this.setOptions({ showIndex: show });
+    }
+    setAllowSelection(allow) {
+        return this.setOptions({ allowSelection: allow });
+    }
+    // Commands
+    setPrimaryCommands(commands) {
+        return this.setOptions({ primaryCommands: commands });
+    }
+    setSecondaryCommands(commands) {
+        return this.setOptions({ secondaryCommands: commands });
+    }
+    // Loading
+    setLoading(loading) {
+        return this.setOptions({ loading });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetRegistryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetRegistryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-class AXPWidgetColumnRendererComponent extends AXDataTableColumnComponent {
-    constructor() {
-        super(...arguments);
-        this.widgetRegistery = inject(AXPWidgetRegistryService);
-        this.grid = inject(AXBaseDataTable);
-        this.mergedOptions = signal({}, ...(ngDevMode ? [{ debugName: "mergedOptions" }] : []));
-        this.loadingRow = signal(null, ...(ngDevMode ? [{ debugName: "loadingRow" }] : []));
-        this.injector = inject(Injector);
-        this.cdr = inject(ChangeDetectorRef);
-    }
-    get node() {
-        return this._node;
-    }
-    set node(v) {
-        this._node = v;
-    }
-    get renderFooterTemplate() {
-        return this.footerTemplate ?? this._contentFooterTemplate;
-    }
-    get renderCellTemplate() {
-        return this.cellTemplate ?? this._contentCellTemplate;
-    }
-    async handleExpandRow(row) {
-        this.loadingRow.set(row);
-        await this.grid.expandRow(row);
-        this.loadingRow.set(null);
-        // if (row.data?.__meta__?.expanded === undefined) {
-        //   this.width = `${parseInt(this.width as string) + 24}px`;
-        // }
-    }
-    get renderHeaderTemplate() {
-        return this.headerTemplate ?? this._contentHeaderTemplate;
-    }
-    get loadingEnabled() {
-        return true;
-    }
-    get name() {
-        return `col-${this.node.path}`;
-    }
-    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) || {});
-        const tokenValue = {
-            path: this.node.path,
-            options: this.mergedOptions(),
+/**
+ * Dialog Container Builder - Specialized for dialog functionality
+ * Uses composition instead of inheritance for cleaner separation
+ */
+class DialogContainerBuilder {
+    constructor(popupService) {
+        this.dialogState = {
+            type: 'flex-layout', // This will be overridden when content layout exists
+            children: [],
+            mode: 'edit',
+            dialogOptions: {
+                title: '',
+                size: 'md',
+                closeButton: false,
+            },
+            actions: {
+                footer: {
+                    prefix: [],
+                    suffix: [],
+                },
+            },
+        };
+        if (popupService) {
+            this.popupService = popupService;
+        }
+        else {
+            this.popupService = inject(AXPopupService);
+        }
+    }
+    setOptions(options) {
+        this.dialogState.dialogOptions = { ...this.dialogState.dialogOptions, ...options };
+        return this;
+    }
+    // Individual fluent methods for Dialog
+    setTitle(title) {
+        return this.setOptions({ title });
+    }
+    setMessage(message) {
+        return this.setOptions({ message });
+    }
+    setSize(size) {
+        return this.setOptions({ size });
+    }
+    setCloseButton(closeButton) {
+        return this.setOptions({ closeButton });
+    }
+    setContext(context) {
+        return this.setOptions({ context });
+    }
+    content(delegate) {
+        if (delegate) {
+            // Create a flex container directly instead of through LayoutBuilder
+            const flexContainer = new FlexContainerBuilder();
+            flexContainer.setDirection('column');
+            flexContainer.setGap('10px');
+            delegate(flexContainer);
+            this.contentLayout = flexContainer.build();
+        }
+        return this;
+    }
+    setActions(delegate) {
+        if (delegate) {
+            const actionBuilder = new ActionBuilder(this);
+            delegate(actionBuilder);
+        }
+        return this;
+    }
+    // Build method to create dialog node
+    build() {
+        // If we have content layout, use it directly to avoid extra wrapper
+        if (this.contentLayout) {
+            return {
+                ...this.contentLayout,
+                // Add dialog-specific properties
+                options: {
+                    ...this.contentLayout.options,
+                    ...this.dialogState.dialogOptions,
+                },
+            };
+        }
+        // Fallback to dialog state structure if no content
+        const result = {
+            ...this.dialogState,
+            children: [],
         };
-        this.widgetInjector = Injector.create({
-            parent: this.injector,
-            providers: [
-                {
-                    provide: AXP_WIDGET_COLUMN_TOKEN,
-                    useValue: tokenValue,
+        // Add dialog-specific properties
+        if (this.dialogState.dialogOptions) {
+            result.options = { ...result.options, ...this.dialogState.dialogOptions };
+        }
+        return result;
+    }
+    // Dialog-specific methods
+    async show() {
+        const dialogNode = this.build();
+        // Import the dialog renderer component dynamically
+        const { AXPDialogRendererComponent } = await Promise.resolve().then(function () { return dialogRenderer_component; });
+        // Create dialog configuration
+        const dialogConfig = {
+            title: this.dialogState.dialogOptions?.title || '',
+            message: this.dialogState.dialogOptions?.message,
+            context: this.dialogState.dialogOptions?.context || {},
+            definition: dialogNode,
+            actions: this.dialogState.actions,
+        };
+        // The Promise resolves when user clicks an action button
+        return new Promise(async (resolve) => {
+            this.popupService.open(AXPDialogRendererComponent, {
+                title: dialogConfig.title,
+                size: this.dialogState.dialogOptions?.size || 'md',
+                closeButton: this.dialogState.dialogOptions?.closeButton || false,
+                closeOnBackdropClick: false,
+                draggable: false,
+                data: {
+                    config: dialogConfig,
+                    callBack: (result) => {
+                        // Resolve with the dialog reference when user clicks an action
+                        resolve(result);
+                    },
                 },
-            ],
+            });
         });
-        this.width = this.customWidth ? this.customWidth : (this.mergedOptions().width ?? '200px');
-        this.allowResizing = this.mergedOptions().allowResizing || true;
-        this.cdr.detectChanges();
     }
-    getInputs(data) {
-        return {
-            rawValue: getSmart(data, this.node.path),
-            rowData: data,
+}
+//#endregion
+//#region ----   Widget Builder Implementation   ----
+/**
+ * Widget Builder - Single Responsibility Principle
+ * Handles individual widget configuration and building
+ */
+class WidgetBuilder {
+    constructor(name) {
+        this.widgetState = {
+            type: 'widget',
+            options: {},
         };
+        this.inheritanceContext = {};
+        if (name) {
+            this.widgetState.name = name;
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetColumnRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.8", type: AXPWidgetColumnRendererComponent, isStandalone: false, selector: "axp-widget-column-renderer", inputs: { caption: "caption", customExpandIcon: "customExpandIcon", customCollapseIcon: "customCollapseIcon", customWidth: "customWidth", node: "node", footerTemplate: "footerTemplate", expandHandler: "expandHandler", cellTemplate: "cellTemplate", headerTemplate: "headerTemplate" }, providers: [
-            AXPLayoutBuilderService,
-            { provide: AXDataTableColumnComponent, useExisting: AXPWidgetColumnRendererComponent },
-        ], viewQueries: [{ propertyName: "_contentFooterTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "_contentCellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "_contentHeaderTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-    <ng-template #header>{{ caption | translate | async }}</ng-template>
-    <ng-template #cell let-row>
-      <div class="ax-flex ax-gap-2 ax-items-center">
-        @if (expandHandler) {
-          <div
-            (click)="handleExpandRow(row)"
-            class="ax-expand-handler"
-            [class.ax-invisible]="row.data.hasChild === false"
-            id="ax-expand-handler-container"
-            [style.padding-inline-start.rem]="row.data?.__meta__?.level * 2"
-          >
-            @if (loadingRow() === row) {
-              <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
-            } @else {
-              @if (row.data?.__meta__?.expanded) {
-                <i [class]="customCollapseIcon || 'far fa-minus-square ax-text-md ax-opacity-75'"></i>
-              } @else {
-                <i [class]="customExpandIcon || 'far fa-plus-square ax-text-md  ax-opacity-75'"></i>
-              }
-            }
-          </div>
+    type(type) {
+        this.widgetState.type = type;
+        return this;
+    }
+    name(name) {
+        this.widgetState.name = name;
+        if (!this.widgetState.path) {
+            this.widgetState.path = name;
         }
-        @if (component && widgetInjector && row?.data) {
-          <ng-container
-            *ngComponentOutlet="component; injector: widgetInjector; inputs: getInputs(row.data)"
-          ></ng-container>
+        return this;
+    }
+    path(path) {
+        this.widgetState.path = path;
+        return this;
+    }
+    options(options) {
+        // Merge options instead of replacing to preserve inherited properties
+        this.widgetState.options = { ...this.widgetState.options, ...options };
+        return this;
+    }
+    layout(value) {
+        if (typeof value === 'number') {
+            this.widgetState.layout = {
+                positions: {
+                    sm: { colSpan: 12 },
+                    md: { colSpan: 12 },
+                    lg: { colSpan: value },
+                    xl: { colSpan: value },
+                    xxl: { colSpan: value },
+                },
+            };
         }
-      </div>
-    </ng-template>
-    <ng-template #footer></ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetColumnRendererComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'axp-widget-column-renderer',
-                    template: `
-    <ng-template #header>{{ caption | translate | async }}</ng-template>
-    <ng-template #cell let-row>
-      <div class="ax-flex ax-gap-2 ax-items-center">
-        @if (expandHandler) {
-          <div
-            (click)="handleExpandRow(row)"
-            class="ax-expand-handler"
-            [class.ax-invisible]="row.data.hasChild === false"
-            id="ax-expand-handler-container"
-            [style.padding-inline-start.rem]="row.data?.__meta__?.level * 2"
-          >
-            @if (loadingRow() === row) {
-              <i class="fas fa-spinner-third ax-animate-twSpin ax-animate-infinite"></i>
-            } @else {
-              @if (row.data?.__meta__?.expanded) {
-                <i [class]="customCollapseIcon || 'far fa-minus-square ax-text-md ax-opacity-75'"></i>
-              } @else {
-                <i [class]="customExpandIcon || 'far fa-plus-square ax-text-md  ax-opacity-75'"></i>
-              }
-            }
-          </div>
+        else {
+            this.widgetState.layout = value;
         }
-        @if (component && widgetInjector && row?.data) {
-          <ng-container
-            *ngComponentOutlet="component; injector: widgetInjector; inputs: getInputs(row.data)"
-          ></ng-container>
+        return this;
+    }
+    mode(mode) {
+        this.widgetState.mode = mode;
+        this.inheritanceContext.mode = mode;
+        return this;
+    }
+    visible(condition) {
+        if (!this.widgetState.options) {
+            this.widgetState.options = {};
         }
-      </div>
-    </ng-template>
-    <ng-template #footer></ng-template>
-  `,
-                    providers: [
-                        AXPLayoutBuilderService,
-                        { provide: AXDataTableColumnComponent, useExisting: AXPWidgetColumnRendererComponent },
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    inputs: ['caption'],
-                    standalone: false,
-                }]
-        }], propDecorators: { customExpandIcon: [{
-                type: Input
-            }], customCollapseIcon: [{
-                type: Input
-            }], customWidth: [{
-                type: Input
-            }], node: [{
-                type: Input,
-                args: [{ required: true }]
-            }], footerTemplate: [{
-                type: Input
-            }], _contentFooterTemplate: [{
-                type: ViewChild,
-                args: ['footer']
-            }], expandHandler: [{
-                type: Input
-            }], cellTemplate: [{
-                type: Input
-            }], _contentCellTemplate: [{
-                type: ViewChild,
-                args: ['cell']
-            }], headerTemplate: [{
-                type: Input
-            }], _contentHeaderTemplate: [{
-                type: ViewChild,
-                args: ['header']
-            }] } });
-
-class AXPWidgetContainerComponent {
-    set context(value) {
-        this.contextService.set(value);
+        this.widgetState.options['visible'] = condition;
+        this.inheritanceContext.visible = condition;
+        return this;
     }
-    set functions(v) {
-        this.builderService.setFunctions(v);
+    disabled(condition) {
+        if (!this.widgetState.options) {
+            this.widgetState.options = {};
+        }
+        this.widgetState.options['disabled'] = condition;
+        this.inheritanceContext.disabled = condition;
+        return this;
     }
-    constructor() {
-        this.contextService = inject(AXPLayoutBuilderContextStore);
-        this.builderService = inject(AXPLayoutBuilderService);
-        this.onContextChanged = new EventEmitter();
-        this.status = computed(() => {
-            return this.builderService.status();
-        }, ...(ngDevMode ? [{ debugName: "status" }] : []));
-        this.isBusy = computed(() => {
-            return this.builderService.isBusy();
-        }, ...(ngDevMode ? [{ debugName: "isBusy" }] : []));
-        effect(() => {
-            if (this.contextService.isChanged()) {
-                this.onContextChanged.emit(this.contextService.changeEvent());
-            }
-        });
+    readonly(condition) {
+        if (!this.widgetState.options) {
+            this.widgetState.options = {};
+        }
+        this.widgetState.options['readonly'] = condition;
+        this.inheritanceContext.readonly = condition;
+        return this;
     }
-    refresh() {
-        this.builderService.refresh();
+    direction(direction) {
+        if (!this.widgetState.options) {
+            this.widgetState.options = {};
+        }
+        this.widgetState.options['direction'] = direction;
+        this.inheritanceContext.direction = direction;
+        return this;
+    }
+    // Inheritance context methods
+    withInheritanceContext(context) {
+        this.inheritanceContext = mergeInheritanceContext(context);
+        // Apply inherited properties to widget state
+        const resolved = resolveInheritedProperties(context, this.inheritanceContext);
+        // Always apply inherited properties (remove the conditions that check if already set)
+        // This allows properties to be updated when inheritance context changes
+        if (resolved.mode) {
+            this.widgetState.mode = resolved.mode;
+        }
+        if (!this.widgetState.options)
+            this.widgetState.options = {};
+        if (resolved.disabled !== undefined) {
+            this.widgetState.options['disabled'] = resolved.disabled;
+        }
+        if (resolved.readonly !== undefined) {
+            this.widgetState.options['readonly'] = resolved.readonly;
+        }
+        if (resolved.direction !== undefined) {
+            this.widgetState.options['direction'] = resolved.direction;
+        }
+        if (resolved.visible !== undefined) {
+            this.widgetState.options['visible'] = resolved.visible;
+        }
+        return this;
     }
-    find(name) {
-        return this.builderService.waitForWidget(name);
+    getInheritanceContext() {
+        return { ...this.inheritanceContext };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", type: AXPWidgetContainerComponent, isStandalone: false, selector: "axp-widgets-container", inputs: { context: "context", functions: "functions" }, outputs: { onContextChanged: "onContextChanged" }, host: { styleAttribute: "display: contents;" }, providers: [AXPLayoutBuilderService, AXPLayoutBuilderContextStore], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetContainerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'axp-widgets-container',
-                    template: `<ng-content></ng-content>`,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { style: 'display: contents;' },
-                    providers: [AXPLayoutBuilderService, AXPLayoutBuilderContextStore],
-                    standalone: false,
-                }]
-        }], ctorParameters: () => [], propDecorators: { onContextChanged: [{
-                type: Output
-            }], context: [{
-                type: Input
-            }], functions: [{
-                type: Input
-            }] } });
-
-class AXPWidgetPlaceholderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.8", 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: "20.1.8", 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
-    constructor() {
-        this.parentNode = input(...(ngDevMode ? [undefined, { debugName: "parentNode" }] : []));
-        this.index = input(...(ngDevMode ? [undefined, { debugName: "index" }] : []));
-        this.mode = input.required(...(ngDevMode ? [{ debugName: "mode" }] : []));
-        this.node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
-        this._options = signal({}, ...(ngDevMode ? [{ debugName: "_options" }] : []));
-        this.options = this._options.asReadonly();
-        this.onOptionsChanged = output();
-        this.onValueChanged = output();
-        //#region ----   Properties   ----
-        this.mergedOptions = signal({}, ...(ngDevMode ? [{ debugName: "mergedOptions" }] : []));
-        this.injector = inject(Injector);
-        this.builderService = inject(AXPLayoutBuilderService);
-        this.contextService = inject(AXPLayoutBuilderContextStore);
-        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" }] : []));
-        this.expressionEvaluators = new Map();
-        this.renderTimeoutId = null;
-        this.hasInitialRender = false;
-        this.onContextChanged = new Subject();
-        effect(async () => {
-            const changed = this.contextService.changeEvent();
-            // Don't trigger re-render during initial setup
-            if (!this.hasInitialRender) {
-                return;
-            }
-            if ((await this.updateOptionsBasedOnContext()) > 0) {
-                this.applyOptions();
-            }
-            if (this.checkFormulaForUpdate(this.node().formula, changed.path)) {
-                await this.updateValueBasedOnFormula();
-            }
-            //
-            if (changed.path) {
-                this.onContextChanged.next({ path: changed.path });
-            }
-        });
-        this.builderService.onRefresh.pipe(this.unsubscriber.takeUntilDestroy).subscribe(async () => {
-            if ((await this.updateOptionsBasedOnContext()) > 0) {
-                this.applyOptions();
-            }
-        });
+    build() {
+        return {
+            name: this.widgetState.name,
+            type: this.widgetState.type,
+            options: this.widgetState.options,
+            mode: this.widgetState.mode,
+            path: this.widgetState.path,
+            defaultValue: this.widgetState.defaultValue,
+        };
     }
-    // Detect input changes
-    ngOnChanges(changes) {
-        if (changes['mode'] || changes['node']) {
-            // Check if either 'mode' or 'node' has changed
-            this.rerenderComponent();
-        }
-    }
-    rerenderComponent() {
-        // Clear any pending render operation to prevent double rendering
-        if (this.renderTimeoutId) {
-            clearTimeout(this.renderTimeoutId);
-            this.renderTimeoutId = null;
-        }
-        // Reset loading state to allow re-rendering
-        this.isLoading.set(false);
-        // Schedule the component loading
-        this.renderTimeoutId = setTimeout(async () => {
-            await this.loadComponent();
-            this.renderTimeoutId = null;
+}
+//#region ----   Action Builder Implementation   ----
+class ActionBuilder {
+    constructor(dialogBuilder) {
+        this.dialogBuilder = dialogBuilder;
+    }
+    cancel(text) {
+        if (!this.dialogBuilder['dialogState'].actions.footer.suffix) {
+            this.dialogBuilder['dialogState'].actions.footer.suffix = [];
+        }
+        this.dialogBuilder['dialogState'].actions.footer.suffix.push({
+            title: text || '@general:actions.cancel.title',
+            icon: 'fa-times',
+            color: 'default',
+            command: { name: 'cancel' },
         });
+        return this;
     }
-    ngOnDestroy() {
-        if (this.renderTimeoutId) {
-            clearTimeout(this.renderTimeoutId);
-        }
-        if (this.componentRef) {
-            this.componentRef.destroy();
+    submit(text) {
+        if (!this.dialogBuilder['dialogState'].actions.footer.suffix) {
+            this.dialogBuilder['dialogState'].actions.footer.suffix = [];
         }
+        this.dialogBuilder['dialogState'].actions.footer.suffix.push({
+            title: text || '@general:actions.submit.title',
+            icon: 'fa-check',
+            color: 'primary',
+            command: { name: 'submit', options: { validate: true } },
+        });
+        return this;
     }
-    async loadComponent() {
-        if (this.isLoading()) {
-            return;
+    custom(action) {
+        if (!this.dialogBuilder['dialogState'].actions.footer.suffix) {
+            this.dialogBuilder['dialogState'].actions.footer.suffix = [];
         }
-        this.isLoading.set(true);
-        try {
-            // Destroy the existing component if it exists
-            if (this.componentRef) {
-                this.componentRef.destroy();
-            }
-            this.viewContainerRef.clear();
-            //
-            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.preprocessAndInitialOptions(cloneDeep(this.node().options));
-            await this.updateOptionsBasedOnContext();
-            //
-            this._options.update((val) => ({ ...val, ...this.mergedOptions() }));
-            // Evaluate default value
-            let defaultValue = this.node().defaultValue;
-            if (defaultValue && 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();
-            this.instance.setStatus(AXPWidgetStatus.Rendered);
-            this.instance?.onOptionsChanged?.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
-                this.onOptionsChanged.emit({ sender: this, widget: c.sender });
-            });
-            this.instance?.onValueChanged?.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
-                this.onValueChanged.emit({ sender: this, widget: c.sender });
-            });
-            await this.updateValueBasedOnFormula();
-            await this.assignTriggers();
-            //
-            loadingRef.destroy();
-            // Mark that initial render is complete
-            this.hasInitialRender = true;
-        }
-        catch (error) {
-            console.error('Error loading component:', error);
-        }
-        finally {
-            this.isLoading.set(false);
-        }
-    }
-    applyOptions() {
-        if (!this.instance)
-            return;
-        this._options.update((val) => ({ ...val, ...this.mergedOptions() }));
-        this.instance.setOptions(this.mergedOptions());
-    }
-    checkFormulaForUpdate(formula, path) {
-        if (formula) {
-            const regex = /context\.eval\('([^']+)'\)/g;
-            const matches = formula.match(regex);
-            const nodes = matches ? matches.map((match) => match.match(/'([^']+)'/)[1]) : [];
-            return nodes.includes(path);
-        }
-        else
-            return false;
+        this.dialogBuilder['dialogState'].actions.footer.suffix.push(action);
+        return this;
     }
-    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);
-                });
-            }
-        });
+}
+
+class AXPLayoutConversionService {
+    constructor() {
+        //#region ----   Caching   ----
+        this.widgetTreeCache = new Map();
+        this.formDefinitionCache = new Map();
     }
-    async updateOptionsBasedOnContext() {
-        const updatePromises = Array.from(this.expressionEvaluators).map(async ([path, evaluator]) => {
-            const newValue = await evaluator();
-            return { path, newValue };
-        });
-        // Wait for all evaluators to complete
-        const updates = await Promise.all(updatePromises);
-        // Apply updates to mergedOptions
-        if (updates.length > 0) {
-            this.mergedOptions.update((o) => {
-                const updatedOptions = { ...o };
-                updates.forEach(({ path, newValue }) => {
-                    // Set the new value in the updatedOptions object by path
-                    set(updatedOptions, path, newValue); // Assuming 'set' can handle paths like 'property.subproperty'
-                });
-                return updatedOptions;
-            });
+    //#endregion
+    //#region ----   Public Methods   ----
+    /**
+     * Convert AXPDynamicFormDefinition to AXPWidgetNode tree structure
+     * Groups become Fieldset Layouts with Form Field widgets as children
+     * Fields become Form Field widgets with Editor widgets as children
+     */
+    convertFormDefinition(formDefinition) {
+        // Create cache key based on form definition content
+        const cacheKey = this.createFormDefinitionCacheKey(formDefinition);
+        // Check cache first
+        if (this.widgetTreeCache.has(cacheKey)) {
+            return this.widgetTreeCache.get(cacheKey);
         }
-        return updates.length;
+        // Generate widget tree
+        const widgetTree = {
+            type: 'grid-layout',
+            name: 'dynamic-form-container',
+            options: {
+                title: 'Dynamic Form',
+                grid: {
+                    default: {
+                        columns: 1,
+                        gap: '1rem',
+                    },
+                },
+            },
+            children: formDefinition.groups.map((group) => this.createGroupAsFieldsetWidget(group)),
+        };
+        // Cache the result
+        this.widgetTreeCache.set(cacheKey, widgetTree);
+        return widgetTree;
     }
-    async updateValueBasedOnFormula() {
-        if (this.node().formula) {
-            const value = await this.evaluateExpression(this.node().formula);
-            this.instance.setValue(value);
+    /**
+     * Convert AXPWidgetNode tree back to AXPDynamicFormDefinition
+     * Parses Fieldset Layouts back to Groups
+     * Parses Form Field widgets back to Fields
+     */
+    convertWidgetTreeToFormDefinition(widgetTree) {
+        // Create cache key based on widget tree content
+        const cacheKey = this.createWidgetTreeCacheKey(widgetTree);
+        // Check cache first
+        if (this.formDefinitionCache.has(cacheKey)) {
+            return this.formDefinitionCache.get(cacheKey);
         }
-    }
-    async evaluateExpression(templateExpression) {
-        try {
-            const scope = this.buildExpressionScope();
-            return await this.expressionEvaluator.evaluate(templateExpression, scope);
+        // Parse widget tree
+        const groups = [];
+        if (widgetTree.children) {
+            widgetTree.children.forEach((child) => {
+                if (child.type === 'fieldset-layout') {
+                    const group = this.extractGroupFromFieldset(child);
+                    groups.push(group);
+                }
+            });
         }
-        catch (error) {
-            console.error('Error evaluating expression:', error);
+        const formDefinition = { groups };
+        // Cache the result
+        this.formDefinitionCache.set(cacheKey, formDefinition);
+        return formDefinition;
+    }
+    /**
+     * Validate that a widget tree represents a valid dynamic form structure
+     */
+    validateFormWidgetTree(widgetTree) {
+        if (!widgetTree || widgetTree.type !== 'grid-layout') {
             return false;
         }
+        if (!widgetTree.children || widgetTree.children.length === 0) {
+            return true; // Empty form is valid
+        }
+        // Check that all children are fieldset-layout widgets
+        return widgetTree.children.every((child) => child.type === 'fieldset-layout' &&
+            child.children &&
+            child.children.every((formField) => formField.type === 'form-field' && formField.children && formField.children.length > 0));
     }
-    buildExpressionScope() {
-        return {
-            context: this.getContextScope(),
-            events: this.getEventScope(),
-            widget: this.getWidgetScope(),
-            methods: this.getFunctionScope(),
-            vars: this.getVariablesScope(),
-        };
+    /**
+     * Clear all caches
+     */
+    clearCaches() {
+        this.widgetTreeCache.clear();
+        this.formDefinitionCache.clear();
     }
-    getContextScope() {
+    /**
+     * Get cache statistics
+     */
+    getCacheStats() {
         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);
-            },
-            data: () => {
-                return this.contextService.data();
-            },
-            isDirty: () => {
-                return this.contextService.isDirty();
-            },
+            widgetTreeCacheSize: this.widgetTreeCache.size,
+            formDefinitionCacheSize: this.formDefinitionCache.size,
         };
     }
-    getEventScope() {
+    //#endregion
+    //#region ----   Private Methods   ----
+    /**
+     * Convert a single group to Fieldset widget structure
+     */
+    createGroupAsFieldsetWidget(group) {
+        // Determine columns count from layout or default to 1
+        const columnsCount = 1;
         return {
-            context: (path) => {
-                return this.onContextChanged.pipe(filter((c) => {
-                    // If no path filter specified, pass all events
-                    if (path == null || path === '') {
-                        return true;
-                    }
-                    // Ensure c.path exists
-                    if (!c.path) {
-                        return false;
-                    }
-                    // 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
-                    else if (path.startsWith('*')) {
-                        const suffix = path.substring(1);
-                        return c.path.endsWith(suffix);
-                    }
-                    // Exact match
-                    else {
-                        return c.path === path;
-                    }
-                }));
+            type: 'fieldset-layout',
+            name: group.name,
+            options: {
+                title: group.title,
+                description: group.description,
+                cols: columnsCount,
             },
-            from: (event) => get(this.instance.api(), event),
+            children: this.createFieldWidgets(group.parameters, columnsCount),
         };
     }
-    getWidgetScope() {
+    /**
+     * Convert fields to Form Field widgets
+     */
+    createFieldWidgets(fields, columnsCount) {
+        return fields.map((field) => this.createFormFieldWidget(field));
+    }
+    /**
+     * Convert a single field to Form Field widget with editor as child
+     */
+    createFormFieldWidget(field) {
         return {
-            call: (name, ...args) => {
-                this.instance.call(name, ...args);
-            },
-            setValue: (value) => {
-                this.instance.setValue(value);
-            },
-            clear: () => {
-                this.instance.setValue(undefined);
-            },
-            refresh: () => {
-                const refresh = this.instance?.['refresh'];
-                if (refresh && typeof refresh === 'function') {
-                    refresh.bind(this.instance)();
-                }
-            },
-            output: (name) => {
-                this.instance.output(name);
-            },
-            find: (id) => {
-                return this.builderService.getWidget(id);
+            type: 'form-field',
+            name: field.path,
+            options: {
+                label: field.title,
+                description: field.description,
+                showLabel: true,
             },
+            children: [field.widget], // The editor widget becomes a child of form-field
         };
     }
-    getFunctionScope() {
-        const scope = {
-            sum: (values) => {
-                return sum(values);
-            },
-            translate: (text, options) => {
-                return this.translateService.translateAsync(text, options);
-            },
-            widgetInfo: (name) => {
-                return this.widgetService.resolve(name);
-            },
+    /**
+     * Extract group information from Fieldset Layout widget
+     */
+    extractGroupFromFieldset(fieldsetNode) {
+        const columnsCount = fieldsetNode.options?.['cols'] || 1;
+        // Extract fields directly from fieldset children
+        const fields = [];
+        if (fieldsetNode.children) {
+            fieldsetNode.children.forEach((formField) => {
+                if (formField.type === 'form-field' && formField.children && formField.children.length > 0) {
+                    const field = this.extractFieldFromFormWidget(formField);
+                    if (field) {
+                        fields.push(field);
+                    }
+                }
+            });
+        }
+        return {
+            name: fieldsetNode.name || `group-${Date.now()}`,
+            title: fieldsetNode.options?.['title'],
+            description: fieldsetNode.options?.['description'],
+            parameters: fields,
         };
-        // Add custom functions from builder service
-        Object.entries(this.builderService.functions).forEach(([key, fn]) => {
-            scope[key] = (...args) => {
-                return fn(...args);
-            };
-        });
-        return scope;
     }
-    getVariablesScope() {
+    /**
+     * Extract field information from Form Field widget
+     */
+    extractFieldFromFormWidget(formFieldNode) {
+        if (!formFieldNode.children || formFieldNode.children.length === 0) {
+            return null;
+        }
+        const editorWidget = formFieldNode.children[0];
         return {
-            eval: (path) => get(this.builderService.variables, path),
+            path: formFieldNode.name || editorWidget.name || `field-${Date.now()}`,
+            title: formFieldNode.options?.['label'],
+            description: formFieldNode.options?.['description'],
+            widget: editorWidget,
+            mode: formFieldNode.mode,
         };
     }
-    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);
-            }
+    /**
+     * Create cache key for form definition
+     */
+    createFormDefinitionCacheKey(formDefinition) {
+        // Create a hash-like key instead of full JSON string
+        const keyParts = [];
+        keyParts.push(`groups:${formDefinition.groups.length}`);
+        formDefinition.groups.forEach((group, groupIndex) => {
+            keyParts.push(`g${groupIndex}:${group.name}:${group.parameters.length}`);
+            group.parameters.forEach((param, paramIndex) => {
+                keyParts.push(`p${groupIndex}.${paramIndex}:${param.path}:${param.widget.type}`);
+            });
+        });
+        if (formDefinition.mode) {
+            keyParts.push(`mode:${formDefinition.mode}`);
         }
+        // Join with delimiter and create a shorter hash
+        const keyString = keyParts.join('|');
+        // If still too long, create a simple hash
+        if (keyString.length > 100) {
+            return this.createSimpleHash(keyString);
+        }
+        return keyString;
     }
-    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;
-            }
+    /**
+     * Create cache key for widget tree
+     */
+    createWidgetTreeCacheKey(widgetTree) {
+        // Create a hash-like key instead of full JSON string
+        const keyParts = [];
+        keyParts.push(`type:${widgetTree.type}`);
+        if (widgetTree.name) {
+            keyParts.push(`name:${widgetTree.name}`);
         }
-        catch (error) {
-            console.error('Error evaluating trigger expression:', error);
-            return null;
+        if (widgetTree.children) {
+            keyParts.push(`children:${widgetTree.children.length}`);
+            widgetTree.children.forEach((child, index) => {
+                keyParts.push(`c${index}:${child.type}`);
+                if (child.children) {
+                    keyParts.push(`cc${index}:${child.children.length}`);
+                    child.children.forEach((grandChild, gIndex) => {
+                        keyParts.push(`gc${index}.${gIndex}:${grandChild.type}`);
+                        if (grandChild.children) {
+                            keyParts.push(`gcc${index}.${gIndex}:${grandChild.children.length}`);
+                        }
+                    });
+                }
+            });
         }
-    }
-    async evaluateAction(templateExpression) {
-        try {
-            const scope = this.buildExpressionScope();
-            await this.expressionEvaluator.evaluate(templateExpression, scope);
+        // Join with delimiter and create a shorter hash
+        const keyString = keyParts.join('|');
+        // If still too long, create a simple hash
+        if (keyString.length > 100) {
+            return this.createSimpleHash(keyString);
         }
-        catch (error) {
-            console.error('Error evaluating action expression:', templateExpression, error);
+        return keyString;
+    }
+    /**
+     * Create a simple hash from a string
+     */
+    createSimpleHash(str) {
+        let hash = 0;
+        if (str.length === 0)
+            return hash.toString();
+        for (let i = 0; i < str.length; i++) {
+            const char = str.charCodeAt(i);
+            hash = (hash << 5) - hash + char;
+            hash = hash & hash; // Convert to 32-bit integer
         }
+        return Math.abs(hash).toString(36); // Convert to base36 for shorter string
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetRendererDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.8", type: AXPWidgetRendererDirective, isStandalone: false, selector: "[axp-widget-renderer]", inputs: { parentNode: { classPropertyName: "parentNode", publicName: "parentNode", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onOptionsChanged: "onOptionsChanged", onValueChanged: "onValueChanged" }, providers: [
-            {
-                provide: AXUnsubscriber,
-            },
-        ], exportAs: ["widgetRenderer"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPLayoutConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPLayoutConversionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPWidgetRendererDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPLayoutConversionService, decorators: [{
+            type: Injectable,
             args: [{
-                    selector: '[axp-widget-renderer]',
-                    exportAs: 'widgetRenderer',
-                    providers: [
-                        {
-                            provide: AXUnsubscriber,
-                        },
-                    ],
-                    standalone: false,
+                    providedIn: 'root',
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
-const COMPONENTS = [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective];
-class AXPLayoutBuilderModule {
-    static forRoot(config) {
-        return {
-            ngModule: AXPLayoutBuilderModule,
-            providers: [
-                {
-                    provide: 'AXPLayoutBuilderModuleFactory',
-                    useFactory: (registry) => async () => {
-                        await Promise.all(config?.widgets?.map((w) => Promise.resolve(registry.register(w))) || []);
-                        await Promise.all(config?.extendedWidgets?.map((ew) => Promise.resolve(registry.extend(ew.parentName, ew.widget))) || []);
-                    },
-                    deps: [AXPWidgetRegistryService],
-                    multi: true,
-                },
-            ],
+class AXPLayoutRendererComponent {
+    constructor() {
+        this.evaluatorService = inject(AXPExpressionEvaluatorService);
+        this.conversionService = inject(AXPLayoutConversionService);
+        /**
+         * Tracks the latest scheduled evaluation to ensure last-write-wins for async evaluate
+         */
+        this.evaluationRunId = 0;
+        /**
+         * RxJS subjects for context management
+         */
+        this.contextUpdateSubject = new Subject();
+        this.contextChangeSubject = new Subject();
+        /**
+         * Cache for expression evaluation results
+         */
+        this.expressionCache = new Map();
+        /**
+         * Cache for widget tree comparisons
+         */
+        this.widgetTreeCache = new Map();
+        /**
+         * Last layout hash for change detection
+         */
+        this.lastLayoutHash = '';
+        //#region ----   Inputs   ----
+        /**
+         * Form definition containing groups and fields OR widget tree
+         */
+        this.layout = input.required(...(ngDevMode ? [{ debugName: "layout" }] : []));
+        /**
+         * Form context/model data
+         */
+        this.context = model({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
+        /**
+         * Form appearance and density styling (normal, compact, spacious)
+         */
+        this.look = input('fieldset', ...(ngDevMode ? [{ debugName: "look" }] : []));
+        /**
+         * Default form mode. Can be overridden by section/group and field.
+         */
+        this.mode = input('edit', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        //#endregion
+        //#region ----   Widget Tree Conversion   ----
+        this.widgetTree = signal(null, ...(ngDevMode ? [{ debugName: "widgetTree" }] : []));
+        /**
+         * Convert and evaluate data when inputs change (optimized with RxJS)
+         */
+        this.conversionEffect = effect(() => {
+            const inputData = this.layout();
+            const ctx = this.internalContext();
+            const look = this.look();
+            const runId = ++this.evaluationRunId;
+            // Generate layout hash for change detection
+            const layoutHash = this.generateLayoutHash(inputData, look);
+            // Skip if layout hasn't changed
+            if (layoutHash === this.lastLayoutHash && this.widgetTree()) {
+                return;
+            }
+            this.lastLayoutHash = layoutHash;
+            (async () => {
+                // First evaluate expressions if needed
+                const evaluated = await this.expressionEvaluator(inputData, ctx);
+                // Ignore stale results
+                if (runId !== this.evaluationRunId) {
+                    return;
+                }
+                // Convert to widget tree (this will also apply the layout look)
+                const tree = evaluated;
+                // Update widget tree
+                const prev = this.widgetTree();
+                if (!isEqual(prev, tree)) {
+                    tree.mode = this.mode();
+                    this.widgetTree.set(tree);
+                }
+            })();
+        }, ...(ngDevMode ? [{ debugName: "conversionEffect" }] : []));
+        //#endregion
+        //#region ----   Outputs   ----
+        /**
+         * Emitted when context change is initiated
+         */
+        this.contextInitiated = output();
+        /**
+         * Emitted when form becomes valid/invalid
+         */
+        this.validityChange = output();
+        //#endregion
+        //#region ----   Properties   ----
+        this.form = viewChild(AXFormComponent, ...(ngDevMode ? [{ debugName: "form" }] : []));
+        this.container = viewChild(AXPWidgetContainerComponent, ...(ngDevMode ? [{ debugName: "container" }] : []));
+        /**
+         * Internal context signal for reactivity
+         */
+        this.internalContext = signal({}, ...(ngDevMode ? [{ debugName: "internalContext" }] : []));
+        /**
+         * Initial context for reset functionality
+         */
+        this.initialContext = {};
+        //#endregion
+        //#region ----   Effects   ----
+        /**
+         * Effect to sync context changes from external to internal (optimized with RxJS)
+         */
+        this.#contextSyncEffect = effect(() => {
+            const ctx = this.context() ?? {};
+            this.contextUpdateSubject.next(ctx);
+        }, ...(ngDevMode ? [{ debugName: "#contextSyncEffect" }] : []));
+        /**
+         * Effect to handle widget tree status changes
+         */
+        this.#widgetStatusEffect = effect(() => {
+            const widgetTree = this.widgetTree();
+            if (widgetTree) {
+                this.container()?.builderService.setStatus(AXPPageStatus.Rendered);
+            }
+        }, ...(ngDevMode ? [{ debugName: "#widgetStatusEffect" }] : []));
+    }
+    async expressionEvaluator(expression, context) {
+        // Check if it's a form definition that needs conversion
+        if (this.isFormDefinition(expression)) {
+            return this.conversionService.convertFormDefinition(expression);
+        }
+        // Generate cache key using a more efficient method
+        const cacheKey = this.generateCacheKey(expression, context);
+        // Check cache first
+        if (this.expressionCache.has(cacheKey)) {
+            return this.expressionCache.get(cacheKey);
+        }
+        const scope = {
+            context: {
+                eval: (path) => get(context, path),
+            },
         };
+        const result = await this.evaluatorService.evaluate(expression, scope);
+        // Cache result with LRU-like behavior
+        if (this.expressionCache.size > 50) {
+            // Clear half the cache when it gets too large
+            const keysToDelete = Array.from(this.expressionCache.keys()).slice(0, 25);
+            keysToDelete.forEach((key) => this.expressionCache.delete(key));
+        }
+        this.expressionCache.set(cacheKey, result);
+        return result;
+    }
+    //#endregion
+    //#region ----   Lifecycle Methods   ----
+    ngOnInit() {
+        // Initialize internal context with input context
+        const ctx = this.context() ?? {};
+        this.internalContext.set(ctx);
+        // Store initial context for reset functionality
+        this.initialContext = cloneDeep(ctx);
+        // Setup RxJS streams for context management
+        this.setupContextStreams();
+    }
+    //#endregion
+    //#region ----   Effects   ----
+    /**
+     * Effect to sync context changes from external to internal (optimized with RxJS)
+     */
+    #contextSyncEffect;
+    /**
+     * Effect to handle widget tree status changes
+     */
+    #widgetStatusEffect;
+    //#endregion
+    //#region ----   Event Handlers   ----
+    /**
+     * Handle context change events from widget container (optimized with RxJS)
+     */
+    handleContextChanged(event) {
+        if (event.state === 'initiated') {
+            this.contextInitiated.emit(event.data);
+        }
+        else {
+            this.contextChangeSubject.next(event.data ?? {});
+        }
+    }
+    //#endregion
+    //#region ----   Public Methods   ----
+    /**
+     * Get the form component instance
+     */
+    getForm() {
+        return this.form();
+    }
+    /**
+     * Get the widget container component instance
+     */
+    getContainer() {
+        return this.container();
+    }
+    /**
+     * Get current form context
+     */
+    getContext() {
+        return this.internalContext();
+    }
+    /**
+     * Update form context programmatically
+     */
+    updateContext(context) {
+        this.internalContext.set(context);
+    }
+    /**
+     * Get the current widget tree
+     */
+    getWidgetTree() {
+        return this.widgetTree();
     }
-    static forChild(config) {
+    /**
+     * Validate the form
+     */
+    async validate() {
+        const form = this.form();
+        if (form) {
+            const isValid = await form.validate();
+            this.validityChange.emit(isValid.result);
+            return isValid;
+        }
         return {
-            ngModule: AXPLayoutBuilderModule,
-            providers: [
-                {
-                    provide: 'AXPLayoutBuilderModuleFactory',
-                    useFactory: (registry) => async () => {
-                        await Promise.all(config?.widgets?.map((w) => Promise.resolve(registry.register(w))) || []);
-                        await Promise.all(config?.extendedWidgets?.map((ew) => Promise.resolve(registry.extend(ew.parentName, ew.widget))) || []);
-                    },
-                    deps: [AXPWidgetRegistryService],
-                    multi: true,
-                },
-            ],
+            result: false,
+            messages: [],
+            rules: [],
         };
     }
     /**
-     * @ignore
+     * Clear the form context
+     */
+    clear() {
+        // Clear internal context
+        this.internalContext.set({});
+        // Update the model signal
+        this.context.set({});
+    }
+    /**
+     * Reset the form to its initial state
+     */
+    reset() {
+        // Reset to initial context
+        const resetContext = cloneDeep(this.initialContext);
+        this.internalContext.set(resetContext);
+        // Update the model signal
+        this.context.set(resetContext);
+    }
+    //#endregion
+    //#region ----   RxJS Stream Setup   ----
+    /**
+     * Setup RxJS streams for context management
      */
-    constructor(instances) {
-        instances?.forEach((f) => {
-            f();
+    setupContextStreams() {
+        // Debounced context updates from external source
+        this.contextUpdateSubject
+            .pipe(debounceTime(16), // ~60fps
+        distinctUntilChanged((prev, curr) => isEqual(prev, curr)), startWith(this.context() ?? {}))
+            .subscribe((ctx) => {
+            this.internalContext.set(ctx);
         });
+        // Debounced context changes from widgets
+        this.contextChangeSubject
+            .pipe(debounceTime(16), // ~60fps
+        distinctUntilChanged((prev, curr) => isEqual(prev, curr)))
+            .subscribe((ctx) => {
+            this.internalContext.set(ctx);
+            // Update the model signal directly - it will emit change events automatically
+            this.context.set(this.internalContext());
+        });
+    }
+    //#endregion
+    //#region ----   Type Guards   ----
+    /**
+     * Type guard to check if the input is a form definition
+     */
+    isFormDefinition(data) {
+        return data && typeof data === 'object' && 'groups' in data && Array.isArray(data.groups);
+    }
+    //#endregion
+    //#region ----   Utility Methods   ----
+    /**
+     * Generate layout hash for change detection (short hash)
+     */
+    generateLayoutHash(layout, look) {
+        if (!layout)
+            return '';
+        // Generate short hash for large layout strings
+        const layoutStr = typeof layout === 'string' ? layout : JSON.stringify(layout);
+        const layoutHash = this.simpleHash(layoutStr);
+        return `${layoutHash}|${look}`;
+    }
+    /**
+     * Generate cache key for expression evaluation (short hash)
+     */
+    generateCacheKey(expression, context) {
+        // Use short hash for better performance
+        const exprStr = typeof expression === 'string' ? expression : JSON.stringify(expression);
+        const exprHash = this.simpleHash(exprStr);
+        const ctxHash = this.generateContextHash(context);
+        return `${exprHash}|${ctxHash}`;
+    }
+    /**
+     * Generate a simple hash for context change detection
+     */
+    generateContextHash(context) {
+        if (!context || typeof context !== 'object') {
+            return String(context);
+        }
+        // Generate short hash for context
+        const keys = Object.keys(context).sort();
+        const contextStr = keys.map((key) => `${key}:${context[key]}`).join('|');
+        return this.simpleHash(contextStr);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutBuilderModule, deps: [{ token: 'AXPLayoutBuilderModuleFactory', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutBuilderModule, declarations: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective], imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule, AXTranslationModule], exports: [AXPWidgetContainerComponent, AXPWidgetColumnRendererComponent, AXPWidgetRendererDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutBuilderModule, imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule, AXTranslationModule] }); }
+    /**
+     * Simple hash function for generating short keys
+     */
+    simpleHash(str) {
+        let hash = 0;
+        if (str.length === 0)
+            return hash.toString();
+        for (let i = 0; i < str.length; i++) {
+            const char = str.charCodeAt(i);
+            hash = (hash << 5) - hash + char;
+            hash = hash & hash; // Convert to 32-bit integer
+        }
+        // Convert to positive hex string
+        return Math.abs(hash).toString(16);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPLayoutRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPLayoutRendererComponent, isStandalone: true, selector: "axp-layout-renderer", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { context: "contextChange", contextInitiated: "contextInitiated", validityChange: "validityChange" }, viewQueries: [{ propertyName: "form", first: true, predicate: AXFormComponent, descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ax-form>
+      <axp-widgets-container [context]="internalContext()" (onContextChanged)="handleContextChanged($event)">
+        @if (widgetTree()) {
+          <ng-container axp-widget-renderer [node]="widgetTree()!" [mode]="mode()"></ng-container>
+        }
+      </axp-widgets-container>
+    </ax-form>
+  `, isInline: true, styles: [":host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPLayoutRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-layout-renderer', standalone: true, imports: [CommonModule, AXPWidgetCoreModule, AXFormModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <ax-form>
+      <axp-widgets-container [context]="internalContext()" (onContextChanged)="handleContextChanged($event)">
+        @if (widgetTree()) {
+          <ng-container axp-widget-renderer [node]="widgetTree()!" [mode]="mode()"></ng-container>
+        }
+      </axp-widgets-container>
+    </ax-form>
+  `, styles: [":host{display:block;width:100%}\n"] }]
+        }] });
+
+class LayoutBuilderModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LayoutBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: LayoutBuilderModule, imports: [CommonModule, AXPLayoutRendererComponent], exports: [AXPLayoutRendererComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LayoutBuilderModule, providers: [AXPLayoutBuilderService], imports: [CommonModule, AXPLayoutRendererComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPLayoutBuilderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: LayoutBuilderModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, PortalModule, AXSkeletonModule, CommonModule, AXTranslationModule],
-                    exports: [...COMPONENTS],
-                    declarations: [...COMPONENTS],
+                    imports: [CommonModule, AXPLayoutRendererComponent],
+                    providers: [AXPLayoutBuilderService],
+                    exports: [AXPLayoutRendererComponent],
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: ['AXPLayoutBuilderModuleFactory']
-                }] }] });
+        }] });
 
-class AXPPropertyEditorHelper {
-    static expandShorthand(values) {
-        switch (values.length) {
-            case 1:
-                return [values[0], values[0], values[0], values[0]];
-            case 2:
-                return [values[0], values[1], values[0], values[1]];
-            case 3:
-                return [values[0], values[1], values[2], values[1]];
-            case 4:
-                return values;
-            default:
-                throw new Error(`Invalid shorthand value count. Input: ${values}`);
-        }
-    }
-    static 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]}`;
-        }
+//#endregion
+
+class AXPDialogRendererComponent extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        this.result = new EventEmitter();
+        this.context = signal({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
+        // This will be set by the popup service automatically - same as dynamic-dialog
+        this.callBack = () => { };
+        this.isDialogLoading = signal(false, ...(ngDevMode ? [{ debugName: "isDialogLoading" }] : []));
     }
-    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] };
+    ngOnInit() {
+        // Initialize context with provided context
+        this.context.set(this.config?.context || {});
     }
-    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,
-        };
+    handleContextChanged(event) {
+        this.context.set(event);
     }
-    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,
-        };
+    handleContextInitiated(event) {
+        this.context.set(event);
     }
-    static parseSpacingBox(input) {
-        return {
-            margin: this.parseSidesWithUnits(input.margin),
-            padding: this.parseSidesWithUnits(input.padding),
-        };
+    visibleFooterPrefixActions() {
+        return this.config?.actions?.footer?.prefix || [];
     }
-    static parseBorderBox(input) {
-        return {
-            width: this.parseSidesWithUnits(input.width),
-            radius: this.parseCorners(input.radius),
-            color: this.parseSides(input.color),
-            style: this.parseSides(input.style),
-        };
+    visibleFooterSuffixActions() {
+        return (this.config?.actions?.footer?.suffix || [
+            { title: 'Cancel', color: 'secondary', command: { name: 'cancel' } },
+            { title: 'Confirm', color: 'primary', command: { name: 'confirm' } },
+        ]);
     }
-    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),
-            ]),
-        };
+    isFormLoading() {
+        return this.isDialogLoading();
     }
-    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}`,
-            ]),
-        };
+    isSubmitting() {
+        return this.isDialogLoading();
     }
-    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,
+    async executeAction(action) {
+        const actionName = action.command?.name || action.title?.toLowerCase();
+        // Store the action and context - same pattern as dynamic-dialog
+        const result = {
+            context: this.context(),
+            action: actionName,
         };
-    }
-    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(...))'.");
+        // Store result in component property
+        this.dialogResult = result;
+        // Store in popup data for DialogRef access
+        if (this.data) {
+            this.data.context = result.context;
+            this.data.action = result.action;
         }
-        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)`;
+        // Call the callback with DialogRef - same pattern as dynamic-dialog
+        this.callBack({
+            close: (result) => {
+                this.close(result);
+            },
+            context: () => {
+                return this.context();
+            },
+            action: () => {
+                return result.action;
+            },
+            setLoading: (loading) => {
+                this.isDialogLoading.set(loading);
+            },
+        });
     }
-}
-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);
+    close(result) {
+        if (result) {
+            this.result.emit(result);
         }
-    }
-    return nonEmptyBreakpoints;
+        super.close(result);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPDialogRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPDialogRendererComponent, isStandalone: true, selector: "axp-dialog-renderer", inputs: { config: "config" }, outputs: { result: "result" }, usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-p-4">
+      <axp-layout-renderer
+        [layout]="config.definition"
+        [context]="context()"
+        (contextChange)="handleContextChanged($event)"
+        (contextInitiated)="handleContextInitiated($event)"
+      >
+      </axp-layout-renderer>
+    </div>
+
+    <ax-footer>
+      <ax-prefix>
+        <ng-container *ngTemplateOutlet="footerPrefixActions"></ng-container>
+      </ax-prefix>
+      <ax-suffix>
+        <ng-container *ngTemplateOutlet="footerSuffixActions"></ng-container>
+      </ax-suffix>
+    </ax-footer>
+
+    <!-- Footer Prefix Actions -->
+    <ng-template #footerPrefixActions>
+      @for (action of visibleFooterPrefixActions(); track $index) {
+        <ax-button
+          [disabled]="action.disabled || isFormLoading()"
+          [text]="(action.title | translate | async)!"
+          [look]="'outline'"
+          [color]="action.color"
+          (onClick)="executeAction(action)"
+        >
+          @if (isFormLoading() && action.command?.name != 'cancel') {
+            <ax-loading></ax-loading>
+          }
+          <ax-prefix>
+            <i class="{{ action.icon }}"></i>
+          </ax-prefix>
+        </ax-button>
+      }
+    </ng-template>
+
+    <!-- Footer Suffix Actions -->
+    <ng-template #footerSuffixActions>
+      @for (action of visibleFooterSuffixActions(); track $index) {
+        <ax-button
+          [disabled]="action.disabled || isSubmitting()"
+          [text]="(action.title | translate | async)!"
+          [look]="'solid'"
+          [color]="action.color"
+          (onClick)="executeAction(action)"
+        >
+          @if (action.icon) {
+            <ax-prefix>
+              <ax-icon icon="{{ action.icon }}"></ax-icon>
+            </ax-prefix>
+          }
+        </ax-button>
+      }
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }] }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPDialogRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-dialog-renderer',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        AXPLayoutRendererComponent,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXLoadingModule,
+                        AXTranslationModule,
+                    ],
+                    template: `
+    <div class="ax-p-4">
+      <axp-layout-renderer
+        [layout]="config.definition"
+        [context]="context()"
+        (contextChange)="handleContextChanged($event)"
+        (contextInitiated)="handleContextInitiated($event)"
+      >
+      </axp-layout-renderer>
+    </div>
+
+    <ax-footer>
+      <ax-prefix>
+        <ng-container *ngTemplateOutlet="footerPrefixActions"></ng-container>
+      </ax-prefix>
+      <ax-suffix>
+        <ng-container *ngTemplateOutlet="footerSuffixActions"></ng-container>
+      </ax-suffix>
+    </ax-footer>
 
-const AXP_WIDGETS_LAYOUT_CATEGORY = {
-    name: 'layout',
-    order: 1,
-    title: 'Layout',
-};
-const AXP_WIDGETS_EDITOR_CATEGORY = {
-    name: 'editor',
-    order: 2,
-    title: 'Editors',
-};
-const AXP_WIDGETS_ACTION_CATEGORY = {
-    name: 'action',
-    order: 3,
-    title: 'Action',
-};
-const AXP_WIDGETS_ADVANCE_CATEGORY = {
-    name: 'advance',
-    order: 4,
-    title: 'Advance',
-};
-const AXP_WIDGETS_CATEGORIES = [
-    AXP_WIDGETS_LAYOUT_CATEGORY,
-    AXP_WIDGETS_EDITOR_CATEGORY,
-    AXP_WIDGETS_ACTION_CATEGORY,
-    AXP_WIDGETS_ADVANCE_CATEGORY,
-];
+    <!-- Footer Prefix Actions -->
+    <ng-template #footerPrefixActions>
+      @for (action of visibleFooterPrefixActions(); track $index) {
+        <ax-button
+          [disabled]="action.disabled || isFormLoading()"
+          [text]="(action.title | translate | async)!"
+          [look]="'outline'"
+          [color]="action.color"
+          (onClick)="executeAction(action)"
+        >
+          @if (isFormLoading() && action.command?.name != 'cancel') {
+            <ax-loading></ax-loading>
+          }
+          <ax-prefix>
+            <i class="{{ action.icon }}"></i>
+          </ax-prefix>
+        </ax-button>
+      }
+    </ng-template>
+
+    <!-- Footer Suffix Actions -->
+    <ng-template #footerSuffixActions>
+      @for (action of visibleFooterSuffixActions(); track $index) {
+        <ax-button
+          [disabled]="action.disabled || isSubmitting()"
+          [text]="(action.title | translate | async)!"
+          [look]="'solid'"
+          [color]="action.color"
+          (onClick)="executeAction(action)"
+        >
+          @if (action.icon) {
+            <ax-prefix>
+              <ax-icon icon="{{ action.icon }}"></ax-icon>
+            </ax-prefix>
+          }
+        </ax-button>
+      }
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], result: [{
+                type: Output
+            }] } });
 
-var AXPWidgetGroupEnum;
-(function (AXPWidgetGroupEnum) {
-    AXPWidgetGroupEnum["FormElement"] = "form-element";
-    AXPWidgetGroupEnum["DashboardWidget"] = "dashboard-widget";
-    AXPWidgetGroupEnum["FormTemplate"] = "form-template";
-    AXPWidgetGroupEnum["PropertyEditor"] = "property-editor";
-    AXPWidgetGroupEnum["MetaData"] = "meta-data";
-    AXPWidgetGroupEnum["SettingWidget"] = "setting-widget";
-    AXPWidgetGroupEnum["EntityWidget"] = "entity-widget";
-})(AXPWidgetGroupEnum || (AXPWidgetGroupEnum = {}));
+var dialogRenderer_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPDialogRendererComponent: AXPDialogRendererComponent
+});
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXPBaseWidgetComponent, AXPBlockBaseLayoutWidgetComponent, AXPBoxModelLayoutWidgetComponent, AXPColumnWidgetComponent, AXPDataListWidgetComponent, AXPFlexBaseLayoutWidgetComponent, AXPFlexItemBaseLayoutWidgetComponent, AXPGridBaseLayoutWidgetComponent, AXPGridItemBaseLayoutWidgetComponent, AXPInlineBaseLayoutWidgetComponent, AXPLayoutBaseWidgetComponent, AXPLayoutBuilderContextStore, AXPLayoutBuilderModule, AXPLayoutBuilderService, AXPLayoutContextChangeEvent, AXPLayoutElement, AXPPageStatus, AXPPropertyEditorHelper, AXPValueWidgetComponent, AXPWidgetColumnRendererComponent, AXPWidgetContainerComponent, AXPWidgetGroupEnum, AXPWidgetRegistryService, AXPWidgetRendererDirective, AXPWidgetStatus, AXPWidgetsCatalog, AXP_WIDGETS_ACTION_CATEGORY, AXP_WIDGETS_ADVANCE_CATEGORY, AXP_WIDGETS_CATEGORIES, AXP_WIDGETS_EDITOR_CATEGORY, AXP_WIDGETS_LAYOUT_CATEGORY, AXP_WIDGET_COLUMN_TOKEN, AXP_WIDGET_TOKEN, cloneProperty, createBooleanProperty, createNumberProperty, createSelectProperty, createStringProperty, findNonEmptyBreakpoints };
+export { AXPDialogRendererComponent, AXPLayoutBuilderService, AXPLayoutConversionService, AXPLayoutRendererComponent, LayoutBuilderModule };
 //# sourceMappingURL=acorex-platform-layout-builder.mjs.map