@masterteam/form-builder 0.0.37 → 0.0.39

package/assets/i18n/ar.json

@@ -52,6 +52,10 @@
     "is-read-description": "عند التعطيل، سيتم إخفاء هذا الحقل عن المستخدمين",
     "is-write": "قابل للتعديل",
     "is-write-description": "عند التعطيل، سيكون هذا الحقل للقراءة فقط للمستخدمين",
+    "edit-label": "تسمية مخصصة",
+    "edit-label-description": "استبدل التسمية الافتراضية للحقل بنص خاص بك لكل لغة",
+    "label-en": "التسمية (بالإنجليزية)",
+    "label-ar": "التسمية (بالعربية)",
     "hidden": "مخفي",
     "read-only": "للقراءة فقط",
     "sections": "أقسام",

package/assets/i18n/en.json

@@ -52,6 +52,10 @@
     "is-read-description": "When disabled, this field will be hidden from users",
     "is-write": "Editable",
     "is-write-description": "When disabled, this field will be read-only for users",
+    "edit-label": "Custom Label",
+    "edit-label-description": "Override the default field label with your own text per language",
+    "label-en": "Label (English)",
+    "label-ar": "Label (Arabic)",
     "hidden": "Hidden",
     "read-only": "Read Only",
     "sections": "Sections",

package/fesm2022/masterteam-form-builder.mjs

@@ -32,9 +32,9 @@ import { CONDITION_FUNCTION_CATEGORIES, CONDITION_OPERATORS, FormulaToolbar, For
 import { Tooltip } from '@masterteam/components/tooltip';
 import { ClientForm } from '@masterteam/forms/client-form';
 import { Table } from '@masterteam/components/table';
+import { startWith, of, map, catchError } from 'rxjs';
 import { RadioCardsField } from '@masterteam/components/radio-cards-field';
 import { FormulaBuilder } from '@masterteam/formula-builder';
-import { of, map, catchError } from 'rxjs';
 
 // ============================================================================
 // Module Configuration Actions
@@ -80,6 +80,9 @@ class GetFormConfiguration {
 class ResetFormConfiguration {
     static type = '[FormBuilder] Reset Form Configuration';
 }
+class ResetFormFromAppForm {
+    static type = '[FormBuilder] Reset Form From App Form';
+}
 class UpdateFormSettings {
     payload;
     static type = '[FormBuilder] Update Form Settings';
@@ -216,6 +219,7 @@ var FormBuilderActionKey;
     // Form Configuration
     FormBuilderActionKey["GetFormConfiguration"] = "getFormConfiguration";
     FormBuilderActionKey["ResetFormConfiguration"] = "resetFormConfiguration";
+    FormBuilderActionKey["ResetFormFromAppForm"] = "resetFormFromAppForm";
     FormBuilderActionKey["UpdateFormSettings"] = "updateFormSettings";
     // Section CRUD
     FormBuilderActionKey["AddSection"] = "addSection";
@@ -374,6 +378,19 @@ let FormBuilderState = class FormBuilderState extends CrudStateBase {
             }),
         });
     }
