@masterteam/form-builder 0.0.6 → 0.0.8

package/fesm2022/masterteam-form-builder.mjs

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, computed, input, signal, viewChild, Component, effect, output } from '@angular/core';
-import * as i5 from '@angular/common';
+import { inject, Injectable, computed, input, signal, viewChild, Component, effect, output, DestroyRef, viewChildren } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormGroup, FormsModule } from '@angular/forms';
@@ -8,13 +7,16 @@ import * as i2 from 'primeng/tabs';
 import { TabsModule } from 'primeng/tabs';
 import * as i3 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
+import * as i4 from 'primeng/popover';
+import { Popover, PopoverModule } from 'primeng/popover';
 import { Button } from '@masterteam/components/button';
 import { Card } from '@masterteam/components/card';
 import { TextField } from '@masterteam/components/text-field';
+import { SelectField } from '@masterteam/components/select-field';
 import { ModalService } from '@masterteam/components/modal';
 import { ConfirmationService } from '@masterteam/components/confirmation';
 import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
-import * as i4 from '@angular/cdk/drag-drop';
+import * as i5 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';
@@ -24,9 +26,13 @@ import { CrudStateBase, handleApiRequest, RadioCardsFieldConfig } from '@mastert
 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 { FormulaToolbar, FormulaEditor, serializeTokens } from '@masterteam/components/formula';
 import { Tooltip } from '@masterteam/components/tooltip';
 import { Tabs } from '@masterteam/components/tabs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Table } from '@masterteam/components/table';
+import { RadioCards } from '@masterteam/components/radio-cards';
+import { of, map, catchError } from 'rxjs';
 
 // ============================================================================
 // Module Configuration Actions
@@ -143,6 +149,41 @@ class MoveField {
         this.payload = payload;
     }
 }
+// ============================================================================
+// Validation Actions
+// ============================================================================
+class AddValidation {
+    payload;
+    static type = '[FormBuilder] Add Validation';
+    constructor(payload) {
+        this.payload = payload;
+    }
+}
+class UpdateValidation {
+    validationId;
+    payload;
+    static type = '[FormBuilder] Update Validation';
+    constructor(validationId, payload) {
+        this.validationId = validationId;
+        this.payload = payload;
+    }
+}
+class DeleteValidation {
+    validationId;
+    static type = '[FormBuilder] Delete Validation';
+    constructor(validationId) {
+        this.validationId = validationId;
+    }
+}
+class ToggleValidationActive {
+    validationId;
+    payload;
+    static type = '[FormBuilder] Toggle Validation Active';
+    constructor(validationId, payload) {
+        this.validationId = validationId;
+        this.payload = payload;
+    }
+}
 
 // ============================================================================
 // Action Keys Enum
@@ -162,6 +203,11 @@ var FormBuilderActionKey;
     FormBuilderActionKey["DeleteField"] = "deleteField";
     FormBuilderActionKey["MoveField"] = "moveField";
     FormBuilderActionKey["ReorderFields"] = "reorderFields";
+    // Validation Rules
+    FormBuilderActionKey["AddValidation"] = "addValidation";
+    FormBuilderActionKey["UpdateValidation"] = "updateValidation";
+    FormBuilderActionKey["DeleteValidation"] = "deleteValidation";
+    FormBuilderActionKey["ToggleValidationActive"] = "toggleValidationActive";
 })(FormBuilderActionKey || (FormBuilderActionKey = {}));
 
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -214,9 +260,21 @@ let FormBuilderState = class FormBuilderState extends CrudStateBase {
     static getModuleId(state) {
         return state?.moduleId ?? null;
     }
+    static getParentModuleType(state) {
+        return state?.parentModuleType ?? null;
+    }
+    static getParentModuleId(state) {
+        return state?.parentModuleId ?? null;
+    }
+    static getParentPath(state) {
+        return state?.parentPath ?? '';
+    }
     static getProperties(state) {
         return state?.properties ?? [];
     }
+    static getValidations(state) {
+        return state?.formConfiguration?.validations ?? [];
+    }
     // ============================================================================
     // Module Configuration Actions
     // ============================================================================
@@ -255,7 +313,9 @@ let FormBuilderState = class FormBuilderState extends CrudStateBase {
             key: FormBuilderActionKey.GetFormConfiguration,
             request$: req$,
             updateState: (_state, data) => ({
-                formConfiguration: data ?? null,
+                formConfiguration: data
+                    ? { ...data, validations: data.validations ?? [] }
+                    : null,
             }),
         });
     }
@@ -268,7 +328,9 @@ let FormBuilderState = class FormBuilderState extends CrudStateBase {
             key: FormBuilderActionKey.ResetFormConfiguration,
             request$: req$,
             onSuccess: (res, _currentState) => ({
-                formConfiguration: res.data ?? null,
+                formConfiguration: res.data
+                    ? { ...res.data, validations: res.data.validations ?? [] }
+                    : null,
             }),
         });
     }
@@ -344,7 +406,7 @@ let FormBuilderState = class FormBuilderState extends CrudStateBase {
         const tempField = {
             id: tempId,
             sectionId: action.sectionId,
-            propertyId: action.payload.propertyId,
+            propertyKey: action.payload.propertyKey,
             width: action.payload.width,
             order: action.payload.order ?? 0,
             hiddenInCreation: action.payload.hiddenInCreation,
@@ -661,6 +723,88 @@ let FormBuilderState = class FormBuilderState extends CrudStateBase {
             },
         });
     }
+    // ============================================================================
+    // Validation Actions
+    // ============================================================================
+    addValidation(ctx, action) {
+        const state = ctx.getState();
+        const apiPath = `${this.getApiPath(state)}/validations`;
+        const req$ = this.http.post(apiPath, action.payload);
+        return handleApiRequest({
+            ctx,
+            key: FormBuilderActionKey.AddValidation,
+            request$: req$,
+            onSuccess: (res, currentState) => {
+                const validations = [
+                    ...(currentState.formConfiguration?.validations ?? []),
+                    res.data,
+                ];
+                return {
+                    formConfiguration: {
+                        ...currentState.formConfiguration,
+                        validations,
+                    },
+                };
+            },
+        });
+    }
+    updateValidation(ctx, action) {
+        const state = ctx.getState();
+        const apiPath = `${this.getApiPath(state)}/validations/${action.validationId}`;
+        const req$ = this.http.put(apiPath, action.payload);
+        return handleApiRequest({
+            ctx,
+            key: FormBuilderActionKey.UpdateValidation,
+            request$: req$,
+            onSuccess: (res, currentState) => {
+                const validations = (currentState.formConfiguration?.validations ?? []).map((rule) => (rule.id === res.data.id ? res.data : rule));
+                return {
+                    formConfiguration: {
+                        ...currentState.formConfiguration,
+                        validations,
+                    },
+                };
+            },
+        });
+    }
+    deleteValidation(ctx, action) {
+        const state = ctx.getState();
+        const apiPath = `${this.getApiPath(state)}/validations/${action.validationId}`;
+        const req$ = this.http.delete(apiPath);
+        return handleApiRequest({
+            ctx,
+            key: FormBuilderActionKey.DeleteValidation,
+            request$: req$,
+            onSuccess: (res, currentState) => {
+                const validations = (currentState.formConfiguration?.validations ?? []).filter((rule) => rule.id !== res.data.id);
+                return {
+                    formConfiguration: {
+                        ...currentState.formConfiguration,
+                        validations,
+                    },
+                };
+            },
+        });
+    }
+    toggleValidationActive(ctx, action) {
+        const state = ctx.getState();
+        const apiPath = `${this.getApiPath(state)}/validations/${action.validationId}/active`;
+        const req$ = this.http.patch(apiPath, action.payload);
+        return handleApiRequest({
+            ctx,
+            key: FormBuilderActionKey.ToggleValidationActive,
+            request$: req$,
+            onSuccess: (res, currentState) => {
+                const validations = (currentState.formConfiguration?.validations ?? []).map((rule) => (rule.id === res.data.id ? res.data : rule));
+                return {
+                    formConfiguration: {
+                        ...currentState.formConfiguration,
+                        validations,
+                    },
+                };
+            },
+        });
+    }
     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 });
 };
