@masterteam/form-builder 0.0.7 → 0.0.8

package/fesm2022/masterteam-form-builder.mjs

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, computed, input, signal, viewChild, Component, effect, output, DestroyRef } from '@angular/core';
-import * as i5 from '@angular/common';
+import { inject, Injectable, computed, input, signal, viewChild, Component, effect, output, DestroyRef, viewChildren } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, FormGroup, FormsModule } from '@angular/forms';
@@ -8,13 +7,16 @@ import * as i2 from 'primeng/tabs';
 import { TabsModule } from 'primeng/tabs';
 import * as i3 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
+import * as i4 from 'primeng/popover';
+import { Popover, PopoverModule } from 'primeng/popover';
 import { Button } from '@masterteam/components/button';
 import { Card } from '@masterteam/components/card';
 import { TextField } from '@masterteam/components/text-field';
+import { SelectField } from '@masterteam/components/select-field';
 import { ModalService } from '@masterteam/components/modal';
 import { ConfirmationService } from '@masterteam/components/confirmation';
 import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
-import * as i4 from '@angular/cdk/drag-drop';
+import * as i5 from '@angular/cdk/drag-drop';
 import { CdkDrag, CdkDropList, CdkDragPlaceholder, DragDropModule } from '@angular/cdk/drag-drop';
 import { DynamicField } from '@masterteam/forms/dynamic-field';
 import { Icon } from '@masterteam/icons';
@@ -30,6 +32,7 @@ import { Tabs } from '@masterteam/components/tabs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Table } from '@masterteam/components/table';
 import { RadioCards } from '@masterteam/components/radio-cards';
+import { of, map, catchError } from 'rxjs';
 
 // ============================================================================
 // Module Configuration Actions
