@masterteam/form-builder 0.0.5 → 0.0.7

package/fesm2022/masterteam-form-builder.mjs

@@ -1,19 +1,20 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, computed, input, signal, viewChild, Component, effect, output } from '@angular/core';
-import * as i4 from '@angular/common';
+import { inject, Injectable, computed, input, signal, viewChild, Component, effect, output, DestroyRef } from '@angular/core';
+import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormGroup, FormsModule } from '@angular/forms';
-import * as i1$1 from 'primeng/tabs';
+import * as i2 from 'primeng/tabs';
 import { TabsModule } from 'primeng/tabs';
-import * as i2 from 'primeng/skeleton';
+import * as i3 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import { Button } from '@masterteam/components/button';
 import { Card } from '@masterteam/components/card';
+import { TextField } from '@masterteam/components/text-field';
 import { ModalService } from '@masterteam/components/modal';
 import { ConfirmationService } from '@masterteam/components/confirmation';
 import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
-import * as i3 from '@angular/cdk/drag-drop';
+import * as i4 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';
@@ -23,9 +24,12 @@ 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';
 
 // ============================================================================
 // Module Configuration Actions
@@ -142,6 +146,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
@@ -161,6 +200,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) {
@@ -216,6 +260,9 @@ let FormBuilderState = class FormBuilderState extends CrudStateBase {
     static getProperties(state) {
         return state?.properties ?? [];
     }
+    static getValidations(state) {
+        return state?.formConfiguration?.validations ?? [];
+    }
     // ============================================================================
     // Module Configuration Actions
     // ============================================================================
@@ -254,7 +301,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,
             }),
         });
     }
@@ -267,7 +316,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,
             }),
         });
     }
@@ -660,6 +711,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 });
 };
@@ -702,6 +835,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);
@@ -720,6 +865,9 @@ __decorate([
 __decorate([
     Selector()
 ], FormBuilderState, "getProperties", null);
+__decorate([
+    Selector()
+], FormBuilderState, "getValidations", null);
 FormBuilderState = __decorate([
     State({
         name: 'formBuilder',
@@ -728,7 +876,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);
@@ -739,6 +887,7 @@ 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);
     // ============================================================================
@@ -753,6 +902,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
     // ============================================================================
@@ -773,6 +926,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
     // ============================================================================
@@ -824,6 +985,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' });
 }
@@ -1149,7 +1325,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"], outputs: ["formulaChange", "tokensChange", "onBlur", "onFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FBFieldConditions, decorators: [{
             type: Component,
@@ -1740,6 +1916,573 @@ 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 }] }] } });
 
+/**
+ * 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)'],
+            },
+            {
+                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)'],
+            },
+            {
+                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)'],
+            },
+            {
+                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"], 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.id, 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 = propsMap.get(field.propertyId);
+                const propName = prop?.name;
+                const name = typeof propName === 'string'
+                    ? propName
+                    : (propName?.[lang] ??
+                        propName?.['en'] ??
+                        `Property ${field.propertyId}`);
+                fields.push({
+                    key: name,
+                    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');
+        });
+    }
+    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 FormBuilder {
     modalService = inject(ModalService);
     confirmationService = inject(ConfirmationService);
@@ -1748,6 +2491,7 @@ class FormBuilder {
     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;
@@ -1800,6 +2544,21 @@ class FormBuilder {
         }
         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(() => {
@@ -1869,6 +2628,15 @@ class FormBuilder {
             },
         });
     }
+    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',
@@ -1880,7 +2648,7 @@ class FormBuilder {
     }
     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 availableTabs(); track tab.id) {\r\n                <p-tabpanel [value]=\"tab.id\" class=\"h-full\">\r\n                  <!-- Node List -->\r\n                  <div\r\n                    class=\"space-y-4 p-4 [&_.cdk-drag-placeholder]:hidden h-full overflow-y-auto\"\r\n                    [id]=\"'toolbox-' + tab.id\"\r\n                    cdkDropList\r\n                    cdkDropListSortingDisabled\r\n                    [cdkDropListData]=\"tab.properties\"\r\n                    [cdkDropListEnterPredicate]=\"noReturnPredicate\"\r\n                  >\r\n                    @for (node of tab.properties; track $index) {\r\n                      <div\r\n                        cdkDrag\r\n                        [cdkDragData]=\"node\"\r\n                        class=\"group cursor-move select-none 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                          All {{ tab.title }} items are in use\r\n                        </p>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </p-tabpanel>\r\n              }\r\n            </p-tabpanels>\r\n          </p-tabs>\r\n        }\r\n      </ng-template>\r\n    </mt-card>\r\n\r\n    <!-- Main Canvas Area -->\r\n    <div class=\"flex flex-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: "ngmodule", type: TabsModule }, { kind: "component", type: i1$1.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i1$1.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i1$1.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i1$1.TabList, selector: "p-tablist" }, { kind: "component", type: i1$1.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: FBSection, selector: "mt-fb-section", inputs: ["section", "sectionsCount", "allSections"], outputs: ["onFieldDrop"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }] });
+    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                [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: "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,
@@ -1891,11 +2659,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         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 availableTabs(); track tab.id) {\r\n                <p-tabpanel [value]=\"tab.id\" class=\"h-full\">\r\n                  <!-- Node List -->\r\n                  <div\r\n                    class=\"space-y-4 p-4 [&_.cdk-drag-placeholder]:hidden h-full overflow-y-auto\"\r\n                    [id]=\"'toolbox-' + tab.id\"\r\n                    cdkDropList\r\n                    cdkDropListSortingDisabled\r\n                    [cdkDropListData]=\"tab.properties\"\r\n                    [cdkDropListEnterPredicate]=\"noReturnPredicate\"\r\n                  >\r\n                    @for (node of tab.properties; track $index) {\r\n                      <div\r\n                        cdkDrag\r\n                        [cdkDragData]=\"node\"\r\n                        class=\"group cursor-move select-none 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                          All {{ tab.title }} items are in use\r\n                        </p>\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </p-tabpanel>\r\n              }\r\n            </p-tabpanels>\r\n          </p-tabs>\r\n        }\r\n      </ng-template>\r\n    </mt-card>\r\n\r\n    <!-- Main Canvas Area -->\r\n    <div class=\"flex flex-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"] }]
+                    ], 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                [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: () => [] });
 
 /*
@@ -1906,5 +2675,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