@masterteam/formula-builder 0.0.21 → 0.0.23

package/fesm2022/masterteam-formula-builder.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, signal, Injectable, viewChild, input, output, computed, effect, forwardRef, Component } from '@angular/core';
+import { inject, signal, Injectable, viewChild, input, output, computed, effect, untracked, forwardRef, Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TranslocoService, TranslocoDirective } from '@jsverse/transloco';
 import * as i1 from '@angular/forms';
@@ -13,10 +13,10 @@ import { ToggleField } from '@masterteam/components/toggle-field';
 import * as i2 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
 import { Skeleton } from 'primeng/skeleton';
-import { serializeTokens, tokenizeFormulaTemplate, createPropertyBlock, FormulaToolbar, FormulaStatusBar, FormulaEditor, FormulaEditorCode } from '@masterteam/components/formula';
+import { Subject, debounceTime, distinctUntilChanged, tap, switchMap, of, map, catchError } from 'rxjs';
+import { serializeTokens, tokenizeFormulaTemplate, createPropertyBlock, createLiteralBlock, FormulaToolbar, FormulaStatusBar, FormulaEditor, FormulaEditorCode } from '@masterteam/components/formula';
 export { createFunctionBlock, createLiteralBlock, createOperatorBlock, createPropertyBlock } from '@masterteam/components/formula';
 import { HttpClient } from '@angular/common/http';
-import { Subject, debounceTime, distinctUntilChanged, tap, switchMap, of, map, catchError } from 'rxjs';
 
 /**
  * Formula Validator Service
@@ -206,6 +206,7 @@ class FormulaContextService {
     contextCache = new Map();
     propertiesCache = new Map();
     nextTokensCache = new Map();
+    propertyItemsCache = new Map();
     loadContext(schemaId, moduleId, contextEntityTypeKey, mode = 'default') {
         if (!schemaId)
             return of(null);
@@ -288,6 +289,29 @@ class FormulaContextService {
             return of(null);
         }));
     }
+    /**
+     * Selectable values for a lookup / status / lookup-matrix property.
+     * The backend responds 400 (VAL_001) for any non-lookup property, which we
+     * swallow into an empty list — callers gate the value picker on a known
+     * lookup view type, so an empty result simply means "no picker".
+     */
+    getPropertyItems(propertyKey, mode = 'default') {
+        if (!propertyKey)
+            return of([]);
+        const cacheKey = `${mode}:${propertyKey}`;
+        const cached = this.propertyItemsCache.get(cacheKey);
+        if (cached) {
+            return of(cached);
+        }
+        return this.http
+            .get(`${this.getBaseUrl(mode)}/builder/property-items/${encodeURIComponent(propertyKey)}`)
+            .pipe(map((response) => this.unwrapResponse(response)?.items ?? []), tap((items) => {
+            this.propertyItemsCache.set(cacheKey, items);
+        }), catchError((error) => {
+            console.warn('Failed to load formula property items:', error);
+            return of([]);
+        }));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FormulaContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FormulaContextService, providedIn: 'root' });
 }
@@ -451,6 +475,15 @@ const PROPERTY_SCOPE_PRIORITY = [
     'Modules',
     'Schedule',
 ];