@@ -703,6 +847,18 @@ __decorate([
 __decorate([
     Action(MoveField)
 ], FormBuilderState.prototype, "moveField", null);
+__decorate([
+    Action(AddValidation)
+], FormBuilderState.prototype, "addValidation", null);
+__decorate([
+    Action(UpdateValidation)
+], FormBuilderState.prototype, "updateValidation", null);
+__decorate([
+    Action(DeleteValidation)
+], FormBuilderState.prototype, "deleteValidation", null);
+__decorate([
+    Action(ToggleValidationActive)
+], FormBuilderState.prototype, "toggleValidationActive", null);
 __decorate([
     Selector()
 ], FormBuilderState, "getState", null);
@@ -718,9 +874,21 @@ __decorate([
 __decorate([
     Selector()
 ], FormBuilderState, "getModuleId", null);
+__decorate([
+    Selector()
+], FormBuilderState, "getParentModuleType", null);
+__decorate([
+    Selector()
+], FormBuilderState, "getParentModuleId", null);
+__decorate([
+    Selector()
+], FormBuilderState, "getParentPath", null);
 __decorate([
     Selector()
 ], FormBuilderState, "getProperties", null);
+__decorate([
+    Selector()
+], FormBuilderState, "getValidations", null);
 FormBuilderState = __decorate([
     State({
         name: 'formBuilder',
@@ -729,7 +897,7 @@ FormBuilderState = __decorate([
 ], 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: [] } });
+        }], propDecorators: { setModuleInfo: [], resetState: [], setProperties: [], getFormConfiguration: [], resetFormConfiguration: [], addSection: [], updateSection: [], deleteSection: [], addField: [], updateField: [], deleteField: [], reorderFields: [], moveField: [], addValidation: [], updateValidation: [], deleteValidation: [], toggleValidationActive: [] } });
 
 class FormBuilderFacade {
     store = inject(Store);
@@ -740,8 +908,12 @@ class FormBuilderFacade {
     formConfiguration = select(FormBuilderState.getFormConfiguration);
     sections = select(FormBuilderState.getSections);
     properties = select(FormBuilderState.getProperties);
+    validations = select(FormBuilderState.getValidations);
     moduleType = select(FormBuilderState.getModuleType);
     moduleId = select(FormBuilderState.getModuleId);
+    parentModuleType = select(FormBuilderState.getParentModuleType);
+    parentModuleId = select(FormBuilderState.getParentModuleId);
+    parentPath = select(FormBuilderState.getParentPath);
     // ============================================================================
     // Loading Signals
     // ============================================================================
@@ -754,6 +926,10 @@ class FormBuilderFacade {
     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" }] : []));
+    isAddingValidation = computed(() => this.stateSignal().loadingActive.includes(FormBuilderActionKey.AddValidation), ...(ngDevMode ? [{ debugName: "isAddingValidation" }] : []));
+    isUpdatingValidation = computed(() => this.stateSignal().loadingActive.includes(FormBuilderActionKey.UpdateValidation), ...(ngDevMode ? [{ debugName: "isUpdatingValidation" }] : []));
+    isDeletingValidation = computed(() => this.stateSignal().loadingActive.includes(FormBuilderActionKey.DeleteValidation), ...(ngDevMode ? [{ debugName: "isDeletingValidation" }] : []));
+    isTogglingValidation = computed(() => this.stateSignal().loadingActive.includes(FormBuilderActionKey.ToggleValidationActive), ...(ngDevMode ? [{ debugName: "isTogglingValidation" }] : []));
     // ============================================================================
     // Error Signals
     // ============================================================================
@@ -774,6 +950,14 @@ class FormBuilderFacade {
             errors[FormBuilderActionKey.MoveField] ??
             null);
     }, ...(ngDevMode ? [{ debugName: "fieldError" }] : []));
+    validationError = computed(() => {
+        const errors = this.stateSignal().errors;
+        return (errors[FormBuilderActionKey.AddValidation] ??
+            errors[FormBuilderActionKey.UpdateValidation] ??
+            errors[FormBuilderActionKey.DeleteValidation] ??
+            errors[FormBuilderActionKey.ToggleValidationActive] ??
+            null);
+    }, ...(ngDevMode ? [{ debugName: "validationError" }] : []));
     // ============================================================================
     // Module Configuration Dispatchers
     // ============================================================================
@@ -825,6 +1009,21 @@ class FormBuilderFacade {
     moveField(sectionId, fieldId, payload) {
         return this.store.dispatch(new MoveField(sectionId, fieldId, payload));
     }
+    // ============================================================================
+    // Validation Dispatchers
+    // ============================================================================
+    addValidation(payload) {
+        return this.store.dispatch(new AddValidation(payload));
+    }
+    updateValidation(validationId, payload) {
+        return this.store.dispatch(new UpdateValidation(validationId, payload));
+    }
+    deleteValidation(validationId) {
+        return this.store.dispatch(new DeleteValidation(validationId));
+    }
+    toggleValidationActive(validationId, payload) {
+        return this.store.dispatch(new ToggleValidationActive(validationId, 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' });
 }
@@ -1150,7 +1349,7 @@ class FBFieldConditions {
         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"] }] });
+    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", "propertiesTemplate", "functionCategories", "operators", "initialTab", "searchPlaceholder", "labels"], outputs: ["onBlockInsert", "onTabChange"] }, { kind: "component", type: FormulaEditor, selector: "mt-formula-editor", inputs: ["placeholder", "initialTokens", "disabled", "borderless"], outputs: ["formulaChange", "tokensChange", "onBlur", "onFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FBFieldConditions, decorators: [{
             type: Component,
@@ -1193,7 +1392,7 @@ class FBFieldForm {
                 if (currentField && field.id === currentField.id)
                     continue;
                 fields.push({
-                    key: field.name,
+                    key: field.propertyKey,
                     name: field.name,
                     type: field.type,
                 });
@@ -1678,7 +1877,7 @@ class FBPreviewForm {
                     fields: visibleFields.map((field, fieldIndex) => {
                         const colSpan = this.getColSpan(field.width);
                         return {
-                            key: `field_${field.propertyId}`,
+                            key: `field_${field.propertyKey}`,
                             label: field.name,
                             type: this.mapFieldType(field.type),
                             colSpan,
@@ -1741,180 +1940,1247 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
             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 px-3 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" }] : []));
-    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
-    // 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" }] : []));
-    // Filtered properties based on search query
-    filteredPropertiesByTab = computed(() => {
-        const query = this.searchQuery().toLowerCase().trim();
-        const tabs = this.availableTabs();
-        if (!query) {
-            return tabs;
-        }
-        return tabs.map((tab) => ({
-            ...tab,
-            properties: tab.properties.filter((prop) => {
-                const name = prop.name;
-                return name.toLowerCase().includes(query);
-            }),
-        }));
-    }, ...(ngDevMode ? [{ debugName: "filteredPropertiesByTab" }] : []));
-    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-[27%] !absolute !shadow-none  ',
-            position: 'end',
-            appendTo: '#page-content',
-            dismissible: true,
-            inputValues: {
-                sectionsCount: this.sections().length,
+/**
+ * Validation Formula Constants
+ * Functions and operators for validation formulas
+ */
+const VALIDATION_FUNCTION_CATEGORIES = [
+    {
+        name: 'Validation',
+        displayName: 'Validation',
+        functions: [
+            {
+                name: 'REQUIRED',
+                category: 'Validation',
+                description: 'Returns true when value is not empty',
+                signature: 'REQUIRED(value)',
+                parameters: [
+                    {
+                        name: 'value',
+                        type: 'any',
+                        description: 'Value to check',
+                        required: true,
+                    },
+                ],
+                returnType: 'boolean',
+                examples: ['REQUIRED(@Email)'],
             },
-        });
-    }
-    openPreview() {
-        this.dialogRef = this.modalService.openModal(FBPreviewForm, 'drawer', {
-            header: this.translocoService.translate('formBuilder.preview'),
-            styleClass: '!w-[79%] !absolute !shadow-none  ',
-            position: 'end',
-            appendTo: 'page-content',
-            dismissible: true,
-            inputValues: {
-                sections: this.enrichedSections(),
+            {
+                name: 'ISNULL',
+                category: 'Validation',
+                description: 'Returns true if value is null or empty',
+                signature: 'ISNULL(value)',
+                parameters: [
+                    {
+                        name: 'value',
+                        type: 'any',
+                        description: 'Value to check',
+                        required: true,
+                    },
+                ],
+                returnType: 'boolean',
+                examples: ['ISNULL(@Phone)'],
             },
-        });
-    }
-    resetFormConfiguration() {
-        this.confirmationService.confirm({
-            type: 'dialog',
-            acceptButtonStyleClass: 'p-button-danger',
-            accept: () => {
-                this.facade.resetFormConfiguration();
+            {
+                name: 'MIN_LENGTH',
+                category: 'Validation',
+                description: 'Returns true if value length is at least min',
+                signature: 'MIN_LENGTH(value, min)',
+                parameters: [
+                    {
+                        name: 'value',
+                        type: 'string',
+                        description: 'Value to check',
+                        required: true,
+                    },
+                    {
+                        name: 'min',
+                        type: 'number',
+                        description: 'Minimum length',
+                        required: true,
+                    },
+                ],
+                returnType: 'boolean',
+                examples: ['MIN_LENGTH(@Password, 8)'],
             },
-        });
-    }
-    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-7 h-full w-full overflow-hidden\" cdkDropListGroup>\r\n    <!-- Properties Sidebar -->\r\n    <mt-card class=\"w-1/5 h-full flex flex-col overflow-hidden\">\r\n      <ng-template #headless>\r\n        <!-- Header -->\r\n        <h3 class=\"text-xl font-semibold px-4 pt-5\">\r\n          {{ t(\"form-elements\") }}\r\n        </h3>\r\n\r\n        @if (properties().length === 0) {\r\n          @if (isLoading()) {\r\n            <!-- Properties Loading Skeleton -->\r\n            <div class=\"flex gap-4 py-3 px-5 mt-4\">\r\n              <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\r\n              <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\r\n            </div>\r\n            <div class=\"py-4 px-5 space-y-5\">\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              <p class=\"text-sm font-semibold text-gray-500\">\r\n                {{ t(\"no-data-found\") }}\r\n              </p>\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\r\n              class=\"!bg-transparent !p-0 !pb-3 flex-1 overflow-hidden\"\r\n            >\r\n              @for (tab of filteredPropertiesByTab(); track tab.id) {\r\n                <p-tabpanel [value]=\"tab.id\" class=\"h-full flex flex-col\">\r\n                  <!-- Node List -->\r\n                  <div\r\n                    class=\"space-y-4 px-4 pb-4 [&_.cdk-drag-placeholder]:hidden flex-1 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                    <!-- Search Field (Sticky) -->\r\n                    <div class=\"sticky top-0 bg-surface-0 mb-0 py-3 pb-2 mb-1\">\r\n                      <mt-text-field\r\n                        [placeholder]=\"t('search-properties')\"\r\n                        [(ngModel)]=\"searchQuery\"\r\n                        icon=\"general.search-lg\"\r\n                      />\r\n                    </div>\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 flex items-center gap-3 py-3 px-3 rounded-lg border border-dashed border-surface-300 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\r\n                        <mt-icon\r\n                          class=\"text-lg\"\r\n                          icon=\"general.menu-05\"\r\n                        ></mt-icon>\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                          @if (searchQuery()) {\r\n                            {{ t(\"no-data-found\") }}\r\n                          } @else {\r\n                            All {{ tab.title }} items are in use\r\n                          }\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-1 gap-4 h-full overflow-y-auto\">\r\n      <div class=\"flex flex-col w-2/3 gap-4 h-full\">\r\n        <mt-card>\r\n          <ng-template #headless>\r\n            <div class=\"p-4 flex items-center gap-3\">\r\n              <mt-button\r\n                icon=\"layout.layout-top\"\r\n                [label]=\"t('add-section')\"\r\n                variant=\"outlined\"\r\n                severity=\"primary\"\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                variant=\"outlined\"\r\n                severity=\"primary\"\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                variant=\"outlined\"\r\n                severity=\"primary\"\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-1 border-primary rounded-xl bg-primary-50 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  </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: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabList, selector: "p-tablist" }, { kind: "component", type: i2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.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: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { 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: i4.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: i4.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i4.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: i4.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "pipe", type: i5.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,
-                        TextField,
-                        TranslocoDirective,
-                        FBSection,
-                        DragDropModule,
-                        Icon,
-                    ], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div class=\"flex gap-7 h-full w-full overflow-hidden\" cdkDropListGroup>\r\n    <!-- Properties Sidebar -->\r\n    <mt-card class=\"w-1/5 h-full flex flex-col overflow-hidden\">\r\n      <ng-template #headless>\r\n        <!-- Header -->\r\n        <h3 class=\"text-xl font-semibold px-4 pt-5\">\r\n          {{ t(\"form-elements\") }}\r\n        </h3>\r\n\r\n        @if (properties().length === 0) {\r\n          @if (isLoading()) {\r\n            <!-- Properties Loading Skeleton -->\r\n            <div class=\"flex gap-4 py-3 px-5 mt-4\">\r\n              <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\r\n              <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\r\n            </div>\r\n            <div class=\"py-4 px-5 space-y-5\">\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              <p class=\"text-sm font-semibold text-gray-500\">\r\n                {{ t(\"no-data-found\") }}\r\n              </p>\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\r\n              class=\"!bg-transparent !p-0 !pb-3 flex-1 overflow-hidden\"\r\n            >\r\n              @for (tab of filteredPropertiesByTab(); track tab.id) {\r\n                <p-tabpanel [value]=\"tab.id\" class=\"h-full flex flex-col\">\r\n                  <!-- Node List -->\r\n                  <div\r\n                    class=\"space-y-4 px-4 pb-4 [&_.cdk-drag-placeholder]:hidden flex-1 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                    <!-- Search Field (Sticky) -->\r\n                    <div class=\"sticky top-0 bg-surface-0 mb-0 py-3 pb-2 mb-1\">\r\n                      <mt-text-field\r\n                        [placeholder]=\"t('search-properties')\"\r\n                        [(ngModel)]=\"searchQuery\"\r\n                        icon=\"general.search-lg\"\r\n                      />\r\n                    </div>\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 flex items-center gap-3 py-3 px-3 rounded-lg border border-dashed border-surface-300 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\r\n                        <mt-icon\r\n                          class=\"text-lg\"\r\n                          icon=\"general.menu-05\"\r\n                        ></mt-icon>\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                          @if (searchQuery()) {\r\n                            {{ t(\"no-data-found\") }}\r\n                          } @else {\r\n                            All {{ tab.title }} items are in use\r\n                          }\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-1 gap-4 h-full overflow-y-auto\">\r\n      <div class=\"flex flex-col w-2/3 gap-4 h-full\">\r\n        <mt-card>\r\n          <ng-template #headless>\r\n            <div class=\"p-4 flex items-center gap-3\">\r\n              <mt-button\r\n                icon=\"layout.layout-top\"\r\n                [label]=\"t('add-section')\"\r\n                variant=\"outlined\"\r\n                severity=\"primary\"\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                variant=\"outlined\"\r\n                severity=\"primary\"\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                variant=\"outlined\"\r\n                severity=\"primary\"\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-1 border-primary rounded-xl bg-primary-50 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  </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: () => [] });
+            {
+                name: 'MAX_LENGTH',
+                category: 'Validation',
+                description: 'Returns true if value length is at most max',
+                signature: 'MAX_LENGTH(value, max)',
+                parameters: [
+                    {
+                        name: 'value',
+                        type: 'string',
+                        description: 'Value to check',
+                        required: true,
+                    },
+                    {
+                        name: 'max',
+                        type: 'number',
+                        description: 'Maximum length',
+                        required: true,
+                    },
+                ],
+                returnType: 'boolean',
+                examples: ['MAX_LENGTH(@Title, 120)'],
+            },
+            {
+                name: 'REGEX',
+                category: 'Validation',
+                description: 'Returns true if value matches regex pattern',
+                signature: 'REGEX(value, pattern)',
+                parameters: [
+                    {
+                        name: 'value',
+                        type: 'string',
+                        description: 'Value to check',
+                        required: true,
+                    },
+                    {
+                        name: 'pattern',
+                        type: 'string',
+                        description: 'Regex pattern',
+                        required: true,
+                    },
+                ],
+                returnType: 'boolean',
+                examples: ['REGEX(@Email, "^[^@]+@[^@]+\\.[^@]+$")'],
+            },
+            {
+                name: 'BEFORE',
+                category: 'Validation',
+                description: 'Returns true if date is before reference date',
+                signature: 'BEFORE(date, reference)',
+                parameters: [
+                    {
+                        name: 'date',
+                        type: 'date',
+                        description: 'Date to check',
+                        required: true,
+                    },
+                    {
+                        name: 'reference',
+                        type: 'date',
+                        description: 'Reference date',
+                        required: true,
+                    },
+                ],
+                returnType: 'boolean',
+                examples: ['BEFORE(@EndDate, @StartDate)'],
+            },
+            {
+                name: 'AFTER',
+                category: 'Validation',
+                description: 'Returns true if date is after reference date',
+                signature: 'AFTER(date, reference)',
+                parameters: [
+                    {
+                        name: 'date',
+                        type: 'date',
+                        description: 'Date to check',
+                        required: true,
+                    },
+                    {
+                        name: 'reference',
+                        type: 'date',
+                        description: 'Reference date',
+                        required: true,
+                    },
+                ],
+                returnType: 'boolean',
+                examples: ['AFTER(@StartDate, @EndDate)'],
+            },
+        ],
+    },
+    {
+        name: 'Logic',
+        displayName: 'Logic Helpers',
+        functions: [
+            {
+                name: 'AND',
+                category: 'Logic',
+                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(REQUIRED(@Email), REGEX(@Email, "^.+@.+$"))'],
+            },
+            {
+                name: 'OR',
+                category: 'Logic',
+                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(ISNULL(@Phone), REGEX(@Phone, "^\\+?[0-9]+$"))'],
+            },
+            {
+                name: 'NOT',
+                category: 'Logic',
+                description: 'Returns the opposite of a condition',
+                signature: 'NOT(condition)',
+                parameters: [
+                    {
+                        name: 'condition',
+                        type: 'boolean',
+                        description: 'Condition to negate',
+                        required: true,
+                    },
+                ],
+                returnType: 'boolean',
+                examples: ['NOT(ISNULL(@Password))'],
+            },
+        ],
+    },
+];
+const VALIDATION_OPERATORS = [
+    // Arithmetic
+    {
+        symbol: '+',
+        name: 'Add',
+        type: 'arithmetic',
+        description: 'Addition',
+        precedence: 4,
+    },
+    {
+        symbol: '-',
+        name: 'Subtract',
+        type: 'arithmetic',
+        description: 'Subtraction',
+        precedence: 4,
+    },
+    {
+        symbol: '*',
+        name: 'Multiply',
+        type: 'arithmetic',
+        description: 'Multiplication',
+        precedence: 5,
+    },
+    {
+        symbol: '/',
+        name: 'Divide',
+        type: 'arithmetic',
+        description: 'Division',
+        precedence: 5,
+    },
+    // 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: 3,
+    },
+    {
+        symbol: '<',
+        name: 'Less Than',
+        type: 'comparison',
+        description: 'Less than',
+        precedence: 3,
+    },
+    {
+        symbol: '>=',
+        name: 'Greater or Equal',
+        type: 'comparison',
+        description: 'Greater than or equal',
+        precedence: 3,
+    },
+    {
+        symbol: '<=',
+        name: 'Less or Equal',
+        type: 'comparison',
+        description: 'Less than or equal',
+        precedence: 3,
+    },
+    // Logical
+    {
+        symbol: '&&',
+        name: 'And',
+        type: 'logical',
+        description: 'Logical AND',
+        precedence: 2,
+    },
+    {
+        symbol: '||',
+        name: 'Or',
+        type: 'logical',
+        description: 'Logical OR',
+        precedence: 1,
+    },
+];
+
+class FBValidationRuleForm {
+    modalService = inject(ModalService);
+    ref = inject(ModalRef);
+    facade = inject(FormBuilderFacade);
+    transloco = inject(TranslocoService);
+    destroyRef = inject(DestroyRef);
+    initialData = input(null, ...(ngDevMode ? [{ debugName: "initialData" }] : []));
+    availableFields = input([], ...(ngDevMode ? [{ debugName: "availableFields" }] : []));
+    submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : []));
+    activeLang = signal(this.transloco.getActiveLang() ?? 'en', ...(ngDevMode ? [{ debugName: "activeLang" }] : []));
+    messageEnControl = new FormControl('');
+    messageArControl = new FormControl('');
+    severityControl = new FormControl('error', {
+        nonNullable: true,
+    });
+    formulaControl = new FormControl([]);
+    editorRef = viewChild('editor', ...(ngDevMode ? [{ debugName: "editorRef" }] : []));
+    functionCategories = VALIDATION_FUNCTION_CATEGORIES;
+    operators = VALIDATION_OPERATORS;
+    propertyKeys = computed(() => this.availableFields().map((field) => field.key), ...(ngDevMode ? [{ debugName: "propertyKeys" }] : []));
+    toolbarLabels = {
+        functions: 'Functions',
+        properties: 'Fields',
+        operators: 'Operators',
+        noPropertiesAvailable: 'No fields available',
+    };
+    severityOptions = computed(() => {
+        const _lang = this.activeLang();
+        return [
+            {
+                id: 'error',
+                name: this.transloco.translate('formBuilder.severity-error'),
+            },
+            {
+                id: 'warning',
+                name: this.transloco.translate('formBuilder.severity-warning'),
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "severityOptions" }] : []));
+    constructor() {
+        this.transloco.langChanges$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((lang) => {
+            this.activeLang.set(lang ?? 'en');
+        });
+        effect(() => {
+            const data = this.initialData();
+            if (!data) {
+                this.messageEnControl.reset('');
+                this.messageArControl.reset('');
+                this.severityControl.setValue('error');
+                this.formulaControl.reset([]);
+                return;
+            }
+            this.messageEnControl.setValue(data.message?.en ?? '');
+            this.messageArControl.setValue(data.message?.ar ?? '');
+            this.severityControl.setValue(data.severity ?? 'error');
+            if (data.formulaTokens) {
+                try {
+                    const tokens = JSON.parse(data.formulaTokens);
+                    this.formulaControl.patchValue(tokens);
+                }
+                catch {
+                    this.formulaControl.reset([]);
+                }
+            }
+            else {
+                this.formulaControl.reset([]);
+            }
+        });
+    }
+    onBlockInsert(block) {
+        const editor = this.editorRef();
+        if (editor) {
+            editor.addBlock(block);
+        }
+    }
+    onSeverityChange(item) {
+        this.severityControl.setValue(item.id);
+    }
+    onSave() {
+        const tokens = this.formulaControl.value ?? [];
+        const formulaTokens = tokens.length > 0 ? JSON.stringify(tokens) : '';
+        const formulaText = tokens.length > 0 ? serializeTokens(tokens) : '';
+        const payload = {
+            formulaTokens,
+            formulaText,
+            message: {
+                en: this.messageEnControl.value ?? '',
+                ar: this.messageArControl.value ?? '',
+            },
+            severity: this.severityControl.value ?? 'error',
+        };
+        const data = this.initialData();
+        this.submitting.set(true);
+        if (data?.id !== undefined && data?.id !== null) {
+            this.facade.updateValidation(data.id, payload).subscribe({
+                next: () => this.ref.close(true),
+                error: () => this.submitting.set(false),
+            });
+            return;
+        }
+        this.facade.addValidation(payload).subscribe({
+            next: () => this.ref.close(true),
+            error: () => this.submitting.set(false),
+        });
+    }
+    onCancel() {
+        this.ref.close(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FBValidationRuleForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: FBValidationRuleForm, isStandalone: true, selector: "mt-fb-validation-rule-form", inputs: { initialData: { classPropertyName: "initialData", publicName: "initialData", 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-4\">\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      <mt-formula-editor\r\n        #editor\r\n        [placeholder]=\"t('validation-formula-placeholder')\"\r\n        [formControl]=\"formulaControl\"\r\n      />\r\n      <div class=\"grid grid-cols-2 gap-4\">\r\n        <mt-text-field\r\n          [label]=\"t('message-en')\"\r\n          [placeholder]=\"t('message-en')\"\r\n          [formControl]=\"messageEnControl\"\r\n        />\r\n        <mt-text-field\r\n          [label]=\"t('message-ar')\"\r\n          [placeholder]=\"t('message-ar')\"\r\n          [formControl]=\"messageArControl\"\r\n        />\r\n      </div>\r\n      <div class=\"grid gap-2\">\r\n        <label class=\"text-sm font-medium text-gray-700 dark:text-gray-100\">\r\n          {{ t(\"severity\") }}\r\n        </label>\r\n        <mt-radio-cards\r\n          [options]=\"severityOptions()\"\r\n          [activeId]=\"severityControl.value\"\r\n          (selectionChange)=\"onSeverityChange($event)\"\r\n        ></mt-radio-cards>\r\n      </div>\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: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: RadioCards, selector: "mt-radio-cards", inputs: ["circle", "color", "size", "columns", "options", "activeId", "itemTemplate"], outputs: ["optionsChange", "activeIdChange", "selectionChange"] }, { kind: "component", type: FormulaToolbar, selector: "mt-formula-toolbar", inputs: ["knownProperties", "propertiesTemplate", "functionCategories", "operators", "initialTab", "searchPlaceholder", "labels"], outputs: ["onBlockInsert", "onTabChange"] }, { kind: "component", type: FormulaEditor, selector: "mt-formula-editor", inputs: ["placeholder", "initialTokens", "disabled", "borderless"], outputs: ["formulaChange", "tokensChange", "onBlur", "onFocus"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FBValidationRuleForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-fb-validation-rule-form', standalone: true, imports: [
+                        TranslocoDirective,
+                        ReactiveFormsModule,
+                        Button,
+                        TextField,
+                        RadioCards,
+                        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-4\">\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      <mt-formula-editor\r\n        #editor\r\n        [placeholder]=\"t('validation-formula-placeholder')\"\r\n        [formControl]=\"formulaControl\"\r\n      />\r\n      <div class=\"grid grid-cols-2 gap-4\">\r\n        <mt-text-field\r\n          [label]=\"t('message-en')\"\r\n          [placeholder]=\"t('message-en')\"\r\n          [formControl]=\"messageEnControl\"\r\n        />\r\n        <mt-text-field\r\n          [label]=\"t('message-ar')\"\r\n          [placeholder]=\"t('message-ar')\"\r\n          [formControl]=\"messageArControl\"\r\n        />\r\n      </div>\r\n      <div class=\"grid gap-2\">\r\n        <label class=\"text-sm font-medium text-gray-700 dark:text-gray-100\">\r\n          {{ t(\"severity\") }}\r\n        </label>\r\n        <mt-radio-cards\r\n          [options]=\"severityOptions()\"\r\n          [activeId]=\"severityControl.value\"\r\n          (selectionChange)=\"onSeverityChange($event)\"\r\n        ></mt-radio-cards>\r\n      </div>\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" }]
+        }], ctorParameters: () => [], propDecorators: { initialData: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialData", required: false }] }], availableFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFields", required: false }] }], editorRef: [{ type: i0.ViewChild, args: ['editor', { isSignal: true }] }] } });
+
+class FBValidationRules {
+    modalService = inject(ModalService);
+    facade = inject(FormBuilderFacade);
+    transloco = inject(TranslocoService);
+    destroyRef = inject(DestroyRef);
+    validations = this.facade.validations;
+    sections = this.facade.sections;
+    properties = this.facade.properties;
+    activeLang = signal(this.transloco.getActiveLang() ?? 'en', ...(ngDevMode ? [{ debugName: "activeLang" }] : []));
+    propertiesMap = computed(() => {
+        const map = new Map();
+        for (const prop of this.properties()) {
+            map.set(prop.key, prop);
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "propertiesMap" }] : []));
+    availableFields = computed(() => {
+        const sections = this.sections();
+        const propsMap = this.propertiesMap();
+        const lang = this.activeLang();
+        const fields = [];
+        for (const section of sections) {
+            for (const field of section.fields) {
+                const prop = field.property ?? propsMap.get(field.propertyKey);
+                const name = this.resolvePropertyName(prop, field.propertyKey, lang);
+                fields.push({
+                    key: field.propertyKey,
+                    name,
+                    type: prop?.viewType || 'text',
+                });
+            }
+        }
+        return fields;
+    }, ...(ngDevMode ? [{ debugName: "availableFields" }] : []));
+    tableRows = computed(() => {
+        const lang = this.activeLang();
+        return this.validations().map((rule) => ({
+            ...rule,
+            messageText: rule.message?.[lang] ?? rule.message?.en ?? '',
+        }));
+    }, ...(ngDevMode ? [{ debugName: "tableRows" }] : []));
+    tableColumns = computed(() => {
+        const _lang = this.activeLang();
+        return [
+            {
+                key: 'messageText',
+                label: this.transloco.translate('formBuilder.validation-message'),
+            },
+            {
+                key: 'enabled',
+                label: this.transloco.translate('formBuilder.validation-active'),
+                type: 'boolean',
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "tableColumns" }] : []));
+    rowActions = computed(() => {
+        const _lang = this.activeLang();
+        return [
+            {
+                icon: 'custom.pencil',
+                tooltip: this.transloco.translate('formBuilder.edit-validation-rule'),
+                action: (row) => this.openEdit(row),
+            },
+            {
+                icon: 'general.trash-01',
+                tooltip: this.transloco.translate('formBuilder.delete'),
+                action: (row) => this.deleteRule(row),
+                confirmation: {
+                    type: 'popup',
+                    confirmationType: 'delete',
+                },
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "rowActions" }] : []));
+    constructor() {
+        this.transloco.langChanges$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((lang) => {
+            this.activeLang.set(lang ?? 'en');
+        });
+    }
+    resolvePropertyName(property, fallbackKey, lang) {
+        if (!property) {
+            return `Property ${fallbackKey}`;
+        }
+        const name = property?.name;
+        if (typeof name === 'string') {
+            return name;
+        }
+        const display = name?.['display'];
+        if (typeof display === 'string' && display.trim().length > 0) {
+            return display;
+        }
+        const localized = name?.[lang] ?? name?.['en'] ?? name?.['ar'];
+        if (typeof localized === 'string' && localized.trim().length > 0) {
+            return localized;
+        }
+        return property?.key ?? `Property ${fallbackKey}`;
+    }
+    openCreate() {
+        this.modalService.openModal(FBValidationRuleForm, 'drawer', {
+            header: this.transloco.translate('formBuilder.add-validation-rule'),
+            styleClass: '!w-[65%] !absolute',
+            position: 'start',
+            modal: true,
+            dismissible: true,
+            appendTo: '#page-content',
+            inputValues: {
+                availableFields: this.availableFields(),
+            },
+        });
+    }
+    openEdit(row) {
+        this.modalService.openModal(FBValidationRuleForm, 'drawer', {
+            header: this.transloco.translate('formBuilder.edit-validation-rule'),
+            styleClass: '!w-[65%] !absolute',
+            position: 'start',
+            modal: true,
+            dismissible: true,
+            appendTo: '#page-content',
+            inputValues: {
+                initialData: row,
+                availableFields: this.availableFields(),
+            },
+        });
+    }
+    deleteRule(row) {
+        this.facade.deleteValidation(row.id).subscribe();
+    }
+    onCellChange(event) {
+        if (event.column !== 'enabled')
+            return;
+        this.facade
+            .toggleValidationActive(event.row.id, { enabled: event.value })
+            .subscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FBValidationRules, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: FBValidationRules, isStandalone: true, selector: "mt-fb-validation-rules", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-auto']\">\r\n    <div class=\"flex justify-end pb-4\">\r\n      <mt-button\r\n        [label]=\"t('add-validation-rule')\"\r\n        severity=\"primary\"\r\n        variant=\"outlined\"\r\n        (onClick)=\"openCreate()\"\r\n      ></mt-button>\r\n    </div>\r\n    <mt-table\r\n      [data]=\"tableRows()\"\r\n      [columns]=\"tableColumns()\"\r\n      [rowActions]=\"rowActions()\"\r\n      (cellChange)=\"onCellChange($event)\"\r\n    ></mt-table>\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: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { 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: FBValidationRules, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-fb-validation-rules', standalone: true, imports: [TranslocoDirective, Table, Button], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-auto']\">\r\n    <div class=\"flex justify-end pb-4\">\r\n      <mt-button\r\n        [label]=\"t('add-validation-rule')\"\r\n        severity=\"primary\"\r\n        variant=\"outlined\"\r\n        (onClick)=\"openCreate()\"\r\n      ></mt-button>\r\n    </div>\r\n    <mt-table\r\n      [data]=\"tableRows()\"\r\n      [columns]=\"tableColumns()\"\r\n      [rowActions]=\"rowActions()\"\r\n      (cellChange)=\"onCellChange($event)\"\r\n    ></mt-table>\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [] });
+
+class FormBuilderContextService {
+    http = inject(HttpClient);
+    baseUrl = 'context';
+    /**
+     * Resolves context data including navigation paths and properties.
+     * No caching - always fetches fresh data.
+     */
+    resolveContext(contextKey, options = {}) {
+        if (!contextKey)
+            return of(null);
+        return this.http
+            .post(`${this.baseUrl}/resolve`, {
+            contextKey,
+            displayTags: options.displayTags,
+            propertyFlags: options.propertyFlags,
+            matchAllTags: options.matchAllTags,
+            includeVirtual: options.includeVirtual,
+            includeNavigationPaths: options.includeNavigationPaths,
+            includeConnectionMetadata: options.includeConnectionMetadata,
+            includeRelatedContextValues: options.includeRelatedContextValues,
+            relatedContextsToInclude: options.relatedContextsToInclude,
+        })
+            .pipe(map((response) => this.normalizeResponse(response)), catchError((error) => {
+            console.warn('Failed to resolve context:', error);
+            return of(null);
+        }));
+    }
+    /**
+     * Gets properties for a context.
+     * No caching - always fetches fresh data.
+     */
+    getProperties(contextKey, options = {}) {
+        if (!contextKey)
+            return of([]);
+        return this.resolveContext(contextKey, options).pipe(map((resolved) => resolved?.properties ?? []));
+    }
+    normalizeResponse(response) {
+        const payload = response?.data ?? response;
+        if (!payload)
+            return null;
+        const properties = this.normalizeProperties(payload.properties ?? []);
+        return {
+            ...payload,
+            properties,
+        };
+    }
+    normalizeProperties(raw) {
+        return (raw ?? [])
+            .map((prop) => {
+            const key = prop?.key ?? prop?.propertyKey;
+            if (!key)
+                return null;
+            const name = prop?.name ?? prop?.displayName ?? key;
+            return {
+                ...prop,
+                key,
+                name,
+            };
+        })
+            .filter((prop) => Boolean(prop));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormBuilderContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormBuilderContextService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormBuilderContextService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const SCOPE_ORDER = [
+    'Current',
+    'Host',
+    'Parent',
+    'Ancestors',
+    'Children',
+    'Descendants',
+    'Related',
+    'Siblings',
+];
+const PATH_TOKENS = [
+    'Parent',
+    'Ancestors',
+    'Children',
+    'Descendants',
+    'Related',
+    'Siblings',
+    'Host',
+];
+const SCOPE_LABELS = {
+    Current: 'Current',
+    Host: 'Host',
+    Parent: 'Parent',
+    Ancestors: 'Ancestors',
+    Children: 'Children',
+    Descendants: 'Descendants',
+    Related: 'Related',
+    Siblings: 'Siblings',
+};
+// ============================================================================
+// Component
+// ============================================================================
+class FormBuilder {
+    modalService = inject(ModalService);
+    confirmationService = inject(ConfirmationService);
+    translocoService = inject(TranslocoService);
+    facade = inject(FormBuilderFacade);
+    contextService = inject(FormBuilderContextService);
+    popovers = viewChildren(Popover, ...(ngDevMode ? [{ debugName: "popovers" }] : []));
+    dialogRef;
+    // ============================================================================
+    // Facade State
+    // ============================================================================
+    sections = this.facade.sections;
+    properties = this.facade.properties;
+    isLoading = this.facade.isLoadingFormConfiguration;
+    error = this.facade.formConfigurationError;
+    moduleType = this.facade.moduleType;
+    moduleId = this.facade.moduleId;
+    parentPath = this.facade.parentPath;
+    // ============================================================================
+    // UI State (Simple Signals)
+    // ============================================================================
+    activeScope = signal('Current', ...(ngDevMode ? [{ debugName: "activeScope" }] : []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    isContextLoading = signal(false, ...(ngDevMode ? [{ debugName: "isContextLoading" }] : []));
+    // Initial context data (from first load)
+    initialContext = signal(null, ...(ngDevMode ? [{ debugName: "initialContext" }] : []));
+    currentProperties = signal([], ...(ngDevMode ? [{ debugName: "currentProperties" }] : []));
+    // Non-current scope state (reset on tab change)
+    scopeLoading = signal(false, ...(ngDevMode ? [{ debugName: "scopeLoading" }] : []));
+    scopeProperties = signal([], ...(ngDevMode ? [{ debugName: "scopeProperties" }] : []));
+    scopePath = signal([], ...(ngDevMode ? [{ debugName: "scopePath" }] : []));
+    scopeSelectedKey = signal('', ...(ngDevMode ? [{ debugName: "scopeSelectedKey" }] : []));
+    scopeNavigation = signal(null, ...(ngDevMode ? [{ debugName: "scopeNavigation" }] : []));
+    // Request tracking
+    initialRequestId = 0;
+    scopeRequestId = 0;
+    lastContextKey = '';
+    // ============================================================================
+    // Computed Values
+    // ============================================================================
+    contextKey = computed(() => {
+        const type = this.moduleType();
+        const id = this.moduleId();
+        const parent = this.parentPath();
+        if (!type || id === null || id === undefined)
+            return '';
+        const segments = [];
+        const raw = parent.split('/').filter(Boolean);
+        for (let i = 0; i < raw.length; i += 2) {
+            if (raw[i] && raw[i + 1] !== undefined) {
+                segments.push(`${raw[i]}:${raw[i + 1]}`);
+            }
+        }
+        segments.push(`${type}:${id}`);
+        return segments.join('/');
+    }, ...(ngDevMode ? [{ debugName: "contextKey" }] : []));
+    usedPropertyKeys = computed(() => {
+        return new Set(this.sections().flatMap((s) => s.fields.map((f) => f.propertyKey)));
+    }, ...(ngDevMode ? [{ debugName: "usedPropertyKeys" }] : []));
+    propertiesMap = computed(() => {
+        const map = new Map();
+        for (const prop of this.properties()) {
+            map.set(prop.key, prop);
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "propertiesMap" }] : []));
+    /** Navigation options from initial context */
+    baseScopeContexts = computed(() => {
+        const ctx = this.initialContext();
+        const nav = ctx?.navigationPaths;
+        const currentKey = ctx?.currentState?.contextPath ?? this.contextKey();
+        return {
+            Current: currentKey
+                ? [this.createContextOption(currentKey, ctx?.currentState)]
+                : [],
+            Host: nav?.hostContext
+                ? [this.createContextOption(nav.hostContext)]
+                : [],
+            Parent: this.mergeContextOptions(nav?.parent),
+            Ancestors: this.mergeContextOptions(nav?.ancestors),
+            Children: this.mergeContextOptions(nav?.children),
+            Descendants: this.mergeContextOptions(nav?.descendants),
+            Related: this.mergeContextOptions(nav?.related),
+            Siblings: this.mergeContextOptions(nav?.siblingContexts),
+        };
+    }, ...(ngDevMode ? [{ debugName: "baseScopeContexts" }] : []));
+    /** Available scope tabs */
+    scopeOptions = computed(() => {
+        const contexts = this.baseScopeContexts();
+        return SCOPE_ORDER.filter((s) => (contexts[s] ?? []).length > 0).map((s) => ({ key: s, label: SCOPE_LABELS[s] }));
+    }, ...(ngDevMode ? [{ debugName: "scopeOptions" }] : []));
+    /** Enriched sections for 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 = field.property ?? propsMap.get(field.propertyKey);
+                return {
+                    ...field,
+                    name: this.resolvePropertyName(prop, field.propertyKey, lang),
+                    type: prop?.viewType || 'text',
+                    data: prop,
+                };
+            }),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "enrichedSections" }] : []));
+    // ============================================================================
+    // Lifecycle
+    // ============================================================================
+    constructor() {
+        // Effect: watch for context key changes and load initial data
+        effect(() => {
+            const key = this.contextKey();
+            if (key && key !== this.lastContextKey) {
+                this.lastContextKey = key;
+                this.loadInitialContext(key);
+            }
+        }, { allowSignalWrites: true });
+    }
+    ngOnInit() {
+        // Trigger initial load if context key is already available
+        const key = this.contextKey();
+        if (key && key !== this.lastContextKey) {
+            this.lastContextKey = key;
+            this.loadInitialContext(key);
+        }
+    }
+    // ============================================================================
+    // Initial Context Loading
+    // ============================================================================
+    loadInitialContext(contextKey) {
+        const requestId = ++this.initialRequestId;
+        this.isContextLoading.set(true);
+        this.initialContext.set(null);
+        this.currentProperties.set([]);
+        this.resetScopeState();
+        this.activeScope.set('Current');
+        this.contextService
+            .resolveContext(contextKey, {
+            propertyFlags: 'None',
+            includeVirtual: true,
+            includeNavigationPaths: true,
+            includeConnectionMetadata: true,
+            matchAllTags: true,
+            includeRelatedContextValues: true,
+        })
+            .subscribe((response) => {
+            if (requestId !== this.initialRequestId)
+                return;
+            this.isContextLoading.set(false);
+            this.initialContext.set(response);
+            this.currentProperties.set(response?.properties ?? []);
+            this.facade.setProperties(response?.properties ?? []);
+        });
+    }
+    // ============================================================================
+    // Tab Change Handler (Called from template)
+    // ============================================================================
+    onScopeChange(scope) {
+        if (scope === this.activeScope())
+            return;
+        this.activeScope.set(scope);
+        this.resetScopeState();
+        if (scope === 'Current') {
+            return;
+        }
+        // Get first context option for this scope
+        const options = this.baseScopeContexts()[scope] ?? [];
+        if (options.length === 0)
+            return;
+        const firstOption = options[0];
+        this.scopePath.set([
+            {
+                token: scope,
+                value: firstOption.contextKey,
+                label: firstOption.label,
+            },
+        ]);
+        this.loadScopeContext(firstOption.contextKey);
+    }
+    // ============================================================================
+    // Scope Context Loading
+    // ============================================================================
+    loadScopeContext(contextKey) {
+        const requestId = ++this.scopeRequestId;
+        this.scopeLoading.set(true);
+        this.contextService
+            .resolveContext(contextKey, {
+            propertyFlags: 'None',
+            includeVirtual: true,
+            includeNavigationPaths: true,
+            includeConnectionMetadata: true,
+            matchAllTags: true,
+            includeRelatedContextValues: true,
+        })
+            .subscribe((response) => {
+            if (requestId !== this.scopeRequestId)
+                return;
+            this.scopeLoading.set(false);
+            this.scopeNavigation.set(response);
+            this.scopeProperties.set(response?.properties ?? []);
+            // Auto-select first available property
+            const used = this.usedPropertyKeys();
+            const available = (response?.properties ?? []).filter((p) => !used.has(p.key));
+            if (available.length > 0) {
+                this.scopeSelectedKey.set(available[0].key);
+            }
+        });
+    }
+    resetScopeState() {
+        this.scopeLoading.set(false);
+        this.scopeProperties.set([]);
+        this.scopePath.set([]);
+        this.scopeSelectedKey.set('');
+        this.scopeNavigation.set(null);
+        this.hideAllPopovers();
+    }
+    // ============================================================================
+    // Path Segment Methods (accept scope parameter for template compatibility)
+    // ============================================================================
+    getScopeBaseContexts(scope) {
+        return this.baseScopeContexts()[scope] ?? [];
+    }
+    /** Template calls this with scope.key */
+    getScopePath(_scope) {
+        return this.scopePath();
+    }
+    getTokenLabel(token) {
+        return SCOPE_LABELS[token] ?? token;
+    }
+    getScopeSegmentLabel(_scope, index) {
+        const path = this.scopePath();
+        const segment = path[index];
+        if (!segment?.value)
+            return `Select ${this.getTokenLabel(segment?.token)}`;
+        // Use stored label - don't look up from options (which change on resolve)
+        return segment.label || this.formatContextKey(segment.value);
+    }
+    getScopeSegmentOptions(_scope, index) {
+        const path = this.scopePath();
+        const segment = path[index];
+        if (!segment)
+            return [];
+        if (index === 0) {
+            return this.getScopeBaseContexts(this.activeScope());
+        }
+        const nav = this.scopeNavigation();
+        return this.getNavigationOptionsByToken(nav, segment.token);
+    }
+    setScopeSegmentValue(_scope, index, contextKey, label) {
+        const path = this.scopePath();
+        const newPath = path.slice(0, index + 1);
+        if (newPath[index]) {
+            // Store label at selection time so it doesn't change on resolve
+            const segmentLabel = label || this.findOptionLabel(_scope, index, contextKey);
+            newPath[index] = {
+                ...newPath[index],
+                value: contextKey,
+                label: segmentLabel,
+            };
+        }
+        this.scopePath.set(newPath);
+        this.loadScopeContext(contextKey);
+    }
+    findOptionLabel(_scope, index, contextKey) {
+        const options = this.getScopeSegmentOptions(_scope, index);
+        const option = options.find((o) => o.contextKey === contextKey);
+        return option?.label ?? this.formatContextKey(contextKey);
+    }
+    /** Template handler: hide popover first, then set value (like formula-builder) */
+    onSetScopeSegmentValue(scope, index, contextKey, popover) {
+        popover.hide();
+        this.setScopeSegmentValue(scope, index, contextKey);
+    }
+    addScopeSegment(_scope, token) {
+        const path = this.scopePath();
+        this.scopePath.set([...path, { token, value: '', label: '' }]);
+    }
+    /** Template handler: hide popover first, then add segment (like formula-builder) */
+    onAddScopeSegment(scope, token, popover) {
+        popover.hide();
+        this.addScopeSegment(scope, token);
+    }
+    getScopeNextTokens(_scope) {
+        const path = this.scopePath();
+        const last = path[path.length - 1];
+        if (!last?.value)
+            return [];
+        const nav = this.scopeNavigation();
+        if (!nav)
+            return [];
+        return PATH_TOKENS.filter((t) => this.getNavigationOptionsByToken(nav, t).length > 0);
+    }
+    canAddNextScopeSegment(_scope) {
+        const path = this.scopePath();
+        if (path.length === 0)
+            return false;
+        if (!path.every((s) => Boolean(s.value)))
+            return false;
+        return this.getScopeNextTokens().length > 0;
+    }
+    canRemoveScopePath(_scope) {
+        return this.scopePath().length > 1;
+    }
+    removeScopePath(_scope) {
+        const path = this.scopePath();
+        if (path.length <= 1)
+            return;
+        const newPath = path.slice(0, -1);
+        this.scopePath.set(newPath);
+        const last = newPath[newPath.length - 1];
+        if (last?.value) {
+            this.loadScopeContext(last.value);
+        }
+    }
+    /** Template-compatible version (returns properties array for the scope) */
+    getScopeProperties(_scope) {
+        const scope = _scope ?? this.activeScope();
+        return scope === 'Current'
+            ? this.currentProperties()
+            : this.scopeProperties();
+    }
+    // ============================================================================
+    // Property Methods (accept scope parameter for template compatibility)
+    // ============================================================================
+    getScopePropertyOptions(_scope) {
+        const scope = _scope ?? this.activeScope();
+        const props = scope === 'Current' ? this.currentProperties() : this.scopeProperties();
+        const used = this.usedPropertyKeys();
+        return props
+            .filter((p) => !used.has(p.key))
+            .map((p) => ({ key: p.key, name: this.getPropertyLabel(p) }));
+    }
+    getScopeSelectedPropertyKey(_scope) {
+        return this.scopeSelectedKey();
+    }
+    setScopeSelectedProperty(_scope, key) {
+        this.scopeSelectedKey.set(key);
+    }
+    getScopeSelectedProperty(_scope) {
+        const key = this.scopeSelectedKey();
+        if (!key)
+            return null;
+        return this.scopeProperties().find((p) => p.key === key) ?? null;
+    }
+    getFilteredProperties(_scope) {
+        const scope = _scope ?? this.activeScope();
+        const used = this.usedPropertyKeys();
+        const query = this.searchQuery().toLowerCase().trim();
+        if (scope !== 'Current') {
+            const selected = this.getScopeSelectedProperty();
+            if (!selected || used.has(selected.key))
+                return [];
+            return [selected];
+        }
+        let available = this.currentProperties().filter((p) => !used.has(p.key));
+        if (query) {
+            available = available.filter((p) => this.getPropertyLabel(p).toLowerCase().includes(query));
+        }
+        return available;
+    }
+    isScopePropertiesLoading(_scope) {
+        const scope = _scope ?? this.activeScope();
+        return scope !== 'Current' && this.scopeLoading();
+    }
+    getPropertyLabel(property) {
+        const lang = document.documentElement.lang;
+        return this.resolvePropertyName(property, property.key, lang);
+    }
+    // ============================================================================
+    // Helper Methods
+    // ============================================================================
+    hideAllPopovers() {
+        for (const popover of this.popovers()) {
+            popover.hide();
+        }
+    }
+    getNavigationOptionsByToken(response, token) {
+        const nav = response?.navigationPaths;
+        if (!nav)
+            return [];
+        switch (token) {
+            case 'Parent':
+                return this.mergeContextOptions(nav.parent);
+            case 'Ancestors':
+                return this.mergeContextOptions(nav.ancestors);
+            case 'Children':
+                return this.mergeContextOptions(nav.children);
+            case 'Descendants':
+                return this.mergeContextOptions(nav.descendants);
+            case 'Related':
+                return this.mergeContextOptions(nav.related);
+            case 'Siblings':
+                return this.mergeContextOptions(nav.siblingContexts);
+            case 'Host':
+                return nav.hostContext
+                    ? [this.createContextOption(nav.hostContext)]
+                    : [];
+            default:
+                return [];
+        }
+    }
+    resolvePropertyName(property, fallbackKey, lang) {
+        if (!property)
+            return `Property ${fallbackKey}`;
+        const name = property.name;
+        if (typeof name === 'string')
+            return name;
+        const display = name?.['display'];
+        if (typeof display === 'string' && display.trim())
+            return display;
+        const localized = name?.[lang] ?? name?.['en'] ?? name?.['ar'];
+        if (typeof localized === 'string' && localized.trim())
+            return localized;
+        return property.key ?? `Property ${fallbackKey}`;
+    }
+    createContextOption(pathOrKey, currentState) {
+        if (typeof pathOrKey === 'string') {
+            return {
+                contextKey: pathOrKey,
+                label: this.formatContextLabel({
+                    contextKey: pathOrKey,
+                    contextType: currentState?.contextType,
+                    contextId: currentState?.contextId,
+                }),
+            };
+        }
+        return {
+            contextKey: pathOrKey.contextKey,
+            label: this.formatContextLabel(pathOrKey),
+        };
+    }
+    formatContextLabel(path) {
+        // Just return the name - no path formatting needed
+        if (path.name)
+            return path.name;
+        if (path.key)
+            return path.key;
+        if (path.contextType && path.contextId !== undefined)
+            return `${path.contextType} ${path.contextId}`;
+        return path.contextKey || 'Context';
+    }
+    formatContextKey(contextKey) {
+        return contextKey
+            .split('/')
+            .filter(Boolean)
+            .map((seg) => {
+            const [type, id] = seg.split(':');
+            return id !== undefined ? `${type} ${id}` : type;
+        })
+            .join(' / ');
+    }
+    mergeContextOptions(items) {
+        if (!items?.length)
+            return [];
+        const seen = new Set();
+        return items
+            .slice()
+            .sort((a, b) => (a.distance ?? 0) - (b.distance ?? 0))
+            .filter((item) => {
+            if (!item?.contextKey || seen.has(item.contextKey))
+                return false;
+            seen.add(item.contextKey);
+            return true;
+        })
+            .map((item) => this.createContextOption(item));
+    }
+    // ============================================================================
+    // Drag & Drop
+    // ============================================================================
+    drop(event) {
+        const targetSectionId = event.container.id;
+        if (event.previousContainer === event.container) {
+            const fields = [...event.container.data];
+            const [movedField] = fields.splice(event.previousIndex, 1);
+            fields.splice(event.currentIndex, 0, movedField);
+            this.facade.reorderFields(targetSectionId, fields.map((f, i) => ({ id: f.id, order: i })));
+        }
+        else if (event.previousContainer.id.startsWith('toolbox-')) {
+            const prop = event.item.data;
+            this.facade.addField(targetSectionId, {
+                propertyKey: prop.key,
+                width: '100',
+                order: event.currentIndex,
+                hiddenInCreation: false,
+            });
+        }
+        else {
+            const field = event.item.data;
+            this.facade.moveField(event.previousContainer.id, field.id, {
+                targetSectionId,
+                order: event.currentIndex,
+            });
+        }
+    }
+    // ============================================================================
+    // Modal Actions
+    // ============================================================================
+    addSection() {
+        this.dialogRef = this.modalService.openModal(FBSectionForm, 'drawer', {
+            header: this.translocoService.translate('formBuilder.add-section'),
+            height: '20vw',
+            styleClass: '!w-[27%] !absolute !shadow-none',
+            position: 'end',
+            appendTo: '#page-content',
+            dismissible: true,
+            inputValues: { sectionsCount: this.sections().length },
+        });
+    }
+    openPreview() {
+        this.dialogRef = this.modalService.openModal(FBPreviewForm, 'drawer', {
+            header: this.translocoService.translate('formBuilder.preview'),
+            styleClass: '!w-[79%] !absolute !shadow-none',
+            position: 'end',
+            appendTo: 'page-content',
+            dismissible: true,
+            inputValues: { sections: this.enrichedSections() },
+        });
+    }
+    openValidationRules() {
+        this.dialogRef = this.modalService.openModal(FBValidationRules, 'drawer', {
+            header: this.translocoService.translate('formBuilder.validation-rules'),
+            styleClass: '!w-[35%] !absolute !shadow-none',
+            position: 'end',
+            appendTo: '#page-content',
+            dismissible: true,
+        });
+    }
+    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", viewQueries: [{ propertyName: "popovers", predicate: Popover, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div class=\"flex gap-7 h-full w-full overflow-hidden\" cdkDropListGroup>\r\n    <!-- Properties Sidebar -->\r\n    <mt-card class=\"w-1/5 h-full flex flex-col overflow-hidden\">\r\n      <ng-template #headless>\r\n        <!-- Header -->\r\n        <h3 class=\"text-xl font-semibold px-4 pt-5\">\r\n          {{ t(\"form-elements\") }}\r\n        </h3>\r\n\r\n        @if (isContextLoading()) {\r\n          <!-- Properties Loading Skeleton -->\r\n          <div class=\"flex gap-4 py-3 px-5 mt-4\">\r\n            <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\r\n            <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\r\n          </div>\r\n          <div class=\"py-4 px-5 space-y-5\">\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 if (scopeOptions().length === 0) {\r\n          <!-- No Properties State -->\r\n          <div class=\"flex-1 flex items-center justify-center p-4\">\r\n            <p class=\"text-sm font-semibold text-gray-500\">\r\n              {{ t(\"no-data-found\") }}\r\n            </p>\r\n          </div>\r\n        } @else {\r\n          <!-- Scope Tabs using PrimeNG -->\r\n          <p-tabs\r\n            [value]=\"activeScope()\"\r\n            (valueChange)=\"onScopeChange($event)\"\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 (scope of scopeOptions(); track scope.key) {\r\n                <p-tab [value]=\"scope.key\">{{ scope.label }}</p-tab>\r\n              }\r\n            </p-tablist>\r\n            <p-tabpanels\r\n              class=\"!bg-transparent !p-0 !pb-3 flex-1 overflow-hidden\"\r\n            >\r\n              @for (scope of scopeOptions(); track scope.key) {\r\n                <p-tabpanel [value]=\"scope.key\" class=\"h-full flex flex-col\">\r\n                  @if (scope.key !== \"Current\") {\r\n                    <div class=\"px-4 pt-3 pb-2\">\r\n                      <div\r\n                        class=\"flex flex-col gap-3 rounded-lg bg-slate-50 px-3 py-2 dark:bg-slate-800/50\"\r\n                      >\r\n                        <div class=\"flex items-center gap-2\">\r\n                          <span\r\n                            class=\"shrink-0 text-xs font-semibold uppercase tracking-wider text-slate-400\"\r\n                          >\r\n                            Path\r\n                          </span>\r\n                          <div\r\n                            class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                          ></div>\r\n                          <span class=\"text-xs font-semibold text-slate-600\">\r\n                            {{ scope.label }}\r\n                          </span>\r\n                        </div>\r\n                        @if (getScopeBaseContexts(scope.key).length === 0) {\r\n                          <span class=\"text-xs italic text-slate-400\">\r\n                            No context available\r\n                          </span>\r\n                        } @else {\r\n                          <div class=\"flex flex-col gap-1.5\">\r\n                            @for (\r\n                              segment of getScopePath(scope.key);\r\n                              track $index;\r\n                              let segmentIndex = $index;\r\n                              let isLast = $last\r\n                            ) {\r\n                              <div\r\n                                class=\"flex items-center gap-1 py-0.5 px-2 border border-gray-200 rounded bg-white dark:bg-slate-800 dark:border-slate-600\"\r\n                              >\r\n                                <div\r\n                                  class=\"flex-1 min-w-0 text-xs font-medium text-slate-600 dark:text-slate-300 truncate cursor-pointer\"\r\n                                  (click)=\"segmentPopover.toggle($event)\"\r\n                                >\r\n                                  {{\r\n                                    getScopeSegmentLabel(\r\n                                      scope.key,\r\n                                      segmentIndex\r\n                                    )\r\n                                  }}\r\n                                </div>\r\n                                <mt-button\r\n                                  type=\"button\"\r\n                                  icon=\"arrow.chevron-down\"\r\n                                  [outlined]=\"true\"\r\n                                  size=\"small\"\r\n                                  severity=\"secondary\"\r\n                                  styleClass=\"!p-0.5 !min-w-0\"\r\n                                  (onClick)=\"segmentPopover.toggle($event)\"\r\n                                ></mt-button>\r\n                                @if (isLast && canRemoveScopePath(scope.key)) {\r\n                                  <mt-button\r\n                                    type=\"button\"\r\n                                    icon=\"general.trash-01\"\r\n                                    [outlined]=\"true\"\r\n                                    size=\"small\"\r\n                                    severity=\"danger\"\r\n                                    styleClass=\"!p-0.5 !min-w-0\"\r\n                                    (onClick)=\"removeScopePath(scope.key)\"\r\n                                  ></mt-button>\r\n                                }\r\n                              </div>\r\n                              <p-popover\r\n                                #segmentPopover\r\n                                [style]=\"{ width: 'max-content' }\"\r\n                                [dismissable]=\"true\"\r\n                              >\r\n                                <div class=\"p-2\">\r\n                                  <div\r\n                                    class=\"mb-2 text-xs font-semibold uppercase text-slate-400\"\r\n                                  >\r\n                                    Select {{ getTokenLabel(segment.token) }}\r\n                                  </div>\r\n                                  @if (\r\n                                    getScopeSegmentOptions(\r\n                                      scope.key,\r\n                                      segmentIndex\r\n                                    ).length === 0\r\n                                  ) {\r\n                                    <div\r\n                                      class=\"text-xs font-medium text-slate-400\"\r\n                                    >\r\n                                      No options\r\n                                    </div>\r\n                                  } @else {\r\n                                    <div class=\"flex flex-col gap-1\">\r\n                                      @for (\r\n                                        option of getScopeSegmentOptions(\r\n                                          scope.key,\r\n                                          segmentIndex\r\n                                        );\r\n                                        track option.contextKey\r\n                                      ) {\r\n                                        <mt-button\r\n                                          type=\"button\"\r\n                                          [label]=\"option.label\"\r\n                                          [icon]=\"\r\n                                            option.contextKey === segment.value\r\n                                              ? 'general.check'\r\n                                              : 'general.minus'\r\n                                          \"\r\n                                          [iconPos]=\"'end'\"\r\n                                          size=\"small\"\r\n                                          severity=\"secondary\"\r\n                                          styleClass=\"w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700\"\r\n                                          (onClick)=\"\r\n                                            onSetScopeSegmentValue(\r\n                                              scope.key,\r\n                                              segmentIndex,\r\n                                              option.contextKey,\r\n                                              segmentPopover\r\n                                            )\r\n                                          \"\r\n                                        ></mt-button>\r\n                                      }\r\n                                    </div>\r\n                                  }\r\n                                </div>\r\n                              </p-popover>\r\n                            }\r\n                            @if (canAddNextScopeSegment(scope.key)) {\r\n                              <div class=\"flex items-center gap-2\">\r\n                                <mt-button\r\n                                  type=\"button\"\r\n                                  icon=\"general.plus\"\r\n                                  size=\"small\"\r\n                                  severity=\"primary\"\r\n                                  styleClass=\"flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-xs font-bold text-white hover:opacity-90\"\r\n                                  (onClick)=\"nextContextPopover.toggle($event)\"\r\n                                ></mt-button>\r\n                                <span class=\"text-xs text-slate-400\">\r\n                                  Add segment\r\n                                </span>\r\n                              </div>\r\n                            }\r\n                            <!-- Popover OUTSIDE the @if block like formula-builder -->\r\n                            <p-popover\r\n                              #nextContextPopover\r\n                              [style]=\"{ width: 'max-content' }\"\r\n                              [dismissable]=\"true\"\r\n                              appendTo=\"body\"\r\n                            >\r\n                              <div class=\"p-2\">\r\n                                <div\r\n                                  class=\"mb-2 text-xs font-semibold uppercase text-slate-400\"\r\n                                >\r\n                                  Add Segment\r\n                                </div>\r\n                                <div class=\"flex flex-col gap-1\">\r\n                                  @for (\r\n                                    token of getScopeNextTokens(scope.key);\r\n                                    track token\r\n                                  ) {\r\n                                    <mt-button\r\n                                      type=\"button\"\r\n                                      [label]=\"getTokenLabel(token)\"\r\n                                      size=\"small\"\r\n                                      severity=\"secondary\"\r\n                                      styleClass=\"w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700\"\r\n                                      (onClick)=\"\r\n                                        onAddScopeSegment(\r\n                                          scope.key,\r\n                                          token,\r\n                                          nextContextPopover\r\n                                        )\r\n                                      \"\r\n                                    ></mt-button>\r\n                                  }\r\n                                </div>\r\n                              </div>\r\n                            </p-popover>\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    </div>\r\n                  }\r\n\r\n                  <!-- Node List -->\r\n                  <div\r\n                    class=\"space-y-4 px-4 pb-4 [&_.cdk-drag-placeholder]:hidden flex-1 overflow-y-auto\"\r\n                    [id]=\"'toolbox-' + scope.key\"\r\n                    cdkDropList\r\n                    cdkDropListSortingDisabled\r\n                    [cdkDropListData]=\"getFilteredProperties(scope.key)\"\r\n                    [cdkDropListEnterPredicate]=\"noReturnPredicate\"\r\n                  >\r\n                    @if (scope.key === \"Current\") {\r\n                      <!-- Search Field (Sticky) -->\r\n                      <div\r\n                        class=\"sticky top-0 bg-surface-0 mb-0 py-3 pb-2 mb-1\"\r\n                      >\r\n                        <mt-text-field\r\n                          [placeholder]=\"t('search-properties')\"\r\n                          [(ngModel)]=\"searchQuery\"\r\n                          icon=\"general.search-lg\"\r\n                        />\r\n                      </div>\r\n                    } @else {\r\n                      <div class=\"sticky top-0 bg-surface-0 py-3\">\r\n                        @if (isScopePropertiesLoading(scope.key)) {\r\n                          <p-skeleton height=\"2.5rem\" styleClass=\"rounded-lg\" />\r\n                        } @else {\r\n                          <mt-select-field\r\n                            class=\"w-full\"\r\n                            [label]=\"''\"\r\n                            [filter]=\"true\"\r\n                            [hasPlaceholderPrefix]=\"false\"\r\n                            placeholder=\"Select...\"\r\n                            [ngModel]=\"getScopeSelectedPropertyKey(scope.key)\"\r\n                            (ngModelChange)=\"\r\n                              setScopeSelectedProperty(scope.key, $event)\r\n                            \"\r\n                            [options]=\"getScopePropertyOptions(scope.key)\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"key\"\r\n                            [size]=\"'small'\"\r\n                          />\r\n                        }\r\n                      </div>\r\n                    }\r\n\r\n                    @if (isScopePropertiesLoading(scope.key)) {\r\n                      <div class=\"space-y-4\">\r\n                        @for (i of [1, 2, 3, 4]; track i) {\r\n                          <p-skeleton height=\"3rem\" styleClass=\"rounded-lg\" />\r\n                        }\r\n                      </div>\r\n                    } @else {\r\n                      @for (\r\n                        node of getFilteredProperties(scope.key);\r\n                        track node.key\r\n                      ) {\r\n                        <div\r\n                          cdkDrag\r\n                          [cdkDragData]=\"node\"\r\n                          class=\"group cursor-move select-none flex items-center gap-3 py-3 px-3 rounded-lg border border-dashed border-surface-300 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\r\n                            class=\"flex-1 text-start text-base font-medium\"\r\n                            >{{ getPropertyLabel(node) }}</span\r\n                          >\r\n\r\n                          <mt-icon\r\n                            class=\"text-lg\"\r\n                            icon=\"general.menu-05\"\r\n                          ></mt-icon>\r\n                        </div>\r\n                      }\r\n\r\n                      @if (getFilteredProperties(scope.key).length === 0) {\r\n                        <div class=\"py-8 text-center text-muted-color\">\r\n                          <p class=\"text-sm\">\r\n                            @if (scope.key === \"Current\" && searchQuery()) {\r\n                              {{ t(\"no-data-found\") }}\r\n                            } @else if (scope.key !== \"Current\") {\r\n                              Select a property\r\n                            } @else if (\r\n                              getScopeProperties(scope.key).length === 0\r\n                            ) {\r\n                              No properties available\r\n                            } @else {\r\n                              All items are in use\r\n                            }\r\n                          </p>\r\n                        </div>\r\n                      }\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-1 gap-4 h-full overflow-y-auto\">\r\n      <div class=\"flex flex-col w-2/3 gap-4 h-full\">\r\n        <mt-card>\r\n          <ng-template #headless>\r\n            <div class=\"p-4 flex items-center gap-3\">\r\n              <mt-button\r\n                icon=\"layout.layout-top\"\r\n                [label]=\"t('add-section')\"\r\n                variant=\"outlined\"\r\n                severity=\"primary\"\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                variant=\"outlined\"\r\n                severity=\"primary\"\r\n                (onClick)=\"openPreview()\"\r\n                [disabled]=\"isLoading()\"\r\n              ></mt-button>\r\n              <mt-button\r\n                [label]=\"t('validation-rules')\"\r\n                variant=\"outlined\"\r\n                severity=\"primary\"\r\n                (onClick)=\"openValidationRules()\"\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                variant=\"outlined\"\r\n                severity=\"primary\"\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-1 border-primary rounded-xl bg-primary-50 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  </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: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabList, selector: "p-tablist" }, { kind: "component", type: i2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { 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: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading"], outputs: ["onChange"] }, { 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: i5.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: i5.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i5.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: i5.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }] });
+}
+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,
+                        PopoverModule,
+                        Button,
+                        Card,
+                        TextField,
+                        SelectField,
+                        TranslocoDirective,
+                        FBSection,
+                        DragDropModule,
+                        Icon,
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div class=\"flex gap-7 h-full w-full overflow-hidden\" cdkDropListGroup>\r\n    <!-- Properties Sidebar -->\r\n    <mt-card class=\"w-1/5 h-full flex flex-col overflow-hidden\">\r\n      <ng-template #headless>\r\n        <!-- Header -->\r\n        <h3 class=\"text-xl font-semibold px-4 pt-5\">\r\n          {{ t(\"form-elements\") }}\r\n        </h3>\r\n\r\n        @if (isContextLoading()) {\r\n          <!-- Properties Loading Skeleton -->\r\n          <div class=\"flex gap-4 py-3 px-5 mt-4\">\r\n            <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\r\n            <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\r\n          </div>\r\n          <div class=\"py-4 px-5 space-y-5\">\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 if (scopeOptions().length === 0) {\r\n          <!-- No Properties State -->\r\n          <div class=\"flex-1 flex items-center justify-center p-4\">\r\n            <p class=\"text-sm font-semibold text-gray-500\">\r\n              {{ t(\"no-data-found\") }}\r\n            </p>\r\n          </div>\r\n        } @else {\r\n          <!-- Scope Tabs using PrimeNG -->\r\n          <p-tabs\r\n            [value]=\"activeScope()\"\r\n            (valueChange)=\"onScopeChange($event)\"\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 (scope of scopeOptions(); track scope.key) {\r\n                <p-tab [value]=\"scope.key\">{{ scope.label }}</p-tab>\r\n              }\r\n            </p-tablist>\r\n            <p-tabpanels\r\n              class=\"!bg-transparent !p-0 !pb-3 flex-1 overflow-hidden\"\r\n            >\r\n              @for (scope of scopeOptions(); track scope.key) {\r\n                <p-tabpanel [value]=\"scope.key\" class=\"h-full flex flex-col\">\r\n                  @if (scope.key !== \"Current\") {\r\n                    <div class=\"px-4 pt-3 pb-2\">\r\n                      <div\r\n                        class=\"flex flex-col gap-3 rounded-lg bg-slate-50 px-3 py-2 dark:bg-slate-800/50\"\r\n                      >\r\n                        <div class=\"flex items-center gap-2\">\r\n                          <span\r\n                            class=\"shrink-0 text-xs font-semibold uppercase tracking-wider text-slate-400\"\r\n                          >\r\n                            Path\r\n                          </span>\r\n                          <div\r\n                            class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                          ></div>\r\n                          <span class=\"text-xs font-semibold text-slate-600\">\r\n                            {{ scope.label }}\r\n                          </span>\r\n                        </div>\r\n                        @if (getScopeBaseContexts(scope.key).length === 0) {\r\n                          <span class=\"text-xs italic text-slate-400\">\r\n                            No context available\r\n                          </span>\r\n                        } @else {\r\n                          <div class=\"flex flex-col gap-1.5\">\r\n                            @for (\r\n                              segment of getScopePath(scope.key);\r\n                              track $index;\r\n                              let segmentIndex = $index;\r\n                              let isLast = $last\r\n                            ) {\r\n                              <div\r\n                                class=\"flex items-center gap-1 py-0.5 px-2 border border-gray-200 rounded bg-white dark:bg-slate-800 dark:border-slate-600\"\r\n                              >\r\n                                <div\r\n                                  class=\"flex-1 min-w-0 text-xs font-medium text-slate-600 dark:text-slate-300 truncate cursor-pointer\"\r\n                                  (click)=\"segmentPopover.toggle($event)\"\r\n                                >\r\n                                  {{\r\n                                    getScopeSegmentLabel(\r\n                                      scope.key,\r\n                                      segmentIndex\r\n                                    )\r\n                                  }}\r\n                                </div>\r\n                                <mt-button\r\n                                  type=\"button\"\r\n                                  icon=\"arrow.chevron-down\"\r\n                                  [outlined]=\"true\"\r\n                                  size=\"small\"\r\n                                  severity=\"secondary\"\r\n                                  styleClass=\"!p-0.5 !min-w-0\"\r\n                                  (onClick)=\"segmentPopover.toggle($event)\"\r\n                                ></mt-button>\r\n                                @if (isLast && canRemoveScopePath(scope.key)) {\r\n                                  <mt-button\r\n                                    type=\"button\"\r\n                                    icon=\"general.trash-01\"\r\n                                    [outlined]=\"true\"\r\n                                    size=\"small\"\r\n                                    severity=\"danger\"\r\n                                    styleClass=\"!p-0.5 !min-w-0\"\r\n                                    (onClick)=\"removeScopePath(scope.key)\"\r\n                                  ></mt-button>\r\n                                }\r\n                              </div>\r\n                              <p-popover\r\n                                #segmentPopover\r\n                                [style]=\"{ width: 'max-content' }\"\r\n                                [dismissable]=\"true\"\r\n                              >\r\n                                <div class=\"p-2\">\r\n                                  <div\r\n                                    class=\"mb-2 text-xs font-semibold uppercase text-slate-400\"\r\n                                  >\r\n                                    Select {{ getTokenLabel(segment.token) }}\r\n                                  </div>\r\n                                  @if (\r\n                                    getScopeSegmentOptions(\r\n                                      scope.key,\r\n                                      segmentIndex\r\n                                    ).length === 0\r\n                                  ) {\r\n                                    <div\r\n                                      class=\"text-xs font-medium text-slate-400\"\r\n                                    >\r\n                                      No options\r\n                                    </div>\r\n                                  } @else {\r\n                                    <div class=\"flex flex-col gap-1\">\r\n                                      @for (\r\n                                        option of getScopeSegmentOptions(\r\n                                          scope.key,\r\n                                          segmentIndex\r\n                                        );\r\n                                        track option.contextKey\r\n                                      ) {\r\n                                        <mt-button\r\n                                          type=\"button\"\r\n                                          [label]=\"option.label\"\r\n                                          [icon]=\"\r\n                                            option.contextKey === segment.value\r\n                                              ? 'general.check'\r\n                                              : 'general.minus'\r\n                                          \"\r\n                                          [iconPos]=\"'end'\"\r\n                                          size=\"small\"\r\n                                          severity=\"secondary\"\r\n                                          styleClass=\"w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700\"\r\n                                          (onClick)=\"\r\n                                            onSetScopeSegmentValue(\r\n                                              scope.key,\r\n                                              segmentIndex,\r\n                                              option.contextKey,\r\n                                              segmentPopover\r\n                                            )\r\n                                          \"\r\n                                        ></mt-button>\r\n                                      }\r\n                                    </div>\r\n                                  }\r\n                                </div>\r\n                              </p-popover>\r\n                            }\r\n                            @if (canAddNextScopeSegment(scope.key)) {\r\n                              <div class=\"flex items-center gap-2\">\r\n                                <mt-button\r\n                                  type=\"button\"\r\n                                  icon=\"general.plus\"\r\n                                  size=\"small\"\r\n                                  severity=\"primary\"\r\n                                  styleClass=\"flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-xs font-bold text-white hover:opacity-90\"\r\n                                  (onClick)=\"nextContextPopover.toggle($event)\"\r\n                                ></mt-button>\r\n                                <span class=\"text-xs text-slate-400\">\r\n                                  Add segment\r\n                                </span>\r\n                              </div>\r\n                            }\r\n                            <!-- Popover OUTSIDE the @if block like formula-builder -->\r\n                            <p-popover\r\n                              #nextContextPopover\r\n                              [style]=\"{ width: 'max-content' }\"\r\n                              [dismissable]=\"true\"\r\n                              appendTo=\"body\"\r\n                            >\r\n                              <div class=\"p-2\">\r\n                                <div\r\n                                  class=\"mb-2 text-xs font-semibold uppercase text-slate-400\"\r\n                                >\r\n                                  Add Segment\r\n                                </div>\r\n                                <div class=\"flex flex-col gap-1\">\r\n                                  @for (\r\n                                    token of getScopeNextTokens(scope.key);\r\n                                    track token\r\n                                  ) {\r\n                                    <mt-button\r\n                                      type=\"button\"\r\n                                      [label]=\"getTokenLabel(token)\"\r\n                                      size=\"small\"\r\n                                      severity=\"secondary\"\r\n                                      styleClass=\"w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700\"\r\n                                      (onClick)=\"\r\n                                        onAddScopeSegment(\r\n                                          scope.key,\r\n                                          token,\r\n                                          nextContextPopover\r\n                                        )\r\n                                      \"\r\n                                    ></mt-button>\r\n                                  }\r\n                                </div>\r\n                              </div>\r\n                            </p-popover>\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    </div>\r\n                  }\r\n\r\n                  <!-- Node List -->\r\n                  <div\r\n                    class=\"space-y-4 px-4 pb-4 [&_.cdk-drag-placeholder]:hidden flex-1 overflow-y-auto\"\r\n                    [id]=\"'toolbox-' + scope.key\"\r\n                    cdkDropList\r\n                    cdkDropListSortingDisabled\r\n                    [cdkDropListData]=\"getFilteredProperties(scope.key)\"\r\n                    [cdkDropListEnterPredicate]=\"noReturnPredicate\"\r\n                  >\r\n                    @if (scope.key === \"Current\") {\r\n                      <!-- Search Field (Sticky) -->\r\n                      <div\r\n                        class=\"sticky top-0 bg-surface-0 mb-0 py-3 pb-2 mb-1\"\r\n                      >\r\n                        <mt-text-field\r\n                          [placeholder]=\"t('search-properties')\"\r\n                          [(ngModel)]=\"searchQuery\"\r\n                          icon=\"general.search-lg\"\r\n                        />\r\n                      </div>\r\n                    } @else {\r\n                      <div class=\"sticky top-0 bg-surface-0 py-3\">\r\n                        @if (isScopePropertiesLoading(scope.key)) {\r\n                          <p-skeleton height=\"2.5rem\" styleClass=\"rounded-lg\" />\r\n                        } @else {\r\n                          <mt-select-field\r\n                            class=\"w-full\"\r\n                            [label]=\"''\"\r\n                            [filter]=\"true\"\r\n                            [hasPlaceholderPrefix]=\"false\"\r\n                            placeholder=\"Select...\"\r\n                            [ngModel]=\"getScopeSelectedPropertyKey(scope.key)\"\r\n                            (ngModelChange)=\"\r\n                              setScopeSelectedProperty(scope.key, $event)\r\n                            \"\r\n                            [options]=\"getScopePropertyOptions(scope.key)\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"key\"\r\n                            [size]=\"'small'\"\r\n                          />\r\n                        }\r\n                      </div>\r\n                    }\r\n\r\n                    @if (isScopePropertiesLoading(scope.key)) {\r\n                      <div class=\"space-y-4\">\r\n                        @for (i of [1, 2, 3, 4]; track i) {\r\n                          <p-skeleton height=\"3rem\" styleClass=\"rounded-lg\" />\r\n                        }\r\n                      </div>\r\n                    } @else {\r\n                      @for (\r\n                        node of getFilteredProperties(scope.key);\r\n                        track node.key\r\n                      ) {\r\n                        <div\r\n                          cdkDrag\r\n                          [cdkDragData]=\"node\"\r\n                          class=\"group cursor-move select-none flex items-center gap-3 py-3 px-3 rounded-lg border border-dashed border-surface-300 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\r\n                            class=\"flex-1 text-start text-base font-medium\"\r\n                            >{{ getPropertyLabel(node) }}</span\r\n                          >\r\n\r\n                          <mt-icon\r\n                            class=\"text-lg\"\r\n                            icon=\"general.menu-05\"\r\n                          ></mt-icon>\r\n                        </div>\r\n                      }\r\n\r\n                      @if (getFilteredProperties(scope.key).length === 0) {\r\n                        <div class=\"py-8 text-center text-muted-color\">\r\n                          <p class=\"text-sm\">\r\n                            @if (scope.key === \"Current\" && searchQuery()) {\r\n                              {{ t(\"no-data-found\") }}\r\n                            } @else if (scope.key !== \"Current\") {\r\n                              Select a property\r\n                            } @else if (\r\n                              getScopeProperties(scope.key).length === 0\r\n                            ) {\r\n                              No properties available\r\n                            } @else {\r\n                              All items are in use\r\n                            }\r\n                          </p>\r\n                        </div>\r\n                      }\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-1 gap-4 h-full overflow-y-auto\">\r\n      <div class=\"flex flex-col w-2/3 gap-4 h-full\">\r\n        <mt-card>\r\n          <ng-template #headless>\r\n            <div class=\"p-4 flex items-center gap-3\">\r\n              <mt-button\r\n                icon=\"layout.layout-top\"\r\n                [label]=\"t('add-section')\"\r\n                variant=\"outlined\"\r\n                severity=\"primary\"\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                variant=\"outlined\"\r\n                severity=\"primary\"\r\n                (onClick)=\"openPreview()\"\r\n                [disabled]=\"isLoading()\"\r\n              ></mt-button>\r\n              <mt-button\r\n                [label]=\"t('validation-rules')\"\r\n                variant=\"outlined\"\r\n                severity=\"primary\"\r\n                (onClick)=\"openValidationRules()\"\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                variant=\"outlined\"\r\n                severity=\"primary\"\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-1 border-primary rounded-xl bg-primary-50 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  </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: () => [], propDecorators: { popovers: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => Popover), { isSignal: true }] }] } });
 
 /*
  * Public API Surface of form-builder
@@ -1924,5 +3190,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddField, AddSection, DeleteField, DeleteSection, FormBuilder, FormBuilderActionKey, FormBuilderFacade, FormBuilderState, GetFormConfiguration, MoveField, ReorderFields, ResetFormBuilderState, ResetFormConfiguration, SetModuleInfo, SetProperties, UpdateField, UpdateSection };
+export { AddField, AddSection, AddValidation, DeleteField, DeleteSection, DeleteValidation, FormBuilder, FormBuilderActionKey, FormBuilderFacade, FormBuilderState, GetFormConfiguration, MoveField, ReorderFields, ResetFormBuilderState, ResetFormConfiguration, SetModuleInfo, SetProperties, ToggleValidationActive, UpdateField, UpdateSection, UpdateValidation };
 //# sourceMappingURL=masterteam-form-builder.mjs.map