+    resetFormFromAppForm(ctx) {
+        const state = ctx.getState();
+        const apiPath = `${this.getApiPath(state)}/reset-from-app-form`;
+        const req$ = this.http.post(apiPath, {});
+        return handleApiRequest({
+            ctx,
+            key: FormBuilderActionKey.ResetFormFromAppForm,
+            request$: req$,
+            onSuccess: (res) => ({
+                formConfiguration: this.normalizeFormConfiguration(res.data),
+            }),
+        });
+    }
     updateFormSettings(ctx, action) {
         const state = ctx.getState();
         const currentConfig = state.formConfiguration;
@@ -939,6 +956,9 @@ __decorate([
 __decorate([
     Action(ResetFormConfiguration)
 ], FormBuilderState.prototype, "resetFormConfiguration", null);
+__decorate([
+    Action(ResetFormFromAppForm)
+], FormBuilderState.prototype, "resetFormFromAppForm", null);
 __decorate([
     Action(UpdateFormSettings)
 ], FormBuilderState.prototype, "updateFormSettings", null);
@@ -1022,7 +1042,7 @@ FormBuilderState = __decorate([
 ], FormBuilderState);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FormBuilderState, decorators: [{
             type: Injectable
-        }], propDecorators: { setModuleInfo: [], resetState: [], setProperties: [], setPreviewInfo: [], getFormConfiguration: [], resetFormConfiguration: [], updateFormSettings: [], addSection: [], updateSection: [], reorderSections: [], deleteSection: [], addField: [], updateField: [], deleteField: [], reorderFields: [], moveField: [], addValidation: [], updateValidation: [], deleteValidation: [], toggleValidationActive: [] } });
+        }], propDecorators: { setModuleInfo: [], resetState: [], setProperties: [], setPreviewInfo: [], getFormConfiguration: [], resetFormConfiguration: [], resetFormFromAppForm: [], updateFormSettings: [], addSection: [], updateSection: [], reorderSections: [], deleteSection: [], addField: [], updateField: [], deleteField: [], reorderFields: [], moveField: [], addValidation: [], updateValidation: [], deleteValidation: [], toggleValidationActive: [] } });
 
 class FormBuilderFacade {
     store = inject(Store);
@@ -1045,6 +1065,9 @@ class FormBuilderFacade {
     // ============================================================================
     isLoadingFormConfiguration = computed(() => this.stateSignal().loadingActive.includes(FormBuilderActionKey.GetFormConfiguration), ...(ngDevMode ? [{ debugName: "isLoadingFormConfiguration" }] : /* istanbul ignore next */ []));
     isResettingFormConfiguration = computed(() => this.stateSignal().loadingActive.includes(FormBuilderActionKey.ResetFormConfiguration), ...(ngDevMode ? [{ debugName: "isResettingFormConfiguration" }] : /* istanbul ignore next */ []));
+    isResettingFormFromAppForm = computed(() => this.stateSignal().loadingActive.includes(FormBuilderActionKey.ResetFormFromAppForm), ...(ngDevMode ? [{ debugName: "isResettingFormFromAppForm" }] : /* istanbul ignore next */ []));
+    resetFormFromAppFormError = computed(() => this.stateSignal().errors[FormBuilderActionKey.ResetFormFromAppForm] ??
+        null, ...(ngDevMode ? [{ debugName: "resetFormFromAppFormError" }] : /* istanbul ignore next */ []));
     isUpdatingFormSettings = computed(() => this.stateSignal().loadingActive.includes(FormBuilderActionKey.UpdateFormSettings), ...(ngDevMode ? [{ debugName: "isUpdatingFormSettings" }] : /* istanbul ignore next */ []));
     isAddingSection = computed(() => this.stateSignal().loadingActive.includes(FormBuilderActionKey.AddSection), ...(ngDevMode ? [{ debugName: "isAddingSection" }] : /* istanbul ignore next */ []));
     isUpdatingSection = computed(() => this.stateSignal().loadingActive.includes(FormBuilderActionKey.UpdateSection), ...(ngDevMode ? [{ debugName: "isUpdatingSection" }] : /* istanbul ignore next */ []));
@@ -1110,6 +1133,9 @@ class FormBuilderFacade {
     resetFormConfiguration() {
         return this.store.dispatch(new ResetFormConfiguration());
     }
+    resetFormFromAppForm() {
+        return this.store.dispatch(new ResetFormFromAppForm());
+    }
     updateFormSettings(payload) {
         return this.store.dispatch(new UpdateFormSettings(payload));
     }
@@ -1301,6 +1327,12 @@ class FBFieldForm {
     showHideControl = new FormControl(false);
     isReadControl = new FormControl(true);
     isWriteControl = new FormControl(true);
+    // Custom label override
+    editLabelControl = new FormControl(false);
+    labelEnControl = new FormControl('', { nonNullable: true });
+    labelArControl = new FormControl('', { nonNullable: true });
+    /** Whether the field already had a custom label when the dialog opened. */
+    hadInitialLabel = signal(false, ...(ngDevMode ? [{ debugName: "hadInitialLabel" }] : /* istanbul ignore next */ []));
     formConfig = {
         sections: [
             {
@@ -1398,6 +1430,14 @@ class FBFieldForm {
                 // isRead/isWrite controls
                 this.isReadControl.patchValue(data.isRead !== false);
                 this.isWriteControl.patchValue(data.isWrite !== false);
+                // Custom label override
+                const label = data.label;
+                const hasLabel = !!label &&
+                    ((label.en ?? '').trim() !== '' || (label.ar ?? '').trim() !== '');
+                this.hadInitialLabel.set(hasLabel);
+                this.editLabelControl.patchValue(hasLabel);
+                this.labelEnControl.patchValue(label?.en ?? '');
+                this.labelArControl.patchValue(label?.ar ?? '');
             }
         });
         // Cascade: isWrite=true forces isRead=true
@@ -1440,6 +1480,19 @@ class FBFieldForm {
             payload['conditionalDisplayFormula'] = this.showHideControl.value
                 ? this.conditionalDisplayFormula()
                 : null;
+            // Custom label override:
+            // - toggle on  → send the entered ar/en values
+            // - toggle off but a label existed → reset to the inherited label
+            // - toggle off and no label existed → omit (backend keeps as-is)
+            if (this.editLabelControl.value) {
+                payload['label'] = {
+                    ar: this.labelArControl.value.trim(),
+                    en: this.labelEnControl.value.trim(),
+                };
+            }
+            else if (this.hadInitialLabel()) {
+                payload['useInheritedLabel'] = true;
+            }
         }
         this.submitting.set(true);
         this.facade.updateField(sectionId, field.id, payload).subscribe({
@@ -1487,7 +1540,7 @@ class FBFieldForm {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBFieldForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FBFieldForm, isStandalone: true, selector: "mt-fb-field-form", inputs: { sectionId: { classPropertyName: "sectionId", publicName: "sectionId", isSignal: true, isRequired: false, transformFunction: null }, initialData: { classPropertyName: "initialData", publicName: "initialData", isSignal: true, isRequired: false, transformFunction: null }, allSections: { classPropertyName: "allSections", publicName: "allSections", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\n  <div\n    [class]=\"[\n      modalService.contentClass,\n      'min-w-0',\n      'p-4',\n      'overflow-y-hidden!',\n      'max-[640px]:p-3',\n    ]\"\n  >\n    <div class=\"mt-2 flex h-full min-h-0 flex-col gap-4 overflow-y-auto pb-10\">\n      <mt-dynamic-form\n        [formConfig]=\"activeFormConfig()\"\n        [formControl]=\"formControl\"\n      >\n      </mt-dynamic-form>\n\n      <!-- isRead Toggle -->\n      <mt-toggle-field\n        toggleShape=\"card\"\n        [label]=\"t('is-read')\"\n        [descriptionCard]=\"t('is-read-description')\"\n        icon=\"general.eye\"\n        [formControl]=\"isReadControl\"\n      ></mt-toggle-field>\n\n      <!-- isWrite Toggle -->\n      <mt-toggle-field\n        toggleShape=\"card\"\n        [label]=\"t('is-write')\"\n        [descriptionCard]=\"t('is-write-description')\"\n        icon=\"general.edit-02\"\n        [formControl]=\"isWriteControl\"\n      ></mt-toggle-field>\n\n      @if (!isManageProperties()) {\n        <!-- Show/Hide Toggle with Set Conditions -->\n        <mt-toggle-field\n          toggleShape=\"card\"\n          [label]=\"t('show-hide')\"\n          [descriptionCard]=\"t('show-hide-description')\"\n          icon=\"general.eye\"\n          [formControl]=\"showHideControl\"\n          class=\"mt-3\"\n        >\n          <ng-template #toggleCardBottom>\n            @if (showHideControl.value) {\n              <div class=\"mt-3\">\n                <mt-button\n                  [label]=\"t('set-conditions')\"\n                  size=\"small\"\n                  styleClass=\"w-full sm:w-auto\"\n                  (onClick)=\"onSetConditions()\"\n                ></mt-button>\n              </div>\n            }\n          </ng-template>\n        </mt-toggle-field>\n      }\n    </div>\n  </div>\n\n  <div\n    [class]=\"[\n      modalService.footerClass,\n      '!h-auto',\n      'min-h-0',\n      'flex-col',\n      'gap-2',\n      'sm:flex-row',\n      'sm:items-center',\n      'sm:justify-end',\n    ]\"\n  >\n    @if (initialData() && !isManageProperties()) {\n      <mt-button\n        [tooltip]=\"t('delete')\"\n        severity=\"danger\"\n        [variant]=\"'outlined'\"\n        icon=\"general.trash-01\"\n        [loading]=\"deleting()\"\n        [disabled]=\"submitting()\"\n        (onClick)=\"onDelete($event)\"\n        class=\"self-start sm:me-auto\"\n      ></mt-button>\n    }\n    <mt-button\n      [label]=\"t('cancel')\"\n      variant=\"outlined\"\n      [disabled]=\"submitting() || deleting()\"\n      styleClass=\"w-full sm:w-auto\"\n      (onClick)=\"onCancel()\"\n    >\n    </mt-button>\n    <mt-button\n      [disabled]=\"!formControl.valid || deleting()\"\n      [label]=\"t('save')\"\n      severity=\"primary\"\n      [loading]=\"submitting()\"\n      styleClass=\"w-full sm:w-auto\"\n      (onClick)=\"onSave()\"\n    >\n    </mt-button>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FBFieldForm, isStandalone: true, selector: "mt-fb-field-form", inputs: { sectionId: { classPropertyName: "sectionId", publicName: "sectionId", isSignal: true, isRequired: false, transformFunction: null }, initialData: { classPropertyName: "initialData", publicName: "initialData", isSignal: true, isRequired: false, transformFunction: null }, allSections: { classPropertyName: "allSections", publicName: "allSections", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div\r\n    [class]=\"[\r\n      modalService.contentClass,\r\n      'min-w-0',\r\n      'p-4',\r\n      'overflow-y-hidden!',\r\n      'max-[640px]:p-3',\r\n    ]\"\r\n  >\r\n    <div class=\"mt-2 flex h-full min-h-0 flex-col gap-4 overflow-y-auto pb-10\">\r\n      <mt-dynamic-form\r\n        [formConfig]=\"activeFormConfig()\"\r\n        [formControl]=\"formControl\"\r\n      >\r\n      </mt-dynamic-form>\r\n\r\n      <!-- isRead Toggle -->\r\n      <mt-toggle-field\r\n        toggleShape=\"card\"\r\n        [label]=\"t('is-read')\"\r\n        [descriptionCard]=\"t('is-read-description')\"\r\n        icon=\"general.eye\"\r\n        [formControl]=\"isReadControl\"\r\n      ></mt-toggle-field>\r\n\r\n      <!-- isWrite Toggle -->\r\n      <mt-toggle-field\r\n        toggleShape=\"card\"\r\n        [label]=\"t('is-write')\"\r\n        [descriptionCard]=\"t('is-write-description')\"\r\n        icon=\"general.edit-02\"\r\n        [formControl]=\"isWriteControl\"\r\n      ></mt-toggle-field>\r\n\r\n      @if (!isManageProperties()) {\r\n        <!-- Edit Label Toggle with localized label inputs -->\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('edit-label')\"\r\n          [descriptionCard]=\"t('edit-label-description')\"\r\n          icon=\"general.translate-01\"\r\n          [formControl]=\"editLabelControl\"\r\n        >\r\n          <ng-template #toggleCardBottom>\r\n            @if (editLabelControl.value) {\r\n              <div class=\"mt-3 grid gap-3\">\r\n                <mt-text-field\r\n                  [label]=\"t('label-en')\"\r\n                  [formControl]=\"labelEnControl\"\r\n                ></mt-text-field>\r\n                <mt-text-field\r\n                  [label]=\"t('label-ar')\"\r\n                  [formControl]=\"labelArControl\"\r\n                ></mt-text-field>\r\n              </div>\r\n            }\r\n          </ng-template>\r\n        </mt-toggle-field>\r\n\r\n        <!-- Show/Hide Toggle with Set Conditions -->\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('show-hide')\"\r\n          [descriptionCard]=\"t('show-hide-description')\"\r\n          icon=\"general.eye\"\r\n          [formControl]=\"showHideControl\"\r\n          class=\"mt-3\"\r\n        >\r\n          <ng-template #toggleCardBottom>\r\n            @if (showHideControl.value) {\r\n              <div class=\"mt-3\">\r\n                <mt-button\r\n                  [label]=\"t('set-conditions')\"\r\n                  size=\"small\"\r\n                  styleClass=\"w-full sm:w-auto\"\r\n                  (onClick)=\"onSetConditions()\"\r\n                ></mt-button>\r\n              </div>\r\n            }\r\n          </ng-template>\r\n        </mt-toggle-field>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    [class]=\"[\r\n      modalService.footerClass,\r\n      '!h-auto',\r\n      'min-h-0',\r\n      'flex-col',\r\n      'gap-2',\r\n      'sm:flex-row',\r\n      'sm:items-center',\r\n      'sm:justify-end',\r\n    ]\"\r\n  >\r\n    @if (initialData() && !isManageProperties()) {\r\n      <mt-button\r\n        [tooltip]=\"t('delete')\"\r\n        severity=\"danger\"\r\n        [variant]=\"'outlined'\"\r\n        icon=\"general.trash-01\"\r\n        [loading]=\"deleting()\"\r\n        [disabled]=\"submitting()\"\r\n        (onClick)=\"onDelete($event)\"\r\n        class=\"self-start sm:me-auto\"\r\n      ></mt-button>\r\n    }\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      [disabled]=\"submitting() || deleting()\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"onCancel()\"\r\n    >\r\n    </mt-button>\r\n    <mt-button\r\n      [disabled]=\"!formControl.valid || deleting()\"\r\n      [label]=\"t('save')\"\r\n      severity=\"primary\"\r\n      [loading]=\"submitting()\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"onSave()\"\r\n    >\r\n    </mt-button>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBFieldForm, decorators: [{
             type: Component,
@@ -1497,7 +1550,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         DynamicForm,
                         Button,
                         ToggleField,
-                    ], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\n  <div\n    [class]=\"[\n      modalService.contentClass,\n      'min-w-0',\n      'p-4',\n      'overflow-y-hidden!',\n      'max-[640px]:p-3',\n    ]\"\n  >\n    <div class=\"mt-2 flex h-full min-h-0 flex-col gap-4 overflow-y-auto pb-10\">\n      <mt-dynamic-form\n        [formConfig]=\"activeFormConfig()\"\n        [formControl]=\"formControl\"\n      >\n      </mt-dynamic-form>\n\n      <!-- isRead Toggle -->\n      <mt-toggle-field\n        toggleShape=\"card\"\n        [label]=\"t('is-read')\"\n        [descriptionCard]=\"t('is-read-description')\"\n        icon=\"general.eye\"\n        [formControl]=\"isReadControl\"\n      ></mt-toggle-field>\n\n      <!-- isWrite Toggle -->\n      <mt-toggle-field\n        toggleShape=\"card\"\n        [label]=\"t('is-write')\"\n        [descriptionCard]=\"t('is-write-description')\"\n        icon=\"general.edit-02\"\n        [formControl]=\"isWriteControl\"\n      ></mt-toggle-field>\n\n      @if (!isManageProperties()) {\n        <!-- Show/Hide Toggle with Set Conditions -->\n        <mt-toggle-field\n          toggleShape=\"card\"\n          [label]=\"t('show-hide')\"\n          [descriptionCard]=\"t('show-hide-description')\"\n          icon=\"general.eye\"\n          [formControl]=\"showHideControl\"\n          class=\"mt-3\"\n        >\n          <ng-template #toggleCardBottom>\n            @if (showHideControl.value) {\n              <div class=\"mt-3\">\n                <mt-button\n                  [label]=\"t('set-conditions')\"\n                  size=\"small\"\n                  styleClass=\"w-full sm:w-auto\"\n                  (onClick)=\"onSetConditions()\"\n                ></mt-button>\n              </div>\n            }\n          </ng-template>\n        </mt-toggle-field>\n      }\n    </div>\n  </div>\n\n  <div\n    [class]=\"[\n      modalService.footerClass,\n      '!h-auto',\n      'min-h-0',\n      'flex-col',\n      'gap-2',\n      'sm:flex-row',\n      'sm:items-center',\n      'sm:justify-end',\n    ]\"\n  >\n    @if (initialData() && !isManageProperties()) {\n      <mt-button\n        [tooltip]=\"t('delete')\"\n        severity=\"danger\"\n        [variant]=\"'outlined'\"\n        icon=\"general.trash-01\"\n        [loading]=\"deleting()\"\n        [disabled]=\"submitting()\"\n        (onClick)=\"onDelete($event)\"\n        class=\"self-start sm:me-auto\"\n      ></mt-button>\n    }\n    <mt-button\n      [label]=\"t('cancel')\"\n      variant=\"outlined\"\n      [disabled]=\"submitting() || deleting()\"\n      styleClass=\"w-full sm:w-auto\"\n      (onClick)=\"onCancel()\"\n    >\n    </mt-button>\n    <mt-button\n      [disabled]=\"!formControl.valid || deleting()\"\n      [label]=\"t('save')\"\n      severity=\"primary\"\n      [loading]=\"submitting()\"\n      styleClass=\"w-full sm:w-auto\"\n      (onClick)=\"onSave()\"\n    >\n    </mt-button>\n  </div>\n</ng-container>\n" }]
+                        TextField,
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div\r\n    [class]=\"[\r\n      modalService.contentClass,\r\n      'min-w-0',\r\n      'p-4',\r\n      'overflow-y-hidden!',\r\n      'max-[640px]:p-3',\r\n    ]\"\r\n  >\r\n    <div class=\"mt-2 flex h-full min-h-0 flex-col gap-4 overflow-y-auto pb-10\">\r\n      <mt-dynamic-form\r\n        [formConfig]=\"activeFormConfig()\"\r\n        [formControl]=\"formControl\"\r\n      >\r\n      </mt-dynamic-form>\r\n\r\n      <!-- isRead Toggle -->\r\n      <mt-toggle-field\r\n        toggleShape=\"card\"\r\n        [label]=\"t('is-read')\"\r\n        [descriptionCard]=\"t('is-read-description')\"\r\n        icon=\"general.eye\"\r\n        [formControl]=\"isReadControl\"\r\n      ></mt-toggle-field>\r\n\r\n      <!-- isWrite Toggle -->\r\n      <mt-toggle-field\r\n        toggleShape=\"card\"\r\n        [label]=\"t('is-write')\"\r\n        [descriptionCard]=\"t('is-write-description')\"\r\n        icon=\"general.edit-02\"\r\n        [formControl]=\"isWriteControl\"\r\n      ></mt-toggle-field>\r\n\r\n      @if (!isManageProperties()) {\r\n        <!-- Edit Label Toggle with localized label inputs -->\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('edit-label')\"\r\n          [descriptionCard]=\"t('edit-label-description')\"\r\n          icon=\"general.translate-01\"\r\n          [formControl]=\"editLabelControl\"\r\n        >\r\n          <ng-template #toggleCardBottom>\r\n            @if (editLabelControl.value) {\r\n              <div class=\"mt-3 grid gap-3\">\r\n                <mt-text-field\r\n                  [label]=\"t('label-en')\"\r\n                  [formControl]=\"labelEnControl\"\r\n                ></mt-text-field>\r\n                <mt-text-field\r\n                  [label]=\"t('label-ar')\"\r\n                  [formControl]=\"labelArControl\"\r\n                ></mt-text-field>\r\n              </div>\r\n            }\r\n          </ng-template>\r\n        </mt-toggle-field>\r\n\r\n        <!-- Show/Hide Toggle with Set Conditions -->\r\n        <mt-toggle-field\r\n          toggleShape=\"card\"\r\n          [label]=\"t('show-hide')\"\r\n          [descriptionCard]=\"t('show-hide-description')\"\r\n          icon=\"general.eye\"\r\n          [formControl]=\"showHideControl\"\r\n          class=\"mt-3\"\r\n        >\r\n          <ng-template #toggleCardBottom>\r\n            @if (showHideControl.value) {\r\n              <div class=\"mt-3\">\r\n                <mt-button\r\n                  [label]=\"t('set-conditions')\"\r\n                  size=\"small\"\r\n                  styleClass=\"w-full sm:w-auto\"\r\n                  (onClick)=\"onSetConditions()\"\r\n                ></mt-button>\r\n              </div>\r\n            }\r\n          </ng-template>\r\n        </mt-toggle-field>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    [class]=\"[\r\n      modalService.footerClass,\r\n      '!h-auto',\r\n      'min-h-0',\r\n      'flex-col',\r\n      'gap-2',\r\n      'sm:flex-row',\r\n      'sm:items-center',\r\n      'sm:justify-end',\r\n    ]\"\r\n  >\r\n    @if (initialData() && !isManageProperties()) {\r\n      <mt-button\r\n        [tooltip]=\"t('delete')\"\r\n        severity=\"danger\"\r\n        [variant]=\"'outlined'\"\r\n        icon=\"general.trash-01\"\r\n        [loading]=\"deleting()\"\r\n        [disabled]=\"submitting()\"\r\n        (onClick)=\"onDelete($event)\"\r\n        class=\"self-start sm:me-auto\"\r\n      ></mt-button>\r\n    }\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      [disabled]=\"submitting() || deleting()\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"onCancel()\"\r\n    >\r\n    </mt-button>\r\n    <mt-button\r\n      [disabled]=\"!formControl.valid || deleting()\"\r\n      [label]=\"t('save')\"\r\n      severity=\"primary\"\r\n      [loading]=\"submitting()\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"onSave()\"\r\n    >\r\n    </mt-button>\r\n  </div>\r\n</ng-container>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { sectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionId", required: false }] }], initialData: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialData", required: false }] }], allSections: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSections", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
 
 const hasNonWhitespaceValue = (value) => {
@@ -1938,7 +1992,7 @@ class FBPreviewForm {
         this.ref.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBPreviewForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FBPreviewForm, isStandalone: true, selector: "mt-fb-preview-form", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\n  <div\n    [class]=\"[\n      modalService.contentClass,\n      'min-w-0',\n      'p-4',\n      'overflow-y-hidden!',\n      'max-[640px]:p-3',\n    ]\"\n  >\n    <div class=\"h-full min-h-0 overflow-y-auto px-3 pb-10\">\n      @if (moduleKey() && operationKey()) {\n        <mt-client-form\n          [moduleKey]=\"moduleKey()\"\n          [operationKey]=\"operationKey()\"\n          [moduleId]=\"previewModuleId()\"\n          [levelId]=\"previewLevelId()\"\n          [levelDataId]=\"previewInfo()?.levelDataId\"\n          [moduleDataId]=\"previewInfo()?.moduleDataId\"\n          [requestSchemaId]=\"previewInfo()?.requestSchemaId\"\n          [autoLoad]=\"true\"\n          [renderMode]=\"renderMode()\"\n        />\n      } @else {\n        <div\n          class=\"flex justify-center items-center h-64 text-muted-color text-lg\"\n        >\n          {{ t(\"no-fields-visible\") }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "preview", "returnUrl", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "lookups", "ignoredFieldKeys", "allowedFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: FBPreviewForm, isStandalone: true, selector: "mt-fb-preview-form", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\n  <div\n    [class]=\"[\n      modalService.contentClass,\n      'min-w-0',\n      'p-4',\n      'overflow-y-hidden!',\n      'max-[640px]:p-3',\n    ]\"\n  >\n    <div class=\"h-full min-h-0 overflow-y-auto px-3 pb-10\">\n      @if (moduleKey() && operationKey()) {\n        <mt-client-form\n          [moduleKey]=\"moduleKey()\"\n          [operationKey]=\"operationKey()\"\n          [moduleId]=\"previewModuleId()\"\n          [levelId]=\"previewLevelId()\"\n          [levelDataId]=\"previewInfo()?.levelDataId\"\n          [moduleDataId]=\"previewInfo()?.moduleDataId\"\n          [requestSchemaId]=\"previewInfo()?.requestSchemaId\"\n          [autoLoad]=\"true\"\n          [renderMode]=\"renderMode()\"\n        />\n      } @else {\n        <div\n          class=\"flex justify-center items-center h-64 text-muted-color text-lg\"\n        >\n          {{ t(\"no-fields-visible\") }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: ClientForm, selector: "mt-client-form", inputs: ["moduleKey", "operationKey", "moduleId", "levelId", "levelDataId", "moduleDataId", "requestSchemaId", "draftProcessId", "preview", "returnUrl", "defaultValues", "submitRequestMapper", "readonly", "autoLoad", "formMode", "renderMode", "showInternalStepActions", "confirmWarningsOnSubmit", "confirmWarningsOnStepChange", "lookups", "statuses", "ignoredFieldKeys", "allowedFieldKeys"], outputs: ["loaded", "submitted", "errored", "modeDetected", "formSourceDetected", "footerStateChanged"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FBPreviewForm, decorators: [{
             type: Component,
@@ -1973,6 +2027,7 @@ class FBValidationRuleForm {
         nonNullable: true,
     });
     formulaControl = new FormControl(null);
+    formulaValue = toSignal(this.formulaControl.valueChanges.pipe(startWith(this.formulaControl.value)), { initialValue: this.formulaControl.value });
     formulaValidation = signal(EMPTY_FORMULA_VALIDATION, ...(ngDevMode ? [{ debugName: "formulaValidation" }] : /* istanbul ignore next */ []));
     builderSchemaId = computed(() => {
         const parentModuleId = this.toNumericId(this.parentModuleId());
@@ -2022,13 +2077,14 @@ class FBValidationRuleForm {
         };
     }, ...(ngDevMode ? [{ debugName: "formulaPropertiesByPath" }] : /* istanbul ignore next */ []));
     hasFormula = computed(() => {
-        const value = this.formulaControl.value;
+        const value = this.formulaValue();
         const expression = value?.expression?.trim() ?? '';
         return expression.length > 0 || (value?.builder?.length ?? 0) > 0;
     }, ...(ngDevMode ? [{ debugName: "hasFormula" }] : /* istanbul ignore next */ []));
     canSave = computed(() => {
         return (this.hasFormula() &&
-            this.formulaValidation().isValid && !this.submitting());
+            this.formulaValidation().isValid &&
+            !this.submitting());
     }, ...(ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []));
     severityOptions = computed(() => {
         const _lang = this.activeLang();
@@ -2077,7 +2133,7 @@ class FBValidationRuleForm {
         this.formulaValidation.set(result);
     }
     onSave() {
-        const formulaValue = this.formulaControl.value;
+        const formulaValue = this.formulaValue();
         const formulaPayload = this.buildFormulaPayload(formulaValue);
         if (!formulaPayload || !this.formulaValidation().isValid) {
             return;
@@ -3060,5 +3116,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddField, AddSection, AddValidation, DeleteField, DeleteSection, DeleteValidation, FormBuilder, FormBuilderActionKey, FormBuilderFacade, FormBuilderState, GetFormConfiguration, MoveField, ReorderFields, ReorderSections, ResetFormBuilderState, ResetFormConfiguration, SetModuleInfo, SetPreviewInfo, SetProperties, ToggleValidationActive, UpdateField, UpdateFormSettings, UpdateSection, UpdateValidation };
+export { AddField, AddSection, AddValidation, DeleteField, DeleteSection, DeleteValidation, FormBuilder, FormBuilderActionKey, FormBuilderFacade, FormBuilderState, GetFormConfiguration, MoveField, ReorderFields, ReorderSections, ResetFormBuilderState, ResetFormConfiguration, ResetFormFromAppForm, SetModuleInfo, SetPreviewInfo, SetProperties, ToggleValidationActive, UpdateField, UpdateFormSettings, UpdateSection, UpdateValidation };
 //# sourceMappingURL=masterteam-form-builder.mjs.map