+/**
+ * View types whose values come from a fixed item set served by
+ * `GET /api/formulas/builder/property-items/{propertyKey}`. Matched after
+ * lower-casing and stripping spaces/underscores/dashes so "Lookup Matrix",
+ * "lookup_matrix", etc. all resolve. Mirrors the backend gate (it rejects any
+ * other view type with VAL_001 "… is not a lookup, lookup matrix, or status
+ * type").
+ */
+const LOOKUP_VIEW_TYPES = new Set(['lookup', 'lookupmatrix', 'status']);
 const SCOPE_ICON_MAP = {
     Current: 'map.marker-pin-01',
     Host: 'map.marker-pin-01',
@@ -524,14 +557,32 @@ class FormulaBuilder {
         return normalized.length > 0 && normalized !== 'leveldata';
     }, ...(ngDevMode ? [{ debugName: "isModuleContext" }] : /* istanbul ignore next */ []));
     autocompleteProvider = (request) => {
+        const apiMode = this.formulaApiMode();
+        // Code-mode value picking: when the cursor sits on the right-hand side of a
+        // comparison against a lookup property, surface that property's values as
+        // suggestions (the builder/blocks editor has no autocomplete — it uses the
+        // toolbar Value row instead). The BE autocomplete rejects this cursor
+        // position, so we return values directly and skip that doomed call; when the
+        // property turns out not to be a lookup we fall back to normal suggestions.
+        const valueContext = this.detectLookupValueContext(request.formula ?? '', request.cursorPosition);
+        if (valueContext && this.shouldFetchLookupItems(valueContext.propertyKey)) {
+            return this.contextService
+                .getPropertyItems(valueContext.propertyKey, apiMode)
+                .pipe(switchMap((items) => items.length
+                ? of(this.buildLookupValueResponse(items, valueContext))
+                : this.fetchAutocomplete$(request, apiMode)));
+        }
+        return this.fetchAutocomplete$(request, apiMode);
+    };
+    fetchAutocomplete$(request, apiMode) {
         return this.autocompleteService.getSuggestions({
             ...request,
             levelSchemaId: this.levelSchemaId(),
             moduleId: this.moduleId(),
             contextEntityTypeKey: this.resolvedContextEntityTypeKey() ??
                 this.builderContext()?.contextEntityTypeKey,
-        }, this.isProcessBuilder() ? 'current-only' : 'default');
-    };
+        }, apiMode);
+    }
     /** Editor mode */
     editorMode = signal('builder', ...(ngDevMode ? [{ debugName: "editorMode" }] : /* istanbul ignore next */ []));
     isCodeMode = computed(() => this.editorMode() === 'code', ...(ngDevMode ? [{ debugName: "isCodeMode" }] : /* istanbul ignore next */ []));
@@ -576,6 +627,22 @@ class FormulaBuilder {
             const validation = this.validation();
             this.validationChange.emit(validation);
         });
+        // Re-resolve friendly property display labels once the property map loads.
+        // Properties arrive asynchronously, so tokens built before they were ready
+        // (e.g. hydrating an expression-only formula, or a code->blocks switch)
+        // initially show raw keys. Display is cosmetic — the executable expression
+        // (token.value) and validation are unchanged — so this only refreshes the
+        // visual chips and the friendly preview. Reading builderValue untracked +
+        // the identity guard in enrichTokenDisplays keeps this loop-safe.
+        effect(() => {
+            this.mergedPropertiesByPath();
+            const current = untracked(() => this.builderValue());
+            const enriched = this.enrichTokenDisplays(current);
+            if (enriched !== current) {
+                this.setBuilderTokens(enriched, { writeVisualEditor: true });
+                this.emitValueChange();
+            }
+        });
         // Load builder context when schema changes
         effect(() => {
             const schemaId = this.levelSchemaId();
@@ -612,6 +679,32 @@ class FormulaBuilder {
                 }
             });
         });
