@masterteam/formula-builder 0.0.7 → 0.0.9

package/fesm2022/masterteam-formula-builder.mjs

@@ -42,7 +42,7 @@ const ERROR_VALIDATION = {
 };
 class FormulaValidatorService {
     http = inject(HttpClient);
-    apiUrl = '/formulas';
+    apiUrl = 'formulas';
     getBaseUrl(mode) {
         return mode === 'current-only'
             ? `${this.apiUrl}/current-only`
@@ -77,6 +77,7 @@ class FormulaValidatorService {
         this.validateSubject
             .pipe(debounceTime(this.DEBOUNCE_MS), distinctUntilChanged((a, b) => a.formula === b.formula &&
             a.levelSchemaId === b.levelSchemaId &&
+            a.moduleId === b.moduleId &&
             a.templateId === b.templateId &&
             a.apiMode === b.apiMode &&
             JSON.stringify(a.knownProperties) ===
@@ -87,7 +88,7 @@ class FormulaValidatorService {
         });
     }
     /** Validate formula (debounced) */
-    validate(formula, knownProperties, levelSchemaId, templateId, apiMode = 'default') {
+    validate(formula, knownProperties, levelSchemaId, moduleId, templateId, apiMode = 'default') {
         // Handle empty formula
         if (!formula || formula.trim() === '') {
             this._validation.set(EMPTY_VALIDATION);
@@ -98,12 +99,13 @@ class FormulaValidatorService {
             formula,
             knownProperties,
             levelSchemaId,
+            moduleId,
             templateId,
             apiMode,
         });
     }
     /** Validate formula immediately (no debounce) */
-    validateImmediate(formula, knownProperties, levelSchemaId, templateId, apiMode = 'default') {
+    validateImmediate(formula, knownProperties, levelSchemaId, moduleId, templateId, apiMode = 'default') {
         if (!formula || formula.trim() === '') {
             return of(EMPTY_VALIDATION);
         }
@@ -112,6 +114,7 @@ class FormulaValidatorService {
             formula,
             knownProperties,
             levelSchemaId,
+            moduleId,
             templateId,
             apiMode,
         }).pipe(tap((result) => {
@@ -176,7 +179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
 
 class FormulaContextService {
     http = inject(HttpClient);
-    apiUrl = '/formulas';
+    apiUrl = 'formulas';
     getBaseUrl(mode) {
         return mode === 'current-only'
             ? `${this.apiUrl}/current-only`
@@ -195,17 +198,23 @@ class FormulaContextService {
     contextCache = new Map();
     propertiesCache = new Map();
     nextTokensCache = new Map();
-    loadContext(schemaId, contextEntityTypeKey, mode = 'default') {
+    loadContext(schemaId, moduleId, contextEntityTypeKey, mode = 'default') {
         if (!schemaId)
             return of(null);
-        const cacheKey = `${mode}:${schemaId}:${contextEntityTypeKey ?? ''}`;
+        const cacheKey = `${mode}:${schemaId}:${moduleId ?? ''}:${contextEntityTypeKey ?? ''}`;
         const cached = this.contextCache.get(cacheKey);
         if (cached) {
             return of(cached);
         }
-        const query = mode === 'default' && contextEntityTypeKey
-            ? `?contextEntityTypeKey=${encodeURIComponent(contextEntityTypeKey)}`
-            : '';
+        const params = new URLSearchParams();
+        if (mode === 'default' && contextEntityTypeKey) {
+            params.set('contextEntityTypeKey', contextEntityTypeKey);
+        }
+        if (moduleId !== undefined) {
+            params.set('moduleId', moduleId.toString());
+        }
+        const queryString = params.toString();
+        const query = queryString ? `?${queryString}` : '';
         return this.http
             .get(`${this.getBaseUrl(mode)}/builder/context/${schemaId}${query}`)
             .pipe(map((response) => this.unwrapResponse(response)), tap((context) => {
@@ -217,21 +226,24 @@ class FormulaContextService {
             return of(null);
         }));
     }
-    getScopeProperties(schemaId, component, tablePath, mode = 'default') {
-        if (!schemaId || !component || !tablePath)
+    getScopeProperties(schemaId, component, tablePath, moduleId, mode = 'default') {
+        if (!schemaId || !tablePath)
             return of([]);
-        if (mode === 'current-only')
-            return of([]);
-        const cacheKey = `${mode}:${schemaId}:${component}:${tablePath}`;
+        const cacheKey = `${mode}:${schemaId}:${moduleId ?? ''}:${component}:${tablePath}`;
         const cached = this.propertiesCache.get(cacheKey);
         if (cached) {
             return of(cached);
         }
         const params = new URLSearchParams({
             schemaId: schemaId.toString(),
-            component,
             tablePath,
         });
+        if (component) {
+            params.set('component', component);
+        }
+        if (moduleId !== undefined) {
+            params.set('moduleId', moduleId.toString());
+        }
         return this.http
             .get(`${this.getBaseUrl(mode)}/builder/properties?${params.toString()}`)
             .pipe(map((response) => this.unwrapResponse(response) ?? []), tap((response) => {
@@ -241,12 +253,10 @@ class FormulaContextService {
             return of([]);
         }));
     }
-    getNextTokens(schemaId, component, tablePath, mode = 'default') {
+    getNextTokens(schemaId, component, tablePath, moduleId, mode = 'default') {
         if (!schemaId || !component || !tablePath)
             return of(null);
-        if (mode === 'current-only')
-            return of(null);
-        const cacheKey = `${mode}:${schemaId}:${component}:${tablePath}`;
+        const cacheKey = `${mode}:${schemaId}:${moduleId ?? ''}:${component}:${tablePath}`;
         const cached = this.nextTokensCache.get(cacheKey);
         if (cached) {
             return of(cached);
@@ -256,6 +266,9 @@ class FormulaContextService {
             component,
             tablePath,
         });
+        if (moduleId !== undefined) {
+            params.set('moduleId', moduleId.toString());
+        }
         return this.http
             .get(`${this.getBaseUrl(mode)}/builder/next-tokens?${params.toString()}`)
             .pipe(map((response) => this.unwrapResponse(response)), tap((payload) => {
@@ -277,7 +290,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
 
 class FormulaAutocompleteService {
     http = inject(HttpClient);
-    apiUrl = '/formulas';
+    apiUrl = 'formulas';
     getBaseUrl(mode) {
         return mode === 'current-only'
             ? `${this.apiUrl}/current-only`
@@ -410,13 +423,24 @@ const DEFAULT_TOOLBAR_TABS = [
     'properties',
     'operators',
 ];
+const PROPERTY_SCOPE_PRIORITY = [
+    'Current',
+    'Host',
+    'Parent',
+    'Children',
+    'Descendants',
+    'Modules',
+    'Schedule',
+];
 const SCOPE_ICON_MAP = {
     Current: 'map.marker-pin-01',
+    Host: 'map.marker-pin-01',
     Level: 'map.marker-pin-01',
     Parent: 'arrow.arrow-up',
     Children: 'user.users-01',
     Descendants: 'custom.hierarchy-structure',
     Modules: 'file.folder-closed',
+    Schedule: 'general.placeholder',
 };
 class FormulaBuilder {
     validatorService = inject(FormulaValidatorService);
@@ -430,6 +454,8 @@ class FormulaBuilder {
     propertiesByPath = input({}, ...(ngDevMode ? [{ debugName: "propertiesByPath" }] : []));
     /** Level schema ID for validation context */
     levelSchemaId = input(...(ngDevMode ? [undefined, { debugName: "levelSchemaId" }] : []));
+    /** Optional module ID when the formula is scoped inside a level-linked module */
+    moduleId = input(...(ngDevMode ? [undefined, { debugName: "moduleId" }] : []));
     /** Optional current context entity key, e.g. LevelData or Risk */
     contextEntityTypeKey = input(...(ngDevMode ? [undefined, { debugName: "contextEntityTypeKey" }] : []));
     /** Template ID for validation context */
@@ -468,10 +494,20 @@ class FormulaBuilder {
         const normalized = value.trim();
         return normalized.length > 0 ? normalized : undefined;
     }, ...(ngDevMode ? [{ debugName: "resolvedContextEntityTypeKey" }] : []));
+    isModuleContext = computed(() => {
+        const contextType = this.resolvedContextEntityTypeKey() ??
+            this.builderContext()?.contextEntityTypeKey;
+        if (typeof contextType !== 'string') {
+            return false;
+        }
+        const normalized = contextType.trim().toLowerCase();
+        return normalized.length > 0 && normalized !== 'leveldata';
+    }, ...(ngDevMode ? [{ debugName: "isModuleContext" }] : []));
     autocompleteProvider = (request) => {
         return this.autocompleteService.getSuggestions({
             ...request,
             levelSchemaId: this.levelSchemaId(),
+            moduleId: this.moduleId(),
             contextEntityTypeKey: this.resolvedContextEntityTypeKey() ??
                 this.builderContext()?.contextEntityTypeKey,
         }, this.isProcessBuilder() ? 'current-only' : 'default');
@@ -514,9 +550,10 @@ class FormulaBuilder {
         // Validate when formula changes
         effect(() => {
             const formula = this.expressionValue();
+            const moduleId = this.moduleId();
             const apiMode = this.formulaApiMode();
             if (formula && formula.trim().length > 0) {
-                this.validatorService.validate(formula, undefined, this.levelSchemaId(), this.templateId(), apiMode);
+                this.validatorService.validate(formula, undefined, this.levelSchemaId(), moduleId, this.templateId(), apiMode);
             }
         });
         // Emit validation changes
@@ -527,6 +564,7 @@ class FormulaBuilder {
         // Load builder context when schema changes
         effect(() => {
             const schemaId = this.levelSchemaId();
+            const moduleId = this.moduleId();
             const apiMode = this.formulaApiMode();
             const contextEntityTypeKey = this.resolvedContextEntityTypeKey();
             if (!schemaId) {
@@ -541,7 +579,7 @@ class FormulaBuilder {
             this.propertiesByPathApi.set({});
             this.nextTokenRulesByPath.set({});
             this.contextService
-                .loadContext(schemaId, contextEntityTypeKey, apiMode)
+                .loadContext(schemaId, moduleId, contextEntityTypeKey, apiMode)
                 .subscribe((context) => {
                 if (requestId !== this.contextRequestId) {
                     return;
@@ -552,16 +590,9 @@ class FormulaBuilder {
                     return;
                 }
                 if (context.currentProperties?.length) {
-                    const scalarOperators = context.schemaDescriptor?.operators?.filter((operator) => operator.cardinality === 'scalar' &&
-                        !operator.requiresParameter &&
-                        !operator.parameterKind) ?? [];
-                    const scopedProperties = scalarOperators.reduce((acc, operator) => ({
-                        ...acc,
-                        [operator.token]: context.currentProperties,
-                    }), {});
                     this.propertiesByPathApi.update((current) => ({
                         ...current,
-                        ...scopedProperties,
+                        Current: context.currentProperties,
                     }));
                 }
             });
@@ -579,15 +610,12 @@ class FormulaBuilder {
         // Fetch properties for the selected table path
         effect(() => {
             const schemaId = this.levelSchemaId();
-            const isProcessBuilder = this.isProcessBuilder();
+            const moduleId = this.moduleId();
+            const apiMode = this.formulaApiMode();
             const tablePath = this.resolvedTablePath();
             const component = this.propertiesComponent();
             const context = this.builderContext();
-            if (isProcessBuilder ||
-                !schemaId ||
-                !tablePath ||
-                !component ||
-                !context) {
+            if (!schemaId || !tablePath || !context) {
                 this.propertyLoadingPath.set(null);
                 return;
             }
@@ -598,7 +626,7 @@ class FormulaBuilder {
             }
             this.propertyLoadingPath.set(tablePath);
             this.contextService
-                .getScopeProperties(schemaId, component, tablePath)
+                .getScopeProperties(schemaId, component, tablePath, moduleId, apiMode)
                 .subscribe((props) => {
                 this.propertiesByPathApi.update((current) => ({
                     ...current,
@@ -612,6 +640,7 @@ class FormulaBuilder {
         // Fetch next-token rules for the current table path
         effect(() => {
             const schemaId = this.levelSchemaId();
+            const moduleId = this.moduleId();
             const isProcessBuilder = this.isProcessBuilder();
             const tablePath = this.resolvedTablePath();
             const component = this.propertiesComponent();
@@ -620,7 +649,7 @@ class FormulaBuilder {
             if (this.nextTokenRulesByPath()[tablePath])
                 return;
             this.contextService
-                .getNextTokens(schemaId, component, tablePath)
+                .getNextTokens(schemaId, component, tablePath, moduleId)
                 .subscribe((response) => {
                 if (!response)
                     return;
@@ -898,7 +927,17 @@ class FormulaBuilder {
         const operators = this.contextOperators();
         if (operators.length === 0)
             return [];
-        return operators.map((operator) => ({
+        const priority = new Map(PROPERTY_SCOPE_PRIORITY.map((token, index) => [token, index]));
+        return [...operators]
+            .sort((a, b) => {
+            const aPriority = priority.get(a.token) ?? Number.MAX_SAFE_INTEGER;
+            const bPriority = priority.get(b.token) ?? Number.MAX_SAFE_INTEGER;
+            if (aPriority !== bPriority) {
+                return aPriority - bPriority;
+            }
+            return a.token.localeCompare(b.token);
+        })
+            .map((operator) => ({
             key: operator.token,
             label: `@${operator.token}`,
             requiresParam: operator.requiresParameter ?? false,
@@ -908,7 +947,7 @@ class FormulaBuilder {
     /** Radio card options for scope selection */
     scopeOptions = computed(() => this.availableScopes().map((scope) => ({
         id: scope.key,
-        name: scope.key,
+        name: this.getOperatorDisplayName(scope.key),
         icon: SCOPE_ICON_MAP[scope.key] ?? DEFAULT_SCOPE_ICON,
     })), ...(ngDevMode ? [{ debugName: "scopeOptions" }] : []));
     /** Handle scope selection from radio cards */
@@ -967,11 +1006,7 @@ class FormulaBuilder {
         return segments.every((segment) => !segment.requiresParameter || Boolean(segment.value));
     }, ...(ngDevMode ? [{ debugName: "canAddNextSegment" }] : []));
     propertiesComponent = computed(() => {
-        if (this.isProcessBuilder()) {
-            return undefined;
-        }
-        const contextKey = this.builderContext()?.contextEntityTypeKey;
-        return contextKey;
+        return this.builderContext()?.contextEntityTypeKey;
     }, ...(ngDevMode ? [{ debugName: "propertiesComponent" }] : []));
     mergedPropertiesByPath = computed(() => {
         const merged = {
@@ -1062,14 +1097,20 @@ class FormulaBuilder {
         const block = createPropertyBlock(`@${tablePath}::${prop.key}`, 'current', display);
         insertBlock(block);
     }
+    getOperatorDisplayName(token) {
+        if (token === 'Host' && this.isModuleContext()) {
+            return 'Level';
+        }
+        return token;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormulaBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormulaBuilder, isStandalone: true, selector: "mt-formula-builder", inputs: { propertiesByPath: { classPropertyName: "propertiesByPath", publicName: "propertiesByPath", isSignal: true, isRequired: false, transformFunction: null }, levelSchemaId: { classPropertyName: "levelSchemaId", publicName: "levelSchemaId", isSignal: true, isRequired: false, transformFunction: null }, contextEntityTypeKey: { classPropertyName: "contextEntityTypeKey", publicName: "contextEntityTypeKey", isSignal: true, isRequired: false, transformFunction: null }, templateId: { classPropertyName: "templateId", publicName: "templateId", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hideToolbar: { classPropertyName: "hideToolbar", publicName: "hideToolbar", isSignal: true, isRequired: false, transformFunction: null }, hideStatusBar: { classPropertyName: "hideStatusBar", publicName: "hideStatusBar", isSignal: true, isRequired: false, transformFunction: null }, toolbarTabs: { classPropertyName: "toolbarTabs", publicName: "toolbarTabs", isSignal: true, isRequired: false, transformFunction: null }, codeOnly: { classPropertyName: "codeOnly", publicName: "codeOnly", isSignal: true, isRequired: false, transformFunction: null }, isProcessBuilder: { classPropertyName: "isProcessBuilder", publicName: "isProcessBuilder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { validationChange: "validationChange", tokensChange: "tokensChange" }, host: { classAttribute: "block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormulaBuilder, isStandalone: true, selector: "mt-formula-builder", inputs: { propertiesByPath: { classPropertyName: "propertiesByPath", publicName: "propertiesByPath", isSignal: true, isRequired: false, transformFunction: null }, levelSchemaId: { classPropertyName: "levelSchemaId", publicName: "levelSchemaId", isSignal: true, isRequired: false, transformFunction: null }, moduleId: { classPropertyName: "moduleId", publicName: "moduleId", isSignal: true, isRequired: false, transformFunction: null }, contextEntityTypeKey: { classPropertyName: "contextEntityTypeKey", publicName: "contextEntityTypeKey", isSignal: true, isRequired: false, transformFunction: null }, templateId: { classPropertyName: "templateId", publicName: "templateId", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hideToolbar: { classPropertyName: "hideToolbar", publicName: "hideToolbar", isSignal: true, isRequired: false, transformFunction: null }, hideStatusBar: { classPropertyName: "hideStatusBar", publicName: "hideStatusBar", isSignal: true, isRequired: false, transformFunction: null }, toolbarTabs: { classPropertyName: "toolbarTabs", publicName: "toolbarTabs", isSignal: true, isRequired: false, transformFunction: null }, codeOnly: { classPropertyName: "codeOnly", publicName: "codeOnly", isSignal: true, isRequired: false, transformFunction: null }, isProcessBuilder: { classPropertyName: "isProcessBuilder", publicName: "isProcessBuilder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { validationChange: "validationChange", tokensChange: "tokensChange" }, host: { classAttribute: "block" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FormulaBuilder),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "editor", first: true, predicate: ["formulaEditor"], descendants: true, isSignal: true }, { propertyName: "codeEditor", first: true, predicate: ["formulaEditorCode"], descendants: true, isSignal: true }], ngImport: i0, template: "<mt-card\r\n  headless\r\n  [class.ring-2]=\"hasFocus()\"\r\n  [class.ring-primary]=\"hasFocus()\"\r\n  [paddingless]=\"true\"\r\n>\r\n  <div\r\n    *transloco=\"let t; prefix: 'formulaBuilder'\"\r\n    class=\"flex flex-col overflow-hidden\"\r\n  >\r\n    <!-- Toolbar - Pass data via inputs (pure component) -->\r\n    @if (!hideToolbar()) {\r\n      <mt-formula-toolbar\r\n        [functionCategories]=\"functionCategories()\"\r\n        [visibleTabs]=\"resolvedToolbarTabs()\"\r\n        (onBlockInsert)=\"onBlockInsert($event)\"\r\n      >\r\n        <ng-template #properties let-insertBlock=\"insertBlock\">\r\n          @if (isContextLoading()) {\r\n            <div class=\"flex flex-col gap-4 p-4\">\r\n              <div class=\"flex items-center justify-between gap-4\">\r\n                <p-skeleton\r\n                  width=\"18rem\"\r\n                  height=\"2.5rem\"\r\n                  styleClass=\"rounded-md\"\r\n                />\r\n                <p-skeleton\r\n                  width=\"7rem\"\r\n                  height=\"2.5rem\"\r\n                  styleClass=\"rounded-md\"\r\n                />\r\n              </div>\r\n              <div class=\"flex items-center gap-4\">\r\n                <div\r\n                  class=\"flex min-h-11 min-w-0 flex-1 flex-col gap-2 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                    <p-skeleton\r\n                      width=\"3rem\"\r\n                      height=\"1rem\"\r\n                      styleClass=\"rounded-md\"\r\n                    />\r\n                    <div\r\n                      class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                    ></div>\r\n                    <p-skeleton\r\n                      class=\"flex-1\"\r\n                      height=\"2rem\"\r\n                      styleClass=\"rounded-md\"\r\n                    />\r\n                  </div>\r\n                  <div\r\n                    class=\"flex items-center gap-2 border-t border-slate-200 pt-2 dark:border-slate-700\"\r\n                  >\r\n                    <p-skeleton\r\n                      width=\"3rem\"\r\n                      height=\"1rem\"\r\n                      styleClass=\"rounded-md\"\r\n                    />\r\n                    <div\r\n                      class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                    ></div>\r\n                    <p-skeleton\r\n                      class=\"flex-1\"\r\n                      height=\"2.5rem\"\r\n                      styleClass=\"rounded-md\"\r\n                    />\r\n                  </div>\r\n                  <p-skeleton height=\"2rem\" styleClass=\"rounded-md\" />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          } @else {\r\n            <div class=\"flex flex-col gap-4 p-4\">\r\n              <!-- Scope Selection - Full width, centered -->\r\n              <div class=\"flex items-center justify-between gap-4\">\r\n                <mt-radio-cards\r\n                  [options]=\"scopeOptions()\"\r\n                  [activeId]=\"propertyScope()\"\r\n                  (selectionChange)=\"onScopeChange($event)\"\r\n                  size=\"small\"\r\n                />\r\n              </div>\r\n\r\n              <!-- Path + Field + Preview Row -->\r\n              <div class=\"flex items-center gap-4\">\r\n                <!-- Path Container - Flexible -->\r\n                <div\r\n                  class=\"flex min-h-11 min-w-0 flex-1 flex-col gap-2 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                      >{{ t(\"properties.path\") }}</span\r\n                    >\r\n                    <div\r\n                      class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                    ></div>\r\n                    <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n                      @if (isDirectAccess()) {\r\n                        <span\r\n                          class=\"rounded-md bg-emerald-100 px-2.5 py-1 text-xs font-medium text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400\"\r\n                        >\r\n                          \u2713 {{ t(\"properties.direct-access\") }}\r\n                        </span>\r\n                      } @else if (pathSegments().length === 0) {\r\n                        <span class=\"text-xs italic text-slate-400\">{{\r\n                          t(\"properties.no-path-configured\")\r\n                        }}</span>\r\n                      } @else {\r\n                        <div\r\n                          class=\"flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto\"\r\n                        >\r\n                          @for (\r\n                            segment of pathSegments();\r\n                            track $index;\r\n                            let segmentIndex = $index\r\n                          ) {\r\n                            @if (segmentIndex > 0) {\r\n                              <span\r\n                                class=\"shrink-0 text-slate-300 dark:text-slate-600\"\r\n                                >\u203A</span\r\n                              >\r\n                            }\r\n                            <mt-button\r\n                              type=\"button\"\r\n                              [label]=\"\r\n                                segment.value ||\r\n                                t('properties.select') +\r\n                                  ' ' +\r\n                                  segment.operatorToken\r\n                              \"\r\n                              icon=\"arrow.chevron-down\"\r\n                              [outlined]=\"true\"\r\n                              size=\"small\"\r\n                              [severity]=\"\r\n                                segment.value ? 'primary' : 'secondary'\r\n                              \"\r\n                              [iconPos]=\"'end'\"\r\n                              (onClick)=\"pathPopover.toggle($event)\"\r\n                            ></mt-button>\r\n\r\n                            <p-popover\r\n                              #pathPopover\r\n                              [style]=\"{ width: 'max-content' }\"\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                                  {{ t(\"properties.select\") }}\r\n                                  {{ segment.operatorToken }}\r\n                                </div>\r\n                                <div class=\"flex flex-col gap-1\">\r\n                                  @for (\r\n                                    option of segmentOptions(segmentIndex);\r\n                                    track option.key\r\n                                  ) {\r\n                                    <mt-button\r\n                                      type=\"button\"\r\n                                      [label]=\"option.name\"\r\n                                      [icon]=\"\r\n                                        segment.value === option.key\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]=\"\r\n                                        'w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors ' +\r\n                                        (segment.value === option.key\r\n                                          ? 'bg-primary text-white'\r\n                                          : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700')\r\n                                      \"\r\n                                      (onClick)=\"\r\n                                        setPathSegmentValue(\r\n                                          segmentIndex,\r\n                                          option.key\r\n                                        );\r\n                                        pathPopover.hide()\r\n                                      \"\r\n                                    ></mt-button>\r\n                                  }\r\n                                </div>\r\n                                @if (segment.optional) {\r\n                                  <mt-button\r\n                                    type=\"button\"\r\n                                    [label]=\"t('actions.clear')\"\r\n                                    [outlined]=\"true\"\r\n                                    icon=\"general.x-close\"\r\n                                    [iconPos]=\"'end'\"\r\n                                    size=\"small\"\r\n                                    severity=\"danger\"\r\n                                    styleClass=\"mt-2 w-full rounded-md border border-slate-200 py-1 text-xs text-slate-400 hover:bg-slate-50 dark:border-slate-700\"\r\n                                    (onClick)=\"\r\n                                      setPathSegmentValue(segmentIndex, null);\r\n                                      pathPopover.hide()\r\n                                    \"\r\n                                  ></mt-button>\r\n                                }\r\n                              </div>\r\n                            </p-popover>\r\n\r\n                            @if (\r\n                              segment.canRemove &&\r\n                              segmentIndex === pathSegments().length - 1\r\n                            ) {\r\n                              <mt-button\r\n                                type=\"button\"\r\n                                icon=\"general.x-close\"\r\n                                size=\"small\"\r\n                                severity=\"danger\"\r\n                                styleClass=\"flex size-5 shrink-0 items-center justify-center rounded-full bg-red-500 text-white hover:bg-red-600\"\r\n                                (onClick)=\"removePathSegment(segmentIndex)\"\r\n                              ></mt-button>\r\n                            }\r\n                          }\r\n                          <mt-button\r\n                            type=\"button\"\r\n                            icon=\"general.plus\"\r\n                            size=\"small\"\r\n                            severity=\"primary\"\r\n                            [disabled]=\"!canAddNextSegment()\"\r\n                            [class.hidden]=\"!canAddNextSegment()\"\r\n                            styleClass=\"flex size-6 shrink-0 items-center justify-center rounded-md bg-primary text-xs font-bold text-white hover:opacity-90 disabled:opacity-50\"\r\n                            (onClick)=\"nextOperatorPopover.toggle($event)\"\r\n                          ></mt-button>\r\n                        </div>\r\n                      }\r\n                      <p-popover\r\n                        #nextOperatorPopover\r\n                        [style]=\"{ width: 'max-content' }\"\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                            {{ t(\"properties.add-segment\") }}\r\n                          </div>\r\n                          <div class=\"flex flex-col gap-1\">\r\n                            @for (\r\n                              option of nextOperatorOptions();\r\n                              track option.token\r\n                            ) {\r\n                              <mt-button\r\n                                type=\"button\"\r\n                                [label]=\"option.token\"\r\n                                icon=\"general.plus\"\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                                  onAddSegmentSelection(\r\n                                    option.token,\r\n                                    nextOperatorPopover\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                  </div>\r\n\r\n                  <!-- Field Selection - Under Path -->\r\n                  <div\r\n                    class=\"flex items-center gap-2 border-t border-slate-200 pt-2 dark:border-slate-700\"\r\n                  >\r\n                    <span\r\n                      class=\"shrink-0 text-xs font-semibold uppercase tracking-wider text-slate-400\"\r\n                      >{{ t(\"properties.field\") }}</span\r\n                    >\r\n                    <div\r\n                      class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                    ></div>\r\n                    @if (isPropertyLoading()) {\r\n                      <p-skeleton\r\n                        class=\"flex-1\"\r\n                        height=\"2.5rem\"\r\n                        styleClass=\"rounded-md\"\r\n                      />\r\n                    } @else {\r\n                      <mt-select-field\r\n                        class=\"flex-1\"\r\n                        [label]=\"''\"\r\n                        [filter]=\"true\"\r\n                        [hasPlaceholderPrefix]=\"false\"\r\n                        [placeholder]=\"t('properties.select')\"\r\n                        [(ngModel)]=\"propertyFieldKey\"\r\n                        [options]=\"propertyOptions()\"\r\n                        optionLabel=\"name\"\r\n                        optionValue=\"key\"\r\n                        [size]=\"'small'\"\r\n                      />\r\n                    }\r\n                  </div>\r\n                  <div\r\n                    class=\"w-full truncate rounded-lg bg-amber-100 px-3 py-2 text-sm font-semibold text-amber-700 shadow-sm hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:hover:bg-amber-900/50\"\r\n                    [mtTooltip]=\"\r\n                      '@' +\r\n                      propertyTablePath() +\r\n                      '::' +\r\n                      (selectedProperty()?.key ?? '...')\r\n                    \"\r\n                    tooltipPosition=\"top\"\r\n                  >\r\n                    @{{ propertyTablePath() }}::{{\r\n                      selectedProperty()?.key ?? \"...\"\r\n                    }}\r\n                  </div>\r\n                  <div class=\"flex justify-end\">\r\n                    <mt-button\r\n                      type=\"button\"\r\n                      [label]=\"t('actions.insert')\"\r\n                      icon=\"general.plus\"\r\n                      severity=\"primary\"\r\n                      [disabled]=\"!canInsertProperty()\"\r\n                      (onClick)=\"insertSelectedProperty(insertBlock)\"\r\n                    ></mt-button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n        </ng-template>\r\n      </mt-formula-toolbar>\r\n    }\r\n\r\n    <!-- Editor Area -->\r\n    <div class=\"p-3\">\r\n      <div\r\n        class=\"overflow-hidden rounded-lg border border-surface-200 bg-white dark:border-surface-700 dark:bg-surface-800\"\r\n      >\r\n        @if (showModeToggle()) {\r\n          <div\r\n            class=\"flex items-center justify-end border-b border-surface-200 px-3 py-2 dark:border-surface-700\"\r\n          >\r\n            <mt-toggle-field\r\n              [label]=\"t('codeMode')\"\r\n              labelPosition=\"end\"\r\n              size=\"small\"\r\n              [ngModel]=\"isCodeMode()\"\r\n              [readonly]=\"isCodeModeLocked()\"\r\n              [pInputs]=\"{ disabled: isCodeModeLocked() }\"\r\n              (ngModelChange)=\"onModeToggle($event)\"\r\n            />\r\n          </div>\r\n        }\r\n        <div class=\"p-0\">\r\n          @if (isCodeMode()) {\r\n            <mt-formula-editor-code\r\n              #formulaEditorCode\r\n              [placeholder]=\"placeholder() || t('placeholder')\"\r\n              [initialFormula]=\"expression()\"\r\n              [borderless]=\"true\"\r\n              [autocompleteProvider]=\"autocompleteProvider\"\r\n              (formulaChange)=\"onCodeFormulaChange($event)\"\r\n              (onFocus)=\"onEditorFocus()\"\r\n              (onBlur)=\"onEditorBlur()\"\r\n            />\r\n          } @else {\r\n            <mt-formula-editor\r\n              #formulaEditor\r\n              [placeholder]=\"placeholder() || t('placeholder')\"\r\n              [initialTokens]=\"tokens()\"\r\n              [borderless]=\"true\"\r\n              (formulaChange)=\"onFormulaChange($event)\"\r\n              (tokensChange)=\"onTokensChange($event)\"\r\n              (onFocus)=\"onEditorFocus()\"\r\n              (onBlur)=\"onEditorBlur()\"\r\n            />\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Status Bar - Pass data via inputs (pure component) -->\r\n    @if (!hideStatusBar()) {\r\n      <mt-formula-status-bar [validation]=\"validation()\" />\r\n    }\r\n  </div>\r\n</mt-card>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { 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: 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", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: RadioCards, selector: "mt-radio-cards", inputs: ["circle", "color", "size", "columns", "options", "activeId", "itemTemplate"], outputs: ["optionsChange", "activeIdChange", "selectionChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: FormulaToolbar, selector: "mt-formula-toolbar", inputs: ["knownProperties", "propertiesTemplate", "functionCategories", "operators", "initialTab", "visibleTabs", "searchPlaceholder", "labels"], outputs: ["onBlockInsert", "onTabChange"] }, { kind: "component", type: FormulaStatusBar, selector: "mt-formula-status-bar", inputs: ["validation", "labels"] }, { kind: "component", type: FormulaEditor, selector: "mt-formula-editor", inputs: ["placeholder", "initialTokens", "disabled", "borderless"], outputs: ["formulaChange", "tokensChange", "onBlur", "onFocus"] }, { kind: "component", type: FormulaEditorCode, selector: "mt-formula-editor-code", inputs: ["placeholder", "initialFormula", "disabled", "language", "theme", "borderless", "autocompleteProvider", "autocompleteDebounceMs"], outputs: ["formulaChange", "onBlur", "onFocus"] }] });
+        ], viewQueries: [{ propertyName: "editor", first: true, predicate: ["formulaEditor"], descendants: true, isSignal: true }, { propertyName: "codeEditor", first: true, predicate: ["formulaEditorCode"], descendants: true, isSignal: true }], ngImport: i0, template: "<mt-card\r\n  headless\r\n  [class.ring-2]=\"hasFocus()\"\r\n  [class.ring-primary]=\"hasFocus()\"\r\n  [paddingless]=\"true\"\r\n>\r\n  <div\r\n    *transloco=\"let t; prefix: 'formulaBuilder'\"\r\n    class=\"flex flex-col overflow-hidden\"\r\n  >\r\n    <!-- Toolbar - Pass data via inputs (pure component) -->\r\n    @if (!hideToolbar()) {\r\n      <mt-formula-toolbar\r\n        [functionCategories]=\"functionCategories()\"\r\n        [visibleTabs]=\"resolvedToolbarTabs()\"\r\n        (onBlockInsert)=\"onBlockInsert($event)\"\r\n      >\r\n        <ng-template #properties let-insertBlock=\"insertBlock\">\r\n          @if (isContextLoading()) {\r\n            <div class=\"flex flex-col gap-4 p-4\">\r\n              <div class=\"flex items-center justify-between gap-4\">\r\n                <p-skeleton\r\n                  width=\"18rem\"\r\n                  height=\"2.5rem\"\r\n                  styleClass=\"rounded-md\"\r\n                />\r\n                <p-skeleton\r\n                  width=\"7rem\"\r\n                  height=\"2.5rem\"\r\n                  styleClass=\"rounded-md\"\r\n                />\r\n              </div>\r\n              <div class=\"flex items-center gap-4\">\r\n                <div\r\n                  class=\"flex min-h-11 min-w-0 flex-1 flex-col gap-2 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                    <p-skeleton\r\n                      width=\"3rem\"\r\n                      height=\"1rem\"\r\n                      styleClass=\"rounded-md\"\r\n                    />\r\n                    <div\r\n                      class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                    ></div>\r\n                    <p-skeleton\r\n                      class=\"flex-1\"\r\n                      height=\"2rem\"\r\n                      styleClass=\"rounded-md\"\r\n                    />\r\n                  </div>\r\n                  <div\r\n                    class=\"flex items-center gap-2 border-t border-slate-200 pt-2 dark:border-slate-700\"\r\n                  >\r\n                    <p-skeleton\r\n                      width=\"3rem\"\r\n                      height=\"1rem\"\r\n                      styleClass=\"rounded-md\"\r\n                    />\r\n                    <div\r\n                      class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                    ></div>\r\n                    <p-skeleton\r\n                      class=\"flex-1\"\r\n                      height=\"2.5rem\"\r\n                      styleClass=\"rounded-md\"\r\n                    />\r\n                  </div>\r\n                  <p-skeleton height=\"2rem\" styleClass=\"rounded-md\" />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          } @else {\r\n            <div class=\"flex flex-col gap-4 p-4\">\r\n              <!-- Scope Selection - Full width, centered -->\r\n              <div class=\"flex items-center justify-between gap-4\">\r\n                <mt-radio-cards\r\n                  [options]=\"scopeOptions()\"\r\n                  [activeId]=\"propertyScope()\"\r\n                  (selectionChange)=\"onScopeChange($event)\"\r\n                  size=\"small\"\r\n                />\r\n              </div>\r\n\r\n              <!-- Path + Field + Preview Row -->\r\n              <div class=\"flex items-center gap-4\">\r\n                <!-- Path Container - Flexible -->\r\n                <div\r\n                  class=\"flex min-h-11 min-w-0 flex-1 flex-col gap-2 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                      >{{ t(\"properties.path\") }}</span\r\n                    >\r\n                    <div\r\n                      class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                    ></div>\r\n                    <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n                      @if (isDirectAccess()) {\r\n                        <span\r\n                          class=\"rounded-md bg-emerald-100 px-2.5 py-1 text-xs font-medium text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400\"\r\n                        >\r\n                          \u2713 {{ t(\"properties.direct-access\") }}\r\n                        </span>\r\n                      } @else if (pathSegments().length === 0) {\r\n                        <span class=\"text-xs italic text-slate-400\">{{\r\n                          t(\"properties.no-path-configured\")\r\n                        }}</span>\r\n                      } @else {\r\n                        <div\r\n                          class=\"flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto\"\r\n                        >\r\n                          @for (\r\n                            segment of pathSegments();\r\n                            track $index;\r\n                            let segmentIndex = $index\r\n                          ) {\r\n                            @if (segmentIndex > 0) {\r\n                              <span\r\n                                class=\"shrink-0 text-slate-300 dark:text-slate-600\"\r\n                                >\u203A</span\r\n                              >\r\n                            }\r\n                            <mt-button\r\n                              type=\"button\"\r\n                              [label]=\"\r\n                                segment.value ||\r\n                                t('properties.select') +\r\n                                  ' ' +\r\n                                  getOperatorDisplayName(segment.operatorToken)\r\n                              \"\r\n                              icon=\"arrow.chevron-down\"\r\n                              [outlined]=\"true\"\r\n                              size=\"small\"\r\n                              [severity]=\"\r\n                                segment.value ? 'primary' : 'secondary'\r\n                              \"\r\n                              [iconPos]=\"'end'\"\r\n                              (onClick)=\"pathPopover.toggle($event)\"\r\n                            ></mt-button>\r\n\r\n                            <p-popover\r\n                              #pathPopover\r\n                              [style]=\"{ width: 'max-content' }\"\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                                  {{ t(\"properties.select\") }}\r\n                                  {{\r\n                                    getOperatorDisplayName(\r\n                                      segment.operatorToken\r\n                                    )\r\n                                  }}\r\n                                </div>\r\n                                <div class=\"flex flex-col gap-1\">\r\n                                  @for (\r\n                                    option of segmentOptions(segmentIndex);\r\n                                    track option.key\r\n                                  ) {\r\n                                    <mt-button\r\n                                      type=\"button\"\r\n                                      [label]=\"option.name\"\r\n                                      [icon]=\"\r\n                                        segment.value === option.key\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]=\"\r\n                                        'w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors ' +\r\n                                        (segment.value === option.key\r\n                                          ? 'bg-primary text-white'\r\n                                          : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700')\r\n                                      \"\r\n                                      (onClick)=\"\r\n                                        setPathSegmentValue(\r\n                                          segmentIndex,\r\n                                          option.key\r\n                                        );\r\n                                        pathPopover.hide()\r\n                                      \"\r\n                                    ></mt-button>\r\n                                  }\r\n                                </div>\r\n                                @if (segment.optional) {\r\n                                  <mt-button\r\n                                    type=\"button\"\r\n                                    [label]=\"t('actions.clear')\"\r\n                                    [outlined]=\"true\"\r\n                                    icon=\"general.x-close\"\r\n                                    [iconPos]=\"'end'\"\r\n                                    size=\"small\"\r\n                                    severity=\"danger\"\r\n                                    styleClass=\"mt-2 w-full rounded-md border border-slate-200 py-1 text-xs text-slate-400 hover:bg-slate-50 dark:border-slate-700\"\r\n                                    (onClick)=\"\r\n                                      setPathSegmentValue(segmentIndex, null);\r\n                                      pathPopover.hide()\r\n                                    \"\r\n                                  ></mt-button>\r\n                                }\r\n                              </div>\r\n                            </p-popover>\r\n\r\n                            @if (\r\n                              segment.canRemove &&\r\n                              segmentIndex === pathSegments().length - 1\r\n                            ) {\r\n                              <mt-button\r\n                                type=\"button\"\r\n                                icon=\"general.x-close\"\r\n                                size=\"small\"\r\n                                severity=\"danger\"\r\n                                styleClass=\"flex size-5 shrink-0 items-center justify-center rounded-full bg-red-500 text-white hover:bg-red-600\"\r\n                                (onClick)=\"removePathSegment(segmentIndex)\"\r\n                              ></mt-button>\r\n                            }\r\n                          }\r\n                          <mt-button\r\n                            type=\"button\"\r\n                            icon=\"general.plus\"\r\n                            size=\"small\"\r\n                            severity=\"primary\"\r\n                            [disabled]=\"!canAddNextSegment()\"\r\n                            [class.hidden]=\"!canAddNextSegment()\"\r\n                            styleClass=\"flex size-6 shrink-0 items-center justify-center rounded-md bg-primary text-xs font-bold text-white hover:opacity-90 disabled:opacity-50\"\r\n                            (onClick)=\"nextOperatorPopover.toggle($event)\"\r\n                          ></mt-button>\r\n                        </div>\r\n                      }\r\n                      <p-popover\r\n                        #nextOperatorPopover\r\n                        [style]=\"{ width: 'max-content' }\"\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                            {{ t(\"properties.add-segment\") }}\r\n                          </div>\r\n                          <div class=\"flex flex-col gap-1\">\r\n                            @for (\r\n                              option of nextOperatorOptions();\r\n                              track option.token\r\n                            ) {\r\n                              <mt-button\r\n                                type=\"button\"\r\n                                [label]=\"getOperatorDisplayName(option.token)\"\r\n                                icon=\"general.plus\"\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                                  onAddSegmentSelection(\r\n                                    option.token,\r\n                                    nextOperatorPopover\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                  </div>\r\n\r\n                  <!-- Field Selection - Under Path -->\r\n                  <div\r\n                    class=\"flex items-center gap-2 border-t border-slate-200 pt-2 dark:border-slate-700\"\r\n                  >\r\n                    <span\r\n                      class=\"shrink-0 text-xs font-semibold uppercase tracking-wider text-slate-400\"\r\n                      >{{ t(\"properties.field\") }}</span\r\n                    >\r\n                    <div\r\n                      class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                    ></div>\r\n                    @if (isPropertyLoading()) {\r\n                      <p-skeleton\r\n                        class=\"flex-1\"\r\n                        height=\"2.5rem\"\r\n                        styleClass=\"rounded-md\"\r\n                      />\r\n                    } @else {\r\n                      <mt-select-field\r\n                        class=\"flex-1\"\r\n                        [label]=\"''\"\r\n                        [filter]=\"true\"\r\n                        [hasPlaceholderPrefix]=\"false\"\r\n                        [placeholder]=\"t('properties.select')\"\r\n                        [(ngModel)]=\"propertyFieldKey\"\r\n                        [options]=\"propertyOptions()\"\r\n                        optionLabel=\"name\"\r\n                        optionValue=\"key\"\r\n                        [size]=\"'small'\"\r\n                      />\r\n                    }\r\n                  </div>\r\n                  <div\r\n                    class=\"w-full truncate rounded-lg bg-amber-100 px-3 py-2 text-sm font-semibold text-amber-700 shadow-sm hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:hover:bg-amber-900/50\"\r\n                    [mtTooltip]=\"\r\n                      '@' +\r\n                      propertyTablePath() +\r\n                      '::' +\r\n                      (selectedProperty()?.key ?? '...')\r\n                    \"\r\n                    tooltipPosition=\"top\"\r\n                  >\r\n                    @{{ propertyTablePath() }}::{{\r\n                      selectedProperty()?.key ?? \"...\"\r\n                    }}\r\n                  </div>\r\n                  <div class=\"flex justify-end\">\r\n                    <mt-button\r\n                      type=\"button\"\r\n                      [label]=\"t('actions.insert')\"\r\n                      icon=\"general.plus\"\r\n                      severity=\"primary\"\r\n                      [disabled]=\"!canInsertProperty()\"\r\n                      (onClick)=\"insertSelectedProperty(insertBlock)\"\r\n                    ></mt-button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n        </ng-template>\r\n      </mt-formula-toolbar>\r\n    }\r\n\r\n    <!-- Editor Area -->\r\n    <div class=\"p-3\">\r\n      <div\r\n        class=\"overflow-hidden rounded-lg border border-surface-200 bg-white dark:border-surface-700 dark:bg-surface-800\"\r\n      >\r\n        @if (showModeToggle()) {\r\n          <div\r\n            class=\"flex items-center justify-end border-b border-surface-200 px-3 py-2 dark:border-surface-700\"\r\n          >\r\n            <mt-toggle-field\r\n              [label]=\"t('codeMode')\"\r\n              labelPosition=\"end\"\r\n              size=\"small\"\r\n              [ngModel]=\"isCodeMode()\"\r\n              [readonly]=\"isCodeModeLocked()\"\r\n              [pInputs]=\"{ disabled: isCodeModeLocked() }\"\r\n              (ngModelChange)=\"onModeToggle($event)\"\r\n            />\r\n          </div>\r\n        }\r\n        <div class=\"p-0\">\r\n          @if (isCodeMode()) {\r\n            <mt-formula-editor-code\r\n              #formulaEditorCode\r\n              [placeholder]=\"placeholder() || t('placeholder')\"\r\n              [initialFormula]=\"expression()\"\r\n              [borderless]=\"true\"\r\n              [autocompleteProvider]=\"autocompleteProvider\"\r\n              (formulaChange)=\"onCodeFormulaChange($event)\"\r\n              (onFocus)=\"onEditorFocus()\"\r\n              (onBlur)=\"onEditorBlur()\"\r\n            />\r\n          } @else {\r\n            <mt-formula-editor\r\n              #formulaEditor\r\n              [placeholder]=\"placeholder() || t('placeholder')\"\r\n              [initialTokens]=\"tokens()\"\r\n              [borderless]=\"true\"\r\n              (formulaChange)=\"onFormulaChange($event)\"\r\n              (tokensChange)=\"onTokensChange($event)\"\r\n              (onFocus)=\"onEditorFocus()\"\r\n              (onBlur)=\"onEditorBlur()\"\r\n            />\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Status Bar - Pass data via inputs (pure component) -->\r\n    @if (!hideStatusBar()) {\r\n      <mt-formula-status-bar [validation]=\"validation()\" />\r\n    }\r\n  </div>\r\n</mt-card>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { 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: 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", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: RadioCards, selector: "mt-radio-cards", inputs: ["circle", "color", "size", "columns", "options", "activeId", "itemTemplate"], outputs: ["optionsChange", "activeIdChange", "selectionChange"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: FormulaToolbar, selector: "mt-formula-toolbar", inputs: ["knownProperties", "propertiesTemplate", "functionCategories", "operators", "initialTab", "visibleTabs", "searchPlaceholder", "labels"], outputs: ["onBlockInsert", "onTabChange"] }, { kind: "component", type: FormulaStatusBar, selector: "mt-formula-status-bar", inputs: ["validation", "labels"] }, { kind: "component", type: FormulaEditor, selector: "mt-formula-editor", inputs: ["placeholder", "initialTokens", "disabled", "borderless"], outputs: ["formulaChange", "tokensChange", "onBlur", "onFocus"] }, { kind: "component", type: FormulaEditorCode, selector: "mt-formula-editor-code", inputs: ["placeholder", "initialFormula", "disabled", "language", "theme", "borderless", "autocompleteProvider", "autocompleteDebounceMs"], outputs: ["formulaChange", "onBlur", "onFocus"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormulaBuilder, decorators: [{
             type: Component,
@@ -1097,8 +1138,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                             useExisting: forwardRef(() => FormulaBuilder),
                             multi: true,
                         },
-                    ], template: "<mt-card\r\n  headless\r\n  [class.ring-2]=\"hasFocus()\"\r\n  [class.ring-primary]=\"hasFocus()\"\r\n  [paddingless]=\"true\"\r\n>\r\n  <div\r\n    *transloco=\"let t; prefix: 'formulaBuilder'\"\r\n    class=\"flex flex-col overflow-hidden\"\r\n  >\r\n    <!-- Toolbar - Pass data via inputs (pure component) -->\r\n    @if (!hideToolbar()) {\r\n      <mt-formula-toolbar\r\n        [functionCategories]=\"functionCategories()\"\r\n        [visibleTabs]=\"resolvedToolbarTabs()\"\r\n        (onBlockInsert)=\"onBlockInsert($event)\"\r\n      >\r\n        <ng-template #properties let-insertBlock=\"insertBlock\">\r\n          @if (isContextLoading()) {\r\n            <div class=\"flex flex-col gap-4 p-4\">\r\n              <div class=\"flex items-center justify-between gap-4\">\r\n                <p-skeleton\r\n                  width=\"18rem\"\r\n                  height=\"2.5rem\"\r\n                  styleClass=\"rounded-md\"\r\n                />\r\n                <p-skeleton\r\n                  width=\"7rem\"\r\n                  height=\"2.5rem\"\r\n                  styleClass=\"rounded-md\"\r\n                />\r\n              </div>\r\n              <div class=\"flex items-center gap-4\">\r\n                <div\r\n                  class=\"flex min-h-11 min-w-0 flex-1 flex-col gap-2 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                    <p-skeleton\r\n                      width=\"3rem\"\r\n                      height=\"1rem\"\r\n                      styleClass=\"rounded-md\"\r\n                    />\r\n                    <div\r\n                      class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                    ></div>\r\n                    <p-skeleton\r\n                      class=\"flex-1\"\r\n                      height=\"2rem\"\r\n                      styleClass=\"rounded-md\"\r\n                    />\r\n                  </div>\r\n                  <div\r\n                    class=\"flex items-center gap-2 border-t border-slate-200 pt-2 dark:border-slate-700\"\r\n                  >\r\n                    <p-skeleton\r\n                      width=\"3rem\"\r\n                      height=\"1rem\"\r\n                      styleClass=\"rounded-md\"\r\n                    />\r\n                    <div\r\n                      class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                    ></div>\r\n                    <p-skeleton\r\n                      class=\"flex-1\"\r\n                      height=\"2.5rem\"\r\n                      styleClass=\"rounded-md\"\r\n                    />\r\n                  </div>\r\n                  <p-skeleton height=\"2rem\" styleClass=\"rounded-md\" />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          } @else {\r\n            <div class=\"flex flex-col gap-4 p-4\">\r\n              <!-- Scope Selection - Full width, centered -->\r\n              <div class=\"flex items-center justify-between gap-4\">\r\n                <mt-radio-cards\r\n                  [options]=\"scopeOptions()\"\r\n                  [activeId]=\"propertyScope()\"\r\n                  (selectionChange)=\"onScopeChange($event)\"\r\n                  size=\"small\"\r\n                />\r\n              </div>\r\n\r\n              <!-- Path + Field + Preview Row -->\r\n              <div class=\"flex items-center gap-4\">\r\n                <!-- Path Container - Flexible -->\r\n                <div\r\n                  class=\"flex min-h-11 min-w-0 flex-1 flex-col gap-2 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                      >{{ t(\"properties.path\") }}</span\r\n                    >\r\n                    <div\r\n                      class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                    ></div>\r\n                    <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n                      @if (isDirectAccess()) {\r\n                        <span\r\n                          class=\"rounded-md bg-emerald-100 px-2.5 py-1 text-xs font-medium text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400\"\r\n                        >\r\n                          \u2713 {{ t(\"properties.direct-access\") }}\r\n                        </span>\r\n                      } @else if (pathSegments().length === 0) {\r\n                        <span class=\"text-xs italic text-slate-400\">{{\r\n                          t(\"properties.no-path-configured\")\r\n                        }}</span>\r\n                      } @else {\r\n                        <div\r\n                          class=\"flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto\"\r\n                        >\r\n                          @for (\r\n                            segment of pathSegments();\r\n                            track $index;\r\n                            let segmentIndex = $index\r\n                          ) {\r\n                            @if (segmentIndex > 0) {\r\n                              <span\r\n                                class=\"shrink-0 text-slate-300 dark:text-slate-600\"\r\n                                >\u203A</span\r\n                              >\r\n                            }\r\n                            <mt-button\r\n                              type=\"button\"\r\n                              [label]=\"\r\n                                segment.value ||\r\n                                t('properties.select') +\r\n                                  ' ' +\r\n                                  segment.operatorToken\r\n                              \"\r\n                              icon=\"arrow.chevron-down\"\r\n                              [outlined]=\"true\"\r\n                              size=\"small\"\r\n                              [severity]=\"\r\n                                segment.value ? 'primary' : 'secondary'\r\n                              \"\r\n                              [iconPos]=\"'end'\"\r\n                              (onClick)=\"pathPopover.toggle($event)\"\r\n                            ></mt-button>\r\n\r\n                            <p-popover\r\n                              #pathPopover\r\n                              [style]=\"{ width: 'max-content' }\"\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                                  {{ t(\"properties.select\") }}\r\n                                  {{ segment.operatorToken }}\r\n                                </div>\r\n                                <div class=\"flex flex-col gap-1\">\r\n                                  @for (\r\n                                    option of segmentOptions(segmentIndex);\r\n                                    track option.key\r\n                                  ) {\r\n                                    <mt-button\r\n                                      type=\"button\"\r\n                                      [label]=\"option.name\"\r\n                                      [icon]=\"\r\n                                        segment.value === option.key\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]=\"\r\n                                        'w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors ' +\r\n                                        (segment.value === option.key\r\n                                          ? 'bg-primary text-white'\r\n                                          : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700')\r\n                                      \"\r\n                                      (onClick)=\"\r\n                                        setPathSegmentValue(\r\n                                          segmentIndex,\r\n                                          option.key\r\n                                        );\r\n                                        pathPopover.hide()\r\n                                      \"\r\n                                    ></mt-button>\r\n                                  }\r\n                                </div>\r\n                                @if (segment.optional) {\r\n                                  <mt-button\r\n                                    type=\"button\"\r\n                                    [label]=\"t('actions.clear')\"\r\n                                    [outlined]=\"true\"\r\n                                    icon=\"general.x-close\"\r\n                                    [iconPos]=\"'end'\"\r\n                                    size=\"small\"\r\n                                    severity=\"danger\"\r\n                                    styleClass=\"mt-2 w-full rounded-md border border-slate-200 py-1 text-xs text-slate-400 hover:bg-slate-50 dark:border-slate-700\"\r\n                                    (onClick)=\"\r\n                                      setPathSegmentValue(segmentIndex, null);\r\n                                      pathPopover.hide()\r\n                                    \"\r\n                                  ></mt-button>\r\n                                }\r\n                              </div>\r\n                            </p-popover>\r\n\r\n                            @if (\r\n                              segment.canRemove &&\r\n                              segmentIndex === pathSegments().length - 1\r\n                            ) {\r\n                              <mt-button\r\n                                type=\"button\"\r\n                                icon=\"general.x-close\"\r\n                                size=\"small\"\r\n                                severity=\"danger\"\r\n                                styleClass=\"flex size-5 shrink-0 items-center justify-center rounded-full bg-red-500 text-white hover:bg-red-600\"\r\n                                (onClick)=\"removePathSegment(segmentIndex)\"\r\n                              ></mt-button>\r\n                            }\r\n                          }\r\n                          <mt-button\r\n                            type=\"button\"\r\n                            icon=\"general.plus\"\r\n                            size=\"small\"\r\n                            severity=\"primary\"\r\n                            [disabled]=\"!canAddNextSegment()\"\r\n                            [class.hidden]=\"!canAddNextSegment()\"\r\n                            styleClass=\"flex size-6 shrink-0 items-center justify-center rounded-md bg-primary text-xs font-bold text-white hover:opacity-90 disabled:opacity-50\"\r\n                            (onClick)=\"nextOperatorPopover.toggle($event)\"\r\n                          ></mt-button>\r\n                        </div>\r\n                      }\r\n                      <p-popover\r\n                        #nextOperatorPopover\r\n                        [style]=\"{ width: 'max-content' }\"\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                            {{ t(\"properties.add-segment\") }}\r\n                          </div>\r\n                          <div class=\"flex flex-col gap-1\">\r\n                            @for (\r\n                              option of nextOperatorOptions();\r\n                              track option.token\r\n                            ) {\r\n                              <mt-button\r\n                                type=\"button\"\r\n                                [label]=\"option.token\"\r\n                                icon=\"general.plus\"\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                                  onAddSegmentSelection(\r\n                                    option.token,\r\n                                    nextOperatorPopover\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                  </div>\r\n\r\n                  <!-- Field Selection - Under Path -->\r\n                  <div\r\n                    class=\"flex items-center gap-2 border-t border-slate-200 pt-2 dark:border-slate-700\"\r\n                  >\r\n                    <span\r\n                      class=\"shrink-0 text-xs font-semibold uppercase tracking-wider text-slate-400\"\r\n                      >{{ t(\"properties.field\") }}</span\r\n                    >\r\n                    <div\r\n                      class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                    ></div>\r\n                    @if (isPropertyLoading()) {\r\n                      <p-skeleton\r\n                        class=\"flex-1\"\r\n                        height=\"2.5rem\"\r\n                        styleClass=\"rounded-md\"\r\n                      />\r\n                    } @else {\r\n                      <mt-select-field\r\n                        class=\"flex-1\"\r\n                        [label]=\"''\"\r\n                        [filter]=\"true\"\r\n                        [hasPlaceholderPrefix]=\"false\"\r\n                        [placeholder]=\"t('properties.select')\"\r\n                        [(ngModel)]=\"propertyFieldKey\"\r\n                        [options]=\"propertyOptions()\"\r\n                        optionLabel=\"name\"\r\n                        optionValue=\"key\"\r\n                        [size]=\"'small'\"\r\n                      />\r\n                    }\r\n                  </div>\r\n                  <div\r\n                    class=\"w-full truncate rounded-lg bg-amber-100 px-3 py-2 text-sm font-semibold text-amber-700 shadow-sm hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:hover:bg-amber-900/50\"\r\n                    [mtTooltip]=\"\r\n                      '@' +\r\n                      propertyTablePath() +\r\n                      '::' +\r\n                      (selectedProperty()?.key ?? '...')\r\n                    \"\r\n                    tooltipPosition=\"top\"\r\n                  >\r\n                    @{{ propertyTablePath() }}::{{\r\n                      selectedProperty()?.key ?? \"...\"\r\n                    }}\r\n                  </div>\r\n                  <div class=\"flex justify-end\">\r\n                    <mt-button\r\n                      type=\"button\"\r\n                      [label]=\"t('actions.insert')\"\r\n                      icon=\"general.plus\"\r\n                      severity=\"primary\"\r\n                      [disabled]=\"!canInsertProperty()\"\r\n                      (onClick)=\"insertSelectedProperty(insertBlock)\"\r\n                    ></mt-button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n        </ng-template>\r\n      </mt-formula-toolbar>\r\n    }\r\n\r\n    <!-- Editor Area -->\r\n    <div class=\"p-3\">\r\n      <div\r\n        class=\"overflow-hidden rounded-lg border border-surface-200 bg-white dark:border-surface-700 dark:bg-surface-800\"\r\n      >\r\n        @if (showModeToggle()) {\r\n          <div\r\n            class=\"flex items-center justify-end border-b border-surface-200 px-3 py-2 dark:border-surface-700\"\r\n          >\r\n            <mt-toggle-field\r\n              [label]=\"t('codeMode')\"\r\n              labelPosition=\"end\"\r\n              size=\"small\"\r\n              [ngModel]=\"isCodeMode()\"\r\n              [readonly]=\"isCodeModeLocked()\"\r\n              [pInputs]=\"{ disabled: isCodeModeLocked() }\"\r\n              (ngModelChange)=\"onModeToggle($event)\"\r\n            />\r\n          </div>\r\n        }\r\n        <div class=\"p-0\">\r\n          @if (isCodeMode()) {\r\n            <mt-formula-editor-code\r\n              #formulaEditorCode\r\n              [placeholder]=\"placeholder() || t('placeholder')\"\r\n              [initialFormula]=\"expression()\"\r\n              [borderless]=\"true\"\r\n              [autocompleteProvider]=\"autocompleteProvider\"\r\n              (formulaChange)=\"onCodeFormulaChange($event)\"\r\n              (onFocus)=\"onEditorFocus()\"\r\n              (onBlur)=\"onEditorBlur()\"\r\n            />\r\n          } @else {\r\n            <mt-formula-editor\r\n              #formulaEditor\r\n              [placeholder]=\"placeholder() || t('placeholder')\"\r\n              [initialTokens]=\"tokens()\"\r\n              [borderless]=\"true\"\r\n              (formulaChange)=\"onFormulaChange($event)\"\r\n              (tokensChange)=\"onTokensChange($event)\"\r\n              (onFocus)=\"onEditorFocus()\"\r\n              (onBlur)=\"onEditorBlur()\"\r\n            />\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Status Bar - Pass data via inputs (pure component) -->\r\n    @if (!hideStatusBar()) {\r\n      <mt-formula-status-bar [validation]=\"validation()\" />\r\n    }\r\n  </div>\r\n</mt-card>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.ViewChild, args: ['formulaEditor', { isSignal: true }] }], codeEditor: [{ type: i0.ViewChild, args: ['formulaEditorCode', { isSignal: true }] }], propertiesByPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertiesByPath", required: false }] }], levelSchemaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelSchemaId", required: false }] }], contextEntityTypeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextEntityTypeKey", required: false }] }], templateId: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateId", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hideToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideToolbar", required: false }] }], hideStatusBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideStatusBar", required: false }] }], toolbarTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarTabs", required: false }] }], codeOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeOnly", required: false }] }], isProcessBuilder: [{ type: i0.Input, args: [{ isSignal: true, alias: "isProcessBuilder", required: false }] }], validationChange: [{ type: i0.Output, args: ["validationChange"] }], tokensChange: [{ type: i0.Output, args: ["tokensChange"] }] } });
+                    ], template: "<mt-card\r\n  headless\r\n  [class.ring-2]=\"hasFocus()\"\r\n  [class.ring-primary]=\"hasFocus()\"\r\n  [paddingless]=\"true\"\r\n>\r\n  <div\r\n    *transloco=\"let t; prefix: 'formulaBuilder'\"\r\n    class=\"flex flex-col overflow-hidden\"\r\n  >\r\n    <!-- Toolbar - Pass data via inputs (pure component) -->\r\n    @if (!hideToolbar()) {\r\n      <mt-formula-toolbar\r\n        [functionCategories]=\"functionCategories()\"\r\n        [visibleTabs]=\"resolvedToolbarTabs()\"\r\n        (onBlockInsert)=\"onBlockInsert($event)\"\r\n      >\r\n        <ng-template #properties let-insertBlock=\"insertBlock\">\r\n          @if (isContextLoading()) {\r\n            <div class=\"flex flex-col gap-4 p-4\">\r\n              <div class=\"flex items-center justify-between gap-4\">\r\n                <p-skeleton\r\n                  width=\"18rem\"\r\n                  height=\"2.5rem\"\r\n                  styleClass=\"rounded-md\"\r\n                />\r\n                <p-skeleton\r\n                  width=\"7rem\"\r\n                  height=\"2.5rem\"\r\n                  styleClass=\"rounded-md\"\r\n                />\r\n              </div>\r\n              <div class=\"flex items-center gap-4\">\r\n                <div\r\n                  class=\"flex min-h-11 min-w-0 flex-1 flex-col gap-2 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                    <p-skeleton\r\n                      width=\"3rem\"\r\n                      height=\"1rem\"\r\n                      styleClass=\"rounded-md\"\r\n                    />\r\n                    <div\r\n                      class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                    ></div>\r\n                    <p-skeleton\r\n                      class=\"flex-1\"\r\n                      height=\"2rem\"\r\n                      styleClass=\"rounded-md\"\r\n                    />\r\n                  </div>\r\n                  <div\r\n                    class=\"flex items-center gap-2 border-t border-slate-200 pt-2 dark:border-slate-700\"\r\n                  >\r\n                    <p-skeleton\r\n                      width=\"3rem\"\r\n                      height=\"1rem\"\r\n                      styleClass=\"rounded-md\"\r\n                    />\r\n                    <div\r\n                      class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                    ></div>\r\n                    <p-skeleton\r\n                      class=\"flex-1\"\r\n                      height=\"2.5rem\"\r\n                      styleClass=\"rounded-md\"\r\n                    />\r\n                  </div>\r\n                  <p-skeleton height=\"2rem\" styleClass=\"rounded-md\" />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          } @else {\r\n            <div class=\"flex flex-col gap-4 p-4\">\r\n              <!-- Scope Selection - Full width, centered -->\r\n              <div class=\"flex items-center justify-between gap-4\">\r\n                <mt-radio-cards\r\n                  [options]=\"scopeOptions()\"\r\n                  [activeId]=\"propertyScope()\"\r\n                  (selectionChange)=\"onScopeChange($event)\"\r\n                  size=\"small\"\r\n                />\r\n              </div>\r\n\r\n              <!-- Path + Field + Preview Row -->\r\n              <div class=\"flex items-center gap-4\">\r\n                <!-- Path Container - Flexible -->\r\n                <div\r\n                  class=\"flex min-h-11 min-w-0 flex-1 flex-col gap-2 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                      >{{ t(\"properties.path\") }}</span\r\n                    >\r\n                    <div\r\n                      class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                    ></div>\r\n                    <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n                      @if (isDirectAccess()) {\r\n                        <span\r\n                          class=\"rounded-md bg-emerald-100 px-2.5 py-1 text-xs font-medium text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400\"\r\n                        >\r\n                          \u2713 {{ t(\"properties.direct-access\") }}\r\n                        </span>\r\n                      } @else if (pathSegments().length === 0) {\r\n                        <span class=\"text-xs italic text-slate-400\">{{\r\n                          t(\"properties.no-path-configured\")\r\n                        }}</span>\r\n                      } @else {\r\n                        <div\r\n                          class=\"flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto\"\r\n                        >\r\n                          @for (\r\n                            segment of pathSegments();\r\n                            track $index;\r\n                            let segmentIndex = $index\r\n                          ) {\r\n                            @if (segmentIndex > 0) {\r\n                              <span\r\n                                class=\"shrink-0 text-slate-300 dark:text-slate-600\"\r\n                                >\u203A</span\r\n                              >\r\n                            }\r\n                            <mt-button\r\n                              type=\"button\"\r\n                              [label]=\"\r\n                                segment.value ||\r\n                                t('properties.select') +\r\n                                  ' ' +\r\n                                  getOperatorDisplayName(segment.operatorToken)\r\n                              \"\r\n                              icon=\"arrow.chevron-down\"\r\n                              [outlined]=\"true\"\r\n                              size=\"small\"\r\n                              [severity]=\"\r\n                                segment.value ? 'primary' : 'secondary'\r\n                              \"\r\n                              [iconPos]=\"'end'\"\r\n                              (onClick)=\"pathPopover.toggle($event)\"\r\n                            ></mt-button>\r\n\r\n                            <p-popover\r\n                              #pathPopover\r\n                              [style]=\"{ width: 'max-content' }\"\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                                  {{ t(\"properties.select\") }}\r\n                                  {{\r\n                                    getOperatorDisplayName(\r\n                                      segment.operatorToken\r\n                                    )\r\n                                  }}\r\n                                </div>\r\n                                <div class=\"flex flex-col gap-1\">\r\n                                  @for (\r\n                                    option of segmentOptions(segmentIndex);\r\n                                    track option.key\r\n                                  ) {\r\n                                    <mt-button\r\n                                      type=\"button\"\r\n                                      [label]=\"option.name\"\r\n                                      [icon]=\"\r\n                                        segment.value === option.key\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]=\"\r\n                                        'w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors ' +\r\n                                        (segment.value === option.key\r\n                                          ? 'bg-primary text-white'\r\n                                          : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700')\r\n                                      \"\r\n                                      (onClick)=\"\r\n                                        setPathSegmentValue(\r\n                                          segmentIndex,\r\n                                          option.key\r\n                                        );\r\n                                        pathPopover.hide()\r\n                                      \"\r\n                                    ></mt-button>\r\n                                  }\r\n                                </div>\r\n                                @if (segment.optional) {\r\n                                  <mt-button\r\n                                    type=\"button\"\r\n                                    [label]=\"t('actions.clear')\"\r\n                                    [outlined]=\"true\"\r\n                                    icon=\"general.x-close\"\r\n                                    [iconPos]=\"'end'\"\r\n                                    size=\"small\"\r\n                                    severity=\"danger\"\r\n                                    styleClass=\"mt-2 w-full rounded-md border border-slate-200 py-1 text-xs text-slate-400 hover:bg-slate-50 dark:border-slate-700\"\r\n                                    (onClick)=\"\r\n                                      setPathSegmentValue(segmentIndex, null);\r\n                                      pathPopover.hide()\r\n                                    \"\r\n                                  ></mt-button>\r\n                                }\r\n                              </div>\r\n                            </p-popover>\r\n\r\n                            @if (\r\n                              segment.canRemove &&\r\n                              segmentIndex === pathSegments().length - 1\r\n                            ) {\r\n                              <mt-button\r\n                                type=\"button\"\r\n                                icon=\"general.x-close\"\r\n                                size=\"small\"\r\n                                severity=\"danger\"\r\n                                styleClass=\"flex size-5 shrink-0 items-center justify-center rounded-full bg-red-500 text-white hover:bg-red-600\"\r\n                                (onClick)=\"removePathSegment(segmentIndex)\"\r\n                              ></mt-button>\r\n                            }\r\n                          }\r\n                          <mt-button\r\n                            type=\"button\"\r\n                            icon=\"general.plus\"\r\n                            size=\"small\"\r\n                            severity=\"primary\"\r\n                            [disabled]=\"!canAddNextSegment()\"\r\n                            [class.hidden]=\"!canAddNextSegment()\"\r\n                            styleClass=\"flex size-6 shrink-0 items-center justify-center rounded-md bg-primary text-xs font-bold text-white hover:opacity-90 disabled:opacity-50\"\r\n                            (onClick)=\"nextOperatorPopover.toggle($event)\"\r\n                          ></mt-button>\r\n                        </div>\r\n                      }\r\n                      <p-popover\r\n                        #nextOperatorPopover\r\n                        [style]=\"{ width: 'max-content' }\"\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                            {{ t(\"properties.add-segment\") }}\r\n                          </div>\r\n                          <div class=\"flex flex-col gap-1\">\r\n                            @for (\r\n                              option of nextOperatorOptions();\r\n                              track option.token\r\n                            ) {\r\n                              <mt-button\r\n                                type=\"button\"\r\n                                [label]=\"getOperatorDisplayName(option.token)\"\r\n                                icon=\"general.plus\"\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                                  onAddSegmentSelection(\r\n                                    option.token,\r\n                                    nextOperatorPopover\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                  </div>\r\n\r\n                  <!-- Field Selection - Under Path -->\r\n                  <div\r\n                    class=\"flex items-center gap-2 border-t border-slate-200 pt-2 dark:border-slate-700\"\r\n                  >\r\n                    <span\r\n                      class=\"shrink-0 text-xs font-semibold uppercase tracking-wider text-slate-400\"\r\n                      >{{ t(\"properties.field\") }}</span\r\n                    >\r\n                    <div\r\n                      class=\"h-4 w-px shrink-0 bg-slate-200 dark:bg-slate-700\"\r\n                    ></div>\r\n                    @if (isPropertyLoading()) {\r\n                      <p-skeleton\r\n                        class=\"flex-1\"\r\n                        height=\"2.5rem\"\r\n                        styleClass=\"rounded-md\"\r\n                      />\r\n                    } @else {\r\n                      <mt-select-field\r\n                        class=\"flex-1\"\r\n                        [label]=\"''\"\r\n                        [filter]=\"true\"\r\n                        [hasPlaceholderPrefix]=\"false\"\r\n                        [placeholder]=\"t('properties.select')\"\r\n                        [(ngModel)]=\"propertyFieldKey\"\r\n                        [options]=\"propertyOptions()\"\r\n                        optionLabel=\"name\"\r\n                        optionValue=\"key\"\r\n                        [size]=\"'small'\"\r\n                      />\r\n                    }\r\n                  </div>\r\n                  <div\r\n                    class=\"w-full truncate rounded-lg bg-amber-100 px-3 py-2 text-sm font-semibold text-amber-700 shadow-sm hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:hover:bg-amber-900/50\"\r\n                    [mtTooltip]=\"\r\n                      '@' +\r\n                      propertyTablePath() +\r\n                      '::' +\r\n                      (selectedProperty()?.key ?? '...')\r\n                    \"\r\n                    tooltipPosition=\"top\"\r\n                  >\r\n                    @{{ propertyTablePath() }}::{{\r\n                      selectedProperty()?.key ?? \"...\"\r\n                    }}\r\n                  </div>\r\n                  <div class=\"flex justify-end\">\r\n                    <mt-button\r\n                      type=\"button\"\r\n                      [label]=\"t('actions.insert')\"\r\n                      icon=\"general.plus\"\r\n                      severity=\"primary\"\r\n                      [disabled]=\"!canInsertProperty()\"\r\n                      (onClick)=\"insertSelectedProperty(insertBlock)\"\r\n                    ></mt-button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n        </ng-template>\r\n      </mt-formula-toolbar>\r\n    }\r\n\r\n    <!-- Editor Area -->\r\n    <div class=\"p-3\">\r\n      <div\r\n        class=\"overflow-hidden rounded-lg border border-surface-200 bg-white dark:border-surface-700 dark:bg-surface-800\"\r\n      >\r\n        @if (showModeToggle()) {\r\n          <div\r\n            class=\"flex items-center justify-end border-b border-surface-200 px-3 py-2 dark:border-surface-700\"\r\n          >\r\n            <mt-toggle-field\r\n              [label]=\"t('codeMode')\"\r\n              labelPosition=\"end\"\r\n              size=\"small\"\r\n              [ngModel]=\"isCodeMode()\"\r\n              [readonly]=\"isCodeModeLocked()\"\r\n              [pInputs]=\"{ disabled: isCodeModeLocked() }\"\r\n              (ngModelChange)=\"onModeToggle($event)\"\r\n            />\r\n          </div>\r\n        }\r\n        <div class=\"p-0\">\r\n          @if (isCodeMode()) {\r\n            <mt-formula-editor-code\r\n              #formulaEditorCode\r\n              [placeholder]=\"placeholder() || t('placeholder')\"\r\n              [initialFormula]=\"expression()\"\r\n              [borderless]=\"true\"\r\n              [autocompleteProvider]=\"autocompleteProvider\"\r\n              (formulaChange)=\"onCodeFormulaChange($event)\"\r\n              (onFocus)=\"onEditorFocus()\"\r\n              (onBlur)=\"onEditorBlur()\"\r\n            />\r\n          } @else {\r\n            <mt-formula-editor\r\n              #formulaEditor\r\n              [placeholder]=\"placeholder() || t('placeholder')\"\r\n              [initialTokens]=\"tokens()\"\r\n              [borderless]=\"true\"\r\n              (formulaChange)=\"onFormulaChange($event)\"\r\n              (tokensChange)=\"onTokensChange($event)\"\r\n              (onFocus)=\"onEditorFocus()\"\r\n              (onBlur)=\"onEditorBlur()\"\r\n            />\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Status Bar - Pass data via inputs (pure component) -->\r\n    @if (!hideStatusBar()) {\r\n      <mt-formula-status-bar [validation]=\"validation()\" />\r\n    }\r\n  </div>\r\n</mt-card>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.ViewChild, args: ['formulaEditor', { isSignal: true }] }], codeEditor: [{ type: i0.ViewChild, args: ['formulaEditorCode', { isSignal: true }] }], propertiesByPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertiesByPath", required: false }] }], levelSchemaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelSchemaId", required: false }] }], moduleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "moduleId", required: false }] }], contextEntityTypeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextEntityTypeKey", required: false }] }], templateId: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateId", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hideToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideToolbar", required: false }] }], hideStatusBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideStatusBar", required: false }] }], toolbarTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarTabs", required: false }] }], codeOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "codeOnly", required: false }] }], isProcessBuilder: [{ type: i0.Input, args: [{ isSignal: true, alias: "isProcessBuilder", required: false }] }], validationChange: [{ type: i0.Output, args: ["validationChange"] }], tokensChange: [{ type: i0.Output, args: ["tokensChange"] }] } });
 
 /**
  * Services barrel export