@masterteam/formula-builder 0.0.1

package/fesm2022/masterteam-formula-builder.mjs

@@ -0,0 +1,878 @@
+import * as i0 from '@angular/core';
+import { inject, signal, Injectable, viewChild, input, output, computed, effect, forwardRef, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslocoDirective } from '@jsverse/transloco';
+import * as i1 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Card } from '@masterteam/components/card';
+import { Button } from '@masterteam/components/button';
+import { SelectField } from '@masterteam/components/select-field';
+import { Tooltip } from '@masterteam/components/tooltip';
+import { RadioCards } from '@masterteam/components/radio-cards';
+import * as i2 from 'primeng/popover';
+import { PopoverModule } from 'primeng/popover';
+import { Skeleton } from 'primeng/skeleton';
+import { createPropertyBlock, FormulaToolbar, FormulaStatusBar, FormulaEditor } 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, catchError } from 'rxjs';
+
+/**
+ * Formula Validator Service
+ * Handles real-time validation via API
+ */
+/** Default validation result for empty formulas */
+const EMPTY_VALIDATION = {
+    isValid: true,
+    errors: [],
+    warnings: [],
+    dependencies: [],
+    complexity: 0,
+};
+/** Error validation result */
+const ERROR_VALIDATION = {
+    isValid: false,
+    errors: [
+        { message: 'Validation failed', line: 1, column: 1, severity: 'Error' },
+    ],
+    warnings: [],
+    dependencies: [],
+    complexity: 0,
+};
+class FormulaValidatorService {
+    http = inject(HttpClient);
+    apiUrl = '/formulas';
+    /** Debounce time in ms */
+    DEBOUNCE_MS = 300;
+    /** Current validation result */
+    _validation = signal(EMPTY_VALIDATION, ...(ngDevMode ? [{ debugName: "_validation" }] : []));
+    /** Loading state */
+    _isValidating = signal(false, ...(ngDevMode ? [{ debugName: "_isValidating" }] : []));
+    /** Validation subject for debouncing */
+    validateSubject = new Subject();
+    /** Public signals */
+    validation = this._validation.asReadonly();
+    isValidating = this._isValidating.asReadonly();
+    constructor() {
+        this.setupValidationStream();
+    }
+    /** Setup debounced validation stream */
+    setupValidationStream() {
+        this.validateSubject
+            .pipe(debounceTime(this.DEBOUNCE_MS), distinctUntilChanged((a, b) => a.formula === b.formula &&
+            JSON.stringify(a.knownProperties) ===
+                JSON.stringify(b.knownProperties)), tap(() => this._isValidating.set(true)), switchMap((request) => this.callValidateApi(request)))
+            .subscribe((result) => {
+            this._validation.set(result);
+            this._isValidating.set(false);
+        });
+    }
+    /** Validate formula (debounced) */
+    validate(formula, knownProperties, levelSchemaId, templateId) {
+        // Handle empty formula
+        if (!formula || formula.trim() === '') {
+            this._validation.set(EMPTY_VALIDATION);
+            return;
+        }
+        // Push to debounced stream
+        this.validateSubject.next({
+            formula,
+            knownProperties,
+            levelSchemaId,
+            templateId,
+        });
+    }
+    /** Validate formula immediately (no debounce) */
+    validateImmediate(formula, knownProperties, levelSchemaId, templateId) {
+        if (!formula || formula.trim() === '') {
+            return of(EMPTY_VALIDATION);
+        }
+        this._isValidating.set(true);
+        return this.callValidateApi({
+            formula,
+            knownProperties,
+            levelSchemaId,
+            templateId,
+        }).pipe(tap((result) => {
+            this._validation.set(result);
+            this._isValidating.set(false);
+        }));
+    }
+    /** Call validation API */
+    callValidateApi(request) {
+        return this.http
+            .post(`${this.apiUrl}/validate`, request)
+            .pipe(catchError((error) => {
+            console.error('Validation API error:', error);
+            // Try to extract error message
+            const apiError = error.error;
+            const message = apiError?.message ?? apiError?.error ?? 'Validation failed';
+            return of({
+                ...ERROR_VALIDATION,
+                errors: [
+                    { message, line: 1, column: 1, severity: 'Error' },
+                ],
+            });
+        }));
+    }
+    /** Reset validation state */
+    reset() {
+        this._validation.set(EMPTY_VALIDATION);
+        this._isValidating.set(false);
+    }
+    /** Get current validation result */
+    getCurrentValidation() {
+        return this._validation();
+    }
+    /** Check if formula is valid */
+    isValid() {
+        return this._validation().isValid;
+    }
+    /** Get validation errors */
+    getErrors() {
+        return this._validation().errors;
+    }
+    /** Get validation warnings */
+    getWarnings() {
+        return this._validation().warnings;
+    }
+    /** Get formula dependencies */
+    getDependencies() {
+        return this._validation().dependencies;
+    }
+    /** Get formula complexity */
+    getComplexity() {
+        return this._validation().complexity;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormulaValidatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormulaValidatorService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormulaValidatorService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+class FormulaContextService {
+    http = inject(HttpClient);
+    apiUrl = '/formulas';
+    contextCache = new Map();
+    propertiesCache = new Map();
+    nextTokensCache = new Map();
+    loadContext(schemaId, contextEntityTypeKey) {
+        if (!schemaId)
+            return of(null);
+        const cacheKey = `${schemaId}:${contextEntityTypeKey ?? ''}`;
+        const cached = this.contextCache.get(cacheKey);
+        if (cached) {
+            return of(cached);
+        }
+        const query = contextEntityTypeKey
+            ? `?contextEntityTypeKey=${encodeURIComponent(contextEntityTypeKey)}`
+            : '';
+        return this.http
+            .get(`${this.apiUrl}/builder/context/${schemaId}${query}`)
+            .pipe(tap((response) => {
+            if (response) {
+                this.contextCache.set(cacheKey, response);
+            }
+        }), catchError((error) => {
+            console.warn('Failed to load formula builder context:', error);
+            return of(null);
+        }));
+    }
+    getScopeProperties(schemaId, component, tablePath) {
+        if (!schemaId || !component || !tablePath)
+            return of([]);
+        const cacheKey = `${schemaId}:${component}:${tablePath}`;
+        const cached = this.propertiesCache.get(cacheKey);
+        if (cached) {
+            return of(cached);
+        }
+        const params = new URLSearchParams({
+            schemaId: schemaId.toString(),
+            component,
+            tablePath,
+        });
+        return this.http
+            .get(`${this.apiUrl}/builder/properties?${params.toString()}`)
+            .pipe(tap((response) => {
+            this.propertiesCache.set(cacheKey, response ?? []);
+        }), catchError((error) => {
+            console.warn('Failed to load formula properties:', error);
+            return of([]);
+        }));
+    }
+    getNextTokens(schemaId, component, tablePath) {
+        if (!schemaId || !component || !tablePath)
+            return of(null);
+        const cacheKey = `${schemaId}:${component}:${tablePath}`;
+        const cached = this.nextTokensCache.get(cacheKey);
+        if (cached) {
+            return of(cached);
+        }
+        const params = new URLSearchParams({
+            schemaId: schemaId.toString(),
+            component,
+            tablePath,
+        });
+        return this.http
+            .get(`${this.apiUrl}/builder/next-tokens?${params.toString()}`)
+            .pipe(tap((response) => {
+            if (response) {
+                this.nextTokensCache.set(cacheKey, response);
+            }
+        }), catchError((error) => {
+            console.warn('Failed to load formula next tokens:', error);
+            return of(null);
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormulaContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormulaContextService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormulaContextService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+function resolveSegmentsMeta({ scope, segments, operators, baseRule, rulesByPath, }) {
+    if (!scope || segments.length === 0) {
+        return [];
+    }
+    let pathBefore = scope;
+    let blocked = false;
+    return segments.map((segment, index) => {
+        const isBase = index === 0 && segment.operatorToken === scope;
+        const operator = operators.find((op) => op.token === segment.operatorToken);
+        const rule = blocked
+            ? undefined
+            : isBase
+                ? baseRule
+                : rulesByPath[pathBefore]?.[segment.operatorToken];
+        const parameterKind = rule?.parameterKind ?? operator?.parameterKind ?? null;
+        const requiresParameter = operator?.requiresParameter ?? Boolean(parameterKind);
+        const allowedValues = getAllowedValues(rule);
+        const normalizedValue = segment.value;
+        const isComplete = !requiresParameter || Boolean(normalizedValue);
+        if (!blocked && isComplete) {
+            pathBefore = appendToPath(pathBefore, segment.operatorToken, normalizedValue, isBase);
+        }
+        else {
+            blocked = true;
+        }
+        return {
+            operatorToken: segment.operatorToken,
+            value: normalizedValue,
+            parameterKind,
+            requiresParameter,
+            allowedValues,
+            optional: !requiresParameter,
+            canRemove: !isBase,
+        };
+    });
+}
+function buildInitialSegments(scope, operator, rule) {
+    if (!operator || !scope)
+        return [];
+    const parameterKind = operator.parameterKind ?? rule?.parameterKind ?? null;
+    const requiresParameter = operator.requiresParameter ?? Boolean(parameterKind);
+    const shouldHaveSegment = Boolean(parameterKind) || requiresParameter;
+    if (!shouldHaveSegment)
+        return [];
+    return [{ operatorToken: scope, value: '' }];
+}
+function buildTablePath(scope, segments, baseOperator, stopOnIncomplete) {
+    if (!scope)
+        return '';
+    if (stopOnIncomplete &&
+        segments.length === 0 &&
+        (baseOperator?.requiresParameter || baseOperator?.parameterKind)) {
+        return '';
+    }
+    let path = scope;
+    for (let index = 0; index < segments.length; index += 1) {
+        const segment = segments[index];
+        const isBase = index === 0 && segment.operatorToken === scope;
+        if (!isBase) {
+            path += `.${segment.operatorToken}`;
+        }
+        if (segment.value) {
+            path += `.${segment.value}`;
+        }
+        else if (segment.requiresParameter && stopOnIncomplete) {
+            return '';
+        }
+    }
+    return path;
+}
+function getAllowedValues(rule) {
+    return rule?.allowedValues ?? [];
+}
+function appendToPath(basePath, operatorToken, value, isBase) {
+    if (isBase) {
+        if (!value)
+            return basePath;
+        if (!basePath)
+            return value;
+        return `${basePath}.${value}`;
+    }
+    if (!basePath) {
+        return value ? `${operatorToken}.${value}` : operatorToken;
+    }
+    const withOperator = `${basePath}.${operatorToken}`;
+    return value ? `${withOperator}.${value}` : withOperator;
+}
+
+const DEFAULT_SCOPE_ICON = 'general.placeholder';
+const SCOPE_ICON_MAP = {
+    Current: 'map.marker-pin-01',
+    Level: 'map.marker-pin-01',
+    Parent: 'arrow.arrow-up',
+    Children: 'user.users-01',
+    Descendants: 'custom.hierarchy-structure',
+    Modules: 'file.folder-closed',
+};
+class FormulaBuilder {
+    validatorService = inject(FormulaValidatorService);
+    contextService = inject(FormulaContextService);
+    /** Reference to the formula editor */
+    editor = viewChild('formulaEditor', ...(ngDevMode ? [{ debugName: "editor" }] : []));
+    // ===== INPUTS =====
+    /** Properties per table path (e.g., "Current", "Children.Project") */
+    propertiesByPath = input({}, ...(ngDevMode ? [{ debugName: "propertiesByPath" }] : []));
+    /** Level schema ID for validation context */
+    levelSchemaId = input(...(ngDevMode ? [undefined, { debugName: "levelSchemaId" }] : []));
+    /** Template ID for validation context */
+    templateId = input(...(ngDevMode ? [undefined, { debugName: "templateId" }] : []));
+    /** Placeholder text */
+    placeholder = input('Enter formula...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Hide the top toolbar */
+    hideToolbar = input(false, ...(ngDevMode ? [{ debugName: "hideToolbar" }] : []));
+    /** Hide the status bar */
+    hideStatusBar = input(false, ...(ngDevMode ? [{ debugName: "hideStatusBar" }] : []));
+    // ===== OUTPUTS =====
+    /** Emits validation result on change */
+    validationChange = output();
+    /** Emits when tokens change */
+    tokensChange = output();
+    // ===== STATE =====
+    /** Editor focus state */
+    hasFocus = signal(false, ...(ngDevMode ? [{ debugName: "hasFocus" }] : []));
+    /** Form control value */
+    expressionValue = signal('', ...(ngDevMode ? [{ debugName: "expressionValue" }] : []));
+    builderValue = signal([], ...(ngDevMode ? [{ debugName: "builderValue" }] : []));
+    /** Tokens for the editor */
+    tokens = signal([], ...(ngDevMode ? [{ debugName: "tokens" }] : []));
+    /** Track last synced builder JSON to avoid loops */
+    lastBuilderJson = '';
+    /** ControlValueAccessor callbacks */
+    onChange = () => { };
+    onTouched = () => { };
+    /** Disabled state */
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    /** Validation result from service */
+    validation = this.validatorService.validation;
+    /** Is validation in progress */
+    isValidating = this.validatorService.isValidating;
+    /** Builder context from API */
+    builderContext = signal(null, ...(ngDevMode ? [{ debugName: "builderContext" }] : []));
+    /** Function categories from context */
+    functionCategories = computed(() => this.builderContext()?.functions?.categories ?? [], ...(ngDevMode ? [{ debugName: "functionCategories" }] : []));
+    /** Is builder context loading */
+    isContextLoading = signal(false, ...(ngDevMode ? [{ debugName: "isContextLoading" }] : []));
+    contextRequestId = 0;
+    /** Properties loaded from API */
+    propertiesByPathApi = signal({}, ...(ngDevMode ? [{ debugName: "propertiesByPathApi" }] : []));
+    /** Current property list loading path */
+    propertyLoadingPath = signal(null, ...(ngDevMode ? [{ debugName: "propertyLoadingPath" }] : []));
+    constructor() {
+        // Validate when formula changes
+        effect(() => {
+            const formula = this.expressionValue();
+            if (formula && formula.trim().length > 0) {
+                this.validatorService.validate(formula, undefined, this.levelSchemaId(), this.templateId());
+            }
+        });
+        // Emit validation changes
+        effect(() => {
+            const validation = this.validation();
+            this.validationChange.emit(validation);
+        });
+        // Load builder context when schema changes
+        effect(() => {
+            const schemaId = this.levelSchemaId();
+            if (!schemaId) {
+                this.builderContext.set(null);
+                this.propertiesByPathApi.set({});
+                this.nextTokenRulesByPath.set({});
+                this.isContextLoading.set(false);
+                return;
+            }
+            const requestId = ++this.contextRequestId;
+            this.isContextLoading.set(true);
+            this.nextTokenRulesByPath.set({});
+            this.contextService.loadContext(schemaId).subscribe((context) => {
+                if (requestId !== this.contextRequestId) {
+                    return;
+                }
+                this.builderContext.set(context);
+                this.isContextLoading.set(false);
+                if (!context) {
+                    return;
+                }
+                if (context.currentProperties?.length) {
+                    const scalarOperators = context.schemaDescriptor?.operators?.filter((operator) => operator.cardinality === 'scalar' &&
+                        !operator.requiresParameter &&
+                        !operator.parameterKind) ?? [];
+                    const scopedProperties = scalarOperators.reduce((acc, operator) => ({
+                        ...acc,
+                        [operator.token]: context.currentProperties,
+                    }), {});
+                    this.propertiesByPathApi.update((current) => ({
+                        ...current,
+                        ...scopedProperties,
+                    }));
+                }
+            });
+        });
+        // Ensure selected scope exists in available options
+        effect(() => {
+            const scopes = this.availableScopes();
+            if (scopes.length === 0)
+                return;
+            const current = this.propertyScope();
+            if (!scopes.some((scope) => scope.key === current)) {
+                this.setPropertyScope(scopes[0].key);
+            }
+        });
+        // Fetch properties for the selected table path
+        effect(() => {
+            const schemaId = this.levelSchemaId();
+            const tablePath = this.resolvedTablePath();
+            const component = this.propertiesComponent();
+            const context = this.builderContext();
+            if (!schemaId || !tablePath || !component || !context) {
+                this.propertyLoadingPath.set(null);
+                return;
+            }
+            const existing = this.propertiesByPathApi()[tablePath];
+            if (existing !== undefined) {
+                this.propertyLoadingPath.set(null);
+                return;
+            }
+            this.propertyLoadingPath.set(tablePath);
+            this.contextService
+                .getScopeProperties(schemaId, component, tablePath)
+                .subscribe((props) => {
+                this.propertiesByPathApi.update((current) => ({
+                    ...current,
+                    [tablePath]: props ?? [],
+                }));
+                if (this.propertyLoadingPath() === tablePath) {
+                    this.propertyLoadingPath.set(null);
+                }
+            });
+        });
+        // Fetch next-token rules for the current table path
+        effect(() => {
+            const schemaId = this.levelSchemaId();
+            const tablePath = this.resolvedTablePath();
+            const component = this.propertiesComponent();
+            if (!schemaId || !tablePath || !component)
+                return;
+            if (this.nextTokenRulesByPath()[tablePath])
+                return;
+            this.contextService
+                .getNextTokens(schemaId, component, tablePath)
+                .subscribe((response) => {
+                if (!response)
+                    return;
+                this.nextTokenRulesByPath.update((current) => ({
+                    ...current,
+                    [tablePath]: response.nextTokenRules ?? {},
+                }));
+            });
+        });
+        // Keep base segment in sync with scope metadata
+        effect(() => {
+            const scope = this.propertyScope();
+            const operator = this.baseOperator();
+            const shouldHaveSegment = Boolean(operator?.parameterKind) ||
+                Boolean(operator?.requiresParameter);
+            const segments = this.propertyPathSegments();
+            const hasBase = segments[0]?.operatorToken === scope;
+            if (shouldHaveSegment && !hasBase) {
+                this.propertyPathSegments.set(buildInitialSegments(scope, operator, this.baseRule()));
+                return;
+            }
+            if (!shouldHaveSegment && hasBase) {
+                this.propertyPathSegments.set(segments.slice(1));
+            }
+        });
+        // Normalize segment values when allowed values change
+        effect(() => {
+            const meta = this.pathSegments();
+            const segments = this.propertyPathSegments();
+            if (meta.length !== segments.length)
+                return;
+            let changed = false;
+            const next = segments.map((segment, index) => {
+                const normalized = meta[index]?.value ?? segment.value;
+                if (segment.value !== normalized) {
+                    changed = true;
+                    return { ...segment, value: normalized };
+                }
+                return segment;
+            });
+            if (changed) {
+                this.propertyPathSegments.set(next);
+            }
+        });
+        // Ensure selected field exists in current options
+        effect(() => {
+            const options = this.propertyOptions();
+            const current = this.propertyFieldKey();
+            if (options.length === 0) {
+                if (current)
+                    this.propertyFieldKey.set('');
+                return;
+            }
+            if (current && !options.some((prop) => prop.key === current)) {
+                this.propertyFieldKey.set('');
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.validatorService.reset();
+    }
+    // ===== ControlValueAccessor =====
+    writeValue(value) {
+        if (!value) {
+            this.expressionValue.set('');
+            this.builderValue.set([]);
+            this.tokens.set([]);
+            this.lastBuilderJson = '';
+            const editor = this.editor();
+            if (editor) {
+                editor.writeValue([]);
+            }
+            this.validatorService.reset();
+            return;
+        }
+        this.expressionValue.set(value.expression ?? '');
+        const builder = Array.isArray(value.builder) ? value.builder : [];
+        this.builderValue.set(builder);
+        if (builder.length === 0) {
+            this.tokens.set([]);
+            this.lastBuilderJson = '';
+            const editor = this.editor();
+            if (editor) {
+                editor.writeValue([]);
+            }
+            return;
+        }
+        const serialized = JSON.stringify(builder);
+        if (serialized === this.lastBuilderJson) {
+            return;
+        }
+        this.tokens.set(builder);
+        const editor = this.editor();
+        if (editor) {
+            editor.writeValue(builder);
+        }
+        this.lastBuilderJson = serialized;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    /** Handle formula change from editor */
+    onFormulaChange(newFormula) {
+        this.expressionValue.set(newFormula);
+        this.emitValueChange();
+    }
+    /** Handle block insert from toolbar */
+    onBlockInsert(block) {
+        const editor = this.editor();
+        if (editor) {
+            editor.addBlock(block);
+        }
+    }
+    /** Handle tokens change */
+    onTokensChange(newTokens) {
+        this.tokens.set(newTokens);
+        const json = JSON.stringify(newTokens);
+        this.lastBuilderJson = json;
+        this.builderValue.set(newTokens);
+        this.tokensChange.emit(newTokens);
+        this.emitValueChange();
+    }
+    onEditorFocus() {
+        this.hasFocus.set(true);
+    }
+    onEditorBlur() {
+        this.hasFocus.set(false);
+        this.onTouched();
+    }
+    emitValueChange() {
+        this.onChange({
+            expression: this.expressionValue(),
+            builder: this.builderValue(),
+        });
+    }
+    // ===== PUBLIC METHODS =====
+    /** Clear the formula */
+    clear() {
+        this.expressionValue.set('');
+        this.tokens.set([]);
+        this.builderValue.set([]);
+        this.lastBuilderJson = '';
+        const editor = this.editor();
+        if (editor) {
+            editor.writeValue([]);
+        }
+        this.validatorService.reset();
+        this.emitValueChange();
+    }
+    // ===== PROPERTY COMPOSER =====
+    propertyScope = signal('', ...(ngDevMode ? [{ debugName: "propertyScope" }] : []));
+    propertyPathSegments = signal([], ...(ngDevMode ? [{ debugName: "propertyPathSegments" }] : []));
+    propertyFieldKey = signal('', ...(ngDevMode ? [{ debugName: "propertyFieldKey" }] : []));
+    nextTokenRulesByPath = signal({}, ...(ngDevMode ? [{ debugName: "nextTokenRulesByPath" }] : []));
+    contextOperators = computed(() => {
+        return this.builderContext()?.schemaDescriptor?.operators ?? [];
+    }, ...(ngDevMode ? [{ debugName: "contextOperators" }] : []));
+    baseOperator = computed(() => this.contextOperators().find((op) => op.token === this.propertyScope()), ...(ngDevMode ? [{ debugName: "baseOperator" }] : []));
+    baseRule = computed(() => {
+        const scope = this.propertyScope();
+        return this.builderContext()?.schemaDescriptor?.nextTokenRules?.[scope];
+    }, ...(ngDevMode ? [{ debugName: "baseRule" }] : []));
+    availableScopes = computed(() => {
+        const operators = this.contextOperators();
+        if (operators.length === 0)
+            return [];
+        return operators.map((operator) => ({
+            key: operator.token,
+            label: `@${operator.token}`,
+            requiresParam: operator.requiresParameter ?? false,
+            optional: !operator.requiresParameter,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "availableScopes" }] : []));
+    /** Radio card options for scope selection */
+    scopeOptions = computed(() => this.availableScopes().map((scope) => ({
+        id: scope.key,
+        name: scope.key,
+        icon: SCOPE_ICON_MAP[scope.key] ?? DEFAULT_SCOPE_ICON,
+    })), ...(ngDevMode ? [{ debugName: "scopeOptions" }] : []));
+    /** Handle scope selection from radio cards */
+    onScopeChange(item) {
+        this.setPropertyScope(String(item.id));
+    }
+    pathSegments = computed(() => {
+        const scope = this.propertyScope();
+        return resolveSegmentsMeta({
+            scope,
+            segments: this.propertyPathSegments(),
+            operators: this.contextOperators(),
+            baseRule: this.baseRule(),
+            rulesByPath: this.nextTokenRulesByPath(),
+        });
+    }, ...(ngDevMode ? [{ debugName: "pathSegments" }] : []));
+    isDirectAccess = computed(() => {
+        const operator = this.baseOperator();
+        const needsParameter = Boolean(operator?.parameterKind) || Boolean(operator?.requiresParameter);
+        return !needsParameter && this.pathSegments().length === 0;
+    }, ...(ngDevMode ? [{ debugName: "isDirectAccess" }] : []));
+    propertyTablePath = computed(() => buildTablePath(this.propertyScope(), this.pathSegments(), this.baseOperator(), false), ...(ngDevMode ? [{ debugName: "propertyTablePath" }] : []));
+    resolvedTablePath = computed(() => buildTablePath(this.propertyScope(), this.pathSegments(), this.baseOperator(), true), ...(ngDevMode ? [{ debugName: "resolvedTablePath" }] : []));
+    currentNextTokenRules = computed(() => {
+        const path = this.resolvedTablePath();
+        if (!path)
+            return {};
+        return this.nextTokenRulesByPath()[path] ?? {};
+    }, ...(ngDevMode ? [{ debugName: "currentNextTokenRules" }] : []));
+    nextOperatorOptions = computed(() => {
+        const rules = this.currentNextTokenRules();
+        const operators = this.contextOperators();
+        return Object.keys(rules)
+            .map((token) => {
+            const rule = rules[token];
+            const operator = operators.find((item) => item.token === token);
+            const parameterKind = rule?.parameterKind ?? operator?.parameterKind ?? null;
+            const requiresParameter = operator?.requiresParameter ?? Boolean(parameterKind);
+            const allowedValues = getAllowedValues(rule);
+            return {
+                token,
+                rule,
+                requiresParameter,
+                allowedValues,
+            };
+        })
+            .filter((option) => option.allowedValues.length > 0 || !option.requiresParameter);
+    }, ...(ngDevMode ? [{ debugName: "nextOperatorOptions" }] : []));
+    canAddNextSegment = computed(() => {
+        if (this.nextOperatorOptions().length === 0)
+            return false;
+        const segments = this.pathSegments();
+        if (segments.length === 0 || !segments[0].value) {
+            return false;
+        }
+        return segments.every((segment) => !segment.requiresParameter || Boolean(segment.value));
+    }, ...(ngDevMode ? [{ debugName: "canAddNextSegment" }] : []));
+    propertiesComponent = computed(() => {
+        const contextKey = this.builderContext()?.contextEntityTypeKey;
+        return contextKey;
+    }, ...(ngDevMode ? [{ debugName: "propertiesComponent" }] : []));
+    mergedPropertiesByPath = computed(() => {
+        const merged = {
+            ...this.propertiesByPath(),
+        };
+        const apiProps = this.propertiesByPathApi();
+        Object.entries(apiProps).forEach(([path, props]) => {
+            if (props && props.length > 0) {
+                merged[path] = props;
+            }
+        });
+        return merged;
+    }, ...(ngDevMode ? [{ debugName: "mergedPropertiesByPath" }] : []));
+    isPropertyLoading = computed(() => {
+        const path = this.resolvedTablePath();
+        return Boolean(path) && this.propertyLoadingPath() === path;
+    }, ...(ngDevMode ? [{ debugName: "isPropertyLoading" }] : []));
+    propertyOptions = computed(() => {
+        const path = this.resolvedTablePath();
+        if (!path)
+            return [];
+        const byPath = this.mergedPropertiesByPath()[path];
+        const list = byPath && byPath.length > 0 ? byPath : [];
+        return list.map((prop) => ({
+            key: prop.key,
+            name: prop.name ?? prop.key,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "propertyOptions" }] : []));
+    selectedProperty = computed(() => {
+        const key = this.propertyFieldKey();
+        return this.propertyOptions().find((prop) => prop.key === key) ?? null;
+    }, ...(ngDevMode ? [{ debugName: "selectedProperty" }] : []));
+    canInsertProperty = computed(() => {
+        if (!this.selectedProperty())
+            return false;
+        return Boolean(this.resolvedTablePath());
+    }, ...(ngDevMode ? [{ debugName: "canInsertProperty" }] : []));
+    setPropertyScope(scope) {
+        if (this.propertyScope() === scope) {
+            return;
+        }
+        this.propertyScope.set(scope);
+        this.propertyPathSegments.set(buildInitialSegments(scope, this.contextOperators().find((op) => op.token === scope), this.builderContext()?.schemaDescriptor?.nextTokenRules?.[scope]));
+        this.propertyFieldKey.set('');
+    }
+    setPathSegmentValue(index, value) {
+        this.propertyPathSegments.update((segments) => {
+            // Update the segment at the given index and remove all segments after it
+            // because subsequent segments depend on previous values
+            const updated = segments.slice(0, index + 1);
+            updated[index] = { ...updated[index], value: value ?? '' };
+            return updated;
+        });
+    }
+    addNextSegment(operatorToken) {
+        const value = '';
+        this.propertyPathSegments.update((segments) => [
+            ...segments,
+            { operatorToken, value },
+        ]);
+    }
+    onAddSegmentSelection(operatorToken, popover) {
+        popover.hide();
+        this.addNextSegment(operatorToken);
+    }
+    removePathSegment(index) {
+        this.propertyPathSegments.update((segments) => segments.filter((_, i) => i !== index));
+    }
+    segmentOptions(index) {
+        const segment = this.pathSegments()[index];
+        if (!segment)
+            return [];
+        return segment.allowedValues.map((value) => ({
+            key: value,
+            name: value,
+        }));
+    }
+    insertSelectedProperty(insertBlock) {
+        const prop = this.selectedProperty();
+        if (!prop)
+            return;
+        if (!this.canInsertProperty())
+            return;
+        const tablePath = this.resolvedTablePath();
+        if (!tablePath)
+            return;
+        const display = prop.name ?? prop.key;
+        const block = createPropertyBlock(`@${tablePath}::${prop.key}`, 'current', display);
+        insertBlock(block);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormulaBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormulaBuilder, isStandalone: true, selector: "mt-formula-builder", inputs: { propertiesByPath: { classPropertyName: "propertiesByPath", publicName: "propertiesByPath", isSignal: true, isRequired: false, transformFunction: null }, levelSchemaId: { classPropertyName: "levelSchemaId", publicName: "levelSchemaId", isSignal: true, isRequired: false, transformFunction: null }, templateId: { classPropertyName: "templateId", publicName: "templateId", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hideToolbar: { classPropertyName: "hideToolbar", publicName: "hideToolbar", isSignal: true, isRequired: false, transformFunction: null }, hideStatusBar: { classPropertyName: "hideStatusBar", publicName: "hideStatusBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { validationChange: "validationChange", tokensChange: "tokensChange" }, host: { classAttribute: "block" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => FormulaBuilder),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "editor", first: true, predicate: ["formulaEditor"], descendants: true, isSignal: true }], 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        (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                      >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 Direct Access\r\n                        </span>\r\n                      } @else if (pathSegments().length === 0) {\r\n                        <span class=\"text-xs italic text-slate-400\"\r\n                          >No path configured</span\r\n                        >\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                                'Select ' + 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                                  Select {{ segment.operatorToken }}\r\n                                </div>\r\n                                <div class=\"flex flex-col gap-1\">\r\n                                  @for (\r\n                                    option of segmentOptions(segmentIndex);\r\n                                    track option.key\r\n                                  ) {\r\n                                    <mt-button\r\n                                      type=\"button\"\r\n                                      [label]=\"option.name\"\r\n                                      [icon]=\"\r\n                                        segment.value === option.key\r\n                                          ? 'general.check'\r\n                                          : 'general.minus'\r\n                                      \"\r\n                                      [iconPos]=\"'end'\"\r\n                                      size=\"small\"\r\n                                      severity=\"secondary\"\r\n                                      [styleClass]=\"\r\n                                        'w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors ' +\r\n                                        (segment.value === option.key\r\n                                          ? 'bg-primary text-white'\r\n                                          : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700')\r\n                                      \"\r\n                                      (onClick)=\"\r\n                                        setPathSegmentValue(\r\n                                          segmentIndex,\r\n                                          option.key\r\n                                        );\r\n                                        pathPopover.hide()\r\n                                      \"\r\n                                    ></mt-button>\r\n                                  }\r\n                                </div>\r\n                                @if (segment.optional) {\r\n                                  <mt-button\r\n                                    type=\"button\"\r\n                                    label=\"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                            Add Segment\r\n                          </div>\r\n                          <div class=\"flex flex-col gap-1\">\r\n                            @for (\r\n                              option of nextOperatorOptions();\r\n                              track option.token\r\n                            ) {\r\n                              <mt-button\r\n                                type=\"button\"\r\n                                [label]=\"option.token\"\r\n                                icon=\"general.plus\"\r\n                                [iconPos]=\"'end'\"\r\n                                size=\"small\"\r\n                                severity=\"secondary\"\r\n                                styleClass=\"w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700\"\r\n                                (onClick)=\"\r\n                                  onAddSegmentSelection(\r\n                                    option.token,\r\n                                    nextOperatorPopover\r\n                                  )\r\n                                \"\r\n                              ></mt-button>\r\n                            }\r\n                          </div>\r\n                        </div>\r\n                      </p-popover>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <!-- Field Selection - Under Path -->\r\n                  <div\r\n                    class=\"flex items-center gap-2 border-t border-slate-200 pt-2 dark:border-slate-700\"\r\n                  >\r\n                    <span\r\n                      class=\"shrink-0 text-xs font-semibold uppercase tracking-wider text-slate-400\"\r\n                      >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=\"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=\"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      <mt-formula-editor\r\n        #formulaEditor\r\n        [placeholder]=\"placeholder()\"\r\n        [initialTokens]=\"tokens()\"\r\n        (formulaChange)=\"onFormulaChange($event)\"\r\n        (tokensChange)=\"onTokensChange($event)\"\r\n        (onFocus)=\"onEditorFocus()\"\r\n        (onBlur)=\"onEditorBlur()\"\r\n      />\r\n    </div>\r\n\r\n    <!-- Status Bar - Pass data via inputs (pure component) -->\r\n    @if (!hideStatusBar()) {\r\n      <mt-formula-status-bar [validation]=\"validation()\" />\r\n    }\r\n  </div>\r\n</mt-card>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading"], 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: "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", "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"], outputs: ["formulaChange", "tokensChange", "onBlur", "onFocus"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormulaBuilder, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-formula-builder', standalone: true, imports: [
+                        CommonModule,
+                        TranslocoDirective,
+                        FormsModule,
+                        Card,
+                        Button,
+                        SelectField,
+                        Tooltip,
+                        RadioCards,
+                        PopoverModule,
+                        Skeleton,
+                        FormulaToolbar,
+                        FormulaStatusBar,
+                        FormulaEditor,
+                    ], host: {
+                        class: 'block',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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        (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                      >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 Direct Access\r\n                        </span>\r\n                      } @else if (pathSegments().length === 0) {\r\n                        <span class=\"text-xs italic text-slate-400\"\r\n                          >No path configured</span\r\n                        >\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                                'Select ' + 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                                  Select {{ segment.operatorToken }}\r\n                                </div>\r\n                                <div class=\"flex flex-col gap-1\">\r\n                                  @for (\r\n                                    option of segmentOptions(segmentIndex);\r\n                                    track option.key\r\n                                  ) {\r\n                                    <mt-button\r\n                                      type=\"button\"\r\n                                      [label]=\"option.name\"\r\n                                      [icon]=\"\r\n                                        segment.value === option.key\r\n                                          ? 'general.check'\r\n                                          : 'general.minus'\r\n                                      \"\r\n                                      [iconPos]=\"'end'\"\r\n                                      size=\"small\"\r\n                                      severity=\"secondary\"\r\n                                      [styleClass]=\"\r\n                                        'w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors ' +\r\n                                        (segment.value === option.key\r\n                                          ? 'bg-primary text-white'\r\n                                          : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700')\r\n                                      \"\r\n                                      (onClick)=\"\r\n                                        setPathSegmentValue(\r\n                                          segmentIndex,\r\n                                          option.key\r\n                                        );\r\n                                        pathPopover.hide()\r\n                                      \"\r\n                                    ></mt-button>\r\n                                  }\r\n                                </div>\r\n                                @if (segment.optional) {\r\n                                  <mt-button\r\n                                    type=\"button\"\r\n                                    label=\"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                            Add Segment\r\n                          </div>\r\n                          <div class=\"flex flex-col gap-1\">\r\n                            @for (\r\n                              option of nextOperatorOptions();\r\n                              track option.token\r\n                            ) {\r\n                              <mt-button\r\n                                type=\"button\"\r\n                                [label]=\"option.token\"\r\n                                icon=\"general.plus\"\r\n                                [iconPos]=\"'end'\"\r\n                                size=\"small\"\r\n                                severity=\"secondary\"\r\n                                styleClass=\"w-full justify-start rounded-md px-2.5 py-1.5 text-left text-xs font-medium transition-colors text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700\"\r\n                                (onClick)=\"\r\n                                  onAddSegmentSelection(\r\n                                    option.token,\r\n                                    nextOperatorPopover\r\n                                  )\r\n                                \"\r\n                              ></mt-button>\r\n                            }\r\n                          </div>\r\n                        </div>\r\n                      </p-popover>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <!-- Field Selection - Under Path -->\r\n                  <div\r\n                    class=\"flex items-center gap-2 border-t border-slate-200 pt-2 dark:border-slate-700\"\r\n                  >\r\n                    <span\r\n                      class=\"shrink-0 text-xs font-semibold uppercase tracking-wider text-slate-400\"\r\n                      >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=\"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=\"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      <mt-formula-editor\r\n        #formulaEditor\r\n        [placeholder]=\"placeholder()\"\r\n        [initialTokens]=\"tokens()\"\r\n        (formulaChange)=\"onFormulaChange($event)\"\r\n        (tokensChange)=\"onTokensChange($event)\"\r\n        (onFocus)=\"onEditorFocus()\"\r\n        (onBlur)=\"onEditorBlur()\"\r\n      />\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 }] }], propertiesByPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertiesByPath", required: false }] }], levelSchemaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelSchemaId", 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 }] }], validationChange: [{ type: i0.Output, args: ["validationChange"] }], tokensChange: [{ type: i0.Output, args: ["tokensChange"] }] } });
+
+/**
+ * Services barrel export
+ */
+
+/**
+ * Public API Surface of @masterteam/formula-builder
+ *
+ * This package provides the FormulaBuilder component which wraps
+ * pure UI components from @masterteam/components/formula with
+ * backend services for validation and context loading.
+ *
+ * Architecture:
+ * - UI Components: imported from @masterteam/components/formula (pure, no services)
+ * - Services: FormulaContextService, FormulaValidatorService (backend logic)
+ * - FormulaBuilder: Main wrapper that connects UI with services
+ */
+// Main component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FormulaBuilder, FormulaContextService, FormulaValidatorService };
+//# sourceMappingURL=masterteam-formula-builder.mjs.map