@@ -257,6 +260,15 @@ let FormBuilderState = class FormBuilderState extends CrudStateBase {
     static getModuleId(state) {
         return state?.moduleId ?? null;
     }
+    static getParentModuleType(state) {
+        return state?.parentModuleType ?? null;
+    }
+    static getParentModuleId(state) {
+        return state?.parentModuleId ?? null;
+    }
+    static getParentPath(state) {
+        return state?.parentPath ?? '';
+    }
     static getProperties(state) {
         return state?.properties ?? [];
     }
@@ -394,7 +406,7 @@ let FormBuilderState = class FormBuilderState extends CrudStateBase {
         const tempField = {
             id: tempId,
             sectionId: action.sectionId,
-            propertyId: action.payload.propertyId,
+            propertyKey: action.payload.propertyKey,
             width: action.payload.width,
             order: action.payload.order ?? 0,
             hiddenInCreation: action.payload.hiddenInCreation,
@@ -862,6 +874,15 @@ __decorate([
 __decorate([
     Selector()
 ], FormBuilderState, "getModuleId", null);
+__decorate([
+    Selector()
+], FormBuilderState, "getParentModuleType", null);
+__decorate([
+    Selector()
+], FormBuilderState, "getParentModuleId", null);
+__decorate([
+    Selector()
+], FormBuilderState, "getParentPath", null);
 __decorate([
     Selector()
 ], FormBuilderState, "getProperties", null);
@@ -890,6 +911,9 @@ class FormBuilderFacade {
     validations = select(FormBuilderState.getValidations);
     moduleType = select(FormBuilderState.getModuleType);
     moduleId = select(FormBuilderState.getModuleId);
+    parentModuleType = select(FormBuilderState.getParentModuleType);
+    parentModuleId = select(FormBuilderState.getParentModuleId);
+    parentPath = select(FormBuilderState.getParentPath);
     // ============================================================================
     // Loading Signals
     // ============================================================================
@@ -1325,7 +1349,7 @@ class FBFieldConditions {
         this.ref.close({ saved: false });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FBFieldConditions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: FBFieldConditions, isStandalone: true, selector: "mt-fb-field-conditions", inputs: { initialFormula: { classPropertyName: "initialFormula", publicName: "initialFormula", isSignal: true, isRequired: false, transformFunction: null }, availableFields: { classPropertyName: "availableFields", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-hidden!']\">\r\n    <div class=\"mt-4 h-full overflow-y-auto pb-10 flex flex-col gap-3\">\r\n      <!-- Formula Toolbar -->\r\n      <mt-formula-toolbar\r\n        [knownProperties]=\"propertyKeys()\"\r\n        [functionCategories]=\"functionCategories\"\r\n        [operators]=\"operators\"\r\n        [labels]=\"toolbarLabels\"\r\n        (onBlockInsert)=\"onBlockInsert($event)\"\r\n      />\r\n      <!-- Formula Editor -->\r\n      <mt-formula-editor\r\n        #editor\r\n        [placeholder]=\"t('build-condition-formula')\"\r\n        [formControl]=\"formulaControl\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"modalService.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      [disabled]=\"submitting()\"\r\n      (onClick)=\"onCancel()\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      severity=\"primary\"\r\n      [loading]=\"submitting()\"\r\n      (onClick)=\"onSave()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FormulaToolbar, selector: "mt-formula-toolbar", inputs: ["knownProperties", "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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: FBFieldConditions, isStandalone: true, selector: "mt-fb-field-conditions", inputs: { initialFormula: { classPropertyName: "initialFormula", publicName: "initialFormula", isSignal: true, isRequired: false, transformFunction: null }, availableFields: { classPropertyName: "availableFields", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-hidden!']\">\r\n    <div class=\"mt-4 h-full overflow-y-auto pb-10 flex flex-col gap-3\">\r\n      <!-- Formula Toolbar -->\r\n      <mt-formula-toolbar\r\n        [knownProperties]=\"propertyKeys()\"\r\n        [functionCategories]=\"functionCategories\"\r\n        [operators]=\"operators\"\r\n        [labels]=\"toolbarLabels\"\r\n        (onBlockInsert)=\"onBlockInsert($event)\"\r\n      />\r\n      <!-- Formula Editor -->\r\n      <mt-formula-editor\r\n        #editor\r\n        [placeholder]=\"t('build-condition-formula')\"\r\n        [formControl]=\"formulaControl\"\r\n      />\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"modalService.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      [disabled]=\"submitting()\"\r\n      (onClick)=\"onCancel()\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      severity=\"primary\"\r\n      [loading]=\"submitting()\"\r\n      (onClick)=\"onSave()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: FormulaToolbar, selector: "mt-formula-toolbar", inputs: ["knownProperties", "propertiesTemplate", "functionCategories", "operators", "initialTab", "searchPlaceholder", "labels"], outputs: ["onBlockInsert", "onTabChange"] }, { kind: "component", type: FormulaEditor, selector: "mt-formula-editor", inputs: ["placeholder", "initialTokens", "disabled", "borderless"], outputs: ["formulaChange", "tokensChange", "onBlur", "onFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FBFieldConditions, decorators: [{
             type: Component,
@@ -1368,7 +1392,7 @@ class FBFieldForm {
                 if (currentField && field.id === currentField.id)
                     continue;
                 fields.push({
-                    key: field.name,
+                    key: field.propertyKey,
                     name: field.name,
                     type: field.type,
                 });
@@ -1853,7 +1877,7 @@ class FBPreviewForm {
                     fields: visibleFields.map((field, fieldIndex) => {
                         const colSpan = this.getColSpan(field.width);
                         return {
-                            key: `field_${field.propertyId}`,
+                            key: `field_${field.propertyKey}`,
                             label: field.name,
                             type: this.mapFieldType(field.type),
                             colSpan,
@@ -2337,7 +2361,7 @@ class FBValidationRuleForm {
         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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: FBValidationRuleForm, isStandalone: true, selector: "mt-fb-validation-rule-form", inputs: { initialData: { classPropertyName: "initialData", publicName: "initialData", isSignal: true, isRequired: false, transformFunction: null }, availableFields: { classPropertyName: "availableFields", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-hidden!']\">\r\n    <div class=\"mt-4 h-full overflow-y-auto pb-10 flex flex-col gap-4\">\r\n      <mt-formula-toolbar\r\n        [knownProperties]=\"propertyKeys()\"\r\n        [functionCategories]=\"functionCategories\"\r\n        [operators]=\"operators\"\r\n        [labels]=\"toolbarLabels\"\r\n        (onBlockInsert)=\"onBlockInsert($event)\"\r\n      />\r\n      <mt-formula-editor\r\n        #editor\r\n        [placeholder]=\"t('validation-formula-placeholder')\"\r\n        [formControl]=\"formulaControl\"\r\n      />\r\n      <div class=\"grid grid-cols-2 gap-4\">\r\n        <mt-text-field\r\n          [label]=\"t('message-en')\"\r\n          [placeholder]=\"t('message-en')\"\r\n          [formControl]=\"messageEnControl\"\r\n        />\r\n        <mt-text-field\r\n          [label]=\"t('message-ar')\"\r\n          [placeholder]=\"t('message-ar')\"\r\n          [formControl]=\"messageArControl\"\r\n        />\r\n      </div>\r\n      <div class=\"grid gap-2\">\r\n        <label class=\"text-sm font-medium text-gray-700 dark:text-gray-100\">\r\n          {{ t(\"severity\") }}\r\n        </label>\r\n        <mt-radio-cards\r\n          [options]=\"severityOptions()\"\r\n          [activeId]=\"severityControl.value\"\r\n          (selectionChange)=\"onSeverityChange($event)\"\r\n        ></mt-radio-cards>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class]=\"modalService.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      severity=\"secondary\"\r\n      [disabled]=\"submitting()\"\r\n      (onClick)=\"onCancel()\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      severity=\"primary\"\r\n      [loading]=\"submitting()\"\r\n      (onClick)=\"onSave()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: RadioCards, selector: "mt-radio-cards", inputs: ["circle", "color", "size", "columns", "options", "activeId", "itemTemplate"], outputs: ["optionsChange", "activeIdChange", "selectionChange"] }, { kind: "component", type: FormulaToolbar, selector: "mt-formula-toolbar", inputs: ["knownProperties", "propertiesTemplate", "functionCategories", "operators", "initialTab", "searchPlaceholder", "labels"], outputs: ["onBlockInsert", "onTabChange"] }, { kind: "component", type: FormulaEditor, selector: "mt-formula-editor", inputs: ["placeholder", "initialTokens", "disabled", "borderless"], outputs: ["formulaChange", "tokensChange", "onBlur", "onFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FBValidationRuleForm, decorators: [{
             type: Component,
@@ -2364,7 +2388,7 @@ class FBValidationRules {
     propertiesMap = computed(() => {
         const map = new Map();
         for (const prop of this.properties()) {
-            map.set(prop.id, prop);
+            map.set(prop.key, prop);
         }
         return map;
     }, ...(ngDevMode ? [{ debugName: "propertiesMap" }] : []));
@@ -2375,15 +2399,10 @@ class FBValidationRules {
         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}`);
+                const prop = field.property ?? propsMap.get(field.propertyKey);
+                const name = this.resolvePropertyName(prop, field.propertyKey, lang);
                 fields.push({
-                    key: name,
+                    key: field.propertyKey,
                     name,
                     type: prop?.viewType || 'text',
                 });
@@ -2438,6 +2457,24 @@ class FBValidationRules {
             this.activeLang.set(lang ?? 'en');
         });
     }
+    resolvePropertyName(property, fallbackKey, lang) {
+        if (!property) {
+            return `Property ${fallbackKey}`;
+        }
+        const name = property?.name;
+        if (typeof name === 'string') {
+            return name;
+        }
+        const display = name?.['display'];
+        if (typeof display === 'string' && display.trim().length > 0) {
+            return display;
+        }
+        const localized = name?.[lang] ?? name?.['en'] ?? name?.['ar'];
+        if (typeof localized === 'string' && localized.trim().length > 0) {
+            return localized;
+        }
+        return property?.key ?? `Property ${fallbackKey}`;
+    }
     openCreate() {
         this.modalService.openModal(FBValidationRuleForm, 'drawer', {
             header: this.transloco.translate('formBuilder.add-validation-rule'),
@@ -2483,29 +2520,199 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
             args: [{ selector: 'mt-fb-validation-rules', standalone: true, imports: [TranslocoDirective, Table, Button], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div [class]=\"[modalService.contentClass, 'p-4', 'overflow-y-auto']\">\r\n    <div class=\"flex justify-end pb-4\">\r\n      <mt-button\r\n        [label]=\"t('add-validation-rule')\"\r\n        severity=\"primary\"\r\n        variant=\"outlined\"\r\n        (onClick)=\"openCreate()\"\r\n      ></mt-button>\r\n    </div>\r\n    <mt-table\r\n      [data]=\"tableRows()\"\r\n      [columns]=\"tableColumns()\"\r\n      [rowActions]=\"rowActions()\"\r\n      (cellChange)=\"onCellChange($event)\"\r\n    ></mt-table>\r\n  </div>\r\n</ng-container>\r\n" }]
         }], ctorParameters: () => [] });
 
+class FormBuilderContextService {
+    http = inject(HttpClient);
+    baseUrl = 'context';
+    /**
+     * Resolves context data including navigation paths and properties.
+     * No caching - always fetches fresh data.
+     */
+    resolveContext(contextKey, options = {}) {
+        if (!contextKey)
+            return of(null);
+        return this.http
+            .post(`${this.baseUrl}/resolve`, {
+            contextKey,
+            displayTags: options.displayTags,
+            propertyFlags: options.propertyFlags,
+            matchAllTags: options.matchAllTags,
+            includeVirtual: options.includeVirtual,
+            includeNavigationPaths: options.includeNavigationPaths,
+            includeConnectionMetadata: options.includeConnectionMetadata,
+            includeRelatedContextValues: options.includeRelatedContextValues,
+            relatedContextsToInclude: options.relatedContextsToInclude,
+        })
+            .pipe(map((response) => this.normalizeResponse(response)), catchError((error) => {
+            console.warn('Failed to resolve context:', error);
+            return of(null);
+        }));
+    }
+    /**
+     * Gets properties for a context.
+     * No caching - always fetches fresh data.
+     */
+    getProperties(contextKey, options = {}) {
+        if (!contextKey)
+            return of([]);
+        return this.resolveContext(contextKey, options).pipe(map((resolved) => resolved?.properties ?? []));
+    }
+    normalizeResponse(response) {
+        const payload = response?.data ?? response;
+        if (!payload)
+            return null;
+        const properties = this.normalizeProperties(payload.properties ?? []);
+        return {
+            ...payload,
+            properties,
+        };
+    }
+    normalizeProperties(raw) {
+        return (raw ?? [])
+            .map((prop) => {
+            const key = prop?.key ?? prop?.propertyKey;
+            if (!key)
+                return null;
+            const name = prop?.name ?? prop?.displayName ?? key;
+            return {
+                ...prop,
+                key,
+                name,
+            };
+        })
+            .filter((prop) => Boolean(prop));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormBuilderContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormBuilderContextService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormBuilderContextService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const SCOPE_ORDER = [
+    'Current',
+    'Host',
+    'Parent',
+    'Ancestors',
+    'Children',
+    'Descendants',
+    'Related',
+    'Siblings',
+];
+const PATH_TOKENS = [
+    'Parent',
+    'Ancestors',
+    'Children',
+    'Descendants',
+    'Related',
+    'Siblings',
+    'Host',
+];
+const SCOPE_LABELS = {
+    Current: 'Current',
+    Host: 'Host',
+    Parent: 'Parent',
+    Ancestors: 'Ancestors',
+    Children: 'Children',
+    Descendants: 'Descendants',
+    Related: 'Related',
+    Siblings: 'Siblings',
+};
+// ============================================================================
+// Component
+// ============================================================================
 class FormBuilder {
     modalService = inject(ModalService);
     confirmationService = inject(ConfirmationService);
     translocoService = inject(TranslocoService);
     facade = inject(FormBuilderFacade);
+    contextService = inject(FormBuilderContextService);
+    popovers = viewChildren(Popover, ...(ngDevMode ? [{ debugName: "popovers" }] : []));
     dialogRef;
-    // Local UI state
-    activeTab = signal('system', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
-    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
-    // State from facade
+    // ============================================================================
+    // Facade State
+    // ============================================================================
     sections = this.facade.sections;
     properties = this.facade.properties;
     isLoading = this.facade.isLoadingFormConfiguration;
     error = this.facade.formConfigurationError;
-    // Properties map for enrichment
+    moduleType = this.facade.moduleType;
+    moduleId = this.facade.moduleId;
+    parentPath = this.facade.parentPath;
+    // ============================================================================
+    // UI State (Simple Signals)
+    // ============================================================================
+    activeScope = signal('Current', ...(ngDevMode ? [{ debugName: "activeScope" }] : []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    isContextLoading = signal(false, ...(ngDevMode ? [{ debugName: "isContextLoading" }] : []));
+    // Initial context data (from first load)
+    initialContext = signal(null, ...(ngDevMode ? [{ debugName: "initialContext" }] : []));
+    currentProperties = signal([], ...(ngDevMode ? [{ debugName: "currentProperties" }] : []));
+    // Non-current scope state (reset on tab change)
+    scopeLoading = signal(false, ...(ngDevMode ? [{ debugName: "scopeLoading" }] : []));
+    scopeProperties = signal([], ...(ngDevMode ? [{ debugName: "scopeProperties" }] : []));
+    scopePath = signal([], ...(ngDevMode ? [{ debugName: "scopePath" }] : []));
+    scopeSelectedKey = signal('', ...(ngDevMode ? [{ debugName: "scopeSelectedKey" }] : []));
+    scopeNavigation = signal(null, ...(ngDevMode ? [{ debugName: "scopeNavigation" }] : []));
+    // Request tracking
+    initialRequestId = 0;
+    scopeRequestId = 0;
+    lastContextKey = '';
+    // ============================================================================
+    // Computed Values
+    // ============================================================================
+    contextKey = computed(() => {
+        const type = this.moduleType();
+        const id = this.moduleId();
+        const parent = this.parentPath();
+        if (!type || id === null || id === undefined)
+            return '';
+        const segments = [];
+        const raw = parent.split('/').filter(Boolean);
+        for (let i = 0; i < raw.length; i += 2) {
+            if (raw[i] && raw[i + 1] !== undefined) {
+                segments.push(`${raw[i]}:${raw[i + 1]}`);
+            }
+        }
+        segments.push(`${type}:${id}`);
+        return segments.join('/');
+    }, ...(ngDevMode ? [{ debugName: "contextKey" }] : []));
+    usedPropertyKeys = computed(() => {
+        return new Set(this.sections().flatMap((s) => s.fields.map((f) => f.propertyKey)));
+    }, ...(ngDevMode ? [{ debugName: "usedPropertyKeys" }] : []));
     propertiesMap = computed(() => {
         const map = new Map();
         for (const prop of this.properties()) {
-            map.set(prop.id, prop);
+            map.set(prop.key, prop);
         }
         return map;
     }, ...(ngDevMode ? [{ debugName: "propertiesMap" }] : []));
-    // Enrich sections with property data for UI display
+    /** Navigation options from initial context */
+    baseScopeContexts = computed(() => {
+        const ctx = this.initialContext();
+        const nav = ctx?.navigationPaths;
+        const currentKey = ctx?.currentState?.contextPath ?? this.contextKey();
+        return {
+            Current: currentKey
+                ? [this.createContextOption(currentKey, ctx?.currentState)]
+                : [],
+            Host: nav?.hostContext
+                ? [this.createContextOption(nav.hostContext)]
+                : [],
+            Parent: this.mergeContextOptions(nav?.parent),
+            Ancestors: this.mergeContextOptions(nav?.ancestors),
+            Children: this.mergeContextOptions(nav?.children),
+            Descendants: this.mergeContextOptions(nav?.descendants),
+            Related: this.mergeContextOptions(nav?.related),
+            Siblings: this.mergeContextOptions(nav?.siblingContexts),
+        };
+    }, ...(ngDevMode ? [{ debugName: "baseScopeContexts" }] : []));
+    /** Available scope tabs */
+    scopeOptions = computed(() => {
+        const contexts = this.baseScopeContexts();
+        return SCOPE_ORDER.filter((s) => (contexts[s] ?? []).length > 0).map((s) => ({ key: s, label: SCOPE_LABELS[s] }));
+    }, ...(ngDevMode ? [{ debugName: "scopeOptions" }] : []));
+    /** Enriched sections for display */
     enrichedSections = computed(() => {
         const sections = this.sections();
         const propsMap = this.propertiesMap();
@@ -2513,119 +2720,427 @@ class FormBuilder {
         return sections.map((section) => ({
             ...section,
             fields: section.fields.map((field) => {
-                const prop = propsMap.get(field.propertyId);
-                const propName = prop?.name;
-                const name = typeof propName === 'string'
-                    ? propName
-                    : (propName?.[lang] ??
-                        propName?.['en'] ??
-                        `Property ${field.propertyId}`);
+                const prop = field.property ?? propsMap.get(field.propertyKey);
                 return {
                     ...field,
-                    name,
+                    name: this.resolvePropertyName(prop, field.propertyKey, lang),
                     type: prop?.viewType || 'text',
                     data: prop,
                 };
             }),
         }));
     }, ...(ngDevMode ? [{ debugName: "enrichedSections" }] : []));
-    // Available properties for toolbox tabs
-    availableTabs = computed(() => {
-        const tabs = [];
-        const usedPropertyIds = new Set(this.sections().flatMap((s) => s.fields.map((f) => f.propertyId)));
-        const availableProps = this.properties().filter((p) => !usedPropertyIds.has(p.id));
-        const systemProps = availableProps.filter((p) => p['isSystem']);
-        const customProps = availableProps.filter((p) => !p['isSystem']);
-        if (systemProps.length > 0) {
-            tabs.push({ id: 'system', title: 'System', properties: systemProps });
-        }
-        if (customProps.length > 0) {
-            tabs.push({ id: 'custom', title: 'Custom', properties: customProps });
-        }
-        return tabs;
-    }, ...(ngDevMode ? [{ debugName: "availableTabs" }] : []));
-    // Filtered properties based on search query
-    filteredPropertiesByTab = computed(() => {
-        const query = this.searchQuery().toLowerCase().trim();
-        const tabs = this.availableTabs();
-        if (!query) {
-            return tabs;
-        }
-        return tabs.map((tab) => ({
-            ...tab,
-            properties: tab.properties.filter((prop) => {
-                const name = prop.name;
-                return name.toLowerCase().includes(query);
-            }),
-        }));
-    }, ...(ngDevMode ? [{ debugName: "filteredPropertiesByTab" }] : []));
+    // ============================================================================
+    // Lifecycle
+    // ============================================================================
     constructor() {
-        // Update active tab when tabs change
+        // Effect: watch for context key changes and load initial data
         effect(() => {
-            const tabs = this.availableTabs();
-            const currentTab = this.activeTab();
-            if (tabs.length > 0 && !tabs.some((t) => t.id === currentTab)) {
-                this.activeTab.set(tabs[0].id);
+            const key = this.contextKey();
+            if (key && key !== this.lastContextKey) {
+                this.lastContextKey = key;
+                this.loadInitialContext(key);
+            }
+        }, { allowSignalWrites: true });
+    }
+    ngOnInit() {
+        // Trigger initial load if context key is already available
+        const key = this.contextKey();
+        if (key && key !== this.lastContextKey) {
+            this.lastContextKey = key;
+            this.loadInitialContext(key);
+        }
+    }
+    // ============================================================================
+    // Initial Context Loading
+    // ============================================================================
+    loadInitialContext(contextKey) {
+        const requestId = ++this.initialRequestId;
+        this.isContextLoading.set(true);
+        this.initialContext.set(null);
+        this.currentProperties.set([]);
+        this.resetScopeState();
+        this.activeScope.set('Current');
+        this.contextService
+            .resolveContext(contextKey, {
+            propertyFlags: 'None',
+            includeVirtual: true,
+            includeNavigationPaths: true,
+            includeConnectionMetadata: true,
+            matchAllTags: true,
+            includeRelatedContextValues: true,
+        })
+            .subscribe((response) => {
+            if (requestId !== this.initialRequestId)
+                return;
+            this.isContextLoading.set(false);
+            this.initialContext.set(response);
+            this.currentProperties.set(response?.properties ?? []);
+            this.facade.setProperties(response?.properties ?? []);
+        });
+    }
+    // ============================================================================
+    // Tab Change Handler (Called from template)
+    // ============================================================================
+    onScopeChange(scope) {
+        if (scope === this.activeScope())
+            return;
+        this.activeScope.set(scope);
+        this.resetScopeState();
+        if (scope === 'Current') {
+            return;
+        }
+        // Get first context option for this scope
+        const options = this.baseScopeContexts()[scope] ?? [];
+        if (options.length === 0)
+            return;
+        const firstOption = options[0];
+        this.scopePath.set([
+            {
+                token: scope,
+                value: firstOption.contextKey,
+                label: firstOption.label,
+            },
+        ]);
+        this.loadScopeContext(firstOption.contextKey);
+    }
+    // ============================================================================
+    // Scope Context Loading
+    // ============================================================================
+    loadScopeContext(contextKey) {
+        const requestId = ++this.scopeRequestId;
+        this.scopeLoading.set(true);
+        this.contextService
+            .resolveContext(contextKey, {
+            propertyFlags: 'None',
+            includeVirtual: true,
+            includeNavigationPaths: true,
+            includeConnectionMetadata: true,
+            matchAllTags: true,
+            includeRelatedContextValues: true,
+        })
+            .subscribe((response) => {
+            if (requestId !== this.scopeRequestId)
+                return;
+            this.scopeLoading.set(false);
+            this.scopeNavigation.set(response);
+            this.scopeProperties.set(response?.properties ?? []);
+            // Auto-select first available property
+            const used = this.usedPropertyKeys();
+            const available = (response?.properties ?? []).filter((p) => !used.has(p.key));
+            if (available.length > 0) {
+                this.scopeSelectedKey.set(available[0].key);
             }
         });
     }
+    resetScopeState() {
+        this.scopeLoading.set(false);
+        this.scopeProperties.set([]);
+        this.scopePath.set([]);
+        this.scopeSelectedKey.set('');
+        this.scopeNavigation.set(null);
+        this.hideAllPopovers();
+    }
+    // ============================================================================
+    // Path Segment Methods (accept scope parameter for template compatibility)
+    // ============================================================================
+    getScopeBaseContexts(scope) {
+        return this.baseScopeContexts()[scope] ?? [];
+    }
+    /** Template calls this with scope.key */
+    getScopePath(_scope) {
+        return this.scopePath();
+    }
+    getTokenLabel(token) {
+        return SCOPE_LABELS[token] ?? token;
+    }
+    getScopeSegmentLabel(_scope, index) {
+        const path = this.scopePath();
+        const segment = path[index];
+        if (!segment?.value)
+            return `Select ${this.getTokenLabel(segment?.token)}`;
+        // Use stored label - don't look up from options (which change on resolve)
+        return segment.label || this.formatContextKey(segment.value);
+    }
+    getScopeSegmentOptions(_scope, index) {
+        const path = this.scopePath();
+        const segment = path[index];
+        if (!segment)
+            return [];
+        if (index === 0) {
+            return this.getScopeBaseContexts(this.activeScope());
+        }
+        const nav = this.scopeNavigation();
+        return this.getNavigationOptionsByToken(nav, segment.token);
+    }
+    setScopeSegmentValue(_scope, index, contextKey, label) {
+        const path = this.scopePath();
+        const newPath = path.slice(0, index + 1);
+        if (newPath[index]) {
+            // Store label at selection time so it doesn't change on resolve
+            const segmentLabel = label || this.findOptionLabel(_scope, index, contextKey);
+            newPath[index] = {
+                ...newPath[index],
+                value: contextKey,
+                label: segmentLabel,
+            };
+        }
+        this.scopePath.set(newPath);
+        this.loadScopeContext(contextKey);
+    }
+    findOptionLabel(_scope, index, contextKey) {
+        const options = this.getScopeSegmentOptions(_scope, index);
+        const option = options.find((o) => o.contextKey === contextKey);
+        return option?.label ?? this.formatContextKey(contextKey);
+    }
+    /** Template handler: hide popover first, then set value (like formula-builder) */
+    onSetScopeSegmentValue(scope, index, contextKey, popover) {
+        popover.hide();
+        this.setScopeSegmentValue(scope, index, contextKey);
+    }
+    addScopeSegment(_scope, token) {
+        const path = this.scopePath();
+        this.scopePath.set([...path, { token, value: '', label: '' }]);
+    }
+    /** Template handler: hide popover first, then add segment (like formula-builder) */
+    onAddScopeSegment(scope, token, popover) {
+        popover.hide();
+        this.addScopeSegment(scope, token);
+    }
+    getScopeNextTokens(_scope) {
+        const path = this.scopePath();
+        const last = path[path.length - 1];
+        if (!last?.value)
+            return [];
+        const nav = this.scopeNavigation();
+        if (!nav)
+            return [];
+        return PATH_TOKENS.filter((t) => this.getNavigationOptionsByToken(nav, t).length > 0);
+    }
+    canAddNextScopeSegment(_scope) {
+        const path = this.scopePath();
+        if (path.length === 0)
+            return false;
+        if (!path.every((s) => Boolean(s.value)))
+            return false;
+        return this.getScopeNextTokens().length > 0;
+    }
+    canRemoveScopePath(_scope) {
+        return this.scopePath().length > 1;
+    }
+    removeScopePath(_scope) {
+        const path = this.scopePath();
+        if (path.length <= 1)
+            return;
+        const newPath = path.slice(0, -1);
+        this.scopePath.set(newPath);
+        const last = newPath[newPath.length - 1];
+        if (last?.value) {
+            this.loadScopeContext(last.value);
+        }
+    }
+    /** Template-compatible version (returns properties array for the scope) */
+    getScopeProperties(_scope) {
+        const scope = _scope ?? this.activeScope();
+        return scope === 'Current'
+            ? this.currentProperties()
+            : this.scopeProperties();
+    }
+    // ============================================================================
+    // Property Methods (accept scope parameter for template compatibility)
+    // ============================================================================
+    getScopePropertyOptions(_scope) {
+        const scope = _scope ?? this.activeScope();
+        const props = scope === 'Current' ? this.currentProperties() : this.scopeProperties();
+        const used = this.usedPropertyKeys();
+        return props
+            .filter((p) => !used.has(p.key))
+            .map((p) => ({ key: p.key, name: this.getPropertyLabel(p) }));
+    }
+    getScopeSelectedPropertyKey(_scope) {
+        return this.scopeSelectedKey();
+    }
+    setScopeSelectedProperty(_scope, key) {
+        this.scopeSelectedKey.set(key);
+    }
+    getScopeSelectedProperty(_scope) {
+        const key = this.scopeSelectedKey();
+        if (!key)
+            return null;
+        return this.scopeProperties().find((p) => p.key === key) ?? null;
+    }
+    getFilteredProperties(_scope) {
+        const scope = _scope ?? this.activeScope();
+        const used = this.usedPropertyKeys();
+        const query = this.searchQuery().toLowerCase().trim();
+        if (scope !== 'Current') {
+            const selected = this.getScopeSelectedProperty();
+            if (!selected || used.has(selected.key))
+                return [];
+            return [selected];
+        }
+        let available = this.currentProperties().filter((p) => !used.has(p.key));
+        if (query) {
+            available = available.filter((p) => this.getPropertyLabel(p).toLowerCase().includes(query));
+        }
+        return available;
+    }
+    isScopePropertiesLoading(_scope) {
+        const scope = _scope ?? this.activeScope();
+        return scope !== 'Current' && this.scopeLoading();
+    }
+    getPropertyLabel(property) {
+        const lang = document.documentElement.lang;
+        return this.resolvePropertyName(property, property.key, lang);
+    }
+    // ============================================================================
+    // Helper Methods
+    // ============================================================================
+    hideAllPopovers() {
+        for (const popover of this.popovers()) {
+            popover.hide();
+        }
+    }
+    getNavigationOptionsByToken(response, token) {
+        const nav = response?.navigationPaths;
+        if (!nav)
+            return [];
+        switch (token) {
+            case 'Parent':
+                return this.mergeContextOptions(nav.parent);
+            case 'Ancestors':
+                return this.mergeContextOptions(nav.ancestors);
+            case 'Children':
+                return this.mergeContextOptions(nav.children);
+            case 'Descendants':
+                return this.mergeContextOptions(nav.descendants);
+            case 'Related':
+                return this.mergeContextOptions(nav.related);
+            case 'Siblings':
+                return this.mergeContextOptions(nav.siblingContexts);
+            case 'Host':
+                return nav.hostContext
+                    ? [this.createContextOption(nav.hostContext)]
+                    : [];
+            default:
+                return [];
+        }
+    }
+    resolvePropertyName(property, fallbackKey, lang) {
+        if (!property)
+            return `Property ${fallbackKey}`;
+        const name = property.name;
+        if (typeof name === 'string')
+            return name;
+        const display = name?.['display'];
+        if (typeof display === 'string' && display.trim())
+            return display;
+        const localized = name?.[lang] ?? name?.['en'] ?? name?.['ar'];
+        if (typeof localized === 'string' && localized.trim())
+            return localized;
+        return property.key ?? `Property ${fallbackKey}`;
+    }
+    createContextOption(pathOrKey, currentState) {
+        if (typeof pathOrKey === 'string') {
+            return {
+                contextKey: pathOrKey,
+                label: this.formatContextLabel({
+                    contextKey: pathOrKey,
+                    contextType: currentState?.contextType,
+                    contextId: currentState?.contextId,
+                }),
+            };
+        }
+        return {
+            contextKey: pathOrKey.contextKey,
+            label: this.formatContextLabel(pathOrKey),
+        };
+    }
+    formatContextLabel(path) {
+        // Just return the name - no path formatting needed
+        if (path.name)
+            return path.name;
+        if (path.key)
+            return path.key;
+        if (path.contextType && path.contextId !== undefined)
+            return `${path.contextType} ${path.contextId}`;
+        return path.contextKey || 'Context';
+    }
+    formatContextKey(contextKey) {
+        return contextKey
+            .split('/')
+            .filter(Boolean)
+            .map((seg) => {
+            const [type, id] = seg.split(':');
+            return id !== undefined ? `${type} ${id}` : type;
+        })
+            .join(' / ');
+    }
+    mergeContextOptions(items) {
+        if (!items?.length)
+            return [];
+        const seen = new Set();
+        return items
+            .slice()
+            .sort((a, b) => (a.distance ?? 0) - (b.distance ?? 0))
+            .filter((item) => {
+            if (!item?.contextKey || seen.has(item.contextKey))
+                return false;
+            seen.add(item.contextKey);
+            return true;
+        })
+            .map((item) => this.createContextOption(item));
+    }
+    // ============================================================================
+    // Drag & Drop
+    // ============================================================================
     drop(event) {
         const targetSectionId = event.container.id;
         if (event.previousContainer === event.container) {
-            // Reordering within the same section
             const fields = [...event.container.data];
             const [movedField] = fields.splice(event.previousIndex, 1);
             fields.splice(event.currentIndex, 0, movedField);
-            // Build bulk reorder payload with new order values
-            const reorderPayload = fields.map((field, index) => ({
-                id: field.id,
-                order: index,
-            }));
-            this.facade.reorderFields(targetSectionId, reorderPayload);
+            this.facade.reorderFields(targetSectionId, fields.map((f, i) => ({ id: f.id, order: i })));
         }
         else if (event.previousContainer.id.startsWith('toolbox-')) {
-            // Adding from toolbox
-            const propertyItem = event.item.data;
+            const prop = event.item.data;
             this.facade.addField(targetSectionId, {
-                propertyId: propertyItem.id,
+                propertyKey: prop.key,
                 width: '100',
                 order: event.currentIndex,
                 hiddenInCreation: false,
             });
         }
         else {
-            // Moving between sections
-            const sourceSectionId = event.previousContainer.id;
             const field = event.item.data;
-            this.facade.moveField(sourceSectionId, field.id, {
+            this.facade.moveField(event.previousContainer.id, field.id, {
                 targetSectionId,
                 order: event.currentIndex,
             });
         }
     }
+    // ============================================================================
+    // Modal Actions
+    // ============================================================================
     addSection() {
         this.dialogRef = this.modalService.openModal(FBSectionForm, 'drawer', {
             header: this.translocoService.translate('formBuilder.add-section'),
             height: '20vw',
-            styleClass: '!w-[27%] !absolute !shadow-none  ',
+            styleClass: '!w-[27%] !absolute !shadow-none',
             position: 'end',
             appendTo: '#page-content',
             dismissible: true,
-            inputValues: {
-                sectionsCount: this.sections().length,
-            },
+            inputValues: { sectionsCount: this.sections().length },
         });
     }
     openPreview() {
         this.dialogRef = this.modalService.openModal(FBPreviewForm, 'drawer', {
             header: this.translocoService.translate('formBuilder.preview'),
-            styleClass: '!w-[79%] !absolute !shadow-none  ',
+            styleClass: '!w-[79%] !absolute !shadow-none',
             position: 'end',
             appendTo: 'page-content',
             dismissible: true,
-            inputValues: {
-                sections: this.enrichedSections(),
-            },
+            inputValues: { sections: this.enrichedSections() },
         });
     }
     openValidationRules() {
@@ -2641,14 +3156,12 @@ class FormBuilder {
         this.confirmationService.confirm({
             type: 'dialog',
             acceptButtonStyleClass: 'p-button-danger',
-            accept: () => {
-                this.facade.resetFormConfiguration();
-            },
+            accept: () => this.facade.resetFormConfiguration(),
         });
     }
     noReturnPredicate = () => false;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormBuilder, isStandalone: true, selector: "mt-form-builder", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div class=\"flex gap-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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormBuilder, isStandalone: true, selector: "mt-form-builder", viewQueries: [{ propertyName: "popovers", predicate: Popover, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div class=\"flex gap-7 h-full w-full overflow-hidden\" cdkDropListGroup>\r\n    <!-- Properties Sidebar -->\r\n    <mt-card class=\"w-1/5 h-full flex flex-col overflow-hidden\">\r\n      <ng-template #headless>\r\n        <!-- Header -->\r\n        <h3 class=\"text-xl font-semibold px-4 pt-5\">\r\n          {{ t(\"form-elements\") }}\r\n        </h3>\r\n\r\n        @if (isContextLoading()) {\r\n          <!-- Properties Loading Skeleton -->\r\n          <div class=\"flex gap-4 py-3 px-5 mt-4\">\r\n            <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\r\n            <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\r\n          </div>\r\n          <div class=\"py-4 px-5 space-y-5\">\r\n            @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n              <p-skeleton height=\"3rem\" styleClass=\"rounded-lg\" />\r\n            }\r\n          </div>\r\n        } @else if (scopeOptions().length === 0) {\r\n          <!-- No Properties State -->\r\n          <div class=\"flex-1 flex items-center justify-center p-4\">\r\n            <p class=\"text-sm font-semibold text-gray-500\">\r\n              {{ t(\"no-data-found\") }}\r\n            </p>\r\n          </div>\r\n        } @else {\r\n          <!-- Scope Tabs using PrimeNG -->\r\n          <p-tabs\r\n            [value]=\"activeScope()\"\r\n            (valueChange)=\"onScopeChange($event)\"\r\n            styleClass=\"structure-tabs\"\r\n            class=\"flex flex-1 flex-col min-h-0\"\r\n          >\r\n            <p-tablist class=\"shrink-0\">\r\n              @for (scope of scopeOptions(); track scope.key) {\r\n                <p-tab [value]=\"scope.key\">{{ scope.label }}</p-tab>\r\n              }\r\n            </p-tablist>\r\n            <p-tabpanels\r\n              class=\"!bg-transparent !p-0 !pb-3 flex-1 overflow-hidden\"\r\n            >\r\n              @for (scope of scopeOptions(); track scope.key) {\r\n                <p-tabpanel [value]=\"scope.key\" class=\"h-full flex flex-col\">\r\n                  @if (scope.key !== \"Current\") {\r\n                    <div class=\"px-4 pt-3 pb-2\">\r\n                      <div\r\n                        class=\"flex flex-col gap-3 rounded-lg bg-slate-50 px-3 py-2 dark:bg-slate-800/50\"\r\n                      >\r\n                        <div class=\"flex items-center gap-2\">\r\n                          <span\r\n                            class=\"shrink-0 text-xs font-semibold uppercase tracking-wider text-slate-400\"\r\n                          >\r\n                            Path\r\n                          </span>\r\n                          <div\r\n                            class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                          ></div>\r\n                          <span class=\"text-xs font-semibold text-slate-600\">\r\n                            {{ scope.label }}\r\n                          </span>\r\n                        </div>\r\n                        @if (getScopeBaseContexts(scope.key).length === 0) {\r\n                          <span class=\"text-xs italic text-slate-400\">\r\n                            No context available\r\n                          </span>\r\n                        } @else {\r\n                          <div class=\"flex flex-col gap-1.5\">\r\n                            @for (\r\n                              segment of getScopePath(scope.key);\r\n                              track $index;\r\n                              let segmentIndex = $index;\r\n                              let isLast = $last\r\n                            ) {\r\n                              <div\r\n                                class=\"flex items-center gap-1 py-0.5 px-2 border border-gray-200 rounded bg-white dark:bg-slate-800 dark:border-slate-600\"\r\n                              >\r\n                                <div\r\n                                  class=\"flex-1 min-w-0 text-xs font-medium text-slate-600 dark:text-slate-300 truncate cursor-pointer\"\r\n                                  (click)=\"segmentPopover.toggle($event)\"\r\n                                >\r\n                                  {{\r\n                                    getScopeSegmentLabel(\r\n                                      scope.key,\r\n                                      segmentIndex\r\n                                    )\r\n                                  }}\r\n                                </div>\r\n                                <mt-button\r\n                                  type=\"button\"\r\n                                  icon=\"arrow.chevron-down\"\r\n                                  [outlined]=\"true\"\r\n                                  size=\"small\"\r\n                                  severity=\"secondary\"\r\n                                  styleClass=\"!p-0.5 !min-w-0\"\r\n                                  (onClick)=\"segmentPopover.toggle($event)\"\r\n                                ></mt-button>\r\n                                @if (isLast && canRemoveScopePath(scope.key)) {\r\n                                  <mt-button\r\n                                    type=\"button\"\r\n                                    icon=\"general.trash-01\"\r\n                                    [outlined]=\"true\"\r\n                                    size=\"small\"\r\n                                    severity=\"danger\"\r\n                                    styleClass=\"!p-0.5 !min-w-0\"\r\n                                    (onClick)=\"removeScopePath(scope.key)\"\r\n                                  ></mt-button>\r\n                                }\r\n                              </div>\r\n                              <p-popover\r\n                                #segmentPopover\r\n                                [style]=\"{ width: 'max-content' }\"\r\n                                [dismissable]=\"true\"\r\n                              >\r\n                                <div class=\"p-2\">\r\n                                  <div\r\n                                    class=\"mb-2 text-xs font-semibold uppercase text-slate-400\"\r\n                                  >\r\n                                    Select {{ getTokenLabel(segment.token) }}\r\n                                  </div>\r\n                                  @if (\r\n                                    getScopeSegmentOptions(\r\n                                      scope.key,\r\n                                      segmentIndex\r\n                                    ).length === 0\r\n                                  ) {\r\n                                    <div\r\n                                      class=\"text-xs font-medium text-slate-400\"\r\n                                    >\r\n                                      No options\r\n                                    </div>\r\n                                  } @else {\r\n                                    <div class=\"flex flex-col gap-1\">\r\n                                      @for (\r\n                                        option of getScopeSegmentOptions(\r\n                                          scope.key,\r\n                                          segmentIndex\r\n                                        );\r\n                                        track option.contextKey\r\n                                      ) {\r\n                                        <mt-button\r\n                                          type=\"button\"\r\n                                          [label]=\"option.label\"\r\n                                          [icon]=\"\r\n                                            option.contextKey === segment.value\r\n                                              ? 'general.check'\r\n                                              : 'general.minus'\r\n                                          \"\r\n                                          [iconPos]=\"'end'\"\r\n                                          size=\"small\"\r\n                                          severity=\"secondary\"\r\n                                          styleClass=\"w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700\"\r\n                                          (onClick)=\"\r\n                                            onSetScopeSegmentValue(\r\n                                              scope.key,\r\n                                              segmentIndex,\r\n                                              option.contextKey,\r\n                                              segmentPopover\r\n                                            )\r\n                                          \"\r\n                                        ></mt-button>\r\n                                      }\r\n                                    </div>\r\n                                  }\r\n                                </div>\r\n                              </p-popover>\r\n                            }\r\n                            @if (canAddNextScopeSegment(scope.key)) {\r\n                              <div class=\"flex items-center gap-2\">\r\n                                <mt-button\r\n                                  type=\"button\"\r\n                                  icon=\"general.plus\"\r\n                                  size=\"small\"\r\n                                  severity=\"primary\"\r\n                                  styleClass=\"flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-xs font-bold text-white hover:opacity-90\"\r\n                                  (onClick)=\"nextContextPopover.toggle($event)\"\r\n                                ></mt-button>\r\n                                <span class=\"text-xs text-slate-400\">\r\n                                  Add segment\r\n                                </span>\r\n                              </div>\r\n                            }\r\n                            <!-- Popover OUTSIDE the @if block like formula-builder -->\r\n                            <p-popover\r\n                              #nextContextPopover\r\n                              [style]=\"{ width: 'max-content' }\"\r\n                              [dismissable]=\"true\"\r\n                              appendTo=\"body\"\r\n                            >\r\n                              <div class=\"p-2\">\r\n                                <div\r\n                                  class=\"mb-2 text-xs font-semibold uppercase text-slate-400\"\r\n                                >\r\n                                  Add Segment\r\n                                </div>\r\n                                <div class=\"flex flex-col gap-1\">\r\n                                  @for (\r\n                                    token of getScopeNextTokens(scope.key);\r\n                                    track token\r\n                                  ) {\r\n                                    <mt-button\r\n                                      type=\"button\"\r\n                                      [label]=\"getTokenLabel(token)\"\r\n                                      size=\"small\"\r\n                                      severity=\"secondary\"\r\n                                      styleClass=\"w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700\"\r\n                                      (onClick)=\"\r\n                                        onAddScopeSegment(\r\n                                          scope.key,\r\n                                          token,\r\n                                          nextContextPopover\r\n                                        )\r\n                                      \"\r\n                                    ></mt-button>\r\n                                  }\r\n                                </div>\r\n                              </div>\r\n                            </p-popover>\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    </div>\r\n                  }\r\n\r\n                  <!-- Node List -->\r\n                  <div\r\n                    class=\"space-y-4 px-4 pb-4 [&_.cdk-drag-placeholder]:hidden flex-1 overflow-y-auto\"\r\n                    [id]=\"'toolbox-' + scope.key\"\r\n                    cdkDropList\r\n                    cdkDropListSortingDisabled\r\n                    [cdkDropListData]=\"getFilteredProperties(scope.key)\"\r\n                    [cdkDropListEnterPredicate]=\"noReturnPredicate\"\r\n                  >\r\n                    @if (scope.key === \"Current\") {\r\n                      <!-- Search Field (Sticky) -->\r\n                      <div\r\n                        class=\"sticky top-0 bg-surface-0 mb-0 py-3 pb-2 mb-1\"\r\n                      >\r\n                        <mt-text-field\r\n                          [placeholder]=\"t('search-properties')\"\r\n                          [(ngModel)]=\"searchQuery\"\r\n                          icon=\"general.search-lg\"\r\n                        />\r\n                      </div>\r\n                    } @else {\r\n                      <div class=\"sticky top-0 bg-surface-0 py-3\">\r\n                        @if (isScopePropertiesLoading(scope.key)) {\r\n                          <p-skeleton height=\"2.5rem\" styleClass=\"rounded-lg\" />\r\n                        } @else {\r\n                          <mt-select-field\r\n                            class=\"w-full\"\r\n                            [label]=\"''\"\r\n                            [filter]=\"true\"\r\n                            [hasPlaceholderPrefix]=\"false\"\r\n                            placeholder=\"Select...\"\r\n                            [ngModel]=\"getScopeSelectedPropertyKey(scope.key)\"\r\n                            (ngModelChange)=\"\r\n                              setScopeSelectedProperty(scope.key, $event)\r\n                            \"\r\n                            [options]=\"getScopePropertyOptions(scope.key)\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"key\"\r\n                            [size]=\"'small'\"\r\n                          />\r\n                        }\r\n                      </div>\r\n                    }\r\n\r\n                    @if (isScopePropertiesLoading(scope.key)) {\r\n                      <div class=\"space-y-4\">\r\n                        @for (i of [1, 2, 3, 4]; track i) {\r\n                          <p-skeleton height=\"3rem\" styleClass=\"rounded-lg\" />\r\n                        }\r\n                      </div>\r\n                    } @else {\r\n                      @for (\r\n                        node of getFilteredProperties(scope.key);\r\n                        track node.key\r\n                      ) {\r\n                        <div\r\n                          cdkDrag\r\n                          [cdkDragData]=\"node\"\r\n                          class=\"group cursor-move select-none flex items-center gap-3 py-3 px-3 rounded-lg border border-dashed border-surface-300 hover:bg-emphasis dark:border-surface-500 transition-colors\"\r\n                        >\r\n                          <div\r\n                            *cdkDragPlaceholder\r\n                            class=\"col-span-12 min-h-27 w-full rounded-2xl bg-black/10 z-1\"\r\n                          ></div>\r\n                          <span\r\n                            class=\"flex-1 text-start text-base font-medium\"\r\n                            >{{ getPropertyLabel(node) }}</span\r\n                          >\r\n\r\n                          <mt-icon\r\n                            class=\"text-lg\"\r\n                            icon=\"general.menu-05\"\r\n                          ></mt-icon>\r\n                        </div>\r\n                      }\r\n\r\n                      @if (getFilteredProperties(scope.key).length === 0) {\r\n                        <div class=\"py-8 text-center text-muted-color\">\r\n                          <p class=\"text-sm\">\r\n                            @if (scope.key === \"Current\" && searchQuery()) {\r\n                              {{ t(\"no-data-found\") }}\r\n                            } @else if (scope.key !== \"Current\") {\r\n                              Select a property\r\n                            } @else if (\r\n                              getScopeProperties(scope.key).length === 0\r\n                            ) {\r\n                              No properties available\r\n                            } @else {\r\n                              All items are in use\r\n                            }\r\n                          </p>\r\n                        </div>\r\n                      }\r\n                    }\r\n                  </div>\r\n                </p-tabpanel>\r\n              }\r\n            </p-tabpanels>\r\n          </p-tabs>\r\n        }\r\n      </ng-template>\r\n    </mt-card>\r\n\r\n    <!-- Main Canvas Area -->\r\n    <div class=\"flex flex-1 gap-4 h-full overflow-y-auto\">\r\n      <div class=\"flex flex-col w-2/3 gap-4 h-full\">\r\n        <mt-card>\r\n          <ng-template #headless>\r\n            <div class=\"p-4 flex items-center gap-3\">\r\n              <mt-button\r\n                icon=\"layout.layout-top\"\r\n                [label]=\"t('add-section')\"\r\n                variant=\"outlined\"\r\n                severity=\"primary\"\r\n                (onClick)=\"addSection()\"\r\n                [disabled]=\"isLoading()\"\r\n              ></mt-button>\r\n              <mt-button\r\n                icon=\"general.eye\"\r\n                [label]=\"t('preview')\"\r\n                variant=\"outlined\"\r\n                severity=\"primary\"\r\n                (onClick)=\"openPreview()\"\r\n                [disabled]=\"isLoading()\"\r\n              ></mt-button>\r\n              <mt-button\r\n                [label]=\"t('validation-rules')\"\r\n                variant=\"outlined\"\r\n                severity=\"primary\"\r\n                (onClick)=\"openValidationRules()\"\r\n                [disabled]=\"isLoading()\"\r\n              ></mt-button>\r\n              <mt-button\r\n                icon=\"finance.credit-card-plus\"\r\n                [label]=\"t('reset')\"\r\n                variant=\"outlined\"\r\n                severity=\"primary\"\r\n                (onClick)=\"resetFormConfiguration()\"\r\n                [disabled]=\"isLoading()\"\r\n              ></mt-button>\r\n            </div>\r\n          </ng-template>\r\n        </mt-card>\r\n\r\n        @if (isLoading()) {\r\n          <!-- Form Loading Skeleton -->\r\n          @for (i of [1, 2]; track i) {\r\n            <mt-card>\r\n              <ng-template #headless>\r\n                <div class=\"p-4 space-y-4\">\r\n                  <!-- Section header skeleton -->\r\n                  <div class=\"flex items-center justify-between\">\r\n                    <p-skeleton width=\"10rem\" height=\"1.5rem\" />\r\n                    <div class=\"flex gap-2\">\r\n                      <p-skeleton width=\"2rem\" height=\"2rem\" shape=\"circle\" />\r\n                      <p-skeleton width=\"2rem\" height=\"2rem\" shape=\"circle\" />\r\n                    </div>\r\n                  </div>\r\n                  <!-- Fields skeleton -->\r\n                  <div class=\"grid grid-cols-12 gap-4\">\r\n                    <div class=\"col-span-6\">\r\n                      <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\r\n                    </div>\r\n                    <div class=\"col-span-6\">\r\n                      <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\r\n                    </div>\r\n                    <div class=\"col-span-12\">\r\n                      <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </ng-template>\r\n            </mt-card>\r\n          }\r\n        } @else {\r\n          @for (section of enrichedSections(); track section.id) {\r\n            <mt-fb-section\r\n              [section]=\"section\"\r\n              [sectionsCount]=\"enrichedSections().length\"\r\n              [allSections]=\"enrichedSections()\"\r\n              (onFieldDrop)=\"drop($event)\"\r\n            >\r\n            </mt-fb-section>\r\n          } @empty {\r\n            <mt-card>\r\n              <div class=\"h-27 p-4\">\r\n                <div\r\n                  class=\"flex justify-center items-center gap-4 h-full border-1 border-primary rounded-xl bg-primary-50 text-primary\"\r\n                >\r\n                  <span>{{ t(\"no-section\") }}</span>\r\n                </div>\r\n              </div>\r\n            </mt-card>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [".cdk-drag{cursor:grab}.cdk-drag:active,.cdk-drag-preview{cursor:grabbing}.cdk-drag-placeholder{opacity:.5}.cdk-drop-list-dragging .cdk-drag{cursor:grabbing}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i2.TabPanel, selector: "p-tabpanel", inputs: ["lazy", "value"], outputs: ["valueChange"] }, { kind: "component", type: i2.TabList, selector: "p-tablist" }, { kind: "component", type: i2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i4.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading"], outputs: ["onChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: FBSection, selector: "mt-fb-section", inputs: ["section", "sectionsCount", "allSections"], outputs: ["onFieldDrop"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormBuilder, decorators: [{
             type: Component,
@@ -2657,15 +3170,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         FormsModule,
                         TabsModule,
                         SkeletonModule,
+                        PopoverModule,
                         Button,
                         Card,
                         TextField,
+                        SelectField,
                         TranslocoDirective,
                         FBSection,
                         DragDropModule,
                         Icon,
-                    ], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div class=\"flex gap-7 h-full w-full overflow-hidden\" cdkDropListGroup>\r\n    <!-- Properties Sidebar -->\r\n    <mt-card class=\"w-1/5 h-full flex flex-col overflow-hidden\">\r\n      <ng-template #headless>\r\n        <!-- Header -->\r\n        <h3 class=\"text-xl font-semibold px-4 pt-5\">\r\n          {{ t(\"form-elements\") }}\r\n        </h3>\r\n\r\n        @if (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: () => [] });
+                    ], template: "<ng-container *transloco=\"let t; prefix: 'formBuilder'\">\r\n  <div class=\"flex gap-7 h-full w-full overflow-hidden\" cdkDropListGroup>\r\n    <!-- Properties Sidebar -->\r\n    <mt-card class=\"w-1/5 h-full flex flex-col overflow-hidden\">\r\n      <ng-template #headless>\r\n        <!-- Header -->\r\n        <h3 class=\"text-xl font-semibold px-4 pt-5\">\r\n          {{ t(\"form-elements\") }}\r\n        </h3>\r\n\r\n        @if (isContextLoading()) {\r\n          <!-- Properties Loading Skeleton -->\r\n          <div class=\"flex gap-4 py-3 px-5 mt-4\">\r\n            <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\r\n            <p-skeleton height=\"2rem\" styleClass=\"rounded-lg\" />\r\n          </div>\r\n          <div class=\"py-4 px-5 space-y-5\">\r\n            @for (i of [1, 2, 3, 4, 5, 6]; track i) {\r\n              <p-skeleton height=\"3rem\" styleClass=\"rounded-lg\" />\r\n            }\r\n          </div>\r\n        } @else if (scopeOptions().length === 0) {\r\n          <!-- No Properties State -->\r\n          <div class=\"flex-1 flex items-center justify-center p-4\">\r\n            <p class=\"text-sm font-semibold text-gray-500\">\r\n              {{ t(\"no-data-found\") }}\r\n            </p>\r\n          </div>\r\n        } @else {\r\n          <!-- Scope Tabs using PrimeNG -->\r\n          <p-tabs\r\n            [value]=\"activeScope()\"\r\n            (valueChange)=\"onScopeChange($event)\"\r\n            styleClass=\"structure-tabs\"\r\n            class=\"flex flex-1 flex-col min-h-0\"\r\n          >\r\n            <p-tablist class=\"shrink-0\">\r\n              @for (scope of scopeOptions(); track scope.key) {\r\n                <p-tab [value]=\"scope.key\">{{ scope.label }}</p-tab>\r\n              }\r\n            </p-tablist>\r\n            <p-tabpanels\r\n              class=\"!bg-transparent !p-0 !pb-3 flex-1 overflow-hidden\"\r\n            >\r\n              @for (scope of scopeOptions(); track scope.key) {\r\n                <p-tabpanel [value]=\"scope.key\" class=\"h-full flex flex-col\">\r\n                  @if (scope.key !== \"Current\") {\r\n                    <div class=\"px-4 pt-3 pb-2\">\r\n                      <div\r\n                        class=\"flex flex-col gap-3 rounded-lg bg-slate-50 px-3 py-2 dark:bg-slate-800/50\"\r\n                      >\r\n                        <div class=\"flex items-center gap-2\">\r\n                          <span\r\n                            class=\"shrink-0 text-xs font-semibold uppercase tracking-wider text-slate-400\"\r\n                          >\r\n                            Path\r\n                          </span>\r\n                          <div\r\n                            class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                          ></div>\r\n                          <span class=\"text-xs font-semibold text-slate-600\">\r\n                            {{ scope.label }}\r\n                          </span>\r\n                        </div>\r\n                        @if (getScopeBaseContexts(scope.key).length === 0) {\r\n                          <span class=\"text-xs italic text-slate-400\">\r\n                            No context available\r\n                          </span>\r\n                        } @else {\r\n                          <div class=\"flex flex-col gap-1.5\">\r\n                            @for (\r\n                              segment of getScopePath(scope.key);\r\n                              track $index;\r\n                              let segmentIndex = $index;\r\n                              let isLast = $last\r\n                            ) {\r\n                              <div\r\n                                class=\"flex items-center gap-1 py-0.5 px-2 border border-gray-200 rounded bg-white dark:bg-slate-800 dark:border-slate-600\"\r\n                              >\r\n                                <div\r\n                                  class=\"flex-1 min-w-0 text-xs font-medium text-slate-600 dark:text-slate-300 truncate cursor-pointer\"\r\n                                  (click)=\"segmentPopover.toggle($event)\"\r\n                                >\r\n                                  {{\r\n                                    getScopeSegmentLabel(\r\n                                      scope.key,\r\n                                      segmentIndex\r\n                                    )\r\n                                  }}\r\n                                </div>\r\n                                <mt-button\r\n                                  type=\"button\"\r\n                                  icon=\"arrow.chevron-down\"\r\n                                  [outlined]=\"true\"\r\n                                  size=\"small\"\r\n                                  severity=\"secondary\"\r\n                                  styleClass=\"!p-0.5 !min-w-0\"\r\n                                  (onClick)=\"segmentPopover.toggle($event)\"\r\n                                ></mt-button>\r\n                                @if (isLast && canRemoveScopePath(scope.key)) {\r\n                                  <mt-button\r\n                                    type=\"button\"\r\n                                    icon=\"general.trash-01\"\r\n                                    [outlined]=\"true\"\r\n                                    size=\"small\"\r\n                                    severity=\"danger\"\r\n                                    styleClass=\"!p-0.5 !min-w-0\"\r\n                                    (onClick)=\"removeScopePath(scope.key)\"\r\n                                  ></mt-button>\r\n                                }\r\n                              </div>\r\n                              <p-popover\r\n                                #segmentPopover\r\n                                [style]=\"{ width: 'max-content' }\"\r\n                                [dismissable]=\"true\"\r\n                              >\r\n                                <div class=\"p-2\">\r\n                                  <div\r\n                                    class=\"mb-2 text-xs font-semibold uppercase text-slate-400\"\r\n                                  >\r\n                                    Select {{ getTokenLabel(segment.token) }}\r\n                                  </div>\r\n                                  @if (\r\n                                    getScopeSegmentOptions(\r\n                                      scope.key,\r\n                                      segmentIndex\r\n                                    ).length === 0\r\n                                  ) {\r\n                                    <div\r\n                                      class=\"text-xs font-medium text-slate-400\"\r\n                                    >\r\n                                      No options\r\n                                    </div>\r\n                                  } @else {\r\n                                    <div class=\"flex flex-col gap-1\">\r\n                                      @for (\r\n                                        option of getScopeSegmentOptions(\r\n                                          scope.key,\r\n                                          segmentIndex\r\n                                        );\r\n                                        track option.contextKey\r\n                                      ) {\r\n                                        <mt-button\r\n                                          type=\"button\"\r\n                                          [label]=\"option.label\"\r\n                                          [icon]=\"\r\n                                            option.contextKey === segment.value\r\n                                              ? 'general.check'\r\n                                              : 'general.minus'\r\n                                          \"\r\n                                          [iconPos]=\"'end'\"\r\n                                          size=\"small\"\r\n                                          severity=\"secondary\"\r\n                                          styleClass=\"w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700\"\r\n                                          (onClick)=\"\r\n                                            onSetScopeSegmentValue(\r\n                                              scope.key,\r\n                                              segmentIndex,\r\n                                              option.contextKey,\r\n                                              segmentPopover\r\n                                            )\r\n                                          \"\r\n                                        ></mt-button>\r\n                                      }\r\n                                    </div>\r\n                                  }\r\n                                </div>\r\n                              </p-popover>\r\n                            }\r\n                            @if (canAddNextScopeSegment(scope.key)) {\r\n                              <div class=\"flex items-center gap-2\">\r\n                                <mt-button\r\n                                  type=\"button\"\r\n                                  icon=\"general.plus\"\r\n                                  size=\"small\"\r\n                                  severity=\"primary\"\r\n                                  styleClass=\"flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-xs font-bold text-white hover:opacity-90\"\r\n                                  (onClick)=\"nextContextPopover.toggle($event)\"\r\n                                ></mt-button>\r\n                                <span class=\"text-xs text-slate-400\">\r\n                                  Add segment\r\n                                </span>\r\n                              </div>\r\n                            }\r\n                            <!-- Popover OUTSIDE the @if block like formula-builder -->\r\n                            <p-popover\r\n                              #nextContextPopover\r\n                              [style]=\"{ width: 'max-content' }\"\r\n                              [dismissable]=\"true\"\r\n                              appendTo=\"body\"\r\n                            >\r\n                              <div class=\"p-2\">\r\n                                <div\r\n                                  class=\"mb-2 text-xs font-semibold uppercase text-slate-400\"\r\n                                >\r\n                                  Add Segment\r\n                                </div>\r\n                                <div class=\"flex flex-col gap-1\">\r\n                                  @for (\r\n                                    token of getScopeNextTokens(scope.key);\r\n                                    track token\r\n                                  ) {\r\n                                    <mt-button\r\n                                      type=\"button\"\r\n                                      [label]=\"getTokenLabel(token)\"\r\n                                      size=\"small\"\r\n                                      severity=\"secondary\"\r\n                                      styleClass=\"w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700\"\r\n                                      (onClick)=\"\r\n                                        onAddScopeSegment(\r\n                                          scope.key,\r\n                                          token,\r\n                                          nextContextPopover\r\n                                        )\r\n                                      \"\r\n                                    ></mt-button>\r\n                                  }\r\n                                </div>\r\n                              </div>\r\n                            </p-popover>\r\n                          </div>\r\n                        }\r\n                      </div>\r\n                    </div>\r\n                  }\r\n\r\n                  <!-- Node List -->\r\n                  <div\r\n                    class=\"space-y-4 px-4 pb-4 [&_.cdk-drag-placeholder]:hidden flex-1 overflow-y-auto\"\r\n                    [id]=\"'toolbox-' + scope.key\"\r\n                    cdkDropList\r\n                    cdkDropListSortingDisabled\r\n                    [cdkDropListData]=\"getFilteredProperties(scope.key)\"\r\n                    [cdkDropListEnterPredicate]=\"noReturnPredicate\"\r\n                  >\r\n                    @if (scope.key === \"Current\") {\r\n                      <!-- Search Field (Sticky) -->\r\n                      <div\r\n                        class=\"sticky top-0 bg-surface-0 mb-0 py-3 pb-2 mb-1\"\r\n                      >\r\n                        <mt-text-field\r\n                          [placeholder]=\"t('search-properties')\"\r\n                          [(ngModel)]=\"searchQuery\"\r\n                          icon=\"general.search-lg\"\r\n                        />\r\n                      </div>\r\n                    } @else {\r\n                      <div class=\"sticky top-0 bg-surface-0 py-3\">\r\n                        @if (isScopePropertiesLoading(scope.key)) {\r\n                          <p-skeleton height=\"2.5rem\" styleClass=\"rounded-lg\" />\r\n                        } @else {\r\n                          <mt-select-field\r\n                            class=\"w-full\"\r\n                            [label]=\"''\"\r\n                            [filter]=\"true\"\r\n                            [hasPlaceholderPrefix]=\"false\"\r\n                            placeholder=\"Select...\"\r\n                            [ngModel]=\"getScopeSelectedPropertyKey(scope.key)\"\r\n                            (ngModelChange)=\"\r\n                              setScopeSelectedProperty(scope.key, $event)\r\n                            \"\r\n                            [options]=\"getScopePropertyOptions(scope.key)\"\r\n                            optionLabel=\"name\"\r\n                            optionValue=\"key\"\r\n                            [size]=\"'small'\"\r\n                          />\r\n                        }\r\n                      </div>\r\n                    }\r\n\r\n                    @if (isScopePropertiesLoading(scope.key)) {\r\n                      <div class=\"space-y-4\">\r\n                        @for (i of [1, 2, 3, 4]; track i) {\r\n                          <p-skeleton height=\"3rem\" styleClass=\"rounded-lg\" />\r\n                        }\r\n                      </div>\r\n                    } @else {\r\n                      @for (\r\n                        node of getFilteredProperties(scope.key);\r\n                        track node.key\r\n                      ) {\r\n                        <div\r\n                          cdkDrag\r\n                          [cdkDragData]=\"node\"\r\n                          class=\"group cursor-move select-none flex items-center gap-3 py-3 px-3 rounded-lg border border-dashed border-surface-300 hover:bg-emphasis dark:border-surface-500 transition-colors\"\r\n                        >\r\n                          <div\r\n                            *cdkDragPlaceholder\r\n                            class=\"col-span-12 min-h-27 w-full rounded-2xl bg-black/10 z-1\"\r\n                          ></div>\r\n                          <span\r\n                            class=\"flex-1 text-start text-base font-medium\"\r\n                            >{{ getPropertyLabel(node) }}</span\r\n                          >\r\n\r\n                          <mt-icon\r\n                            class=\"text-lg\"\r\n                            icon=\"general.menu-05\"\r\n                          ></mt-icon>\r\n                        </div>\r\n                      }\r\n\r\n                      @if (getFilteredProperties(scope.key).length === 0) {\r\n                        <div class=\"py-8 text-center text-muted-color\">\r\n                          <p class=\"text-sm\">\r\n                            @if (scope.key === \"Current\" && searchQuery()) {\r\n                              {{ t(\"no-data-found\") }}\r\n                            } @else if (scope.key !== \"Current\") {\r\n                              Select a property\r\n                            } @else if (\r\n                              getScopeProperties(scope.key).length === 0\r\n                            ) {\r\n                              No properties available\r\n                            } @else {\r\n                              All items are in use\r\n                            }\r\n                          </p>\r\n                        </div>\r\n                      }\r\n                    }\r\n                  </div>\r\n                </p-tabpanel>\r\n              }\r\n            </p-tabpanels>\r\n          </p-tabs>\r\n        }\r\n      </ng-template>\r\n    </mt-card>\r\n\r\n    <!-- Main Canvas Area -->\r\n    <div class=\"flex flex-1 gap-4 h-full overflow-y-auto\">\r\n      <div class=\"flex flex-col w-2/3 gap-4 h-full\">\r\n        <mt-card>\r\n          <ng-template #headless>\r\n            <div class=\"p-4 flex items-center gap-3\">\r\n              <mt-button\r\n                icon=\"layout.layout-top\"\r\n                [label]=\"t('add-section')\"\r\n                variant=\"outlined\"\r\n                severity=\"primary\"\r\n                (onClick)=\"addSection()\"\r\n                [disabled]=\"isLoading()\"\r\n              ></mt-button>\r\n              <mt-button\r\n                icon=\"general.eye\"\r\n                [label]=\"t('preview')\"\r\n                variant=\"outlined\"\r\n                severity=\"primary\"\r\n                (onClick)=\"openPreview()\"\r\n                [disabled]=\"isLoading()\"\r\n              ></mt-button>\r\n              <mt-button\r\n                [label]=\"t('validation-rules')\"\r\n                variant=\"outlined\"\r\n                severity=\"primary\"\r\n                (onClick)=\"openValidationRules()\"\r\n                [disabled]=\"isLoading()\"\r\n              ></mt-button>\r\n              <mt-button\r\n                icon=\"finance.credit-card-plus\"\r\n                [label]=\"t('reset')\"\r\n                variant=\"outlined\"\r\n                severity=\"primary\"\r\n                (onClick)=\"resetFormConfiguration()\"\r\n                [disabled]=\"isLoading()\"\r\n              ></mt-button>\r\n            </div>\r\n          </ng-template>\r\n        </mt-card>\r\n\r\n        @if (isLoading()) {\r\n          <!-- Form Loading Skeleton -->\r\n          @for (i of [1, 2]; track i) {\r\n            <mt-card>\r\n              <ng-template #headless>\r\n                <div class=\"p-4 space-y-4\">\r\n                  <!-- Section header skeleton -->\r\n                  <div class=\"flex items-center justify-between\">\r\n                    <p-skeleton width=\"10rem\" height=\"1.5rem\" />\r\n                    <div class=\"flex gap-2\">\r\n                      <p-skeleton width=\"2rem\" height=\"2rem\" shape=\"circle\" />\r\n                      <p-skeleton width=\"2rem\" height=\"2rem\" shape=\"circle\" />\r\n                    </div>\r\n                  </div>\r\n                  <!-- Fields skeleton -->\r\n                  <div class=\"grid grid-cols-12 gap-4\">\r\n                    <div class=\"col-span-6\">\r\n                      <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\r\n                    </div>\r\n                    <div class=\"col-span-6\">\r\n                      <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\r\n                    </div>\r\n                    <div class=\"col-span-12\">\r\n                      <p-skeleton height=\"4rem\" styleClass=\"rounded-lg\" />\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </ng-template>\r\n            </mt-card>\r\n          }\r\n        } @else {\r\n          @for (section of enrichedSections(); track section.id) {\r\n            <mt-fb-section\r\n              [section]=\"section\"\r\n              [sectionsCount]=\"enrichedSections().length\"\r\n              [allSections]=\"enrichedSections()\"\r\n              (onFieldDrop)=\"drop($event)\"\r\n            >\r\n            </mt-fb-section>\r\n          } @empty {\r\n            <mt-card>\r\n              <div class=\"h-27 p-4\">\r\n                <div\r\n                  class=\"flex justify-center items-center gap-4 h-full border-1 border-primary rounded-xl bg-primary-50 text-primary\"\r\n                >\r\n                  <span>{{ t(\"no-section\") }}</span>\r\n                </div>\r\n              </div>\r\n            </mt-card>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [".cdk-drag{cursor:grab}.cdk-drag:active,.cdk-drag-preview{cursor:grabbing}.cdk-drag-placeholder{opacity:.5}.cdk-drop-list-dragging .cdk-drag{cursor:grabbing}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { popovers: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => Popover), { isSignal: true }] }] } });
 
 /*
  * Public API Surface of form-builder