ngx-t-forms 2.0.30 → 2.0.32

package/fesm2022/ngx-t-forms-calculated-field-rules.component-BhxT6tRq.mjs

@@ -0,0 +1,643 @@
+import * as i0 from '@angular/core';
+import { input, computed, inject, ElementRef, PLATFORM_ID, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, output, signal, viewChild, Input } from '@angular/core';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { NgControl, FormsModule } from '@angular/forms';
+import * as i8 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i2$1 from '@angular/material/form-field';
+import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
+import * as i2$2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3$1 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i1$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i4 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import * as i2 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { Subject } from 'rxjs';
+import { v4 } from 'uuid';
+import { CalculationFunctions } from 'ngx-t-forms-types';
+import { _ as _isEqual } from './ngx-t-forms-ngx-t-forms-C2G8_WQk.mjs';
+import katex from 'katex';
+import { parse } from 'mathjs';
+
+/**
+ * Parses a strictly-infix expression (the format `math.evaluate` consumes) and,
+ * when it is syntactically valid, returns its LaTeX form for KaTeX to render.
+ *
+ * The expression is never rewritten — what the user types is what gets stored
+ * and later evaluated by mathjs. This only *reads* it to derive a preview and a
+ * friendly validity message; an empty expression is treated as "not yet valid"
+ * rather than an error.
+ */
+function parseInfixFormula(expression) {
+    const trimmed = expression.trim();
+    if (!trimmed) {
+        return { tex: null, error: null };
+    }
+    try {
+        return { tex: parse(trimmed).toTex(), error: null };
+    }
+    catch (error) {
+        return { tex: null, error: friendlyMessage(error) };
+    }
+}
+/** Maps mathjs' technical parser errors onto guidance a non-technical user can act on. */
+function friendlyMessage(error) {
+    const raw = error instanceof Error ? error.message : '';
+    if (/end of expression/i.test(raw)) {
+        return 'The equation looks unfinished — add the missing number or variable.';
+    }
+    if (/parenthesis|bracket/i.test(raw)) {
+        return 'Check that every opening bracket "(" has a matching closing bracket ")".';
+    }
+    if (/value expected/i.test(raw)) {
+        return 'An operator (like + or ×) is missing a number or variable next to it.';
+    }
+    if (/unexpected/i.test(raw)) {
+        return 'There is an unexpected symbol in the equation.';
+    }
+    return 'This equation is not valid yet.';
+}
+
+/**
+ * Read-only "natural maths" preview of a strictly-infix expression.
+ *
+ * It parses the expression with mathjs and renders the result as MathML via
+ * KaTeX (no stylesheet required — the browser draws the glyphs natively). The
+ * expression itself is never modified, so what is previewed is exactly what
+ * `math.evaluate` will later consume.
+ *
+ * Internal to `t-dynamic-data-edit` — not part of the library's public surface.
+ */
+class MathPreviewComponent {
+    #host;
+    #isBrowser;
+    constructor() {
+        /** Strictly-infix expression to render (mathjs syntax, e.g. `((a+2)/(b-1))*2`). */
+        this.expression = input('', ...(ngDevMode ? [{ debugName: "expression" }] : /* istanbul ignore next */ []));
+        /** Text shown when there is nothing to preview. */
+        this.placeholder = input('Nothing to preview yet', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** `'empty'` when no expression is set, otherwise `'rendered'`. */
+        this.state = computed(() => this.expression().trim() ? 'rendered' : 'empty', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        this.#host = inject(ElementRef);
+        this.#isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+        effect(() => {
+            const expression = this.expression().trim();
+            const placeholder = this.placeholder();
+            const element = this.#host.nativeElement;
+            // On the server KaTeX has no DOM to render into — fall back to plain text.
+            if (!this.#isBrowser) {
+                element.textContent = expression || placeholder;
+                return;
+            }
+            if (!expression) {
+                element.textContent = placeholder;
+                return;
+            }
+            const { tex } = parseInfixFormula(expression);
+            if (tex == null) {
+                // Mid-edit / not yet valid: show the raw infix until it parses cleanly.
+                element.textContent = expression;
+                return;
+            }
+            katex.render(tex, element, {
+                output: 'mathml',
+                throwOnError: false,
+                displayMode: true,
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MathPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: MathPreviewComponent, isStandalone: true, selector: "lib-math-preview", inputs: { expression: { classPropertyName: "expression", publicName: "expression", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "state()" }, classAttribute: "lib-math-preview" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:flex;align-items:center;justify-content:center;min-height:3rem;padding:.5rem .75rem;overflow-x:auto;color:var(--lib-forms-on-surface);font-size:1.375rem;line-height:1.4;text-align:center}:host([data-state=empty]){color:var(--lib-forms-on-surface-variant);font-size:.9375rem;font-style:italic}:host ::ng-deep math{max-width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MathPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-math-preview', template: '', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
+                        'class': 'lib-math-preview',
+                        '[attr.data-state]': 'state()',
+                    }, styles: [":host{display:flex;align-items:center;justify-content:center;min-height:3rem;padding:.5rem .75rem;overflow-x:auto;color:var(--lib-forms-on-surface);font-size:1.375rem;line-height:1.4;text-align:center}:host([data-state=empty]){color:var(--lib-forms-on-surface-variant);font-size:.9375rem;font-style:italic}:host ::ng-deep math{max-width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { expression: [{ type: i0.Input, args: [{ isSignal: true, alias: "expression", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+
+/** Escapes a string for safe inclusion as a literal inside a `RegExp`. */
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+/**
+ * Internal calculated-field-rules editor implementing
+ * `MatFormFieldControl<CalculatedFieldRules | undefined>` and
+ * `ControlValueAccessor`.
+ *
+ * Rendered by `t-dynamic-data-edit`, which supplies the surrounding field label,
+ * hint, and validation errors — so this component owns only its two modes: a
+ * read-only formula summary (view) and a sectioned editor (edit) for the
+ * formula, its variables, the optional formula source link, and the rounding
+ * settings.
+ *
+ * NOTE: `MatFormFieldControl<T>` and `ControlValueAccessor` mandate plain
+ * mutable `value` / `placeholder` / `required` / `disabled` / `id` members,
+ * `@Input()` decorators on them, the `focused` / `touched` / `stateChanges` /
+ * `onChange` / `onTouched` members, and the `useExisting` provider. These are
+ * framework wiring, not defects — the CLAUDE.md bans on `@Input()` /
+ * `useExisting` do not apply to MatFormFieldControl integration. Genuinely
+ * internal state is signal-based.
+ */
+class CalculatedFieldRulesComponent {
+    static { this.nextId = 0; }
+    /** Index of the `$` that opened the picker, and the caret at that moment. */
+    #dollarIndex;
+    #cursorPosition;
+    #elementRef;
+    constructor() {
+        // #region MatFormFieldControl framework members (plain mutable — not signals)
+        this.placeholder = '';
+        this.required = false;
+        this.disabled = false;
+        this.stateChanges = new Subject();
+        this.controlType = 'app-calculated-field-rules';
+        this.id = `app-calculated-field-rules-${CalculatedFieldRulesComponent.nextId++}`;
+        this.focused = false;
+        this.touched = false;
+        this.describedBy = '';
+        // #endregion
+        // #region Non-MFC inputs / outputs (contract preserved exactly)
+        /** Owning input definition; supplies table mode and the formula-source map. */
+        this.mapToData = input(undefined, ...(ngDevMode ? [{ debugName: "mapToData" }] : /* istanbul ignore next */ []));
+        /** All form inputs available to bind as calculation variables. */
+        this.formInputs = input([], ...(ngDevMode ? [{ debugName: "formInputs" }] : /* istanbul ignore next */ []));
+        /** Validation errors surfaced by the parent for error-state derivation. */
+        this.errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+        /** Retained on the contract; reserved for path-scoped value emission. */
+        this.valueChange2dWithPath = output();
+        /** Emits the persisted rules whenever the editor commits a new value. */
+        this.valueChanged = output();
+        // #endregion
+        // #region Internal signal state
+        /** Whether the editor card is open (edit mode) versus the summary (view). */
+        this.isEditing = signal(false, ...(ngDevMode ? [{ debugName: "isEditing" }] : /* istanbul ignore next */ []));
+        /** Working copy edited in the card; committed to `value` on save. */
+        this.tempValue = signal({}, ...(ngDevMode ? [{ debugName: "tempValue" }] : /* istanbul ignore next */ []));
+        /** Whether the inline `$` field-picker is open. */
+        this.pickerOpen = signal(false, ...(ngDevMode ? [{ debugName: "pickerOpen" }] : /* istanbul ignore next */ []));
+        /** Text typed after `$`, used to filter the field-picker. */
+        this.pickerQuery = signal('', ...(ngDevMode ? [{ debugName: "pickerQuery" }] : /* istanbul ignore next */ []));
+        /** Keyboard-highlighted result in the field-picker. */
+        this.pickerActiveIndex = signal(0, ...(ngDevMode ? [{ debugName: "pickerActiveIndex" }] : /* istanbul ignore next */ []));
+        /** Index of the `$` that opened the picker, and the caret at that moment. */
+        this.#dollarIndex = -1;
+        this.#cursorPosition = 0;
+        // #endregion
+        this.roundingType = [
+            { value: 'ROUND', label: 'Nearest' },
+            { value: 'FLOOR', label: 'Round down' },
+            { value: 'CEIL', label: 'Round up' },
+        ];
+        /** Operator palette inserted into the equation; glyphs are friendly, tokens are infix. */
+        this.operatorKeys = [
+            { label: '+', token: ' + ', caretBack: 0, aria: 'Add' },
+            { label: '−', token: ' - ', caretBack: 0, aria: 'Subtract' },
+            { label: '×', token: ' * ', caretBack: 0, aria: 'Multiply' },
+            { label: '÷', token: ' / ', caretBack: 0, aria: 'Divide' },
+            { label: '( )', token: '()', caretBack: 1, aria: 'Brackets' },
+            { label: 'xⁿ', token: '^', caretBack: 0, aria: 'Power' },
+        ];
+        /** The equation textarea, used for caret-aware token insertion. */
+        this.formulaInputRef = viewChild('formulaInput', ...(ngDevMode ? [{ debugName: "formulaInputRef" }] : /* istanbul ignore next */ []));
+        /** Live, non-technical validity of the working equation (drives the preview banner). */
+        this.formulaStatus = computed(() => {
+            const formula = (this.tempValue().formula ?? '').trim();
+            if (!formula) {
+                return { kind: 'empty', message: 'Start building your equation below.' };
+            }
+            const { error } = parseInfixFormula(formula);
+            return error
+                ? { kind: 'invalid', message: error }
+                : { kind: 'valid', message: 'This equation is valid.' };
+        }, ...(ngDevMode ? [{ debugName: "formulaStatus" }] : /* istanbul ignore next */ []));
+        /** Number-typed inputs that may back a calculation variable. */
+        this.cachedNumberInputs = computed(() => this.formInputs().filter((input) => input.dataType === 'number' || input.type === 'number'), ...(ngDevMode ? [{ debugName: "cachedNumberInputs" }] : /* istanbul ignore next */ []));
+        /** Field-picker results: number inputs filtered by the text typed after `$`. */
+        this.pickerResults = computed(() => {
+            const query = this.pickerQuery().trim().toLowerCase();
+            const inputs = this.cachedNumberInputs();
+            if (!query) {
+                return inputs;
+            }
+            return inputs.filter((input) => input.label?.toLowerCase().includes(query) ||
+                input.formControlName?.toLowerCase().includes(query));
+        }, ...(ngDevMode ? [{ debugName: "pickerResults" }] : /* istanbul ignore next */ []));
+        /** Every calculation function offered as a list-aggregation chip. */
+        this.allCalculationFunction = computed(() => Object.values(CalculationFunctions), ...(ngDevMode ? [{ debugName: "allCalculationFunction" }] : /* istanbul ignore next */ []));
+        /** True when this editor targets a table column rather than a scalar input. */
+        this.tableMode = computed(() => !!this.mapToData()?.tableConfig, ...(ngDevMode ? [{ debugName: "tableMode" }] : /* istanbul ignore next */ []));
+        /** Table configuration when in table mode. */
+        this.tableConfig = computed(() => this.mapToData()?.tableConfig, ...(ngDevMode ? [{ debugName: "tableConfig" }] : /* istanbul ignore next */ []));
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.#elementRef = inject(ElementRef);
+        // ControlValueAccessor — Angular registers an untyped change callback.
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    ngOnDestroy() {
+        this.stateChanges.next();
+        this.stateChanges.complete();
+    }
+    // #region Value accessor & MatFormFieldControl logic
+    #value;
+    get value() {
+        return this.#value;
+    }
+    set value(val) {
+        if (_isEqual(this.#value, val)) {
+            return;
+        }
+        this.#value = val ? { ...val } : undefined;
+        this.stateChanges.next();
+        this.valueChanged.emit(this.#value ?? null);
+        this.onChange(this.#value);
+    }
+    // MatFormFieldControl reads these as plain getters during its own change
+    // detection, so they stay getters rather than `computed()` signals.
+    get empty() {
+        return !this.#value;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty;
+    }
+    get errorState() {
+        const hasCustomError = (this.errors() ?? []).length > 0;
+        const hasControlError = this.ngControl?.control?.errors != null;
+        return ((this.touched && (hasControlError || hasCustomError)) ||
+            (this.required && !this.#value));
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.stateChanges.next();
+    }
+    setDescribedByIds(ids) {
+        const controlElement = this.#elementRef.nativeElement.querySelector('.app-calculated-field-rules');
+        controlElement?.setAttribute('aria-describedby', ids.join(' '));
+        this.describedBy = ids.join(' ');
+        this.stateChanges.next();
+    }
+    onContainerClick() {
+        if (!this.focused) {
+            this.focused = true;
+            this.stateChanges.next();
+        }
+        this.markAsTouched();
+    }
+    markAsTouched() {
+        if (!this.touched) {
+            this.onTouched();
+            this.touched = true;
+            this.stateChanges.next();
+        }
+    }
+    // #endregion
+    // #region Edit-mode lifecycle
+    startEdit() {
+        this.tempValue.set(this.#value ? structuredClone(this.#value) : {});
+        this.isEditing.set(true);
+        this.markAsTouched();
+    }
+    saveEdit() {
+        this.value = this.tempValue();
+        this.isEditing.set(false);
+    }
+    cancelEdit() {
+        this.isEditing.set(false);
+        this.tempValue.set({});
+    }
+    // #endregion
+    // #region Formula / variable editing (operates on tempValue)
+    checkIfInputCanBeLinkedToCalVariable(currentInput, inputToDisable) {
+        if (!currentInput) {
+            return false;
+        }
+        if (currentInput.formControlName === inputToDisable.formControlName) {
+            return true;
+        }
+        if (!currentInput.multipleInputInEditId) {
+            return !!inputToDisable.parentInput || !!inputToDisable.multipleInputInEditId;
+        }
+        return false;
+    }
+    linkFormulaSource(event) {
+        // Resetting formula to undefined intentionally during edit; persisted value
+        // re-validates on save.
+        this.tempValue.update((current) => ({
+            ...current,
+            formControlWithFormula: event.value,
+            formula: '',
+        }));
+    }
+    removeVariable(variableId) {
+        const current = this.tempValue();
+        const variables = current.variables ?? [];
+        const target = variables.find((v) => v.id === variableId);
+        let formula = current.formula ?? '';
+        if (target?.variable) {
+            formula = formula
+                .replace(new RegExp(`\\b${escapeRegExp(target.variable)}\\b`, 'g'), '')
+                .replace(/\s{2,}/g, ' ')
+                .trim();
+        }
+        this.tempValue.set({
+            ...current,
+            variables: variables.filter((v) => v.id !== variableId),
+            formula,
+        });
+    }
+    appendVariableToFormula(variableName) {
+        // A variable carries no spacing of its own, so pad it only where it would
+        // otherwise fuse with an adjacent token (e.g. `ab` instead of `a b`).
+        const { before, after } = this.#caretSlices();
+        const lead = before.length > 0 && !/[\s(]$/.test(before) ? ' ' : '';
+        const trail = after.length > 0 && !/^[\s)]/.test(after) ? ' ' : '';
+        this.insertToken(`${lead}${variableName}${trail}`, trail ? 1 : 0);
+    }
+    setFormula(formula) {
+        this.tempValue.update((current) => ({ ...current, formula }));
+    }
+    /**
+     * Inserts an infix token at the caret (or appends it when the textarea is not
+     * focused), then restores the caret just after the insertion. Used by both the
+     * operator palette and the variable chips so the equation reads naturally while
+     * staying strictly infix.
+     */
+    insertToken(token, caretBack = 0) {
+        const element = this.formulaInputRef()?.nativeElement;
+        const { before, after } = this.#caretSlices();
+        const next = before + token + after;
+        this.setFormula(next);
+        if (!element) {
+            return;
+        }
+        const caret = before.length + token.length - caretBack;
+        // Restore focus + caret after Angular has written the new value back to the DOM.
+        setTimeout(() => {
+            element.focus();
+            element.setSelectionRange(caret, caret);
+        });
+    }
+    /** The formula split around the current caret/selection (end-of-string when unfocused). */
+    #caretSlices() {
+        const current = this.tempValue().formula ?? '';
+        const element = this.formulaInputRef()?.nativeElement;
+        const start = element?.selectionStart ?? current.length;
+        const end = element?.selectionEnd ?? current.length;
+        return { before: current.slice(0, start), after: current.slice(end) };
+    }
+    setDecimalPlaces(value) {
+        const parsed = value === null || value === '' ? undefined : Number(value);
+        this.tempValue.update((current) => ({
+            ...current,
+            decimalPlaces: parsed !== undefined && Number.isFinite(parsed) ? parsed : undefined,
+        }));
+    }
+    setRoundingMode(mode) {
+        this.tempValue.update((current) => ({ ...current, roundingMode: mode }));
+    }
+    /** Friendly label for a stored rounding mode, used in the read-only summary. */
+    roundingLabel(mode) {
+        return this.roundingType.find((option) => option.value === mode)?.label ?? 'nearest';
+    }
+    // #endregion
+    // #region Inline `$` field-picker & variable binding
+    /** Formula text changed: persist it and re-evaluate whether the `$` picker should show. */
+    onFormulaChange(value) {
+        this.setFormula(value);
+        this.#syncPicker();
+    }
+    /** Caret moved (click / arrow keys / focus): re-evaluate the `$` picker against the new caret. */
+    onFormulaCaret() {
+        this.#syncPicker();
+    }
+    /** Closes the picker shortly after blur, leaving time for a result click to register. */
+    onFormulaBlur() {
+        setTimeout(() => this.closePicker(), 150);
+    }
+    /** Keyboard control for the open picker: navigate, select, dismiss. */
+    onFormulaKeydown(event) {
+        if (!this.pickerOpen()) {
+            return;
+        }
+        const results = this.pickerResults();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.pickerActiveIndex.update((i) => Math.min(i + 1, results.length - 1));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.pickerActiveIndex.update((i) => Math.max(i - 1, 0));
+                break;
+            case 'Enter': {
+                const item = results[this.pickerActiveIndex()];
+                if (item) {
+                    event.preventDefault();
+                    this.selectField(item);
+                }
+                break;
+            }
+            case 'Escape':
+                event.preventDefault();
+                this.closePicker();
+                break;
+        }
+    }
+    closePicker() {
+        this.pickerOpen.set(false);
+        this.pickerActiveIndex.set(0);
+        this.#dollarIndex = -1;
+    }
+    /**
+     * Binds a form field to a calculation variable and drops its short token into
+     * the equation. Reuses an existing scalar binding for the same field; otherwise
+     * mints the next free short name (a, b, c, …). When opened from `$`, the typed
+     * `$query` is replaced in place; otherwise the token is appended.
+     */
+    selectField(input) {
+        const current = this.tempValue();
+        const variables = current.variables ?? [];
+        const existing = variables.find((v) => v.formControlName === input.formControlName && !v.function && !v.parentInputId);
+        const token = existing ? existing.variable : this.#nextShortName();
+        const nextVars = existing ? variables : [...variables, this.#makeVariable(input, token)];
+        const formula = current.formula ?? '';
+        let nextFormula;
+        let caret;
+        if (this.pickerOpen() && this.#dollarIndex >= 0) {
+            const before = formula.slice(0, this.#dollarIndex);
+            const after = formula.slice(this.#cursorPosition);
+            const lead = before.length > 0 && !/[\s(]$/.test(before) ? ' ' : '';
+            const insert = `${lead}${token} `;
+            nextFormula = before + insert + after;
+            caret = (before + insert).length;
+        }
+        else {
+            const lead = formula.length > 0 && !/[\s(]$/.test(formula) ? ' ' : '';
+            nextFormula = `${formula}${lead}${token} `;
+            caret = nextFormula.length;
+        }
+        this.tempValue.set({ ...current, formula: nextFormula, variables: nextVars });
+        this.closePicker();
+        const element = this.formulaInputRef()?.nativeElement;
+        if (element) {
+            setTimeout(() => {
+                element.focus();
+                element.setSelectionRange(caret, caret);
+            });
+        }
+    }
+    /**
+     * Renames a variable's short token, updating every whole-word occurrence in the
+     * formula. An empty name is ignored so the token never desyncs from the formula
+     * (the field repopulates with the current name on the next render).
+     */
+    setVariableShortName(id, rawName) {
+        const name = rawName.trim();
+        const current = this.tempValue();
+        const variables = current.variables ?? [];
+        const target = variables.find((v) => v.id === id);
+        if (!target || !name || name === target.variable) {
+            return;
+        }
+        const formula = target.variable
+            ? (current.formula ?? '').replace(new RegExp(`\\b${escapeRegExp(target.variable)}\\b`, 'g'), name)
+            : (current.formula ?? '');
+        this.tempValue.set({
+            ...current,
+            formula,
+            variables: variables.map((v) => (v.id === id ? { ...v, variable: name } : v)),
+        });
+    }
+    /** Toggles a list-aggregation function (sum/avg/…) on a sub-item variable. */
+    setVariableFunction(id, func) {
+        this.tempValue.update((current) => ({
+            ...current,
+            variables: (current.variables ?? []).map((v) => {
+                if (v.id !== id) {
+                    return v;
+                }
+                if (v.function === func) {
+                    return {
+                        ...v,
+                        function: undefined,
+                        applyFunctionToCol: undefined,
+                        applyFunctionToLabel: undefined,
+                    };
+                }
+                return {
+                    ...v,
+                    function: func,
+                    applyFunctionToCol: v.formControlName,
+                    applyFunctionToLabel: v.label,
+                };
+            }),
+        }));
+    }
+    /** Recomputes the picker visibility/query from the current formula and caret. */
+    #syncPicker() {
+        const element = this.formulaInputRef()?.nativeElement;
+        if (!element) {
+            this.closePicker();
+            return;
+        }
+        const position = element.selectionStart ?? 0;
+        this.#cursorPosition = position;
+        const formula = this.tempValue().formula ?? '';
+        const lastDollar = formula.slice(0, position).lastIndexOf('$');
+        if (lastDollar === -1) {
+            this.closePicker();
+            return;
+        }
+        const query = formula.slice(lastDollar + 1, position);
+        // Only a run of letters/digits/spaces keeps the picker open; anything else
+        // (an operator, a newline) means the `$` was not a field trigger.
+        if (!/^[a-zA-Z0-9 ]*$/.test(query)) {
+            this.closePicker();
+            return;
+        }
+        this.#dollarIndex = lastDollar;
+        this.pickerQuery.set(query);
+        this.pickerActiveIndex.set(0);
+        this.pickerOpen.set(true);
+    }
+    /** Builds a calculation variable bound to a form field, carrying the list parent when present. */
+    #makeVariable(input, token) {
+        return {
+            id: v4(),
+            variable: token,
+            formControlName: input.formControlName,
+            inputId: input.id,
+            label: input.label,
+            ...(input.multipleInputInEditId ? { parentInputId: input.multipleInputInEditId } : {}),
+        };
+    }
+    /** Next free single-letter token (a, b, c, …), skipping mathjs constants and falling back to v1, v2…. */
+    #nextShortName() {
+        const used = new Set((this.tempValue().variables ?? []).map((v) => v.variable));
+        const reserved = new Set(['e', 'i']); // mathjs constants
+        for (let code = 97; code <= 122; code++) {
+            const char = String.fromCharCode(code);
+            if (!used.has(char) && !reserved.has(char)) {
+                return char;
+            }
+        }
+        let n = 1;
+        while (used.has(`v${n}`)) {
+            n++;
+        }
+        return `v${n}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: CalculatedFieldRulesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: CalculatedFieldRulesComponent, isStandalone: true, selector: "lib-calculated-field-rules", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, mapToData: { classPropertyName: "mapToData", publicName: "mapToData", isSignal: true, isRequired: false, transformFunction: null }, formInputs: { classPropertyName: "formInputs", publicName: "formInputs", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange2dWithPath: "valueChange2dWithPath", valueChanged: "valueChanged" }, host: { properties: { "attr.aria-describedby": "describedBy" }, classAttribute: "lib-calculated-field-rules" }, providers: [{ provide: MatFormFieldControl, useExisting: CalculatedFieldRulesComponent }], viewQueries: [{ propertyName: "formulaInputRef", first: true, predicate: ["formulaInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- View mode: read-only calculation summary -->\n@if (!isEditing()) {\n<div class=\"cfr-summary\">\n  @if (!!value && !mapToData()?.id && !tableMode()) {\n  <div class=\"cfr-hint\">\n    <mat-icon class=\"cfr-hint__icon\" color=\"primary\">info</mat-icon>\n    <span>Save the input first to enable calculated field configurations</span>\n  </div>\n  }\n\n  <div class=\"cfr-formula-card\">\n    <span class=\"cfr-section__label\">Calculation</span>\n    <lib-math-preview class=\"cfr-formula-card__preview\" [expression]=\"value?.formula || ''\"\n      placeholder=\"No calculation set up yet\" />\n    @if (value?.decimalPlaces) {\n    <div class=\"cfr-formula-card__meta\">\n      <mat-icon class=\"cfr-formula-card__meta-icon\">tune</mat-icon>\n      <span>Shown to {{ value?.decimalPlaces }} decimal place(s) \u00B7 {{ value?.roundingMode ? roundingLabel(value?.roundingMode) : 'nearest' }}</span>\n    </div>\n    }\n  </div>\n\n  <button class=\"cfr-edit-trigger\" mat-stroked-button color=\"primary\" [disabled]=\"disabled\"\n    (click)=\"startEdit()\">\n    <mat-icon>edit</mat-icon>\n    {{ !!value?.formula ? 'Edit calculation' : 'Set up calculation' }}\n  </button>\n</div>\n}\n\n<!-- Edit mode: guided calculation builder -->\n@else {\n<mat-card appearance=\"outlined\" class=\"cfr-editor\">\n  <header class=\"cfr-editor__head\">\n    <h3 class=\"cfr-editor__title\">\n      <mat-icon>functions</mat-icon>\n      Build the calculation\n    </h3>\n    <p class=\"cfr-editor__subtitle\">\n      Combine your form fields with operators to work out this value automatically.\n    </p>\n  </header>\n\n  <!-- Live preview + validity -->\n  <div class=\"cfr-preview\" [attr.data-state]=\"formulaStatus().kind\">\n    <span class=\"cfr-section__label\">Live preview</span>\n    <lib-math-preview class=\"cfr-preview__render\" [expression]=\"tempValue().formula || ''\"\n      placeholder=\"Your equation will appear here\" />\n    <p class=\"cfr-preview__status\">\n      <mat-icon class=\"cfr-preview__status-icon\">\n        {{ formulaStatus().kind === 'valid' ? 'check_circle' : formulaStatus().kind === 'invalid' ? 'error' : 'lightbulb' }}\n      </mat-icon>\n      <span>{{ formulaStatus().message }}</span>\n    </p>\n  </div>\n\n  <section class=\"cfr-section\">\n    <!-- Equation input + inline field-picker + operator keypad -->\n    <div class=\"cfr-equation\">\n      <div class=\"cfr-equation__field\">\n        <mat-form-field class=\"cfr-field\" [subscriptSizing]=\"'dynamic'\" [floatLabel]=\"'always'\"\n          appearance=\"outline\">\n          <mat-label>Equation</mat-label>\n          <textarea #formulaInput matInput [ngModel]=\"tempValue().formula\"\n            (ngModelChange)=\"onFormulaChange($event)\" (keyup)=\"onFormulaCaret()\"\n            (click)=\"onFormulaCaret()\" (focus)=\"onFormulaCaret()\"\n            (keydown)=\"onFormulaKeydown($event)\" (blur)=\"onFormulaBlur()\"\n            placeholder=\"e.g. (a + 2) / b\" rows=\"2\" spellcheck=\"false\" autocapitalize=\"off\"\n            autocomplete=\"off\"></textarea>\n          <mat-hint>Type <strong>$</strong> to add a form field, then join fields with the operator keys.</mat-hint>\n        </mat-form-field>\n\n        @if (pickerOpen()) {\n        <div class=\"cfr-picker\" role=\"listbox\" aria-label=\"Form fields\">\n          <div class=\"cfr-picker__head\">Insert a field</div>\n          @if (pickerResults().length === 0) {\n          <div class=\"cfr-picker__empty\">No matching number fields</div>\n          } @else {\n          @for (item of pickerResults(); track item.id; let idx = $index) {\n          <button type=\"button\" role=\"option\" class=\"cfr-picker__item\"\n            [class.cfr-picker__item--active]=\"idx === pickerActiveIndex()\"\n            [attr.aria-selected]=\"idx === pickerActiveIndex()\"\n            (mousedown)=\"$event.preventDefault()\" (click)=\"selectField(item)\">\n            <mat-icon class=\"cfr-picker__icon\">{{ item.multipleInputInEditId ? 'format_list_numbered' : 'tag' }}</mat-icon>\n            <span class=\"cfr-picker__label\">{{ item.label }}</span>\n            <span class=\"cfr-picker__meta\">{{ item.formControlName }}</span>\n          </button>\n          }\n          }\n        </div>\n        }\n      </div>\n\n      <div class=\"cfr-keypad\" role=\"group\" aria-label=\"Operators\">\n        @for (key of operatorKeys; track key.token) {\n        <button type=\"button\" class=\"cfr-key\" [attr.aria-label]=\"key.aria\"\n          (click)=\"insertToken(key.token, key.caretBack)\">\n          {{ key.label }}\n        </button>\n        }\n      </div>\n    </div>\n\n    <!-- Optional equation source link -->\n    @if (!!tempValue().getFormulaFromAFormInput) {\n    <mat-form-field class=\"cfr-field\" [subscriptSizing]=\"'dynamic'\" [floatLabel]=\"'always'\"\n      appearance=\"outline\">\n      <mat-label>Equation source</mat-label>\n      <mat-select [value]=\"tempValue().formControlWithFormula\"\n        (selectionChange)=\"linkFormulaSource($event)\" placeholder=\"Select an input that holds a formula\">\n        @for (input of formInputs(); track input.id) {\n        <mat-option\n          [disabled]=\"checkIfInputCanBeLinkedToCalVariable(mapToData(), input) || input.element !== 'select'\"\n          [value]=\"input.formControlName\">\n          {{ input.label }}\n        </mat-option>\n        }\n      </mat-select>\n      <mat-hint>Pull the equation from another input's value</mat-hint>\n    </mat-form-field>\n    }\n\n    <!-- Bound fields legend -->\n    <div class=\"cfr-variables\">\n      <div class=\"cfr-block-head\">\n        <span class=\"cfr-section__label\">Fields in this calculation</span>\n        <span class=\"cfr-block-head__hint\">Rename a letter, or type $ above to add another</span>\n      </div>\n\n      @if ((tempValue().variables || []).length === 0) {\n      <p class=\"cfr-variables__empty\">\n        Type <strong>$</strong> in the equation above to add a form field \u2014 each becomes a short\n        letter you can use in the equation.\n      </p>\n      } @else {\n      <ul class=\"cfr-legend\">\n        @for (variable of (tempValue().variables || []); track variable.id) {\n        <li class=\"cfr-legend__row\">\n          <div class=\"cfr-legend__main\">\n            <input class=\"cfr-legend__token\" [ngModel]=\"variable.variable\"\n              (ngModelChange)=\"setVariableShortName(variable.id, $event)\" aria-label=\"Short name\"\n              maxlength=\"12\" spellcheck=\"false\" autocomplete=\"off\" autocapitalize=\"off\">\n            <mat-icon class=\"cfr-legend__arrow\">arrow_right_alt</mat-icon>\n            <button type=\"button\" class=\"cfr-legend__field\"\n              [attr.aria-label]=\"'Insert ' + variable.label + ' into the equation'\"\n              (click)=\"appendVariableToFormula(variable.variable)\">\n              {{ variable.label }}\n            </button>\n            <button type=\"button\" class=\"cfr-legend__remove\"\n              [attr.aria-label]=\"'Remove ' + variable.variable\"\n              (click)=\"removeVariable(variable.id)\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n\n          @if (variable.parentInputId) {\n          <div class=\"cfr-legend__fns\" role=\"group\" aria-label=\"Combine list values with\">\n            <span class=\"cfr-legend__fns-label\" aria-hidden=\"true\">\u0192</span>\n            @for (func of allCalculationFunction(); track func) {\n            <button type=\"button\" class=\"cfr-legend__fn\"\n              [class.cfr-legend__fn--active]=\"variable.function === func\"\n              (click)=\"setVariableFunction(variable.id, func)\">\n              {{ func }}\n            </button>\n            }\n          </div>\n          }\n        </li>\n        }\n      </ul>\n      }\n    </div>\n\n    <!-- Result formatting -->\n    <div class=\"cfr-rounding\">\n      <div class=\"cfr-block-head\">\n        <span class=\"cfr-section__label\">Result formatting</span>\n        <span class=\"cfr-block-head__hint\">Optional \u2014 how the answer is rounded</span>\n      </div>\n\n      <div class=\"cfr-rounding__row\">\n        <mat-form-field class=\"cfr-field cfr-rounding__decimals\" [subscriptSizing]=\"'dynamic'\"\n          [floatLabel]=\"'always'\" appearance=\"outline\">\n          <mat-label>Decimal places</mat-label>\n          <input matInput [ngModel]=\"tempValue().decimalPlaces\"\n            (ngModelChange)=\"setDecimalPlaces($event)\" placeholder=\"0\" type=\"number\" min=\"0\">\n        </mat-form-field>\n\n        @if (tempValue().decimalPlaces) {\n        <div class=\"cfr-rounding__mode\">\n          <label class=\"cfr-section__label\">Rounding</label>\n          <mat-chip-listbox aria-label=\"Rounding method\">\n            @for (type of roundingType; track type.value) {\n            <mat-chip-option (click)=\"setRoundingMode(type.value)\"\n              [selected]=\"tempValue().roundingMode === type.value\">\n              {{ type.label }}\n            </mat-chip-option>\n            }\n          </mat-chip-listbox>\n        </div>\n        }\n      </div>\n    </div>\n  </section>\n\n  <div class=\"cfr-editor__actions\">\n    <button mat-button (click)=\"cancelEdit()\">Cancel</button>\n    <button mat-flat-button color=\"primary\" [disabled]=\"formulaStatus().kind === 'invalid'\"\n      (click)=\"saveEdit()\">\n      Save calculation\n    </button>\n  </div>\n</mat-card>\n}\n\n<!-- Disabled overlay -->\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOpen]=\"disabled\">\n  <div class=\"cfr-disabled-overlay\"></div>\n</ng-template>\n", styles: [":host{display:block;position:relative}.cfr-hint{display:flex;align-items:center;gap:.5rem;padding:.875rem 1rem;background:var(--sem-info-surface);border-radius:var(--lib-forms-radius-sm, 8px);color:var(--lib-forms-on-surface);font-size:.875rem}.cfr-hint__icon{flex:0 0 auto}.cfr-section__label{display:block;font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lib-forms-on-surface-variant)}.cfr-field{width:100%}.cfr-block-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .75rem;margin-bottom:.75rem}.cfr-block-head__hint{font-size:.8125rem;color:var(--lib-forms-on-surface-variant)}.cfr-summary{display:flex;flex-direction:column;gap:1.5rem}.cfr-formula-card{background:var(--lib-forms-surface);border:1px solid color-mix(in srgb,var(--lib-forms-outline) 15%,transparent);border-radius:var(--lib-forms-radius-lg, 12px);box-shadow:var(--lib-forms-shadow-resting);display:flex;flex-direction:column;gap:1rem;padding:2rem}.cfr-formula-card__preview{display:block;border-radius:var(--lib-forms-radius-md, 10px);background:var(--lib-forms-surface-container-low)}.cfr-formula-card__meta{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--lib-forms-on-surface-variant)}.cfr-formula-card__meta-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.cfr-edit-trigger{width:100%}.cfr-editor{display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;border-color:color-mix(in srgb,var(--lib-forms-primary) 30%,transparent)}.cfr-editor__head{display:flex;flex-direction:column;gap:.5rem}.cfr-editor__title{display:flex;align-items:center;gap:.5rem;margin:0;font-size:1.25rem;font-weight:500;letter-spacing:-.01em;color:var(--lib-forms-on-surface)}.cfr-editor__subtitle{margin:0;font-size:.9375rem;color:var(--lib-forms-on-surface-variant)}.cfr-preview{display:flex;flex-direction:column;gap:.875rem;padding:1.25rem 1.5rem;border-radius:var(--lib-forms-radius-lg, 12px);background:var(--lib-forms-surface-container-low);border:1px solid color-mix(in srgb,var(--lib-forms-outline) 15%,transparent);transition:border-color var(--lib-forms-duration, .4s) var(--lib-forms-easing)}.cfr-preview[data-state=valid]{border-color:color-mix(in srgb,var(--sem-success) 45%,transparent)}.cfr-preview[data-state=invalid]{border-color:color-mix(in srgb,var(--sem-error) 45%,transparent)}.cfr-preview__render{display:block}.cfr-preview__status{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.875rem;color:var(--lib-forms-on-surface-variant)}.cfr-preview__status-icon{flex:0 0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem}.cfr-preview[data-state=valid] .cfr-preview__status{color:var(--sem-success)}.cfr-preview[data-state=invalid] .cfr-preview__status{color:var(--sem-error)}.cfr-section{display:flex;flex-direction:column;gap:1.5rem}.cfr-equation{display:flex;flex-direction:column;gap:.625rem}.cfr-equation__field{position:relative}.cfr-keypad{display:flex;flex-wrap:wrap;gap:.375rem}.cfr-key{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.25rem;padding:0 .625rem;border:1px solid var(--lib-forms-outline-variant);border-radius:var(--lib-forms-radius-sm, 8px);background:var(--lib-forms-surface);color:var(--lib-forms-on-surface);font-size:1rem;font-weight:500;cursor:pointer;transition:border-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing),background-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing),transform var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing)}.cfr-key:hover{border-color:var(--lib-forms-primary);background:color-mix(in srgb,var(--lib-forms-primary) 8%,transparent)}.cfr-key:active{transform:translateY(1px)}.cfr-picker{position:absolute;z-index:20;left:0;right:0;top:calc(100% - 1.25rem);max-height:16rem;overflow-y:auto;padding:.5rem;border-radius:var(--lib-forms-radius-md, 10px);background:var(--lib-forms-surface);border:1px solid color-mix(in srgb,var(--lib-forms-outline) 20%,transparent);box-shadow:var(--lib-forms-shadow-elevated, var(--lib-forms-shadow-resting))}.cfr-picker__head{padding:.25rem .5rem .5rem;font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lib-forms-on-surface-variant)}.cfr-picker__empty{padding:.75rem .5rem;font-size:.875rem;color:var(--lib-forms-on-surface-variant)}.cfr-picker__item{display:flex;align-items:center;gap:.625rem;width:100%;padding:.5rem .625rem;border:none;border-radius:var(--lib-forms-radius-sm, 8px);background:transparent;color:var(--lib-forms-on-surface);font-size:.9375rem;text-align:left;cursor:pointer;transition:background-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing)}.cfr-picker__item:hover,.cfr-picker__item--active{background:color-mix(in srgb,var(--lib-forms-primary) 12%,transparent)}.cfr-picker__icon{flex:0 0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem;color:var(--lib-forms-on-surface-variant)}.cfr-picker__label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cfr-picker__meta{flex:0 0 auto;font-size:.75rem;color:var(--lib-forms-on-surface-variant)}.cfr-variables{display:flex;flex-direction:column;gap:.75rem}.cfr-variables__empty{margin:0;font-size:.875rem;color:var(--lib-forms-on-surface-variant)}.cfr-legend{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none}.cfr-legend__row{display:flex;flex-direction:column;gap:.5rem;padding:.5rem .625rem;border-radius:var(--lib-forms-radius-md, 10px);background:var(--lib-forms-surface-container-low);border:1px solid color-mix(in srgb,var(--lib-forms-outline) 12%,transparent)}.cfr-legend__main{display:flex;align-items:center;gap:.5rem}.cfr-legend__token{flex:0 0 auto;width:2.5rem;height:1.875rem;padding:0 .25rem;text-align:center;font-family:JetBrains Mono,SF Mono,ui-monospace,monospace;font-size:.9375rem;font-weight:600;color:var(--lib-forms-primary);background:color-mix(in srgb,var(--lib-forms-primary) 8%,var(--lib-forms-surface));border:1px solid color-mix(in srgb,var(--lib-forms-primary) 30%,transparent);border-radius:var(--lib-forms-radius-sm, 8px);transition:border-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing),box-shadow var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing)}.cfr-legend__token:focus{outline:none;border-color:var(--lib-forms-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--lib-forms-primary) 25%,transparent)}.cfr-legend__arrow{flex:0 0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem;color:var(--lib-forms-on-surface-variant)}.cfr-legend__field{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.3125rem .625rem;border:1px solid transparent;border-radius:var(--lib-forms-radius-sm, 8px);background:transparent;color:var(--lib-forms-on-surface);font-size:.875rem;text-align:left;cursor:pointer;transition:border-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing),background-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing)}.cfr-legend__field:hover{border-color:var(--lib-forms-outline-variant);background:color-mix(in srgb,var(--lib-forms-primary) 6%,transparent)}.cfr-legend__remove{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;border-radius:50%;background:transparent;color:var(--lib-forms-on-surface-variant);cursor:pointer;transition:color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing),background-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing)}.cfr-legend__remove mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.cfr-legend__remove:hover{color:var(--sem-error);background:var(--sem-error-surface)}.cfr-legend__fns{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;padding-left:3rem}.cfr-legend__fns-label{margin-right:.125rem;font-style:italic;font-size:.8125rem;color:var(--lib-forms-on-surface-variant)}.cfr-legend__fn{padding:.1875rem .5rem;border:1px solid var(--lib-forms-outline-variant);border-radius:var(--lib-forms-radius-pill, 999px);background:transparent;color:var(--lib-forms-on-surface-variant);font-size:.6875rem;font-weight:500;letter-spacing:.02em;cursor:pointer;transition:border-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing),background-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing),color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing)}.cfr-legend__fn:hover{border-color:var(--lib-forms-primary);color:var(--lib-forms-on-surface)}.cfr-legend__fn--active{border-color:transparent;background:var(--lib-forms-primary);color:var(--lib-forms-on-primary)}.cfr-rounding{display:flex;flex-direction:column}.cfr-rounding__row{display:flex;gap:1.5rem;flex-wrap:wrap}.cfr-rounding__decimals{flex:1 1 150px;min-width:150px}.cfr-rounding__mode{flex:2 1 220px;display:flex;flex-direction:column;gap:.5rem}.cfr-editor__actions{display:flex;justify-content:flex-end;gap:.75rem}.cfr-disabled-overlay{position:absolute;inset:0;background:color-mix(in srgb,var(--lib-forms-shadow-color) 50%,transparent);z-index:10}mat-chip{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MathPreviewComponent, selector: "lib-math-preview", inputs: ["expression", "placeholder"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i8.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i4.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: CalculatedFieldRulesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-calculated-field-rules', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MathPreviewComponent,
+                        OverlayModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatIconModule,
+                        MatCardModule,
+                        MatButtonModule,
+                        MatChipsModule,
+                    ], providers: [{ provide: MatFormFieldControl, useExisting: CalculatedFieldRulesComponent }], host: {
+                        'class': 'lib-calculated-field-rules',
+                        '[attr.aria-describedby]': 'describedBy',
+                    }, template: "<!-- View mode: read-only calculation summary -->\n@if (!isEditing()) {\n<div class=\"cfr-summary\">\n  @if (!!value && !mapToData()?.id && !tableMode()) {\n  <div class=\"cfr-hint\">\n    <mat-icon class=\"cfr-hint__icon\" color=\"primary\">info</mat-icon>\n    <span>Save the input first to enable calculated field configurations</span>\n  </div>\n  }\n\n  <div class=\"cfr-formula-card\">\n    <span class=\"cfr-section__label\">Calculation</span>\n    <lib-math-preview class=\"cfr-formula-card__preview\" [expression]=\"value?.formula || ''\"\n      placeholder=\"No calculation set up yet\" />\n    @if (value?.decimalPlaces) {\n    <div class=\"cfr-formula-card__meta\">\n      <mat-icon class=\"cfr-formula-card__meta-icon\">tune</mat-icon>\n      <span>Shown to {{ value?.decimalPlaces }} decimal place(s) \u00B7 {{ value?.roundingMode ? roundingLabel(value?.roundingMode) : 'nearest' }}</span>\n    </div>\n    }\n  </div>\n\n  <button class=\"cfr-edit-trigger\" mat-stroked-button color=\"primary\" [disabled]=\"disabled\"\n    (click)=\"startEdit()\">\n    <mat-icon>edit</mat-icon>\n    {{ !!value?.formula ? 'Edit calculation' : 'Set up calculation' }}\n  </button>\n</div>\n}\n\n<!-- Edit mode: guided calculation builder -->\n@else {\n<mat-card appearance=\"outlined\" class=\"cfr-editor\">\n  <header class=\"cfr-editor__head\">\n    <h3 class=\"cfr-editor__title\">\n      <mat-icon>functions</mat-icon>\n      Build the calculation\n    </h3>\n    <p class=\"cfr-editor__subtitle\">\n      Combine your form fields with operators to work out this value automatically.\n    </p>\n  </header>\n\n  <!-- Live preview + validity -->\n  <div class=\"cfr-preview\" [attr.data-state]=\"formulaStatus().kind\">\n    <span class=\"cfr-section__label\">Live preview</span>\n    <lib-math-preview class=\"cfr-preview__render\" [expression]=\"tempValue().formula || ''\"\n      placeholder=\"Your equation will appear here\" />\n    <p class=\"cfr-preview__status\">\n      <mat-icon class=\"cfr-preview__status-icon\">\n        {{ formulaStatus().kind === 'valid' ? 'check_circle' : formulaStatus().kind === 'invalid' ? 'error' : 'lightbulb' }}\n      </mat-icon>\n      <span>{{ formulaStatus().message }}</span>\n    </p>\n  </div>\n\n  <section class=\"cfr-section\">\n    <!-- Equation input + inline field-picker + operator keypad -->\n    <div class=\"cfr-equation\">\n      <div class=\"cfr-equation__field\">\n        <mat-form-field class=\"cfr-field\" [subscriptSizing]=\"'dynamic'\" [floatLabel]=\"'always'\"\n          appearance=\"outline\">\n          <mat-label>Equation</mat-label>\n          <textarea #formulaInput matInput [ngModel]=\"tempValue().formula\"\n            (ngModelChange)=\"onFormulaChange($event)\" (keyup)=\"onFormulaCaret()\"\n            (click)=\"onFormulaCaret()\" (focus)=\"onFormulaCaret()\"\n            (keydown)=\"onFormulaKeydown($event)\" (blur)=\"onFormulaBlur()\"\n            placeholder=\"e.g. (a + 2) / b\" rows=\"2\" spellcheck=\"false\" autocapitalize=\"off\"\n            autocomplete=\"off\"></textarea>\n          <mat-hint>Type <strong>$</strong> to add a form field, then join fields with the operator keys.</mat-hint>\n        </mat-form-field>\n\n        @if (pickerOpen()) {\n        <div class=\"cfr-picker\" role=\"listbox\" aria-label=\"Form fields\">\n          <div class=\"cfr-picker__head\">Insert a field</div>\n          @if (pickerResults().length === 0) {\n          <div class=\"cfr-picker__empty\">No matching number fields</div>\n          } @else {\n          @for (item of pickerResults(); track item.id; let idx = $index) {\n          <button type=\"button\" role=\"option\" class=\"cfr-picker__item\"\n            [class.cfr-picker__item--active]=\"idx === pickerActiveIndex()\"\n            [attr.aria-selected]=\"idx === pickerActiveIndex()\"\n            (mousedown)=\"$event.preventDefault()\" (click)=\"selectField(item)\">\n            <mat-icon class=\"cfr-picker__icon\">{{ item.multipleInputInEditId ? 'format_list_numbered' : 'tag' }}</mat-icon>\n            <span class=\"cfr-picker__label\">{{ item.label }}</span>\n            <span class=\"cfr-picker__meta\">{{ item.formControlName }}</span>\n          </button>\n          }\n          }\n        </div>\n        }\n      </div>\n\n      <div class=\"cfr-keypad\" role=\"group\" aria-label=\"Operators\">\n        @for (key of operatorKeys; track key.token) {\n        <button type=\"button\" class=\"cfr-key\" [attr.aria-label]=\"key.aria\"\n          (click)=\"insertToken(key.token, key.caretBack)\">\n          {{ key.label }}\n        </button>\n        }\n      </div>\n    </div>\n\n    <!-- Optional equation source link -->\n    @if (!!tempValue().getFormulaFromAFormInput) {\n    <mat-form-field class=\"cfr-field\" [subscriptSizing]=\"'dynamic'\" [floatLabel]=\"'always'\"\n      appearance=\"outline\">\n      <mat-label>Equation source</mat-label>\n      <mat-select [value]=\"tempValue().formControlWithFormula\"\n        (selectionChange)=\"linkFormulaSource($event)\" placeholder=\"Select an input that holds a formula\">\n        @for (input of formInputs(); track input.id) {\n        <mat-option\n          [disabled]=\"checkIfInputCanBeLinkedToCalVariable(mapToData(), input) || input.element !== 'select'\"\n          [value]=\"input.formControlName\">\n          {{ input.label }}\n        </mat-option>\n        }\n      </mat-select>\n      <mat-hint>Pull the equation from another input's value</mat-hint>\n    </mat-form-field>\n    }\n\n    <!-- Bound fields legend -->\n    <div class=\"cfr-variables\">\n      <div class=\"cfr-block-head\">\n        <span class=\"cfr-section__label\">Fields in this calculation</span>\n        <span class=\"cfr-block-head__hint\">Rename a letter, or type $ above to add another</span>\n      </div>\n\n      @if ((tempValue().variables || []).length === 0) {\n      <p class=\"cfr-variables__empty\">\n        Type <strong>$</strong> in the equation above to add a form field \u2014 each becomes a short\n        letter you can use in the equation.\n      </p>\n      } @else {\n      <ul class=\"cfr-legend\">\n        @for (variable of (tempValue().variables || []); track variable.id) {\n        <li class=\"cfr-legend__row\">\n          <div class=\"cfr-legend__main\">\n            <input class=\"cfr-legend__token\" [ngModel]=\"variable.variable\"\n              (ngModelChange)=\"setVariableShortName(variable.id, $event)\" aria-label=\"Short name\"\n              maxlength=\"12\" spellcheck=\"false\" autocomplete=\"off\" autocapitalize=\"off\">\n            <mat-icon class=\"cfr-legend__arrow\">arrow_right_alt</mat-icon>\n            <button type=\"button\" class=\"cfr-legend__field\"\n              [attr.aria-label]=\"'Insert ' + variable.label + ' into the equation'\"\n              (click)=\"appendVariableToFormula(variable.variable)\">\n              {{ variable.label }}\n            </button>\n            <button type=\"button\" class=\"cfr-legend__remove\"\n              [attr.aria-label]=\"'Remove ' + variable.variable\"\n              (click)=\"removeVariable(variable.id)\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </div>\n\n          @if (variable.parentInputId) {\n          <div class=\"cfr-legend__fns\" role=\"group\" aria-label=\"Combine list values with\">\n            <span class=\"cfr-legend__fns-label\" aria-hidden=\"true\">\u0192</span>\n            @for (func of allCalculationFunction(); track func) {\n            <button type=\"button\" class=\"cfr-legend__fn\"\n              [class.cfr-legend__fn--active]=\"variable.function === func\"\n              (click)=\"setVariableFunction(variable.id, func)\">\n              {{ func }}\n            </button>\n            }\n          </div>\n          }\n        </li>\n        }\n      </ul>\n      }\n    </div>\n\n    <!-- Result formatting -->\n    <div class=\"cfr-rounding\">\n      <div class=\"cfr-block-head\">\n        <span class=\"cfr-section__label\">Result formatting</span>\n        <span class=\"cfr-block-head__hint\">Optional \u2014 how the answer is rounded</span>\n      </div>\n\n      <div class=\"cfr-rounding__row\">\n        <mat-form-field class=\"cfr-field cfr-rounding__decimals\" [subscriptSizing]=\"'dynamic'\"\n          [floatLabel]=\"'always'\" appearance=\"outline\">\n          <mat-label>Decimal places</mat-label>\n          <input matInput [ngModel]=\"tempValue().decimalPlaces\"\n            (ngModelChange)=\"setDecimalPlaces($event)\" placeholder=\"0\" type=\"number\" min=\"0\">\n        </mat-form-field>\n\n        @if (tempValue().decimalPlaces) {\n        <div class=\"cfr-rounding__mode\">\n          <label class=\"cfr-section__label\">Rounding</label>\n          <mat-chip-listbox aria-label=\"Rounding method\">\n            @for (type of roundingType; track type.value) {\n            <mat-chip-option (click)=\"setRoundingMode(type.value)\"\n              [selected]=\"tempValue().roundingMode === type.value\">\n              {{ type.label }}\n            </mat-chip-option>\n            }\n          </mat-chip-listbox>\n        </div>\n        }\n      </div>\n    </div>\n  </section>\n\n  <div class=\"cfr-editor__actions\">\n    <button mat-button (click)=\"cancelEdit()\">Cancel</button>\n    <button mat-flat-button color=\"primary\" [disabled]=\"formulaStatus().kind === 'invalid'\"\n      (click)=\"saveEdit()\">\n      Save calculation\n    </button>\n  </div>\n</mat-card>\n}\n\n<!-- Disabled overlay -->\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOpen]=\"disabled\">\n  <div class=\"cfr-disabled-overlay\"></div>\n</ng-template>\n", styles: [":host{display:block;position:relative}.cfr-hint{display:flex;align-items:center;gap:.5rem;padding:.875rem 1rem;background:var(--sem-info-surface);border-radius:var(--lib-forms-radius-sm, 8px);color:var(--lib-forms-on-surface);font-size:.875rem}.cfr-hint__icon{flex:0 0 auto}.cfr-section__label{display:block;font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lib-forms-on-surface-variant)}.cfr-field{width:100%}.cfr-block-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .75rem;margin-bottom:.75rem}.cfr-block-head__hint{font-size:.8125rem;color:var(--lib-forms-on-surface-variant)}.cfr-summary{display:flex;flex-direction:column;gap:1.5rem}.cfr-formula-card{background:var(--lib-forms-surface);border:1px solid color-mix(in srgb,var(--lib-forms-outline) 15%,transparent);border-radius:var(--lib-forms-radius-lg, 12px);box-shadow:var(--lib-forms-shadow-resting);display:flex;flex-direction:column;gap:1rem;padding:2rem}.cfr-formula-card__preview{display:block;border-radius:var(--lib-forms-radius-md, 10px);background:var(--lib-forms-surface-container-low)}.cfr-formula-card__meta{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--lib-forms-on-surface-variant)}.cfr-formula-card__meta-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.cfr-edit-trigger{width:100%}.cfr-editor{display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem;border-color:color-mix(in srgb,var(--lib-forms-primary) 30%,transparent)}.cfr-editor__head{display:flex;flex-direction:column;gap:.5rem}.cfr-editor__title{display:flex;align-items:center;gap:.5rem;margin:0;font-size:1.25rem;font-weight:500;letter-spacing:-.01em;color:var(--lib-forms-on-surface)}.cfr-editor__subtitle{margin:0;font-size:.9375rem;color:var(--lib-forms-on-surface-variant)}.cfr-preview{display:flex;flex-direction:column;gap:.875rem;padding:1.25rem 1.5rem;border-radius:var(--lib-forms-radius-lg, 12px);background:var(--lib-forms-surface-container-low);border:1px solid color-mix(in srgb,var(--lib-forms-outline) 15%,transparent);transition:border-color var(--lib-forms-duration, .4s) var(--lib-forms-easing)}.cfr-preview[data-state=valid]{border-color:color-mix(in srgb,var(--sem-success) 45%,transparent)}.cfr-preview[data-state=invalid]{border-color:color-mix(in srgb,var(--sem-error) 45%,transparent)}.cfr-preview__render{display:block}.cfr-preview__status{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.875rem;color:var(--lib-forms-on-surface-variant)}.cfr-preview__status-icon{flex:0 0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem}.cfr-preview[data-state=valid] .cfr-preview__status{color:var(--sem-success)}.cfr-preview[data-state=invalid] .cfr-preview__status{color:var(--sem-error)}.cfr-section{display:flex;flex-direction:column;gap:1.5rem}.cfr-equation{display:flex;flex-direction:column;gap:.625rem}.cfr-equation__field{position:relative}.cfr-keypad{display:flex;flex-wrap:wrap;gap:.375rem}.cfr-key{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.25rem;padding:0 .625rem;border:1px solid var(--lib-forms-outline-variant);border-radius:var(--lib-forms-radius-sm, 8px);background:var(--lib-forms-surface);color:var(--lib-forms-on-surface);font-size:1rem;font-weight:500;cursor:pointer;transition:border-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing),background-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing),transform var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing)}.cfr-key:hover{border-color:var(--lib-forms-primary);background:color-mix(in srgb,var(--lib-forms-primary) 8%,transparent)}.cfr-key:active{transform:translateY(1px)}.cfr-picker{position:absolute;z-index:20;left:0;right:0;top:calc(100% - 1.25rem);max-height:16rem;overflow-y:auto;padding:.5rem;border-radius:var(--lib-forms-radius-md, 10px);background:var(--lib-forms-surface);border:1px solid color-mix(in srgb,var(--lib-forms-outline) 20%,transparent);box-shadow:var(--lib-forms-shadow-elevated, var(--lib-forms-shadow-resting))}.cfr-picker__head{padding:.25rem .5rem .5rem;font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lib-forms-on-surface-variant)}.cfr-picker__empty{padding:.75rem .5rem;font-size:.875rem;color:var(--lib-forms-on-surface-variant)}.cfr-picker__item{display:flex;align-items:center;gap:.625rem;width:100%;padding:.5rem .625rem;border:none;border-radius:var(--lib-forms-radius-sm, 8px);background:transparent;color:var(--lib-forms-on-surface);font-size:.9375rem;text-align:left;cursor:pointer;transition:background-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing)}.cfr-picker__item:hover,.cfr-picker__item--active{background:color-mix(in srgb,var(--lib-forms-primary) 12%,transparent)}.cfr-picker__icon{flex:0 0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem;color:var(--lib-forms-on-surface-variant)}.cfr-picker__label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cfr-picker__meta{flex:0 0 auto;font-size:.75rem;color:var(--lib-forms-on-surface-variant)}.cfr-variables{display:flex;flex-direction:column;gap:.75rem}.cfr-variables__empty{margin:0;font-size:.875rem;color:var(--lib-forms-on-surface-variant)}.cfr-legend{display:flex;flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none}.cfr-legend__row{display:flex;flex-direction:column;gap:.5rem;padding:.5rem .625rem;border-radius:var(--lib-forms-radius-md, 10px);background:var(--lib-forms-surface-container-low);border:1px solid color-mix(in srgb,var(--lib-forms-outline) 12%,transparent)}.cfr-legend__main{display:flex;align-items:center;gap:.5rem}.cfr-legend__token{flex:0 0 auto;width:2.5rem;height:1.875rem;padding:0 .25rem;text-align:center;font-family:JetBrains Mono,SF Mono,ui-monospace,monospace;font-size:.9375rem;font-weight:600;color:var(--lib-forms-primary);background:color-mix(in srgb,var(--lib-forms-primary) 8%,var(--lib-forms-surface));border:1px solid color-mix(in srgb,var(--lib-forms-primary) 30%,transparent);border-radius:var(--lib-forms-radius-sm, 8px);transition:border-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing),box-shadow var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing)}.cfr-legend__token:focus{outline:none;border-color:var(--lib-forms-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--lib-forms-primary) 25%,transparent)}.cfr-legend__arrow{flex:0 0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem;color:var(--lib-forms-on-surface-variant)}.cfr-legend__field{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.3125rem .625rem;border:1px solid transparent;border-radius:var(--lib-forms-radius-sm, 8px);background:transparent;color:var(--lib-forms-on-surface);font-size:.875rem;text-align:left;cursor:pointer;transition:border-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing),background-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing)}.cfr-legend__field:hover{border-color:var(--lib-forms-outline-variant);background:color-mix(in srgb,var(--lib-forms-primary) 6%,transparent)}.cfr-legend__remove{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;border-radius:50%;background:transparent;color:var(--lib-forms-on-surface-variant);cursor:pointer;transition:color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing),background-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing)}.cfr-legend__remove mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.cfr-legend__remove:hover{color:var(--sem-error);background:var(--sem-error-surface)}.cfr-legend__fns{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;padding-left:3rem}.cfr-legend__fns-label{margin-right:.125rem;font-style:italic;font-size:.8125rem;color:var(--lib-forms-on-surface-variant)}.cfr-legend__fn{padding:.1875rem .5rem;border:1px solid var(--lib-forms-outline-variant);border-radius:var(--lib-forms-radius-pill, 999px);background:transparent;color:var(--lib-forms-on-surface-variant);font-size:.6875rem;font-weight:500;letter-spacing:.02em;cursor:pointer;transition:border-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing),background-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing),color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing)}.cfr-legend__fn:hover{border-color:var(--lib-forms-primary);color:var(--lib-forms-on-surface)}.cfr-legend__fn--active{border-color:transparent;background:var(--lib-forms-primary);color:var(--lib-forms-on-primary)}.cfr-rounding{display:flex;flex-direction:column}.cfr-rounding__row{display:flex;gap:1.5rem;flex-wrap:wrap}.cfr-rounding__decimals{flex:1 1 150px;min-width:150px}.cfr-rounding__mode{flex:2 1 220px;display:flex;flex-direction:column;gap:.5rem}.cfr-editor__actions{display:flex;justify-content:flex-end;gap:.75rem}.cfr-disabled-overlay{position:absolute;inset:0;background:color-mix(in srgb,var(--lib-forms-shadow-color) 50%,transparent);z-index:10}mat-chip{cursor:pointer}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], mapToData: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapToData", required: false }] }], formInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputs", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], valueChange2dWithPath: [{ type: i0.Output, args: ["valueChange2dWithPath"] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }], formulaInputRef: [{ type: i0.ViewChild, args: ['formulaInput', { isSignal: true }] }], value: [{
+                type: Input
+            }] } });
+
+export { CalculatedFieldRulesComponent };
+//# sourceMappingURL=ngx-t-forms-calculated-field-rules.component-BhxT6tRq.mjs.map