@masterteam/form-builder 0.0.2 → 0.0.4

package/fesm2022/masterteam-form-builder.mjs

@@ -0,0 +1,1908 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, computed, input, signal, viewChild, Component, effect, output } from '@angular/core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormControl, ReactiveFormsModule, FormGroup, FormsModule } from '@angular/forms';
+import * as i1$1 from 'primeng/tabs';
+import { TabsModule } from 'primeng/tabs';
+import * as i2 from 'primeng/skeleton';
+import { SkeletonModule } from 'primeng/skeleton';
+import { Button } from '@masterteam/components/button';
+import { Card } from '@masterteam/components/card';
+import { ModalService } from '@masterteam/components/modal';
+import { ConfirmationService } from '@masterteam/components/confirmation';
+import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
+import * as i3 from '@angular/cdk/drag-drop';
+import { CdkDrag, CdkDropList, CdkDragPlaceholder, DragDropModule } from '@angular/cdk/drag-drop';
+import { DynamicField } from '@masterteam/forms/dynamic-field';
+import { Icon } from '@masterteam/icons';
+import { Action, Selector, State, Store, select } from '@ngxs/store';
+import { HttpClient } from '@angular/common/http';
+import { CrudStateBase, handleApiRequest, RadioCardsFieldConfig } from '@masterteam/components';
+import { DynamicForm } from '@masterteam/forms/dynamic-form';
+import { ToggleField } from '@masterteam/components/toggle-field';
+import { ModalRef } from '@masterteam/components/dialog';
+import { FormulaToolbar, FormulaEditor } from '@masterteam/components/formula';
+import { Tabs } from '@masterteam/components/tabs';
+
+// ============================================================================
+// Module Configuration Actions
+// ============================================================================
+class SetModuleInfo {
+    moduleType;
+    moduleId;
+    parentModuleType;
+    parentModuleId;
+    parentPath;
+    static type = '[FormBuilder] Set Module Info';
+    constructor(moduleType, moduleId, parentModuleType, parentModuleId, parentPath) {
+        this.moduleType = moduleType;
+        this.moduleId = moduleId;
+        this.parentModuleType = parentModuleType;
+        this.parentModuleId = parentModuleId;
+        this.parentPath = parentPath;
+    }
+}
+class ResetFormBuilderState {
+    static type = '[FormBuilder] Reset State';
+}
+class SetProperties {
+    properties;
+    static type = '[FormBuilder] Set Properties';
+    constructor(properties) {
+        this.properties = properties;
+    }
+}
+// ============================================================================
+// Form Configuration Actions
+// ============================================================================
+class GetFormConfiguration {
+    static type = '[FormBuilder] Get Form Configuration';
+}
+class ResetFormConfiguration {
+    static type = '[FormBuilder] Reset Form Configuration';
+}
+// ============================================================================
+// Section Actions
+// ============================================================================
+class AddSection {
+    payload;
+    static type = '[FormBuilder] Add Section';
+    constructor(payload) {
+        this.payload = payload;
+    }
+}
+class UpdateSection {
+    sectionId;
+    payload;
+    static type = '[FormBuilder] Update Section';
+    constructor(sectionId, payload) {
+        this.sectionId = sectionId;
+        this.payload = payload;
+    }
+}
+class DeleteSection {
+    sectionId;
+    static type = '[FormBuilder] Delete Section';
+    constructor(sectionId) {
+        this.sectionId = sectionId;
+    }
+}
+// ============================================================================
+// Field Actions
+// ============================================================================
+class AddField {
+    sectionId;
+    payload;
+    static type = '[FormBuilder] Add Field';
+    constructor(sectionId, payload) {
+        this.sectionId = sectionId;
+        this.payload = payload;
+    }
+}
+class UpdateField {
+    sectionId;
+    fieldId;
+    payload;
+    static type = '[FormBuilder] Update Field';
+    constructor(sectionId, fieldId, payload) {
+        this.sectionId = sectionId;
+        this.fieldId = fieldId;
+        this.payload = payload;
+    }
+}
+class DeleteField {
+    sectionId;
+    fieldId;
+    static type = '[FormBuilder] Delete Field';
+    constructor(sectionId, fieldId) {
+        this.sectionId = sectionId;
+        this.fieldId = fieldId;
+    }
+}
+class ReorderFields {
+    sectionId;
+    payload;
+    static type = '[FormBuilder] Reorder Fields';
+    constructor(sectionId, payload) {
+        this.sectionId = sectionId;
+        this.payload = payload;
+    }
+}
+class MoveField {
+    sectionId;
+    fieldId;
+    payload;
+    static type = '[FormBuilder] Move Field';
+    constructor(sectionId, fieldId, payload) {
+        this.sectionId = sectionId;
+        this.fieldId = fieldId;
+        this.payload = payload;
+    }
+}
+
+// ============================================================================
+// Action Keys Enum
+// ============================================================================
+var FormBuilderActionKey;
+(function (FormBuilderActionKey) {
+    // Form Configuration
+    FormBuilderActionKey["GetFormConfiguration"] = "getFormConfiguration";
+    FormBuilderActionKey["ResetFormConfiguration"] = "resetFormConfiguration";
+    // Section CRUD
+    FormBuilderActionKey["AddSection"] = "addSection";
+    FormBuilderActionKey["UpdateSection"] = "updateSection";
+    FormBuilderActionKey["DeleteSection"] = "deleteSection";
+    // Field CRUD
+    FormBuilderActionKey["AddField"] = "addField";
+    FormBuilderActionKey["UpdateField"] = "updateField";
+    FormBuilderActionKey["DeleteField"] = "deleteField";
+    FormBuilderActionKey["MoveField"] = "moveField";
+    FormBuilderActionKey["ReorderFields"] = "reorderFields";
+})(FormBuilderActionKey || (FormBuilderActionKey = {}));
+
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+// Default State
+const DEFAULT_STATE = {
+    // Module configuration
+    moduleType: null,
+    moduleId: null,
+    parentModuleType: null,
+    parentModuleId: null,
+    parentPath: '',
+    // Form data
+    formConfiguration: null,
+    // Properties for field enrichment
+    properties: [],
+    // Loading state (from LoadingStateShape)
+    loadingActive: [],
+    errors: {},
+};
+let FormBuilderState = class FormBuilderState extends CrudStateBase {
+    http = inject(HttpClient);
+    baseUrl = 'formConfigurations';
+    // ============================================================================
+    // Helpers
+    // ============================================================================
+    getApiPath(state) {
+        const { parentPath, moduleType, moduleId } = state;
+        return `${this.baseUrl}${parentPath}/${moduleType}/${moduleId}`;
+    }
+    // ============================================================================
+    // Selectors
+    // ============================================================================
+    static getState(state) {
+        return state ?? DEFAULT_STATE;
+    }
+    static getFormConfiguration(state) {
+        return state?.formConfiguration ?? null;
+    }
+    static getSections(state) {
+        return state?.formConfiguration?.sections ?? [];
+    }
+    static getModuleType(state) {
+        return state?.moduleType ?? null;
+    }
+    static getModuleId(state) {
+        return state?.moduleId ?? null;
+    }
+    static getProperties(state) {
+        return state?.properties ?? [];
+    }
+    // ============================================================================
+    // Module Configuration Actions
+    // ============================================================================
+    setModuleInfo(ctx, action) {
+        let parentPath = '';
+        if (action.parentModuleType && action.parentModuleId) {
+            parentPath = `/${action.parentModuleType}/${action.parentModuleId}`;
+        }
+        else if (action.parentPath) {
+            parentPath = action.parentPath;
+        }
+        ctx.patchState({
+            moduleType: action.moduleType,
+            moduleId: action.moduleId,
+            parentModuleType: action.parentModuleType ?? null,
+            parentModuleId: action.parentModuleId ?? null,
+            parentPath: parentPath ?? '',
+        });
+    }
+    resetState(ctx) {
+        ctx.setState(DEFAULT_STATE);
+    }
+    setProperties(ctx, action) {
+        ctx.patchState({
+            properties: action.properties,
+        });
+    }
+    // ============================================================================
+    // Form Configuration Actions
+    // ============================================================================
+    getFormConfiguration(ctx) {
+        const state = ctx.getState();
+        const apiPath = this.getApiPath(state);
+        const req$ = this.http.get(apiPath);
+        return this.load(ctx, {
+            key: FormBuilderActionKey.GetFormConfiguration,
+            request$: req$,
+            updateState: (_state, data) => ({
+                formConfiguration: data ?? null,
+            }),
+        });
+    }
+    resetFormConfiguration(ctx) {
+        const state = ctx.getState();
+        const apiPath = `${this.getApiPath(state)}/reset`;
+        const req$ = this.http.delete(apiPath);
+        return handleApiRequest({
+            ctx,
+            key: FormBuilderActionKey.ResetFormConfiguration,
+            request$: req$,
+            onSuccess: (res, _currentState) => ({
+                formConfiguration: res.data ?? null,
+            }),
+        });
+    }
+    // ============================================================================
+    // Section Actions
+    // ============================================================================
+    addSection(ctx, action) {
+        const state = ctx.getState();
+        const apiPath = `${this.getApiPath(state)}/sections`;
+        const req$ = this.http.post(apiPath, action.payload);
+        return handleApiRequest({
+            ctx,
+            key: FormBuilderActionKey.AddSection,
+            request$: req$,
+            onSuccess: (res, currentState) => {
+                const sections = this.adapter.addOne(currentState.formConfiguration?.sections ?? [], res.data);
+                return {
+                    formConfiguration: {
+                        ...currentState.formConfiguration,
+                        sections,
+                    },
+                };
+            },
+        });
+    }
+    updateSection(ctx, action) {
+        const state = ctx.getState();
+        const apiPath = `${this.getApiPath(state)}/sections/${action.sectionId}`;
+        const req$ = this.http.put(apiPath, action.payload);
+        return handleApiRequest({
+            ctx,
+            key: FormBuilderActionKey.UpdateSection,
+            request$: req$,
+            onSuccess: (res, currentState) => {
+                const sections = this.adapter.upsertOne(currentState.formConfiguration?.sections ?? [], res.data, 'id');
+                return {
+                    formConfiguration: {
+                        ...currentState.formConfiguration,
+                        sections,
+                    },
+                };
+            },
+        });
+    }
+    deleteSection(ctx, action) {
+        const state = ctx.getState();
+        const apiPath = `${this.getApiPath(state)}/sections/${action.sectionId}`;
+        const req$ = this.http.delete(apiPath);
+        return handleApiRequest({
+            ctx,
+            key: FormBuilderActionKey.DeleteSection,
+            request$: req$,
+            onSuccess: (res, currentState) => {
+                const sections = this.adapter.removeOne(currentState.formConfiguration?.sections ?? [], res.data.id, 'id');
+                return {
+                    formConfiguration: {
+                        ...currentState.formConfiguration,
+                        sections,
+                    },
+                };
+            },
+        });
+    }
+    // ============================================================================
+    // Field Actions
+    // ============================================================================
+    addField(ctx, action) {
+        const state = ctx.getState();
+        const apiPath = `${this.getApiPath(state)}/sections/${action.sectionId}/fields`;
+        const req$ = this.http.post(apiPath, action.payload);
+        // Generate temp ID for optimistic update
+        const tempId = `temp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        const tempField = {
+            id: tempId,
+            sectionId: action.sectionId,
+            propertyId: action.payload.propertyId,
+            width: action.payload.width,
+            order: action.payload.order ?? 0,
+            hiddenInCreation: action.payload.hiddenInCreation,
+            _pending: true,
+        };
+        // Optimistically add the temp field
+        const sectionsWithTemp = (state.formConfiguration?.sections ?? []).map((section) => {
+            if (section.id === action.sectionId) {
+                const fields = [...section.fields];
+                const insertIndex = action.payload.order ?? fields.length;
+                fields.splice(insertIndex, 0, tempField);
+                return { ...section, fields };
+            }
+            return section;
+        });
+        ctx.patchState({
+            formConfiguration: {
+                ...state.formConfiguration,
+                sections: sectionsWithTemp,
+            },
+        });
+        return handleApiRequest({
+            ctx,
+            key: FormBuilderActionKey.AddField,
+            request$: req$,
+            onSuccess: (res, currentState) => {
+                const newField = res.data;
+                // Replace temp field with real field
+                const sections = (currentState.formConfiguration?.sections ?? []).map((section) => {
+                    if (section.id === action.sectionId) {
+                        return {
+                            ...section,
+                            fields: section.fields.map((f) => f.id === tempId ? newField : f),
+                        };
+                    }
+                    return section;
+                });
+                return {
+                    formConfiguration: {
+                        ...currentState.formConfiguration,
+                        sections,
+                    },
+                };
+            },
+            onError: (_error, currentState) => {
+                // Remove temp field on error
+                const sections = (currentState.formConfiguration?.sections ?? []).map((section) => {
+                    if (section.id === action.sectionId) {
+                        return {
+                            ...section,
+                            fields: section.fields.filter((f) => f.id !== tempId),
+                        };
+                    }
+                    return section;
+                });
+                return {
+                    formConfiguration: {
+                        ...currentState.formConfiguration,
+                        sections,
+                    },
+                };
+            },
+        });
+    }
+    updateField(ctx, action) {
+        const state = ctx.getState();
+        const apiPath = `${this.getApiPath(state)}/sections/${action.sectionId}/fields/${action.fieldId}`;
+        const req$ = this.http.put(apiPath, action.payload);
+        // Apply optimistic update for order changes
+        if (action.payload.order !== undefined) {
+            const newOrder = action.payload.order;
+            const sections = (state.formConfiguration?.sections ?? []).map((section) => {
+                if (section.id === action.sectionId) {
+                    const fields = [...section.fields];
+                    const currentIndex = fields.findIndex((f) => f.id === action.fieldId);
+                    if (currentIndex !== -1) {
+                        const [movedField] = fields.splice(currentIndex, 1);
+                        fields.splice(newOrder, 0, movedField);
+                    }
+                    return { ...section, fields };
+                }
+                return section;
+            });
+            ctx.patchState({
+                formConfiguration: {
+                    ...state.formConfiguration,
+                    sections,
+                },
+            });
+        }
+        return handleApiRequest({
+            ctx,
+            key: FormBuilderActionKey.UpdateField,
+            request$: req$,
+            onSuccess: (res, currentState) => {
+                const updatedField = res.data;
+                const sections = (currentState.formConfiguration?.sections ?? []).map((section) => {
+                    if (section.id === action.sectionId) {
+                        // Update the field but preserve current array order (from optimistic update)
+                        // Don't re-sort by order property as other fields may have stale order values
+                        const updatedFields = section.fields.map((f, index) => f.id === updatedField.id
+                            ? { ...updatedField, order: index }
+                            : { ...f, order: index });
+                        return {
+                            ...section,
+                            fields: updatedFields,
+                        };
+                    }
+                    return section;
+                });
+                return {
+                    formConfiguration: {
+                        ...currentState.formConfiguration,
+                        sections,
+                    },
+                };
+            },
+            onError: (_error, _currentState) => {
+                // Revert optimistic update on error - reload original state
+                if (action.payload.order !== undefined) {
+                    return {
+                        formConfiguration: state.formConfiguration,
+                    };
+                }
+                return {};
+            },
+        });
+    }
+    deleteField(ctx, action) {
+        const state = ctx.getState();
+        const apiPath = `${this.getApiPath(state)}/sections/${action.sectionId}/fields/${action.fieldId}`;
+        const req$ = this.http.delete(apiPath);
+        // Optimistically mark field as deleting
+        const sectionsWithDeleting = (state.formConfiguration?.sections ?? []).map((section) => {
+            if (section.id === action.sectionId) {
+                return {
+                    ...section,
+                    fields: section.fields.map((f) => f.id === action.fieldId ? { ...f, _deleting: true } : f),
+                };
+            }
+            return section;
+        });
+        ctx.patchState({
+            formConfiguration: {
+                ...state.formConfiguration,
+                sections: sectionsWithDeleting,
+            },
+        });
+        return handleApiRequest({
+            ctx,
+            key: FormBuilderActionKey.DeleteField,
+            request$: req$,
+            onSuccess: (res, currentState) => {
+                const { id: deletedId, sectionId } = res.data;
+                const sections = (currentState.formConfiguration?.sections ?? []).map((section) => {
+                    if (section.id === sectionId) {
+                        return {
+                            ...section,
+                            fields: section.fields.filter((f) => f.id !== deletedId),
+                        };
+                    }
+                    return section;
+                });
+                return {
+                    formConfiguration: {
+                        ...currentState.formConfiguration,
+                        sections,
+                    },
+                };
+            },
+            onError: (_error, currentState) => {
+                // Remove _deleting flag on error
+                const sections = (currentState.formConfiguration?.sections ?? []).map((section) => {
+                    if (section.id === action.sectionId) {
+                        return {
+                            ...section,
+                            fields: section.fields.map((f) => f.id === action.fieldId ? { ...f, _deleting: false } : f),
+                        };
+                    }
+                    return section;
+                });
+                return {
+                    formConfiguration: {
+                        ...currentState.formConfiguration,
+                        sections,
+                    },
+                };
+            },
+        });
+    }
+    reorderFields(ctx, action) {
+        const state = ctx.getState();
+        const apiPath = `${this.getApiPath(state)}/sections/${action.sectionId}/fields/reorder`;
+        const req$ = this.http.put(apiPath, action.payload);
+        // Create order map for optimistic update
+        const orderMap = new Map(action.payload.map((p) => [p.id, p.order]));
+        // Apply optimistic update
+        const optimisticSections = (state.formConfiguration?.sections ?? []).map((section) => {
+            if (section.id === action.sectionId) {
+                const reorderedFields = section.fields
+                    .map((f) => ({
+                    ...f,
+                    order: orderMap.get(f.id) ?? f.order,
+                }))
+                    .sort((a, b) => a.order - b.order);
+                return { ...section, fields: reorderedFields };
+            }
+            return section;
+        });
+        ctx.patchState({
+            formConfiguration: {
+                ...state.formConfiguration,
+                sections: optimisticSections,
+            },
+        });
+        return handleApiRequest({
+            ctx,
+            key: FormBuilderActionKey.ReorderFields,
+            request$: req$,
+            onSuccess: (res, currentState) => {
+                const updatedFields = res.data.fields;
+                const fieldMap = new Map(updatedFields.map((f) => [f.id, f]));
+                const sections = (currentState.formConfiguration?.sections ?? []).map((section) => {
+                    if (section.id === action.sectionId) {
+                        const mergedFields = section.fields
+                            .map((f) => fieldMap.get(f.id) ?? f)
+                            .sort((a, b) => a.order - b.order);
+                        return { ...section, fields: mergedFields };
+                    }
+                    return section;
+                });
+                return {
+                    formConfiguration: {
+                        ...currentState.formConfiguration,
+                        sections,
+                    },
+                };
+            },
+            onError: (_error, _currentState) => {
+                // Revert to original state on error
+                return {
+                    formConfiguration: state.formConfiguration,
+                };
+            },
+        });
+    }
+    moveField(ctx, action) {
+        const state = ctx.getState();
+        const apiPath = `${this.getApiPath(state)}/sections/${action.sectionId}/fields/${action.fieldId}/move`;
+        const req$ = this.http.put(apiPath, action.payload);
+        // Apply optimistic update - move field immediately
+        const sourceSectionId = action.sectionId;
+        const targetSectionId = action.payload.targetSectionId;
+        const targetOrder = action.payload.order ?? 0;
+        let movedFieldData = null;
+        const optimisticSections = (state.formConfiguration?.sections ?? []).map((section) => {
+            if (section.id === sourceSectionId) {
+                const fieldToMove = section.fields.find((f) => f.id === action.fieldId);
+                if (fieldToMove) {
+                    movedFieldData = { ...fieldToMove, order: targetOrder };
+                }
+                return {
+                    ...section,
+                    fields: section.fields.filter((f) => f.id !== action.fieldId),
+                };
+            }
+            return section;
+        });
+        // Add to target section
+        const sectionsWithMoved = optimisticSections.map((section) => {
+            if (section.id === targetSectionId && movedFieldData) {
+                const fields = [...section.fields];
+                fields.splice(targetOrder, 0, movedFieldData);
+                return { ...section, fields };
+            }
+            return section;
+        });
+        ctx.patchState({
+            formConfiguration: {
+                ...state.formConfiguration,
+                sections: sectionsWithMoved,
+            },
+        });
+        return handleApiRequest({
+            ctx,
+            key: FormBuilderActionKey.MoveField,
+            request$: req$,
+            onSuccess: (res, currentState) => {
+                const movedField = res.data;
+                const sections = (currentState.formConfiguration?.sections ?? []).map((section) => {
+                    // Update the moved field with server response
+                    if (section.id === targetSectionId) {
+                        return {
+                            ...section,
+                            fields: section.fields
+                                .map((f) => (f.id === movedField.id ? movedField : f))
+                                .sort((a, b) => a.order - b.order),
+                        };
+                    }
+                    return section;
+                });
+                return {
+                    formConfiguration: {
+                        ...currentState.formConfiguration,
+                        sections,
+                    },
+                };
+            },
+            onError: (_error, _currentState) => {
+                // Revert optimistic update on error
+                return {
+                    formConfiguration: state.formConfiguration,
+                };
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormBuilderState, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormBuilderState });
+};
+__decorate([
+    Action(SetModuleInfo)
+], FormBuilderState.prototype, "setModuleInfo", null);
+__decorate([
+    Action(ResetFormBuilderState)
+], FormBuilderState.prototype, "resetState", null);
+__decorate([
+    Action(SetProperties)
+], FormBuilderState.prototype, "setProperties", null);
+__decorate([
+    Action(GetFormConfiguration)
+], FormBuilderState.prototype, "getFormConfiguration", null);
+__decorate([
+    Action(ResetFormConfiguration)
+], FormBuilderState.prototype, "resetFormConfiguration", null);
+__decorate([
+    Action(AddSection)
+], FormBuilderState.prototype, "addSection", null);
+__decorate([
+    Action(UpdateSection)
+], FormBuilderState.prototype, "updateSection", null);
+__decorate([
+    Action(DeleteSection)
+], FormBuilderState.prototype, "deleteSection", null);
+__decorate([
+    Action(AddField)
+], FormBuilderState.prototype, "addField", null);
+__decorate([
+    Action(UpdateField)
+], FormBuilderState.prototype, "updateField", null);
+__decorate([
+    Action(DeleteField)
+], FormBuilderState.prototype, "deleteField", null);
+__decorate([
+    Action(ReorderFields)
+], FormBuilderState.prototype, "reorderFields", null);
+__decorate([
+    Action(MoveField)
+], FormBuilderState.prototype, "moveField", null);
+__decorate([
+    Selector()
+], FormBuilderState, "getState", null);
+__decorate([
+    Selector()
+], FormBuilderState, "getFormConfiguration", null);
+__decorate([
+    Selector()
+], FormBuilderState, "getSections", null);
+__decorate([
+    Selector()
+], FormBuilderState, "getModuleType", null);
+__decorate([
+    Selector()
+], FormBuilderState, "getModuleId", null);
+__decorate([
+    Selector()
+], FormBuilderState, "getProperties", null);
+FormBuilderState = __decorate([
+    State({
+        name: 'formBuilder',
+        defaults: DEFAULT_STATE,
+    })
+], FormBuilderState);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormBuilderState, decorators: [{
+            type: Injectable
+        }], propDecorators: { setModuleInfo: [], resetState: [], setProperties: [], getFormConfiguration: [], resetFormConfiguration: [], addSection: [], updateSection: [], deleteSection: [], addField: [], updateField: [], deleteField: [], reorderFields: [], moveField: [] } });
+
+class FormBuilderFacade {
+    store = inject(Store);
+    // ============================================================================
+    // State Selectors
+    // ============================================================================
+    stateSignal = select(FormBuilderState.getState);
+    formConfiguration = select(FormBuilderState.getFormConfiguration);
+    sections = select(FormBuilderState.getSections);
+    properties = select(FormBuilderState.getProperties);
+    moduleType = select(FormBuilderState.getModuleType);
+    moduleId = select(FormBuilderState.getModuleId);
+    // ============================================================================
+    // Loading Signals
+    // ============================================================================
+    isLoadingFormConfiguration = computed(() => this.stateSignal().loadingActive.includes(FormBuilderActionKey.GetFormConfiguration), ...(ngDevMode ? [{ debugName: "isLoadingFormConfiguration" }] : []));
+    isResettingFormConfiguration = computed(() => this.stateSignal().loadingActive.includes(FormBuilderActionKey.ResetFormConfiguration), ...(ngDevMode ? [{ debugName: "isResettingFormConfiguration" }] : []));
+    isAddingSection = computed(() => this.stateSignal().loadingActive.includes(FormBuilderActionKey.AddSection), ...(ngDevMode ? [{ debugName: "isAddingSection" }] : []));
+    isUpdatingSection = computed(() => this.stateSignal().loadingActive.includes(FormBuilderActionKey.UpdateSection), ...(ngDevMode ? [{ debugName: "isUpdatingSection" }] : []));
+    isDeletingSection = computed(() => this.stateSignal().loadingActive.includes(FormBuilderActionKey.DeleteSection), ...(ngDevMode ? [{ debugName: "isDeletingSection" }] : []));
+    isAddingField = computed(() => this.stateSignal().loadingActive.includes(FormBuilderActionKey.AddField), ...(ngDevMode ? [{ debugName: "isAddingField" }] : []));
+    isUpdatingField = computed(() => this.stateSignal().loadingActive.includes(FormBuilderActionKey.UpdateField), ...(ngDevMode ? [{ debugName: "isUpdatingField" }] : []));
+    isDeletingField = computed(() => this.stateSignal().loadingActive.includes(FormBuilderActionKey.DeleteField), ...(ngDevMode ? [{ debugName: "isDeletingField" }] : []));
+    isMovingField = computed(() => this.stateSignal().loadingActive.includes(FormBuilderActionKey.MoveField), ...(ngDevMode ? [{ debugName: "isMovingField" }] : []));
+    // ============================================================================
+    // Error Signals
+    // ============================================================================
+    formConfigurationError = computed(() => this.stateSignal().errors[FormBuilderActionKey.GetFormConfiguration] ??
+        null, ...(ngDevMode ? [{ debugName: "formConfigurationError" }] : []));
+    sectionError = computed(() => {
+        const errors = this.stateSignal().errors;
+        return (errors[FormBuilderActionKey.AddSection] ??
+            errors[FormBuilderActionKey.UpdateSection] ??
+            errors[FormBuilderActionKey.DeleteSection] ??
+            null);
+    }, ...(ngDevMode ? [{ debugName: "sectionError" }] : []));
+    fieldError = computed(() => {
+        const errors = this.stateSignal().errors;
+        return (errors[FormBuilderActionKey.AddField] ??
+            errors[FormBuilderActionKey.UpdateField] ??
+            errors[FormBuilderActionKey.DeleteField] ??
+            errors[FormBuilderActionKey.MoveField] ??
+            null);
+    }, ...(ngDevMode ? [{ debugName: "fieldError" }] : []));
+    // ============================================================================
+    // Module Configuration Dispatchers
+    // ============================================================================
+    setModuleInfo(moduleType, moduleId, parentModuleType, parentModuleId, parentPath) {
+        return this.store.dispatch(new SetModuleInfo(moduleType, moduleId, parentModuleType, parentModuleId, parentPath));
+    }
+    resetState() {
+        return this.store.dispatch(new ResetFormBuilderState());
+    }
+    setProperties(properties) {
+        return this.store.dispatch(new SetProperties(properties));
+    }
+    // ============================================================================
+    // Form Configuration Dispatchers
+    // ============================================================================
+    getFormConfiguration() {
+        return this.store.dispatch(new GetFormConfiguration());
+    }
+    resetFormConfiguration() {
+        return this.store.dispatch(new ResetFormConfiguration());
+    }
+    // ============================================================================
+    // Section Dispatchers
+    // ============================================================================
+    addSection(payload) {
+        return this.store.dispatch(new AddSection(payload));
+    }
+    updateSection(sectionId, payload) {
+        return this.store.dispatch(new UpdateSection(sectionId, payload));
+    }
+    deleteSection(sectionId) {
+        return this.store.dispatch(new DeleteSection(sectionId));
+    }
+    // ============================================================================
+    // Field Dispatchers
+    // ============================================================================
+    addField(sectionId, payload) {
+        return this.store.dispatch(new AddField(sectionId, payload));
+    }
+    updateField(sectionId, fieldId, payload) {
+        return this.store.dispatch(new UpdateField(sectionId, fieldId, payload));
+    }
+    deleteField(sectionId, fieldId) {
+        return this.store.dispatch(new DeleteField(sectionId, fieldId));
+    }
+    reorderFields(sectionId, payload) {
+        return this.store.dispatch(new ReorderFields(sectionId, payload));
+    }
+    moveField(sectionId, fieldId, payload) {
+        return this.store.dispatch(new MoveField(sectionId, fieldId, payload));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormBuilderFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormBuilderFacade, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormBuilderFacade, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Condition Formula Constants
+ * Static functions and operators for condition formulas (Show/Hide/Enable/Disable)
+ */
+/**
+ * Functions for field conditions
+ */
+const CONDITION_FUNCTION_CATEGORIES = [
+    {
+        name: 'Logic',
+        displayName: 'Field Visibility',
+        functions: [
+            {
+                name: 'SHOW_IF',
+                category: 'Logic',
+                description: 'Show this field when condition is true',
+                signature: 'SHOW_IF(condition)',
+                parameters: [
+                    {
+                        name: 'condition',
+                        type: 'boolean',
+                        description: 'When true, field is visible',
+                        required: true,
+                    },
+                ],
+                returnType: 'boolean',
+                examples: [
+                    'SHOW_IF(@Status == "Active")',
+                    'SHOW_IF(@Type == "Custom")',
+                ],
+            },
+            {
+                name: 'HIDE_IF',
+                category: 'Logic',
+                description: 'Hide this field when condition is true',
+                signature: 'HIDE_IF(condition)',
+                parameters: [
+                    {
+                        name: 'condition',
+                        type: 'boolean',
+                        description: 'When true, field is hidden',
+                        required: true,
+                    },
+                ],
+                returnType: 'boolean',
+                examples: ['HIDE_IF(@Status == "Closed")', 'HIDE_IF(ISNULL(@Parent))'],
+            },
+            {
+                name: 'DISABLE_IF',
+                category: 'Logic',
+                description: 'Disable this field when condition is true',
+                signature: 'DISABLE_IF(condition)',
+                parameters: [
+                    {
+                        name: 'condition',
+                        type: 'boolean',
+                        description: 'When true, field is disabled',
+                        required: true,
+                    },
+                ],
+                returnType: 'boolean',
+                examples: [
+                    'DISABLE_IF(@IsLocked == true)',
+                    'DISABLE_IF(@Status == "Approved")',
+                ],
+            },
+            {
+                name: 'ENABLE_IF',
+                category: 'Logic',
+                description: 'Enable this field when condition is true',
+                signature: 'ENABLE_IF(condition)',
+                parameters: [
+                    {
+                        name: 'condition',
+                        type: 'boolean',
+                        description: 'When true, field is enabled',
+                        required: true,
+                    },
+                ],
+                returnType: 'boolean',
+                examples: [
+                    'ENABLE_IF(@Status == "Draft")',
+                    'ENABLE_IF(@CanEdit == true)',
+                ],
+            },
+        ],
+    },
+    {
+        name: 'Aggregation',
+        displayName: 'Logic Helpers',
+        functions: [
+            {
+                name: 'AND',
+                category: 'Aggregation',
+                description: 'Returns true if all conditions are true',
+                signature: 'AND(condition1, condition2)',
+                parameters: [
+                    {
+                        name: 'condition1',
+                        type: 'boolean',
+                        description: 'First condition',
+                        required: true,
+                    },
+                    {
+                        name: 'condition2',
+                        type: 'boolean',
+                        description: 'Second condition',
+                        required: true,
+                    },
+                ],
+                returnType: 'boolean',
+                examples: ['AND(@Status == "Active", @Priority > 0)'],
+            },
+            {
+                name: 'OR',
+                category: 'Aggregation',
+                description: 'Returns true if any condition is true',
+                signature: 'OR(condition1, condition2)',
+                parameters: [
+                    {
+                        name: 'condition1',
+                        type: 'boolean',
+                        description: 'First condition',
+                        required: true,
+                    },
+                    {
+                        name: 'condition2',
+                        type: 'boolean',
+                        description: 'Second condition',
+                        required: true,
+                    },
+                ],
+                returnType: 'boolean',
+                examples: ['OR(@Status == "Active", @Status == "Pending")'],
+            },
+            {
+                name: 'NOT',
+                category: 'Aggregation',
+                description: 'Returns the opposite of the condition',
+                signature: 'NOT(condition)',
+                parameters: [
+                    {
+                        name: 'condition',
+                        type: 'boolean',
+                        description: 'The condition to negate',
+                        required: true,
+                    },
+                ],
+                returnType: 'boolean',
+                examples: ['NOT(@IsCompleted)'],
+            },
+            {
+                name: 'ISNULL',
+                category: 'Aggregation',
+                description: 'Returns true if value is null or empty',
+                signature: 'ISNULL(value)',
+                parameters: [
+                    {
+                        name: 'value',
+                        type: 'any',
+                        description: 'The value to check',
+                        required: true,
+                    },
+                ],
+                returnType: 'boolean',
+                examples: ['ISNULL(@Description)'],
+            },
+            {
+                name: 'CONTAINS',
+                category: 'Aggregation',
+                description: 'Returns true if text contains the search string',
+                signature: 'CONTAINS(text, search)',
+                parameters: [
+                    {
+                        name: 'text',
+                        type: 'string',
+                        description: 'The text to search in',
+                        required: true,
+                    },
+                    {
+                        name: 'search',
+                        type: 'string',
+                        description: 'The string to search for',
+                        required: true,
+                    },
+                ],
+                returnType: 'boolean',
+                examples: ['CONTAINS(@Name, "Project")'],
+            },
+        ],
+    },
+];
+/**
+ * Operators for conditions
+ */
+const CONDITION_OPERATORS = [
+    // Comparison
+    {
+        symbol: '==',
+        name: 'Equal',
+        type: 'comparison',
+        description: 'Equal to',
+        precedence: 3,
+    },
+    {
+        symbol: '!=',
+        name: 'Not Equal',
+        type: 'comparison',
+        description: 'Not equal to',
+        precedence: 3,
+    },
+    {
+        symbol: '>',
+        name: 'Greater Than',
+        type: 'comparison',
+        description: 'Greater than',
+        precedence: 4,
+    },
+    {
+        symbol: '<',
+        name: 'Less Than',
+        type: 'comparison',
+        description: 'Less than',
+        precedence: 4,
+    },
+    {
+        symbol: '>=',
+        name: 'Greater or Equal',
+        type: 'comparison',
+        description: 'Greater than or equal',
+        precedence: 4,
+    },
+    {
+        symbol: '<=',
+        name: 'Less or Equal',
+        type: 'comparison',
+        description: 'Less than or equal',
+        precedence: 4,
+    },
+    // Logical
+    {
+        symbol: '&&',
+        name: 'And',
+        type: 'logical',
+        description: 'Logical AND',
+        precedence: 2,
+    },
+    {
+        symbol: '||',
+        name: 'Or',
+        type: 'logical',
+        description: 'Logical OR',
+        precedence: 1,
+    },
+];
+
+/**
+ * Field Conditions Dialog
+ *
+ * Allows users to define conditional display formulas for form fields.
+ * Uses FormulaToolbar + FormulaEditor directly for a visual formula editing experience.
+ */
+class FBFieldConditions {
+    modalService = inject(ModalService);
+    ref = inject(ModalRef);
+    // Inputs
+    /** Initial formula (JSON string from backend) */
+    initialFormula = input('', ...(ngDevMode ? [{ debugName: "initialFormula" }] : []));
+    /** Available fields from the form builder (other fields that can be referenced) */
+    availableFields = input([], ...(ngDevMode ? [{ debugName: "availableFields" }] : []));
+    // UI State
+    submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : []));
+    // Form control for the formula editor (tokens array)
+    formulaControl = new FormControl([]);
+    // View child for the editor
+    editorRef = viewChild('editor', ...(ngDevMode ? [{ debugName: "editorRef" }] : []));
+    // Condition-specific functions and operators
+    functionCategories = CONDITION_FUNCTION_CATEGORIES;
+    operators = CONDITION_OPERATORS;
+    /** Extract property keys for toolbar */
+    propertyKeys = computed(() => this.availableFields().map((f) => f.key), ...(ngDevMode ? [{ debugName: "propertyKeys" }] : []));
+    /** Toolbar labels */
+    toolbarLabels = {
+        functions: 'Functions',
+        properties: 'Fields',
+        operators: 'Operators',
+        noPropertiesAvailable: 'No fields available',
+    };
+    ngOnInit() {
+        // Parse JSON string to tokens
+        const formula = this.initialFormula();
+        if (formula) {
+            try {
+                const tokens = JSON.parse(formula);
+                this.formulaControl.patchValue(tokens);
+            }
+            catch {
+                // Invalid JSON, start with empty
+            }
+        }
+    }
+    /** Handle block insert from toolbar */
+    onBlockInsert(block) {
+        const editor = this.editorRef();
+        if (editor) {
+            editor.addBlock(block);
+        }
+    }
+    onSave() {
+        const tokens = this.formulaControl.value ?? [];
+        const formula = tokens.length > 0 ? JSON.stringify(tokens) : '';
+        this.ref.close({ saved: true, conditionalDisplayFormula: formula });
+    }
+    onCancel() {
+        this.ref.close({ saved: false });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FBFieldConditions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: FBFieldConditions, isStandalone: true, selector: "mt-fb-field-conditions", inputs: { initialFormula: { classPropertyName: "initialFormula", publicName: "initialFormula", isSignal: true, isRequired: false, transformFunction: null }, availableFields: { classPropertyName: "availableFields", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-hidden!']\">\r\n    <div class=\"mt-4 h-full overflow-y-auto pb-10 flex flex-col gap-3\">\r\n      <!-- Formula Toolbar -->\r\n      <mt-formula-toolbar\r\n        [knownProperties]=\"propertyKeys()\"\r\n        [functionCategories]=\"functionCategories\"\r\n        [operators]=\"operators\"\r\n        [labels]=\"toolbarLabels\"\r\n        (onBlockInsert)=\"onBlockInsert($event)\"\r\n      />\r\n      <!-- Formula Editor -->\r\n      <mt-formula-editor\r\n        #editor\r\n        [placeholder]=\"t('build-condition-formula')\"\r\n        [formControl]=\"formulaControl\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"modalService.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      [disabled]=\"submitting()\"\r\n      (onClick)=\"onCancel()\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      severity=\"primary\"\r\n      [loading]=\"submitting()\"\r\n      (onClick)=\"onSave()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FormulaToolbar, selector: "mt-formula-toolbar", inputs: ["knownProperties", "functionCategories", "operators", "initialTab", "searchPlaceholder", "labels"], outputs: ["onBlockInsert", "onTabChange"] }, { kind: "component", type: FormulaEditor, selector: "mt-formula-editor", inputs: ["placeholder", "initialTokens", "disabled"], outputs: ["formulaChange", "tokensChange", "onBlur", "onFocus"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FBFieldConditions, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-fb-field-conditions', standalone: true, imports: [
+                        TranslocoDirective,
+                        ReactiveFormsModule,
+                        Button,
+                        FormulaToolbar,
+                        FormulaEditor,
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-hidden!']\">\r\n    <div class=\"mt-4 h-full overflow-y-auto pb-10 flex flex-col gap-3\">\r\n      <!-- Formula Toolbar -->\r\n      <mt-formula-toolbar\r\n        [knownProperties]=\"propertyKeys()\"\r\n        [functionCategories]=\"functionCategories\"\r\n        [operators]=\"operators\"\r\n        [labels]=\"toolbarLabels\"\r\n        (onBlockInsert)=\"onBlockInsert($event)\"\r\n      />\r\n      <!-- Formula Editor -->\r\n      <mt-formula-editor\r\n        #editor\r\n        [placeholder]=\"t('build-condition-formula')\"\r\n        [formControl]=\"formulaControl\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"modalService.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      [disabled]=\"submitting()\"\r\n      (onClick)=\"onCancel()\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      severity=\"primary\"\r\n      [loading]=\"submitting()\"\r\n      (onClick)=\"onSave()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], propDecorators: { initialFormula: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFormula", required: false }] }], availableFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFields", required: false }] }], editorRef: [{ type: i0.ViewChild, args: ['editor', { isSignal: true }] }] } });
+
+class FBFieldForm {
+    transloco = inject(TranslocoService);
+    modalService = inject(ModalService);
+    ref = inject(ModalRef);
+    confirmationService = inject(ConfirmationService);
+    facade = inject(FormBuilderFacade);
+    // Inputs
+    sectionId = input('', ...(ngDevMode ? [{ debugName: "sectionId" }] : []));
+    initialData = input(null, ...(ngDevMode ? [{ debugName: "initialData" }] : []));
+    /** All sections with enriched fields (to get available fields for conditions) */
+    allSections = input([], ...(ngDevMode ? [{ debugName: "allSections" }] : []));
+    // UI State
+    submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : []));
+    deleting = signal(false, ...(ngDevMode ? [{ debugName: "deleting" }] : []));
+    conditionalDisplayFormula = signal('', ...(ngDevMode ? [{ debugName: "conditionalDisplayFormula" }] : []));
+    conditionsDialogRef;
+    /**
+     * Compute available fields for condition formula
+     * Excludes the current field being edited
+     */
+    availableFields = computed(() => {
+        const sections = this.allSections();
+        const currentField = this.initialData();
+        const fields = [];
+        for (const section of sections) {
+            for (const field of section.fields) {
+                // Exclude the current field being edited
+                if (currentField && field.id === currentField.id)
+                    continue;
+                fields.push({
+                    key: field.name,
+                    name: field.name,
+                    type: field.type,
+                });
+            }
+        }
+        return fields;
+    }, ...(ngDevMode ? [{ debugName: "availableFields" }] : []));
+    // Form
+    formControl = new FormControl();
+    showHideControl = new FormControl(false);
+    formConfig = {
+        sections: [
+            {
+                key: 'section-form',
+                type: 'none',
+                columns: 12,
+                order: 1,
+                fields: [
+                    {
+                        key: 'isRequired',
+                        label: this.transloco.translate('formBuilder.is-required'),
+                        type: 'toggle',
+                        toggleShape: 'card',
+                        colSpan: 12,
+                        order: 1,
+                    },
+                    {
+                        key: 'hiddenInCreation',
+                        label: this.transloco.translate('formBuilder.hidden-in-creation'),
+                        type: 'toggle',
+                        toggleShape: 'card',
+                        colSpan: 12,
+                        order: 2,
+                    },
+                    {
+                        key: 'hiddenInEditForm',
+                        label: this.transloco.translate('formBuilder.hidden-in-edit-form'),
+                        type: 'toggle',
+                        toggleShape: 'card',
+                        colSpan: 12,
+                        order: 3,
+                    },
+                    new RadioCardsFieldConfig({
+                        key: 'size',
+                        label: this.transloco.translate('formBuilder.size'),
+                        placeholder: this.transloco.translate('formBuilder.size'),
+                        options: [
+                            { id: 's', name: 'S' },
+                            { id: 'm', name: 'M' },
+                            { id: 'l', name: 'L' },
+                        ],
+                        order: 4,
+                        size: 'small',
+                    }),
+                ],
+            },
+        ],
+    };
+    constructor() {
+        effect(() => {
+            const data = this.initialData();
+            if (data) {
+                const widthToSize = {
+                    '25': 's',
+                    '50': 'm',
+                    '100': 'l',
+                };
+                this.formControl.patchValue({
+                    isRequired: data.isRequired ?? false,
+                    hiddenInCreation: data.hiddenInCreation ?? false,
+                    hiddenInEditForm: data.hiddenInEditForm ?? false,
+                    size: widthToSize[data.width] ?? 'l',
+                });
+                // Set show/hide toggle based on existing value
+                this.showHideControl.patchValue(data.showConditionalDisplayFormula ?? false);
+                this.conditionalDisplayFormula.set(data.conditionalDisplayFormula ?? '');
+            }
+        });
+    }
+    onSave() {
+        if (this.formControl.invalid)
+            return;
+        const formValue = this.formControl.value;
+        const field = this.initialData();
+        const sectionId = this.sectionId();
+        if (!field || !sectionId)
+            return;
+        const widthMap = {
+            s: '25',
+            m: '50',
+            l: '100',
+        };
+        const payload = {
+            width: widthMap[formValue.size] ?? '100',
+            hiddenInCreation: formValue.hiddenInCreation ?? false,
+            hiddenInEditForm: formValue.hiddenInEditForm ?? false,
+            isRequired: formValue.isRequired ?? false,
+            showConditionalDisplayFormula: this.showHideControl.value ?? false,
+            conditionalDisplayFormula: this.showHideControl.value
+                ? this.conditionalDisplayFormula()
+                : null,
+        };
+        this.submitting.set(true);
+        this.facade.updateField(sectionId, field.id, payload).subscribe({
+            next: () => this.ref.close(true),
+            error: () => this.submitting.set(false),
+        });
+    }
+    onCancel() {
+        this.ref.close(false);
+    }
+    onSetConditions() {
+        this.conditionsDialogRef = this.modalService.openModal(FBFieldConditions, 'drawer', {
+            header: this.transloco.translate('formBuilder.set-conditions'),
+            styleClass: '!w-[calc(100%-25rem)] !absolute ',
+            position: 'start',
+            modal: true,
+            dismissible: true,
+            appendTo: '#page-content',
+            inputValues: {
+                initialFormula: this.conditionalDisplayFormula(),
+                availableFields: this.availableFields(),
+            },
+        });
+        this.conditionsDialogRef.onClose.subscribe((result) => {
+            if (result?.saved) {
+                this.conditionalDisplayFormula.set(result.conditionalDisplayFormula ?? '');
+            }
+        });
+    }
+    onDelete(event) {
+        const field = this.initialData();
+        const sectionId = this.sectionId();
+        if (!field || !sectionId)
+            return;
+        this.confirmationService.confirmDelete({
+            event,
+            type: 'popup',
+            accept: () => {
+                this.deleting.set(true);
+                this.facade.deleteField(sectionId, field.id).subscribe({
+                    next: () => this.ref.close(true),
+                    error: () => this.deleting.set(false),
+                });
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FBFieldForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FBFieldForm, isStandalone: true, selector: "mt-fb-field-form", inputs: { sectionId: { classPropertyName: "sectionId", publicName: "sectionId", isSignal: true, isRequired: false, transformFunction: null }, initialData: { classPropertyName: "initialData", publicName: "initialData", isSignal: true, isRequired: false, transformFunction: null }, allSections: { classPropertyName: "allSections", publicName: "allSections", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-hidden!']\">\r\n    <div class=\"mt-4 h-full overflow-y-auto pb-10 flex flex-col gap-4\">\r\n      <mt-dynamic-form [formConfig]=\"formConfig\" [formControl]=\"formControl\">\r\n      </mt-dynamic-form>\r\n\r\n      <!-- Show/Hide Toggle with Set Conditions -->\r\n      <mt-toggle-field\r\n        toggleShape=\"card\"\r\n        [label]=\"t('show-hide')\"\r\n        [descriptionCard]=\"t('show-hide-description')\"\r\n        icon=\"general.eye\"\r\n        [formControl]=\"showHideControl\"\r\n      >\r\n        <ng-template #toggleCardBottom>\r\n          @if (showHideControl.value) {\r\n            <div class=\"mt-3\">\r\n              <mt-button\r\n                [label]=\"t('set-conditions')\"\r\n                size=\"small\"\r\n                (onClick)=\"onSetConditions()\"\r\n              ></mt-button>\r\n            </div>\r\n          }\r\n        </ng-template>\r\n      </mt-toggle-field>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"modalService.footerClass\">\r\n    @if (initialData()) {\r\n      <mt-button\r\n        [tooltip]=\"t('delete')\"\r\n        severity=\"danger\"\r\n        outlined\r\n        icon=\"general.trash-01\"\r\n        [loading]=\"deleting()\"\r\n        [disabled]=\"submitting()\"\r\n        (onClick)=\"onDelete($event)\"\r\n        class=\"me-auto\"\r\n      ></mt-button>\r\n    }\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      [disabled]=\"submitting() || deleting()\"\r\n      (onClick)=\"onCancel()\"\r\n    >\r\n    </mt-button>\r\n    <mt-button\r\n      [disabled]=\"!formControl.valid || deleting()\"\r\n      [label]=\"t('save')\"\r\n      severity=\"primary\"\r\n      [loading]=\"submitting()\"\r\n      (onClick)=\"onSave()\"\r\n    >\r\n    </mt-button>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FBFieldForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-fb-field-form', standalone: true, imports: [
+                        TranslocoDirective,
+                        ReactiveFormsModule,
+                        DynamicForm,
+                        Button,
+                        ToggleField,
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-hidden!']\">\r\n    <div class=\"mt-4 h-full overflow-y-auto pb-10 flex flex-col gap-4\">\r\n      <mt-dynamic-form [formConfig]=\"formConfig\" [formControl]=\"formControl\">\r\n      </mt-dynamic-form>\r\n\r\n      <!-- Show/Hide Toggle with Set Conditions -->\r\n      <mt-toggle-field\r\n        toggleShape=\"card\"\r\n        [label]=\"t('show-hide')\"\r\n        [descriptionCard]=\"t('show-hide-description')\"\r\n        icon=\"general.eye\"\r\n        [formControl]=\"showHideControl\"\r\n      >\r\n        <ng-template #toggleCardBottom>\r\n          @if (showHideControl.value) {\r\n            <div class=\"mt-3\">\r\n              <mt-button\r\n                [label]=\"t('set-conditions')\"\r\n                size=\"small\"\r\n                (onClick)=\"onSetConditions()\"\r\n              ></mt-button>\r\n            </div>\r\n          }\r\n        </ng-template>\r\n      </mt-toggle-field>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"modalService.footerClass\">\r\n    @if (initialData()) {\r\n      <mt-button\r\n        [tooltip]=\"t('delete')\"\r\n        severity=\"danger\"\r\n        outlined\r\n        icon=\"general.trash-01\"\r\n        [loading]=\"deleting()\"\r\n        [disabled]=\"submitting()\"\r\n        (onClick)=\"onDelete($event)\"\r\n        class=\"me-auto\"\r\n      ></mt-button>\r\n    }\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      [disabled]=\"submitting() || deleting()\"\r\n      (onClick)=\"onCancel()\"\r\n    >\r\n    </mt-button>\r\n    <mt-button\r\n      [disabled]=\"!formControl.valid || deleting()\"\r\n      [label]=\"t('save')\"\r\n      severity=\"primary\"\r\n      [loading]=\"submitting()\"\r\n      (onClick)=\"onSave()\"\r\n    >\r\n    </mt-button>\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { sectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionId", required: false }] }], initialData: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialData", required: false }] }], allSections: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSections", required: false }] }] } });
+
+class FBSectionForm {
+    transloco = inject(TranslocoService);
+    modalService = inject(ModalService);
+    ref = inject(ModalRef);
+    confirmationService = inject(ConfirmationService);
+    facade = inject(FormBuilderFacade);
+    // Inputs
+    sectionId = input(null, ...(ngDevMode ? [{ debugName: "sectionId" }] : []));
+    initialData = input(null, ...(ngDevMode ? [{ debugName: "initialData" }] : []));
+    sectionsCount = input(0, ...(ngDevMode ? [{ debugName: "sectionsCount" }] : []));
+    // UI State
+    submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : []));
+    deleting = signal(false, ...(ngDevMode ? [{ debugName: "deleting" }] : []));
+    // Form
+    formControl = new FormControl();
+    formConfig = {
+        sections: [
+            {
+                key: 'section-form',
+                type: 'none',
+                columns: 12,
+                order: 1,
+                fields: [
+                    {
+                        key: 'name-ar',
+                        label: this.transloco.translate('formBuilder.name-ar'),
+                        type: 'text',
+                        placeholder: this.transloco.translate('formBuilder.name-ar'),
+                        colSpan: 12,
+                        order: 1,
+                    },
+                    {
+                        key: 'name-en',
+                        label: this.transloco.translate('formBuilder.name-en'),
+                        type: 'text',
+                        placeholder: this.transloco.translate('formBuilder.name-en'),
+                        colSpan: 12,
+                        order: 2,
+                    },
+                ],
+            },
+        ],
+    };
+    constructor() {
+        effect(() => {
+            const data = this.initialData();
+            if (data) {
+                this.formControl.patchValue({
+                    'name-ar': data.ar,
+                    'name-en': data.en,
+                });
+            }
+        });
+    }
+    onSave() {
+        if (this.formControl.invalid)
+            return;
+        const formValue = this.formControl.value;
+        const payload = {
+            name: {
+                ar: formValue['name-ar'],
+                en: formValue['name-en'],
+            },
+        };
+        this.submitting.set(true);
+        const sectionId = this.sectionId();
+        if (sectionId) {
+            // Update existing section
+            this.facade.updateSection(sectionId, payload).subscribe({
+                next: () => this.ref.close(true),
+                error: () => this.submitting.set(false),
+            });
+        }
+        else {
+            // Create new section
+            this.facade
+                .addSection({ ...payload, order: this.sectionsCount() })
+                .subscribe({
+                next: () => this.ref.close(true),
+                error: () => this.submitting.set(false),
+            });
+        }
+    }
+    onCancel() {
+        this.ref.close(false);
+    }
+    onDelete(event) {
+        const sectionId = this.sectionId();
+        if (!sectionId)
+            return;
+        this.confirmationService.confirmDelete({
+            event,
+            type: 'popup',
+            accept: () => {
+                this.deleting.set(true);
+                this.facade.deleteSection(sectionId).subscribe({
+                    next: () => this.ref.close(true),
+                    error: () => this.deleting.set(false),
+                });
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FBSectionForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FBSectionForm, isStandalone: true, selector: "mt-fb-section-form", inputs: { sectionId: { classPropertyName: "sectionId", publicName: "sectionId", isSignal: true, isRequired: false, transformFunction: null }, initialData: { classPropertyName: "initialData", publicName: "initialData", isSignal: true, isRequired: false, transformFunction: null }, sectionsCount: { classPropertyName: "sectionsCount", publicName: "sectionsCount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-hidden!']\">\r\n    <div class=\"mt-4 h-full overflow-y-auto pb-10\">\r\n      <mt-dynamic-form [formConfig]=\"formConfig\" [formControl]=\"formControl\">\r\n      </mt-dynamic-form>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"modalService.footerClass\">\r\n    @if (sectionId()) {\r\n      <mt-button\r\n        [tooltip]=\"t('delete')\"\r\n        severity=\"danger\"\r\n        outlined\r\n        icon=\"general.trash-01\"\r\n        [loading]=\"deleting()\"\r\n        [disabled]=\"submitting()\"\r\n        (onClick)=\"onDelete($event)\"\r\n        class=\"me-auto\"\r\n      ></mt-button>\r\n    }\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      [disabled]=\"submitting() || deleting()\"\r\n      (onClick)=\"onCancel()\"\r\n    >\r\n    </mt-button>\r\n    <mt-button\r\n      [disabled]=\"!formControl.valid || deleting()\"\r\n      [label]=\"t('save')\"\r\n      severity=\"primary\"\r\n      [loading]=\"submitting()\"\r\n      (onClick)=\"onSave()\"\r\n    >\r\n    </mt-button>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FBSectionForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-fb-section-form', standalone: true, imports: [TranslocoDirective, ReactiveFormsModule, DynamicForm, Button], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-hidden!']\">\r\n    <div class=\"mt-4 h-full overflow-y-auto pb-10\">\r\n      <mt-dynamic-form [formConfig]=\"formConfig\" [formControl]=\"formControl\">\r\n      </mt-dynamic-form>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"modalService.footerClass\">\r\n    @if (sectionId()) {\r\n      <mt-button\r\n        [tooltip]=\"t('delete')\"\r\n        severity=\"danger\"\r\n        outlined\r\n        icon=\"general.trash-01\"\r\n        [loading]=\"deleting()\"\r\n        [disabled]=\"submitting()\"\r\n        (onClick)=\"onDelete($event)\"\r\n        class=\"me-auto\"\r\n      ></mt-button>\r\n    }\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      [disabled]=\"submitting() || deleting()\"\r\n      (onClick)=\"onCancel()\"\r\n    >\r\n    </mt-button>\r\n    <mt-button\r\n      [disabled]=\"!formControl.valid || deleting()\"\r\n      [label]=\"t('save')\"\r\n      severity=\"primary\"\r\n      [loading]=\"submitting()\"\r\n      (onClick)=\"onSave()\"\r\n    >\r\n    </mt-button>\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { sectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionId", required: false }] }], initialData: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialData", required: false }] }], sectionsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionsCount", required: false }] }] } });
+
+class FBSection {
+    confirmationService = inject(ConfirmationService);
+    modalService = inject(ModalService);
+    translocoService = inject(TranslocoService);
+    facade = inject(FormBuilderFacade);
+    // Inputs
+    section = input.required(...(ngDevMode ? [{ debugName: "section" }] : []));
+    sectionsCount = input(0, ...(ngDevMode ? [{ debugName: "sectionsCount" }] : []));
+    /** All sections - used to get available fields for condition formulas */
+    allSections = input([], ...(ngDevMode ? [{ debugName: "allSections" }] : []));
+    // Outputs - only keep drag/drop since it needs coordination with parent drop list group
+    onFieldDrop = output();
+    // Computed
+    sectionName = computed(() => {
+        const lang = document.documentElement.lang;
+        const section = this.section();
+        return section.name[lang] ?? section.name['en'];
+    }, ...(ngDevMode ? [{ debugName: "sectionName" }] : []));
+    fields = computed(() => this.section().fields, ...(ngDevMode ? [{ debugName: "fields" }] : []));
+    // UI State
+    expanded = signal(true, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    // Form groups cache for dynamic fields
+    formGroupsCache = new Map();
+    constructor() {
+        // Cleanup stale form groups when fields change
+        effect(() => {
+            const currentIds = new Set(this.fields().map((f) => f.id));
+            for (const id of this.formGroupsCache.keys()) {
+                if (!currentIds.has(id)) {
+                    this.formGroupsCache.delete(id);
+                }
+            }
+        });
+    }
+    getFormGroup(field) {
+        let fg = this.formGroupsCache.get(field.id);
+        if (fg) {
+            // Check if field name changed
+            if (!fg.contains(field.name)) {
+                const oldKey = Object.keys(fg.controls)[0];
+                const value = oldKey ? fg.get(oldKey)?.value : field.data?.data;
+                fg = new FormGroup({
+                    [field.name]: new FormControl(value),
+                });
+                this.formGroupsCache.set(field.id, fg);
+            }
+        }
+        else {
+            fg = new FormGroup({
+                [field.name]: new FormControl(field.data?.data),
+            });
+            this.formGroupsCache.set(field.id, fg);
+        }
+        return fg;
+    }
+    toggleExpanded() {
+        this.expanded.update((v) => !v);
+    }
+    onDrop(event) {
+        this.onFieldDrop.emit(event);
+    }
+    editSection(event) {
+        event.stopPropagation();
+        const section = this.section();
+        this.modalService.openModal(FBSectionForm, 'drawer', {
+            header: this.translocoService.translate('formBuilder.edit-section'),
+            height: '20vw',
+            styleClass: '!w-100 !absolute  ',
+            position: 'end',
+            appendTo: '#page-content',
+            modal: true,
+            dismissible: true,
+            inputValues: {
+                sectionId: section.id,
+                initialData: section.name,
+                sectionsCount: this.sectionsCount(),
+            },
+        });
+    }
+    removeField(event, field) {
+        this.confirmationService.confirmDelete({
+            event,
+            type: 'popup',
+            accept: () => {
+                this.facade.deleteField(this.section().id, field.id);
+            },
+        });
+    }
+    editField(field) {
+        this.modalService.openModal(FBFieldForm, 'drawer', {
+            header: this.translocoService.translate('formBuilder.field-settings'),
+            height: '20vw',
+            styleClass: '!w-100 !absolute !shadow-none',
+            position: 'end',
+            modal: true,
+            dismissible: true,
+            appendTo: '#page-content',
+            inputValues: {
+                initialData: field,
+                sectionId: this.section().id,
+                allSections: this.allSections(),
+            },
+        });
+    }
+    getFieldColSpan(field) {
+        switch (field.width) {
+            case '100':
+                return 'col-span-12';
+            case '50':
+                return 'col-span-6';
+            case '25':
+                return 'col-span-3';
+            default:
+                return 'col-span-12';
+        }
+    }
+    getFieldType(field) {
+        const typeMap = {
+            User: 'select',
+            Text: 'text',
+            LongText: 'editor-field',
+            Percentage: 'slider',
+            Date: 'date',
+            Currency: 'text',
+            Number: 'number',
+            Lookup: 'select',
+            LookupMultiSelect: 'select',
+            Checkbox: 'toggle',
+            InternalModule: 'select',
+            DynamicList: 'select',
+            API: 'select',
+            Time: 'date',
+            Status: 'select',
+            Attachment: 'attachment',
+            EditableListView: 'actionableTable',
+            LookupLog: 'actionableTable',
+            LookupMatrix: 'select',
+            Location: 'select',
+        };
+        return typeMap[field.type] ?? 'text';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FBSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FBSection, isStandalone: true, selector: "mt-fb-section", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, sectionsCount: { classPropertyName: "sectionsCount", publicName: "sectionsCount", isSignal: true, isRequired: false, transformFunction: null }, allSections: { classPropertyName: "allSections", publicName: "allSections", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFieldDrop: "onFieldDrop" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div class=\"flex flex-col\">\r\n    <div\r\n      class=\"flex justify-between items-center bg-primary text-primary-contrast p-2 rounded-xl\"\r\n    >\r\n      <mt-button\r\n        size=\"small\"\r\n        icon=\"arrow.chevron-down\"\r\n        class=\"transition-[rotate]\"\r\n        [class.rotate-180]=\"expanded()\"\r\n        (onClick)=\"toggleExpanded()\"\r\n      ></mt-button>\r\n      <span class=\"font-bold\">\r\n        {{ sectionName() }}\r\n      </span>\r\n      <div class=\"flex gap-2\">\r\n        <mt-button\r\n          size=\"small\"\r\n          icon=\"general.edit-02\"\r\n          [tooltip]=\"t('edit-section')\"\r\n          (onClick)=\"editSection($event)\"\r\n        ></mt-button>\r\n      </div>\r\n    </div>\r\n    @if (expanded()) {\r\n      <div\r\n        cdkDropList\r\n        [id]=\"section().id\"\r\n        cdkDropListOrientation=\"mixed\"\r\n        [cdkDropListData]=\"fields()\"\r\n        (cdkDropListDropped)=\"onDrop($event)\"\r\n        class=\"grid grid-cols-12 gap-4 relative py-4\"\r\n        [class.min-h-27]=\"fields().length === 0\"\r\n      >\r\n        @for (field of fields(); track field.id) {\r\n          <div\r\n            cdkDrag\r\n            [cdkDragData]=\"field\"\r\n            [cdkDragDisabled]=\"field._pending || field._deleting\"\r\n            [class]=\"\r\n              getFieldColSpan(field) + ' cursor-grab active:cursor-grabbing'\r\n            \"\r\n          >\r\n            <div\r\n              *cdkDragPlaceholder\r\n              [class]=\"\r\n                'h-full min-h-27 bg-black/10 rounded-2xl ' +\r\n                getFieldColSpan(field)\r\n              \"\r\n            ></div>\r\n            @if (field._pending) {\r\n              <!-- Skeleton for pending field -->\r\n              <mt-card class=\"h-full animate-pulse\">\r\n                <div class=\"flex gap-2\">\r\n                  <div class=\"flex-1 space-y-3\">\r\n                    <div class=\"h-4 bg-surface-200 rounded w-1/3\"></div>\r\n                    <div class=\"h-10 bg-surface-200 rounded\"></div>\r\n                  </div>\r\n                  <div class=\"flex flex-col gap-1\">\r\n                    <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\r\n                    <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\r\n                  </div>\r\n                </div>\r\n              </mt-card>\r\n            } @else {\r\n              <mt-card\r\n                class=\"h-full relative\"\r\n                [class.opacity-50]=\"field._deleting\"\r\n              >\r\n                @if (field._deleting) {\r\n                  <div\r\n                    class=\"absolute inset-0 flex items-center justify-center bg-white/50 rounded-xl z-10\"\r\n                  >\r\n                    <div\r\n                      class=\"animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full\"\r\n                    ></div>\r\n                  </div>\r\n                }\r\n                <div class=\"flex gap-2\">\r\n                  <div class=\"flex-1\">\r\n                    <form [formGroup]=\"getFormGroup(field)\">\r\n                      <mt-dynamic-field\r\n                        [fieldName]=\"field.name\"\r\n                        [fieldConfig]=\"{\r\n                          label: field.name,\r\n                          readonly: true,\r\n                          type: getFieldType(field),\r\n                        }\"\r\n                      />\r\n                    </form>\r\n                  </div>\r\n                  <div class=\"flex flex-col gap-1\">\r\n                    <mt-button\r\n                      size=\"small\"\r\n                      icon=\"general.settings-01\"\r\n                      [tooltip]=\"t('edit-field')\"\r\n                      outlined\r\n                      [disabled]=\"field._deleting\"\r\n                      (onClick)=\"editField(field)\"\r\n                    ></mt-button>\r\n                    <mt-button\r\n                      size=\"small\"\r\n                      icon=\"general.trash-01\"\r\n                      severity=\"danger\"\r\n                      outlined\r\n                      [tooltip]=\"t('remove-field')\"\r\n                      [disabled]=\"field._deleting\"\r\n                      (onClick)=\"removeField($event, field)\"\r\n                    ></mt-button>\r\n                  </div>\r\n                </div>\r\n              </mt-card>\r\n            }\r\n          </div>\r\n        } @empty {\r\n          <mt-card class=\"absolute inset-0 top-4 h-full\" paddingless>\r\n            <div class=\"size-full p-4\">\r\n              <div\r\n                class=\"flex justify-center items-center gap-4 h-full border-2 border-primary rounded-xl bg-primary-200 text-primary\"\r\n              >\r\n                <mt-icon icon=\"editor.move\" class=\"text-3xl\" />\r\n                <span>{{ t(\"drag-from-the-side\") }}</span>\r\n              </div>\r\n            </div>\r\n          </mt-card>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DynamicField, selector: "mt-dynamic-field", inputs: ["fieldConfig", "fieldName"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FBSection, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-fb-section', standalone: true, imports: [
+                        Button,
+                        Card,
+                        Icon,
+                        CdkDrag,
+                        CdkDropList,
+                        CdkDragPlaceholder,
+                        TranslocoDirective,
+                        DynamicField,
+                        ReactiveFormsModule,
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div class=\"flex flex-col\">\r\n    <div\r\n      class=\"flex justify-between items-center bg-primary text-primary-contrast p-2 rounded-xl\"\r\n    >\r\n      <mt-button\r\n        size=\"small\"\r\n        icon=\"arrow.chevron-down\"\r\n        class=\"transition-[rotate]\"\r\n        [class.rotate-180]=\"expanded()\"\r\n        (onClick)=\"toggleExpanded()\"\r\n      ></mt-button>\r\n      <span class=\"font-bold\">\r\n        {{ sectionName() }}\r\n      </span>\r\n      <div class=\"flex gap-2\">\r\n        <mt-button\r\n          size=\"small\"\r\n          icon=\"general.edit-02\"\r\n          [tooltip]=\"t('edit-section')\"\r\n          (onClick)=\"editSection($event)\"\r\n        ></mt-button>\r\n      </div>\r\n    </div>\r\n    @if (expanded()) {\r\n      <div\r\n        cdkDropList\r\n        [id]=\"section().id\"\r\n        cdkDropListOrientation=\"mixed\"\r\n        [cdkDropListData]=\"fields()\"\r\n        (cdkDropListDropped)=\"onDrop($event)\"\r\n        class=\"grid grid-cols-12 gap-4 relative py-4\"\r\n        [class.min-h-27]=\"fields().length === 0\"\r\n      >\r\n        @for (field of fields(); track field.id) {\r\n          <div\r\n            cdkDrag\r\n            [cdkDragData]=\"field\"\r\n            [cdkDragDisabled]=\"field._pending || field._deleting\"\r\n            [class]=\"\r\n              getFieldColSpan(field) + ' cursor-grab active:cursor-grabbing'\r\n            \"\r\n          >\r\n            <div\r\n              *cdkDragPlaceholder\r\n              [class]=\"\r\n                'h-full min-h-27 bg-black/10 rounded-2xl ' +\r\n                getFieldColSpan(field)\r\n              \"\r\n            ></div>\r\n            @if (field._pending) {\r\n              <!-- Skeleton for pending field -->\r\n              <mt-card class=\"h-full animate-pulse\">\r\n                <div class=\"flex gap-2\">\r\n                  <div class=\"flex-1 space-y-3\">\r\n                    <div class=\"h-4 bg-surface-200 rounded w-1/3\"></div>\r\n                    <div class=\"h-10 bg-surface-200 rounded\"></div>\r\n                  </div>\r\n                  <div class=\"flex flex-col gap-1\">\r\n                    <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\r\n                    <div class=\"h-8 w-8 bg-surface-200 rounded\"></div>\r\n                  </div>\r\n                </div>\r\n              </mt-card>\r\n            } @else {\r\n              <mt-card\r\n                class=\"h-full relative\"\r\n                [class.opacity-50]=\"field._deleting\"\r\n              >\r\n                @if (field._deleting) {\r\n                  <div\r\n                    class=\"absolute inset-0 flex items-center justify-center bg-white/50 rounded-xl z-10\"\r\n                  >\r\n                    <div\r\n                      class=\"animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full\"\r\n                    ></div>\r\n                  </div>\r\n                }\r\n                <div class=\"flex gap-2\">\r\n                  <div class=\"flex-1\">\r\n                    <form [formGroup]=\"getFormGroup(field)\">\r\n                      <mt-dynamic-field\r\n                        [fieldName]=\"field.name\"\r\n                        [fieldConfig]=\"{\r\n                          label: field.name,\r\n                          readonly: true,\r\n                          type: getFieldType(field),\r\n                        }\"\r\n                      />\r\n                    </form>\r\n                  </div>\r\n                  <div class=\"flex flex-col gap-1\">\r\n                    <mt-button\r\n                      size=\"small\"\r\n                      icon=\"general.settings-01\"\r\n                      [tooltip]=\"t('edit-field')\"\r\n                      outlined\r\n                      [disabled]=\"field._deleting\"\r\n                      (onClick)=\"editField(field)\"\r\n                    ></mt-button>\r\n                    <mt-button\r\n                      size=\"small\"\r\n                      icon=\"general.trash-01\"\r\n                      severity=\"danger\"\r\n                      outlined\r\n                      [tooltip]=\"t('remove-field')\"\r\n                      [disabled]=\"field._deleting\"\r\n                      (onClick)=\"removeField($event, field)\"\r\n                    ></mt-button>\r\n                  </div>\r\n                </div>\r\n              </mt-card>\r\n            }\r\n          </div>\r\n        } @empty {\r\n          <mt-card class=\"absolute inset-0 top-4 h-full\" paddingless>\r\n            <div class=\"size-full p-4\">\r\n              <div\r\n                class=\"flex justify-center items-center gap-4 h-full border-2 border-primary rounded-xl bg-primary-200 text-primary\"\r\n              >\r\n                <mt-icon icon=\"editor.move\" class=\"text-3xl\" />\r\n                <span>{{ t(\"drag-from-the-side\") }}</span>\r\n              </div>\r\n            </div>\r\n          </mt-card>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: true }] }], sectionsCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionsCount", required: false }] }], allSections: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSections", required: false }] }], onFieldDrop: [{ type: i0.Output, args: ["onFieldDrop"] }] } });
+
+class FBPreviewForm {
+    modalService = inject(ModalService);
+    ref = inject(ModalRef);
+    transloco = inject(TranslocoService);
+    // Inputs
+    sections = input([], ...(ngDevMode ? [{ debugName: "sections" }] : []));
+    // Tab state
+    activeTab = signal('create', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    tabOptions = [
+        {
+            label: this.transloco.translate('formBuilder.create-form'),
+            value: 'create',
+        },
+        { label: this.transloco.translate('formBuilder.edit-form'), value: 'edit' },
+    ];
+    // Form control for dynamic form
+    formControl = new FormControl();
+    constructor() {
+        // Show skeleton briefly when tab changes to force rebuild
+        effect(() => {
+            this.activeTab(); // Track tab changes
+            this.isLoading.set(true);
+            setTimeout(() => this.isLoading.set(false), 50);
+        });
+    }
+    // Convert enriched sections to DynamicFormConfig based on active tab
+    formConfig = computed(() => {
+        const sections = this.sections();
+        const mode = this.activeTab();
+        return {
+            sections: sections
+                .map((section, sectionIndex) => {
+                const lang = document.documentElement.lang;
+                const sectionName = section.name[lang] ?? section.name['en'] ?? '';
+                // Filter fields based on mode
+                const visibleFields = section.fields.filter((field) => {
+                    if (mode === 'create') {
+                        return !field.hiddenInCreation;
+                    }
+                    else {
+                        return !field.hiddenInEditForm;
+                    }
+                });
+                return {
+                    key: section.id,
+                    label: sectionName,
+                    type: 'header',
+                    columns: 12,
+                    order: section.order ?? sectionIndex,
+                    fields: visibleFields.map((field, fieldIndex) => {
+                        const colSpan = this.getColSpan(field.width);
+                        return {
+                            key: `field_${field.propertyId}`,
+                            label: field.name,
+                            type: this.mapFieldType(field.type),
+                            colSpan,
+                            order: field.order ?? fieldIndex,
+                            placeholder: field.name,
+                        };
+                    }),
+                };
+            })
+                .filter((section) => section.fields.length > 0), // Hide empty sections
+        };
+    }, ...(ngDevMode ? [{ debugName: "formConfig" }] : []));
+    /**
+     * Map property view type to dynamic form field type
+     */
+    mapFieldType(viewType) {
+        const typeMap = {
+            User: 'select',
+            Text: 'text',
+            LongText: 'editor-field',
+            Percentage: 'slider',
+            Date: 'date',
+            Currency: 'text',
+            Number: 'number',
+            Lookup: 'select',
+            LookupMultiSelect: 'select',
+            Checkbox: 'toggle',
+            InternalModule: 'select',
+            DynamicList: 'select',
+            API: 'select',
+            Time: 'date',
+            Status: 'select',
+            Attachment: 'attachment',
+            EditableListView: 'actionableTable',
+            LookupLog: 'actionableTable',
+            LookupMatrix: 'select',
+            Location: 'select',
+        };
+        return typeMap[viewType] ?? 'text';
+    }
+    /**
+     * Convert field width to colSpan
+     */
+    getColSpan(width) {
+        const widthMap = {
+            '25': 3,
+            '50': 6,
+            '100': 12,
+        };
+        return widthMap[width] ?? 12;
+    }
+    onClose() {
+        this.ref.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FBPreviewForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FBPreviewForm, isStandalone: true, selector: "mt-fb-preview-form", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-hidden!']\">\r\n    <!-- Tabs for Create/Edit mode -->\r\n    <div class=\"flex justify-center mb-4\">\r\n      <mt-tabs [options]=\"tabOptions\" [(active)]=\"activeTab\"></mt-tabs>\r\n    </div>\r\n\r\n    <div class=\"h-full overflow-y-auto pb-10\">\r\n      @if (isLoading()) {\r\n        <div class=\"space-y-4 animate-pulse\">\r\n          <div class=\"h-6 bg-surface-200 rounded w-1/3\"></div>\r\n          <div class=\"h-10 bg-surface-200 rounded\"></div>\r\n          <div class=\"h-10 bg-surface-200 rounded\"></div>\r\n          <div class=\"h-10 bg-surface-200 rounded w-2/3\"></div>\r\n        </div>\r\n      } @else if (formConfig().sections.length > 0) {\r\n        <mt-dynamic-form\r\n          [formConfig]=\"formConfig()\"\r\n          [formControl]=\"formControl\"\r\n        >\r\n        </mt-dynamic-form>\r\n      } @else {\r\n        <div\r\n          class=\"flex justify-center items-center h-64 text-muted-color text-lg\"\r\n        >\r\n          {{ t(\"no-fields-visible\") }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "size", "fluid", "disabled"], outputs: ["activeChange", "onChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FBPreviewForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-fb-preview-form', standalone: true, imports: [TranslocoDirective, ReactiveFormsModule, DynamicForm, Tabs], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-hidden!']\">\r\n    <!-- Tabs for Create/Edit mode -->\r\n    <div class=\"flex justify-center mb-4\">\r\n      <mt-tabs [options]=\"tabOptions\" [(active)]=\"activeTab\"></mt-tabs>\r\n    </div>\r\n\r\n    <div class=\"h-full overflow-y-auto pb-10\">\r\n      @if (isLoading()) {\r\n        <div class=\"space-y-4 animate-pulse\">\r\n          <div class=\"h-6 bg-surface-200 rounded w-1/3\"></div>\r\n          <div class=\"h-10 bg-surface-200 rounded\"></div>\r\n          <div class=\"h-10 bg-surface-200 rounded\"></div>\r\n          <div class=\"h-10 bg-surface-200 rounded w-2/3\"></div>\r\n        </div>\r\n      } @else if (formConfig().sections.length > 0) {\r\n        <mt-dynamic-form\r\n          [formConfig]=\"formConfig()\"\r\n          [formControl]=\"formControl\"\r\n        >\r\n        </mt-dynamic-form>\r\n      } @else {\r\n        <div\r\n          class=\"flex justify-center items-center h-64 text-muted-color text-lg\"\r\n        >\r\n          {{ t(\"no-fields-visible\") }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }] } });
+
+class FormBuilder {
+    modalService = inject(ModalService);
+    confirmationService = inject(ConfirmationService);
+    translocoService = inject(TranslocoService);
+    facade = inject(FormBuilderFacade);
+    dialogRef;
+    // Local UI state
+    activeTab = signal('system', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    // State from facade
+    sections = this.facade.sections;
+    properties = this.facade.properties;
+    isLoading = this.facade.isLoadingFormConfiguration;
+    error = this.facade.formConfigurationError;
+    // Properties map for enrichment
+    propertiesMap = computed(() => {
+        const map = new Map();
+        for (const prop of this.properties()) {
+            map.set(prop.id, prop);
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "propertiesMap" }] : []));
+    // Enrich sections with property data for UI display
+    enrichedSections = computed(() => {
+        const sections = this.sections();
+        const propsMap = this.propertiesMap();
+        const lang = document.documentElement.lang;
+        return sections.map((section) => ({
+            ...section,
+            fields: section.fields.map((field) => {
+                const prop = propsMap.get(field.propertyId);
+                const propName = prop?.name;
+                const name = typeof propName === 'string'
+                    ? propName
+                    : (propName?.[lang] ??
+                        propName?.['en'] ??
+                        `Property ${field.propertyId}`);
+                return {
+                    ...field,
+                    name,
+                    type: prop?.viewType || 'text',
+                    data: prop,
+                };
+            }),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "enrichedSections" }] : []));
+    // Available properties for toolbox tabs
+    availableTabs = computed(() => {
+        const tabs = [];
+        const usedPropertyIds = new Set(this.sections().flatMap((s) => s.fields.map((f) => f.propertyId)));
+        const availableProps = this.properties().filter((p) => !usedPropertyIds.has(p.id));
+        const systemProps = availableProps.filter((p) => p['isSystem']);
+        const customProps = availableProps.filter((p) => !p['isSystem']);
+        if (systemProps.length > 0) {
+            tabs.push({ id: 'system', title: 'System', properties: systemProps });
+        }
+        if (customProps.length > 0) {
+            tabs.push({ id: 'custom', title: 'Custom', properties: customProps });
+        }
+        return tabs;
+    }, ...(ngDevMode ? [{ debugName: "availableTabs" }] : []));
+    constructor() {
+        // Update active tab when tabs change
+        effect(() => {
+            const tabs = this.availableTabs();
+            const currentTab = this.activeTab();
+            if (tabs.length > 0 && !tabs.some((t) => t.id === currentTab)) {
+                this.activeTab.set(tabs[0].id);
+            }
+        });
+    }
+    drop(event) {
+        const targetSectionId = event.container.id;
+        if (event.previousContainer === event.container) {
+            // Reordering within the same section
+            const fields = [...event.container.data];
+            const [movedField] = fields.splice(event.previousIndex, 1);
+            fields.splice(event.currentIndex, 0, movedField);
+            // Build bulk reorder payload with new order values
+            const reorderPayload = fields.map((field, index) => ({
+                id: field.id,
+                order: index,
+            }));
+            this.facade.reorderFields(targetSectionId, reorderPayload);
+        }
+        else if (event.previousContainer.id.startsWith('toolbox-')) {
+            // Adding from toolbox
+            const propertyItem = event.item.data;
+            this.facade.addField(targetSectionId, {
+                propertyId: propertyItem.id,
+                width: '100',
+                order: event.currentIndex,
+                hiddenInCreation: false,
+            });
+        }
+        else {
+            // Moving between sections
+            const sourceSectionId = event.previousContainer.id;
+            const field = event.item.data;
+            this.facade.moveField(sourceSectionId, field.id, {
+                targetSectionId,
+                order: event.currentIndex,
+            });
+        }
+    }
+    addSection() {
+        this.dialogRef = this.modalService.openModal(FBSectionForm, 'drawer', {
+            header: this.translocoService.translate('formBuilder.add-section'),
+            height: '20vw',
+            styleClass: '!w-100 !absolute  ',
+            position: 'end',
+            appendTo: '#page-content',
+            modal: true,
+            dismissible: true,
+            inputValues: {
+                sectionsCount: this.sections().length,
+            },
+        });
+    }
+    openPreview() {
+        this.dialogRef = this.modalService.openModal(FBPreviewForm, 'drawer', {
+            header: this.translocoService.translate('formBuilder.preview'),
+            styleClass: '!w-[80vw]   ',
+            position: 'end',
+            modal: true,
+            dismissible: true,
+            inputValues: {
+                sections: this.enrichedSections(),
+            },
+        });
+    }
+    resetFormConfiguration() {
+        this.confirmationService.confirm({
+            type: 'dialog',
+            acceptButtonStyleClass: 'p-button-danger',
+            accept: () => {
+                this.facade.resetFormConfiguration();
+            },
+        });
+    }
+    noReturnPredicate = () => false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormBuilder, isStandalone: true, selector: "mt-form-builder", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div class=\"flex gap-4 h-full w-full overflow-hidden\" cdkDropListGroup>\r\n    <!-- Properties Sidebar -->\r\n    <mt-card\r\n      class=\"z-1 w-1/5 min-w-xs shrink-0 h-full flex flex-col overflow-hidden\"\r\n    >\r\n      <ng-template #headless>\r\n        <!-- Header -->\r\n        <div class=\"flex items-center justify-between px-4 pt-5\">\r\n          <h3 class=\"text-xl font-semibold\">{{ t(\"form-elements\") }}</h3>\r\n        </div>\r\n\r\n        @if (properties().length === 0) {\r\n          @if (isLoading()) {\r\n            <!-- Properties Loading Skeleton -->\r\n            <div class=\"p-4 space-y-3\">\r\n              <p-skeleton height=\"2rem\" styleClass=\"mb-4\" />\r\n              @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n                <p-skeleton height=\"3rem\" styleClass=\"rounded-lg\" />\r\n              }\r\n            </div>\r\n          } @else {\r\n            <!-- No Properties State -->\r\n            <div class=\"flex-1 flex items-center justify-center p-4\">\r\n              <div class=\"text-center text-muted-color\">\r\n                <p class=\"text-sm\">{{ t(\"no-properties\") }}</p>\r\n              </div>\r\n            </div>\r\n          }\r\n        } @else {\r\n          <!-- Tabs using PrimeNG -->\r\n          <p-tabs\r\n            [(value)]=\"activeTab\"\r\n            styleClass=\"structure-tabs\"\r\n            class=\"flex flex-1 flex-col min-h-0\"\r\n          >\r\n            <p-tablist class=\"shrink-0\">\r\n              @for (tab of availableTabs(); track tab.id) {\r\n                <p-tab [value]=\"tab.id\">{{ tab.title | titlecase }}</p-tab>\r\n              }\r\n            </p-tablist>\r\n            <p-tabpanels class=\"!bg-transparent !p-0 flex-1 overflow-hidden\">\r\n              @for (tab of availableTabs(); track tab.id) {\r\n                <p-tabpanel [value]=\"tab.id\" class=\"h-full\">\r\n                  <!-- Node List -->\r\n                  <div\r\n                    class=\"space-y-1 p-4 [&_.cdk-drag-placeholder]:hidden h-full overflow-y-auto\"\r\n                    [id]=\"'toolbox-' + tab.id\"\r\n                    cdkDropList\r\n                    cdkDropListSortingDisabled\r\n                    [cdkDropListData]=\"tab.properties\"\r\n                    [cdkDropListEnterPredicate]=\"noReturnPredicate\"\r\n                  >\r\n                    @for (node of tab.properties; track $index) {\r\n                      <div\r\n                        cdkDrag\r\n                        [cdkDragData]=\"node\"\r\n                        class=\"group cursor-move select-none relative flex items-center gap-3 py-3 px-4 rounded-lg border border-dashed border-surface-300 hover:border-solid hover:bg-emphasis dark:border-surface-500 transition-colors\"\r\n                      >\r\n                        <div\r\n                          *cdkDragPlaceholder\r\n                          class=\"col-span-12 min-h-27 w-full rounded-2xl bg-black/10 z-1\"\r\n                        ></div>\r\n                        <span class=\"flex-1 text-base font-medium\">{{\r\n                          node.name\r\n                        }}</span>\r\n                      </div>\r\n                    }\r\n\r\n                    @if (tab.properties.length === 0) {\r\n                      <div class=\"py-8 text-center text-muted-color\">\r\n                        <p class=\"text-sm\">\r\n                          All {{ tab.title }} items are in use\r\n                        </p>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </p-tabpanel>\r\n              }\r\n            </p-tabpanels>\r\n          </p-tabs>\r\n        }\r\n      </ng-template>\r\n    </mt-card>\r\n\r\n    <!-- Main Canvas Area -->\r\n    <div class=\"flex flex-col gap-4 flex-1 w-full h-full overflow-y-auto\">\r\n      <mt-card>\r\n        <ng-template #headless>\r\n          <div class=\"p-4 flex items-center gap-2\">\r\n            <mt-button\r\n              icon=\"layout.layout-top\"\r\n              [label]=\"t('add-section')\"\r\n              (onClick)=\"addSection()\"\r\n              [disabled]=\"isLoading()\"\r\n            ></mt-button>\r\n            <mt-button\r\n              icon=\"general.eye\"\r\n              [label]=\"t('preview')\"\r\n              (onClick)=\"openPreview()\"\r\n              [disabled]=\"isLoading()\"\r\n            ></mt-button>\r\n            <mt-button\r\n              icon=\"finance.credit-card-plus\"\r\n              [label]=\"t('reset')\"\r\n              (onClick)=\"resetFormConfiguration()\"\r\n              [disabled]=\"isLoading()\"\r\n            ></mt-button>\r\n          </div>\r\n        </ng-template>\r\n      </mt-card>\r\n\r\n      @if (isLoading()) {\r\n        <!-- Form Loading Skeleton -->\r\n        @for (i of [1, 2]; track i) {\r\n          <mt-card>\r\n            <ng-template #headless>\r\n              <div class=\"p-4 space-y-4\">\r\n                <!-- Section header skeleton -->\r\n                <div class=\"flex items-center justify-between\">\r\n                  <p-skeleton width=\"10rem\" height=\"1.5rem\" />\r\n                  <div class=\"flex gap-2\">\r\n                    <p-skeleton width=\"2rem\" height=\"2rem\" shape=\"circle\" />\r\n                    <p-skeleton width=\"2rem\" height=\"2rem\" shape=\"circle\" />\r\n                  </div>\r\n                </div>\r\n                <!-- Fields skeleton -->\r\n                <div class=\"grid grid-cols-12 gap-4\">\r\n                  <div class=\"col-span-6\">\r\n                    <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\r\n                  </div>\r\n                  <div class=\"col-span-6\">\r\n                    <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\r\n                  </div>\r\n                  <div class=\"col-span-12\">\r\n                    <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-template>\r\n          </mt-card>\r\n        }\r\n      } @else {\r\n        @for (section of enrichedSections(); track section.id) {\r\n          <mt-fb-section\r\n            [section]=\"section\"\r\n            [sectionsCount]=\"enrichedSections().length\"\r\n            [allSections]=\"enrichedSections()\"\r\n            (onFieldDrop)=\"drop($event)\"\r\n          >\r\n          </mt-fb-section>\r\n        } @empty {\r\n          <mt-card>\r\n            <div class=\"h-27 p-4\">\r\n              <div\r\n                class=\"flex justify-center items-center gap-4 h-full border-2 border-primary rounded-xl bg-primary-200 text-primary\"\r\n              >\r\n                <span>{{ t(\"no-section\") }}</span>\r\n              </div>\r\n            </div>\r\n          </mt-card>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [".cdk-drag{cursor:grab}.cdk-drag:active,.cdk-drag-preview{cursor:grabbing}.cdk-drag-placeholder{opacity:.5}.cdk-drop-list-dragging .cdk-drag{cursor:grabbing}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i1$1.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i1$1.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i1$1.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i1$1.TabList, selector: "p-tablist" }, { kind: "component", type: i1$1.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: FBSection, selector: "mt-fb-section", inputs: ["section", "sectionsCount", "allSections"], outputs: ["onFieldDrop"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormBuilder, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-form-builder', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        TabsModule,
+                        SkeletonModule,
+                        Button,
+                        Card,
+                        TranslocoDirective,
+                        FBSection,
+                        DragDropModule,
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div class=\"flex gap-4 h-full w-full overflow-hidden\" cdkDropListGroup>\r\n    <!-- Properties Sidebar -->\r\n    <mt-card\r\n      class=\"z-1 w-1/5 min-w-xs shrink-0 h-full flex flex-col overflow-hidden\"\r\n    >\r\n      <ng-template #headless>\r\n        <!-- Header -->\r\n        <div class=\"flex items-center justify-between px-4 pt-5\">\r\n          <h3 class=\"text-xl font-semibold\">{{ t(\"form-elements\") }}</h3>\r\n        </div>\r\n\r\n        @if (properties().length === 0) {\r\n          @if (isLoading()) {\r\n            <!-- Properties Loading Skeleton -->\r\n            <div class=\"p-4 space-y-3\">\r\n              <p-skeleton height=\"2rem\" styleClass=\"mb-4\" />\r\n              @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n                <p-skeleton height=\"3rem\" styleClass=\"rounded-lg\" />\r\n              }\r\n            </div>\r\n          } @else {\r\n            <!-- No Properties State -->\r\n            <div class=\"flex-1 flex items-center justify-center p-4\">\r\n              <div class=\"text-center text-muted-color\">\r\n                <p class=\"text-sm\">{{ t(\"no-properties\") }}</p>\r\n              </div>\r\n            </div>\r\n          }\r\n        } @else {\r\n          <!-- Tabs using PrimeNG -->\r\n          <p-tabs\r\n            [(value)]=\"activeTab\"\r\n            styleClass=\"structure-tabs\"\r\n            class=\"flex flex-1 flex-col min-h-0\"\r\n          >\r\n            <p-tablist class=\"shrink-0\">\r\n              @for (tab of availableTabs(); track tab.id) {\r\n                <p-tab [value]=\"tab.id\">{{ tab.title | titlecase }}</p-tab>\r\n              }\r\n            </p-tablist>\r\n            <p-tabpanels class=\"!bg-transparent !p-0 flex-1 overflow-hidden\">\r\n              @for (tab of availableTabs(); track tab.id) {\r\n                <p-tabpanel [value]=\"tab.id\" class=\"h-full\">\r\n                  <!-- Node List -->\r\n                  <div\r\n                    class=\"space-y-1 p-4 [&_.cdk-drag-placeholder]:hidden h-full overflow-y-auto\"\r\n                    [id]=\"'toolbox-' + tab.id\"\r\n                    cdkDropList\r\n                    cdkDropListSortingDisabled\r\n                    [cdkDropListData]=\"tab.properties\"\r\n                    [cdkDropListEnterPredicate]=\"noReturnPredicate\"\r\n                  >\r\n                    @for (node of tab.properties; track $index) {\r\n                      <div\r\n                        cdkDrag\r\n                        [cdkDragData]=\"node\"\r\n                        class=\"group cursor-move select-none relative flex items-center gap-3 py-3 px-4 rounded-lg border border-dashed border-surface-300 hover:border-solid hover:bg-emphasis dark:border-surface-500 transition-colors\"\r\n                      >\r\n                        <div\r\n                          *cdkDragPlaceholder\r\n                          class=\"col-span-12 min-h-27 w-full rounded-2xl bg-black/10 z-1\"\r\n                        ></div>\r\n                        <span class=\"flex-1 text-base font-medium\">{{\r\n                          node.name\r\n                        }}</span>\r\n                      </div>\r\n                    }\r\n\r\n                    @if (tab.properties.length === 0) {\r\n                      <div class=\"py-8 text-center text-muted-color\">\r\n                        <p class=\"text-sm\">\r\n                          All {{ tab.title }} items are in use\r\n                        </p>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </p-tabpanel>\r\n              }\r\n            </p-tabpanels>\r\n          </p-tabs>\r\n        }\r\n      </ng-template>\r\n    </mt-card>\r\n\r\n    <!-- Main Canvas Area -->\r\n    <div class=\"flex flex-col gap-4 flex-1 w-full h-full overflow-y-auto\">\r\n      <mt-card>\r\n        <ng-template #headless>\r\n          <div class=\"p-4 flex items-center gap-2\">\r\n            <mt-button\r\n              icon=\"layout.layout-top\"\r\n              [label]=\"t('add-section')\"\r\n              (onClick)=\"addSection()\"\r\n              [disabled]=\"isLoading()\"\r\n            ></mt-button>\r\n            <mt-button\r\n              icon=\"general.eye\"\r\n              [label]=\"t('preview')\"\r\n              (onClick)=\"openPreview()\"\r\n              [disabled]=\"isLoading()\"\r\n            ></mt-button>\r\n            <mt-button\r\n              icon=\"finance.credit-card-plus\"\r\n              [label]=\"t('reset')\"\r\n              (onClick)=\"resetFormConfiguration()\"\r\n              [disabled]=\"isLoading()\"\r\n            ></mt-button>\r\n          </div>\r\n        </ng-template>\r\n      </mt-card>\r\n\r\n      @if (isLoading()) {\r\n        <!-- Form Loading Skeleton -->\r\n        @for (i of [1, 2]; track i) {\r\n          <mt-card>\r\n            <ng-template #headless>\r\n              <div class=\"p-4 space-y-4\">\r\n                <!-- Section header skeleton -->\r\n                <div class=\"flex items-center justify-between\">\r\n                  <p-skeleton width=\"10rem\" height=\"1.5rem\" />\r\n                  <div class=\"flex gap-2\">\r\n                    <p-skeleton width=\"2rem\" height=\"2rem\" shape=\"circle\" />\r\n                    <p-skeleton width=\"2rem\" height=\"2rem\" shape=\"circle\" />\r\n                  </div>\r\n                </div>\r\n                <!-- Fields skeleton -->\r\n                <div class=\"grid grid-cols-12 gap-4\">\r\n                  <div class=\"col-span-6\">\r\n                    <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\r\n                  </div>\r\n                  <div class=\"col-span-6\">\r\n                    <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\r\n                  </div>\r\n                  <div class=\"col-span-12\">\r\n                    <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-template>\r\n          </mt-card>\r\n        }\r\n      } @else {\r\n        @for (section of enrichedSections(); track section.id) {\r\n          <mt-fb-section\r\n            [section]=\"section\"\r\n            [sectionsCount]=\"enrichedSections().length\"\r\n            [allSections]=\"enrichedSections()\"\r\n            (onFieldDrop)=\"drop($event)\"\r\n          >\r\n          </mt-fb-section>\r\n        } @empty {\r\n          <mt-card>\r\n            <div class=\"h-27 p-4\">\r\n              <div\r\n                class=\"flex justify-center items-center gap-4 h-full border-2 border-primary rounded-xl bg-primary-200 text-primary\"\r\n              >\r\n                <span>{{ t(\"no-section\") }}</span>\r\n              </div>\r\n            </div>\r\n          </mt-card>\r\n        }\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [".cdk-drag{cursor:grab}.cdk-drag:active,.cdk-drag-preview{cursor:grabbing}.cdk-drag-placeholder{opacity:.5}.cdk-drop-list-dragging .cdk-drag{cursor:grabbing}\n"] }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Public API Surface of form-builder
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AddField, AddSection, DeleteField, DeleteSection, FormBuilder, FormBuilderActionKey, FormBuilderFacade, FormBuilderState, GetFormConfiguration, MoveField, ReorderFields, ResetFormBuilderState, ResetFormConfiguration, SetModuleInfo, SetProperties, UpdateField, UpdateSection };
+//# sourceMappingURL=masterteam-form-builder.mjs.map