+        // Load the value set of the selected field when it is a lookup-style
+        // property (lookup / lookup matrix / status). Resets the picked value
+        // whenever the field changes; a stale-request guard keeps the latest pick.
+        effect(() => {
+            const property = this.selectedProperty();
+            const isLookup = this.isLookupProperty();
+            const apiMode = this.formulaApiMode();
+            this.lookupValueKey.set('');
+            if (!property || !isLookup) {
+                this.lookupItems.set([]);
+                this.isLookupItemsLoading.set(false);
+                return;
+            }
+            const requestId = ++this.lookupItemsRequestId;
+            this.isLookupItemsLoading.set(true);
+            this.lookupItems.set([]);
+            this.contextService
+                .getPropertyItems(property.key, apiMode)
+                .subscribe((items) => {
+                if (requestId !== this.lookupItemsRequestId) {
+                    return;
+                }
+                this.lookupItems.set(items);
+                this.isLookupItemsLoading.set(false);
+            });
+        });
         // Ensure selected scope exists in available options
         effect(() => {
             const scopes = this.availableScopes();
@@ -772,7 +865,7 @@ class FormulaBuilder {
         const inputBuilder = Array.isArray(value.builder) ? value.builder : [];
         const expression = this.resolveExpressionValue(value.expression ?? '', inputBuilder);
         const builder = inputBuilder.length > 0
-            ? inputBuilder
+            ? this.enrichTokenDisplays(inputBuilder)
             : this.rebuildBuilderFromExpression(expression);
         this.expressionValue.set(expression);
         if (this.codeOnly()) {
@@ -900,7 +993,42 @@ class FormulaBuilder {
     }
     rebuildBuilderFromExpression(expression) {
         const normalized = expression.trim();
-        return normalized ? tokenizeFormulaTemplate(normalized) : [];
+        return this.enrichTokenDisplays(normalized ? tokenizeFormulaTemplate(normalized) : []);
+    }
+    /**
+     * Resolve friendly display labels on property tokens from the loaded property
+     * map (table path -> [{ key, name }]). This lets the visual builder render
+     * "Start Date" instead of the raw "@Current::dema_qa_portfolio_startdate" key
+     * after a code->blocks switch or when hydrating an expression-only formula.
+     * Pure and loop-safe: returns the SAME array reference when nothing changed,
+     * and only touches `display` — never `value` — so the executable expression
+     * and validation are unaffected.
+     */
+    enrichTokenDisplays(tokens) {
+        if (tokens.length === 0) {
+            return tokens;
+        }
+        const byPath = this.mergedPropertiesByPath();
+        let changed = false;
+        const next = tokens.map((token) => {
+            if (token.type !== 'property' || !token.value.startsWith('@')) {
+                return token;
+            }
+            const separator = token.value.lastIndexOf('::');
+            if (separator < 0) {
+                return token;
+            }
+            const path = token.value.slice(1, separator);
+            const key = token.value.slice(separator + 2);
+            const match = byPath[path]?.find((prop) => prop.key === key);
+            const display = match?.name?.trim() || match?.viewTypeName?.display || token.display;
+            if (display && display !== token.display) {
+                changed = true;
+                return { ...token, display };
+            }
+            return token;
+        });
+        return changed ? next : tokens;
     }
     syncBuilderFromExpression(expression, options) {
         this.setBuilderTokens(this.rebuildBuilderFromExpression(expression), {
@@ -1056,12 +1184,29 @@ class FormulaBuilder {
         return list.map((prop) => ({
             key: prop.key,
             name: prop.name?.trim() || prop.viewTypeName?.display || prop.key,
+            viewType: prop.viewType,
         }));
     }, ...(ngDevMode ? [{ debugName: "propertyOptions" }] : /* istanbul ignore next */ []));
     selectedProperty = computed(() => {
         const key = this.propertyFieldKey();
         return this.propertyOptions().find((prop) => prop.key === key) ?? null;
     }, ...(ngDevMode ? [{ debugName: "selectedProperty" }] : /* istanbul ignore next */ []));
+    /** Selectable values of the chosen lookup/status/lookup-matrix property. */
+    lookupItems = signal([], ...(ngDevMode ? [{ debugName: "lookupItems" }] : /* istanbul ignore next */ []));
+    /** Whether the property-items request is in flight. */
+    isLookupItemsLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLookupItemsLoading" }] : /* istanbul ignore next */ []));
+    /** Currently selected lookup value key (the form inserted into the formula). */
+    lookupValueKey = signal('', ...(ngDevMode ? [{ debugName: "lookupValueKey" }] : /* istanbul ignore next */ []));
+    lookupItemsRequestId = 0;
+    /** True when the selected field draws its values from a fixed lookup set. */
+    isLookupProperty = computed(() => {
+        const viewType = this.selectedProperty()?.viewType;
+        if (!viewType)
+            return false;
+        return LOOKUP_VIEW_TYPES.has(viewType.toLowerCase().replace(/[\s_-]/g, ''));
+    }, ...(ngDevMode ? [{ debugName: "isLookupProperty" }] : /* istanbul ignore next */ []));
+    /** Insert-value action is enabled once a lookup value has been picked. */
+    canInsertLookupValue = computed(() => this.isLookupProperty() && Boolean(this.lookupValueKey()), ...(ngDevMode ? [{ debugName: "canInsertLookupValue" }] : /* istanbul ignore next */ []));
     canInsertProperty = computed(() => {
         if (!this.selectedProperty())
             return false;
@@ -1117,6 +1262,85 @@ class FormulaBuilder {
         const block = createPropertyBlock(`@${tablePath}::${prop.key}`, 'current', display);
         insertBlock(block);
     }
+    /**
+     * Insert the picked lookup value as a string literal. The executable form
+     * carries the stable lookup KEY (locale-independent) while the chip shows
+     * the friendly NAME — e.g. `… == "completed"` rendered as `… == Completed`.
+     */
+    insertSelectedLookupValue(insertBlock) {
+        if (!this.canInsertLookupValue())
+            return;
+        const key = this.lookupValueKey();
+        const item = this.lookupItems().find((value) => value.key === key);
+        if (!item)
+            return;
+        insertBlock(createLiteralBlock(item.key, item.name));
+    }
+    /**
+     * Detect that the cursor (in the code editor) is positioned to type the
+     * right-hand value of a comparison against a property, e.g.
+     * `@Current::task_status == "in_`. Returns the compared property key, whether
+     * an opening quote was already typed, and the partial value typed so far.
+     */
+    detectLookupValueContext(formula, cursorPosition) {
+        const before = formula.slice(0, Math.max(0, cursorPosition));
+        const match = before.match(/@[A-Za-z][\w.]*::([A-Za-z_]\w*)\s*(?:==|!=|<>|=|\bin\b)\s*\[?\s*(")?([^"'\]@]*)$/i);
+        if (!match)
+            return null;
+        return {
+            propertyKey: match[1],
+            hasOpenQuote: Boolean(match[2]),
+            partial: match[3] ?? '',
+        };
+    }
+    /**
+     * Avoid a wasted request for properties we already know aren't lookups; for
+     * keys whose view type isn't loaded yet, let property-items be the authority.
+     */
+    shouldFetchLookupItems(propertyKey) {
+        const viewType = this.findLoadedPropertyViewType(propertyKey);
+        if (!viewType)
+            return true;
+        return LOOKUP_VIEW_TYPES.has(viewType.toLowerCase().replace(/[\s_-]/g, ''));
+    }
+    findLoadedPropertyViewType(propertyKey) {
+        const byPath = this.mergedPropertiesByPath();
+        for (const props of Object.values(byPath)) {
+            const found = props.find((prop) => prop.key === propertyKey);
+            if (found?.viewType)
+                return found.viewType;
+        }
+        return undefined;
+    }
+    /**
+     * Build an autocomplete response from a lookup property's values. The inserted
+     * text carries the stable key wrapped in quotes (the opening quote is dropped
+     * when the user already typed one), matching the key-as-value contract used by
+     * the toolbar Value row.
+     */
+    buildLookupValueResponse(items, context) {
+        const needle = context.partial.trim().toLowerCase();
+        const valueLabel = this.transloco.translate('formulaBuilder.properties.value');
+        const suggestions = items
+            .filter((item) => !needle ||
+            item.name.toLowerCase().includes(needle) ||
+            item.key.toLowerCase().includes(needle))
+            .map((item) => {
+            const insertText = `${context.hasOpenQuote ? '' : '"'}${item.key}"`;
+            return {
+                text: insertText,
+                displayText: item.name,
+                type: 'Keyword',
+                description: valueLabel,
+                insertText,
+                category: valueLabel,
+            };
+        });
+        return {
+            suggestions,
+            context: { type: 'None', scope: '', prefix: '' },
+        };
+    }
     getOperatorDisplayName(token) {
         if (token === 'Host' && this.isModuleContext()) {
             return this.transloco.translate('formulaBuilder.operatorNames.level');
@@ -1132,7 +1356,7 @@ class FormulaBuilder {
                 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                                  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\r\n                                  class=\"flex max-h-[min(24rem,calc(100vh-10rem))] flex-col gap-1 overflow-y-auto pr-1\"\r\n                                >\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\r\n                            class=\"flex max-h-[min(24rem,calc(100vh-10rem))] flex-col gap-1 overflow-y-auto pr-1\"\r\n                          >\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              (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", "hint", "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", "markCurrentUser"], 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"] }] });
+        ], 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\r\n                                  class=\"flex max-h-[min(24rem,calc(100vh-10rem))] flex-col gap-1 overflow-y-auto pr-1\"\r\n                                >\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\r\n                            class=\"flex max-h-[min(24rem,calc(100vh-10rem))] flex-col gap-1 overflow-y-auto pr-1\"\r\n                          >\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\r\n                  <!-- Value Selection - Only for lookup / status / lookup-matrix fields -->\r\n                  @if (isLookupProperty()) {\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.value\") }}</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 (isLookupItemsLoading()) {\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-value')\"\r\n                          [(ngModel)]=\"lookupValueKey\"\r\n                          [options]=\"lookupItems()\"\r\n                          optionLabel=\"name\"\r\n                          optionValue=\"key\"\r\n                          [size]=\"'small'\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  }\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 gap-2\">\r\n                    @if (isLookupProperty()) {\r\n                      <mt-button\r\n                        type=\"button\"\r\n                        [label]=\"t('actions.insert-value')\"\r\n                        icon=\"general.plus\"\r\n                        severity=\"secondary\"\r\n                        [outlined]=\"true\"\r\n                        [disabled]=\"!canInsertLookupValue()\"\r\n                        (onClick)=\"insertSelectedLookupValue(insertBlock)\"\r\n                      ></mt-button>\r\n                    }\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              (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", "hint", "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", "markCurrentUser"], 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.2.8", ngImport: i0, type: FormulaBuilder, decorators: [{
             type: Component,
@@ -1160,7 +1384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", 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                                  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\r\n                                  class=\"flex max-h-[min(24rem,calc(100vh-10rem))] flex-col gap-1 overflow-y-auto pr-1\"\r\n                                >\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\r\n                            class=\"flex max-h-[min(24rem,calc(100vh-10rem))] flex-col gap-1 overflow-y-auto pr-1\"\r\n                          >\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              (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" }]
+                    ], 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\r\n                                  class=\"flex max-h-[min(24rem,calc(100vh-10rem))] flex-col gap-1 overflow-y-auto pr-1\"\r\n                                >\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\r\n                            class=\"flex max-h-[min(24rem,calc(100vh-10rem))] flex-col gap-1 overflow-y-auto pr-1\"\r\n                          >\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\r\n                  <!-- Value Selection - Only for lookup / status / lookup-matrix fields -->\r\n                  @if (isLookupProperty()) {\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.value\") }}</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 (isLookupItemsLoading()) {\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-value')\"\r\n                          [(ngModel)]=\"lookupValueKey\"\r\n                          [options]=\"lookupItems()\"\r\n                          optionLabel=\"name\"\r\n                          optionValue=\"key\"\r\n                          [size]=\"'small'\"\r\n                        />\r\n                      }\r\n                    </div>\r\n                  }\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 gap-2\">\r\n                    @if (isLookupProperty()) {\r\n                      <mt-button\r\n                        type=\"button\"\r\n                        [label]=\"t('actions.insert-value')\"\r\n                        icon=\"general.plus\"\r\n                        severity=\"secondary\"\r\n                        [outlined]=\"true\"\r\n                        [disabled]=\"!canInsertLookupValue()\"\r\n                        (onClick)=\"insertSelectedLookupValue(insertBlock)\"\r\n                      ></mt-button>\r\n                    }\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              (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"] }] } });
 
 /**