ngx-t-forms 2.0.31 → 2.0.32

package/fesm2022/{ngx-t-forms-ngx-t-forms-u_kigDid.mjs → ngx-t-forms-ngx-t-forms-C2G8_WQk.mjs}

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, computed, runInInjectionContext, effect, untracked, linkedSignal, resource, inject, Injector, ApplicationRef, signal, Inject, Directive, Injectable, DestroyRef, makeEnvironmentProviders, Pipe, PLATFORM_ID, ChangeDetectionStrategy, Component, input, viewChild, NgZone, output, model, Optional, ViewEncapsulation, NgModule, ChangeDetectorRef, Input, Self, ElementRef } from '@angular/core';
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { validateForm, getElementEditorConfig, ElementEditorTypes, AllFormInputPrimaryKeys, DefaultInputConfig, SpecialElementKeys, validateFormColumnInputsWithRequired, ElementTypes, validateFormSlide, FormListSection, DataSources, formColumnInputsSchema, CalculationFunctions, InputTypes, WorkflowFunctionTypes, validateCalculatedFieldRules, FormSubmissionStatus, InputDataTypes, AdjudicationSteps, InputPipeTypes, RichTextEditorType, OptionSelectTypes, MinInputTypes, FormStateErrors, BlurHandleTypes, FunctionTypes as FunctionTypes$2 } from 'ngx-t-forms-types';
-import { of, throwError, take, forkJoin, map as map$1, catchError as catchError$1, EMPTY, tap, switchMap, filter, firstValueFrom, from, concatMap, last, Subject, takeUntil, Subscription, timeout, Observable, BehaviorSubject, shareReplay, concat, finalize, distinctUntilChanged, isObservable, timer, debounceTime, combineLatest, merge, withLatestFrom } from 'rxjs';
+import { of, throwError, take, forkJoin, map as map$1, catchError as catchError$1, EMPTY, tap, switchMap, filter, firstValueFrom, from, concatMap, last, Subject, takeUntil, Subscription, timeout, Observable, BehaviorSubject, shareReplay, concat, finalize, distinctUntilChanged, isObservable, timer, debounceTime, combineLatest, merge, withLatestFrom, startWith as startWith$1 } from 'rxjs';
 import { catchError, map, switchMap as switchMap$1, startWith, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, shareReplay as shareReplay$1, tap as tap$1, finalize as finalize$1 } from 'rxjs/operators';
 import * as i1$1 from '@angular/forms';
 import { Validators, FormControl, FormGroup, FormArray, FormsModule, ReactiveFormsModule, NgControl } from '@angular/forms';
@@ -70,9 +70,9 @@ import { CdkStepperModule } from '@angular/cdk/stepper';
 import { CdkTableModule } from '@angular/cdk/table';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
-import * as i2$2 from '@angular/material/button-toggle';
+import * as i3$5 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i1$6 from '@angular/material/chips';
+import * as i4$3 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatGridListModule } from '@angular/material/grid-list';
@@ -85,7 +85,7 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i10 from '@angular/material/sort';
 import { MatSortModule, MatSort } from '@angular/material/sort';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i2$3 from '@angular/cdk/overlay';
+import * as i2$2 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -4816,13 +4816,18 @@ function _isEqual(prev, next) {
             const nRe = next;
             return pRe.source === nRe.source && pRe.flags === nRe.flags;
         }
-        const prevKeys = Object.keys(prevObj);
-        const nextKeys = Object.keys(nextObj);
+        // A present-but-`undefined` key is treated as an absent key (mirrors
+        // `getChangedProperties` above, JSON semantics, and every idempotency
+        // guard in the store). Without this, an audit pass that adds `vat:
+        // undefined` to a non-VAT segment would never compare equal to the same
+        // value after it round-trips through the form (which drops the undefined
+        // key), and the form ⇄ store ⇄ form graph oscillates — re-firing the
+        // debounced MSCOA validation API forever on the same payload.
+        const prevKeys = Object.keys(prevObj).filter((key) => prevObj[key] !== undefined);
+        const nextKeys = Object.keys(nextObj).filter((key) => nextObj[key] !== undefined);
         if (prevKeys.length !== nextKeys.length)
             return false;
         for (const key of prevKeys) {
-            if (!Object.prototype.hasOwnProperty.call(nextObj, key))
-                return false;
             if (!_isEqual(prevObj[key], nextObj[key]))
                 return false;
         }
@@ -6458,7 +6463,13 @@ function buildValuePostMethodApi(input, ctx) {
             catch {
                 return undefined;
             }
-        }, ...(ngDevMode ? [{ debugName: "params" }] : /* istanbul ignore next */ []));
+        }, { ...(ngDevMode ? { debugName: "params" } : /* istanbul ignore next */ {}), 
+            // `returnMappedData` allocates a fresh object on every recompute, and this
+            // computed re-runs on ANY `#model` change (readDep reads the whole map).
+            // Without structural equality the resource would treat every unrelated
+            // value edit as a params change and reload the API. Emit only when the
+            // mapped dependency values actually change.
+            equal: _isEqual });
         return resource({
             params,
             loader: async ({ params: payload }) => {
@@ -6808,7 +6819,14 @@ function buildPostComputedOptionsResource(input, ctx) {
             }
             // Build the mapped POST body.
             return returnMappedData(snapshot, minInputs, fetchConfig.httpEndPoint);
-        }, ...(ngDevMode ? [{ debugName: "paramsSignal" }] : /* istanbul ignore next */ []));
+        }, { ...(ngDevMode ? { debugName: "paramsSignal" } : /* istanbul ignore next */ {}), 
+            // `returnMappedData` allocates a fresh object on every recompute, and this
+            // computed re-runs on ANY `#model` change (readDep reads the whole map).
+            // Without structural equality the resource would treat every unrelated
+            // value edit (e.g. selecting a row in THIS field) as a params change and
+            // reload the API — a runaway refetch loop. Emit only when the mapped
+            // dependency values actually change.
+            equal: _isEqual });
         // Edge-tracker: a plain closure variable (NOT a signal — nothing reads it
         // reactively), so the resolved-edge effect below never writes a signal.
         let prevStatus = 'idle';
@@ -7392,6 +7410,16 @@ class FormTowerControllerService {
          * `(valueChange)` binding. Torn down on close / re-open / re-init.
          */
         this.#multipleInputRowSubs = new Map();
+        /**
+         * Live `valueChanges` bridge for mSCOA inner-input controls — the custom form
+         * inputs configured inside an `MscoaSelection` column (e.g. `budgetValue`,
+         * `department`) and rendered inline by the MSCOA chart through a
+         * `ComponentPortal`. A single aggregate subscription: unlike MultipleInput
+         * rows these inner inputs are static (created at form generation, never
+         * toggled), so they are all bound once per init. See
+         * {@link FormTowerControllerService.bindScoaInnerInputControls}.
+         */
+        this.#scoaInnerInputSub = undefined;
         // ──────────────────────────────────────────────────────────────────────────
         // Overridable-validation submission gate
         // ──────────────────────────────────────────────────────────────────────────
@@ -7661,6 +7689,11 @@ class FormTowerControllerService {
             //    resource sits `idle` and never fires (and `refresh`/`.reload()` no-ops
             //    on an idle resource) until the user manually edits the dependency.
             this.#seedModelFromDefinition();
+            // 8. Bridge mSCOA inner-input (custom form input) controls into `#model` so
+            //    their user edits drive the signal graph. They render inline via the
+            //    MSCOA chart's ComponentPortal, which has no `(valueChange)` binding of
+            //    its own — mirrors step 5's MultipleInput sub-row bridge.
+            this.bindScoaInnerInputControls();
         };
         /**
          * Marks the form's first slide as active. Called during
@@ -7790,8 +7823,11 @@ class FormTowerControllerService {
                     continue;
                 }
                 if (isMultipleInput) {
-                    // ── Phase 2 fence: MultipleInput array-remap branch — UNCHANGED. ──
-                    const v = (value ?? []).map((item) => {
+                    // ── Phase 2 fence: MultipleInput array-remap branch. ──
+                    // `??` only guards null/undefined; a non-array value (e.g. an object or a
+                    // JSON-string row that pre-processing left unparsed) would reach `.map` and
+                    // throw "(value ?? []).map is not a function". Coerce any non-array to [].
+                    const v = (Array.isArray(value) ? value : []).map((item) => {
                         return Object.entries(item).reduce((acc, [key, val]) => {
                             const inp = allInputs.find((i) => i.formControlName === key);
                             if (key === 'id') {
@@ -7868,6 +7904,13 @@ class FormTowerControllerService {
                 catch { /* best-effort */ }
             }
             this.#multipleInputRowSubs.clear();
+            // Drop the mSCOA inner-input valueChanges bridge (the takeUntil anchor below
+            // also completes its inner subs; this clears the handle).
+            try {
+                this.#scoaInnerInputSub?.unsubscribe();
+            }
+            catch { /* best-effort */ }
+            this.#scoaInnerInputSub = undefined;
             this.#definition.set(undefined);
             this._mainForm = undefined;
             this.#model.set({});
@@ -8027,6 +8070,54 @@ class FormTowerControllerService {
             existing.unsubscribe();
             this.#multipleInputRowSubs.delete(inputId);
         };
+        /**
+         * Bridges live edits of mSCOA inner inputs — the custom form inputs configured
+         * inside an `MscoaSelection` column (e.g. `budgetValue`, `department`) and
+         * rendered inline by the MSCOA chart via a `ComponentPortal` — into the signal
+         * graph.
+         *
+         * Each inner input is a `${mscoaColId}.${innerId}` control sitting in the mSCOA
+         * column's section group. The engine already lists it in `allFormInputs`, so
+         * its derived calc / value-API / options graph is built at init (the OUTPUT
+         * half). But a `ComponentPortal` forwards inputs only and never subscribes the
+         * host's `valueChange` output, so the user's typed value never reached `#model`
+         * — leaving dependent calculations / value-fetches / options blind to it. This
+         * subscribes each such control's `valueChanges` → `updateValue(controlName, …)`,
+         * restoring the INPUT half so an mSCOA custom input behaves exactly like a
+         * primary-form input. Direct mirror of
+         * {@link FormTowerControllerService.bindMultipleInputRowControls}.
+         *
+         * Idempotent (tears down the prior bridge first) and anchored to `_destroyed$`,
+         * so the re-init `clearFormState` drops every inner subscription.
+         */
+        this.bindScoaInnerInputControls = () => {
+            this.#scoaInnerInputSub?.unsubscribe();
+            this.#scoaInnerInputSub = undefined;
+            if (!this._mainForm)
+                return;
+            const mscoaColumnIds = (this.allFormInputs() ?? [])
+                .filter(input => input.element === ElementTypes.MscoaSelection)
+                .map(input => input.id);
+            if (mscoaColumnIds.length === 0)
+                return;
+            const sub = new Subscription();
+            for (const sectionGroup of Object.values(this._mainForm.controls)) {
+                const group = sectionGroup;
+                if (!group?.controls)
+                    continue;
+                for (const [controlName, control] of Object.entries(group.controls)) {
+                    // An inner input is a `${mscoaColId}.${innerId}` sibling — never the
+                    // column control itself (no dotted suffix; the tower already bridges it
+                    // via the explicit `(valueChange)` binding on `<lib-t-form-input>`).
+                    if (!mscoaColumnIds.some(colId => controlName.startsWith(`${colId}.`)))
+                        continue;
+                    sub.add(control.valueChanges
+                        .pipe(takeUntil(this._destroyed$))
+                        .subscribe(value => this.updateValue(controlName, value)));
+                }
+            }
+            this.#scoaInnerInputSub = sub;
+        };
         // ──────────────────────────────────────────────────────────────────────────
         // W13 — Refresh / revert family (resource .reload() + #derived membership)
         // ──────────────────────────────────────────────────────────────────────────
@@ -8170,6 +8261,16 @@ class FormTowerControllerService {
      * `(valueChange)` binding. Torn down on close / re-open / re-init.
      */
     #multipleInputRowSubs;
+    /**
+     * Live `valueChanges` bridge for mSCOA inner-input controls — the custom form
+     * inputs configured inside an `MscoaSelection` column (e.g. `budgetValue`,
+     * `department`) and rendered inline by the MSCOA chart through a
+     * `ComponentPortal`. A single aggregate subscription: unlike MultipleInput
+     * rows these inner inputs are static (created at form generation, never
+     * toggled), so they are all bound once per init. See
+     * {@link FormTowerControllerService.bindScoaInnerInputControls}.
+     */
+    #scoaInnerInputSub;
     // ──────────────────────────────────────────────────────────────────────────
     // W7 — Getters / setters re-pointed onto the source signals
     // ──────────────────────────────────────────────────────────────────────────
@@ -8284,7 +8385,16 @@ class FormTowerControllerService {
         void debounceMs;
         // One-tick liveness lead-read: force-activate resources + flush effects.
         this.#forceLiveness();
-        return firstValueFrom(toObservable(this.settled, { injector: this.#injector }).pipe(filter((isSettled) => isSettled === true), take(1), timeout(timeoutMs), catchError$1(() => of(undefined)), tap(() => undefined))).then(() => undefined);
+        return firstValueFrom(toObservable(this.settled, { injector: this.#injector }).pipe(filter((isSettled) => isSettled === true), take(1), timeout(timeoutMs), catchError$1(() => of(undefined)), tap(() => undefined))).then(() => {
+            // Post-settle projection flush (headless-read guarantee). `settled === true`
+            // only means every resource has resolved into `#value()`; the FormGroup is
+            // patched by the async `#formProjection` effect, which may NOT have run yet —
+            // notably for resources that resolve in a single microtask off a shared
+            // `shareReplay` cache (import cache-hit rows). Headless consumers read
+            // `mainForm.value` (getFormValueNames), so drain the projection effect here
+            // before resolving, otherwise they capture the stale pre-fetch FormGroup.
+            this.#forceLiveness();
+        });
     }
     /**
      * Forces the signal graph live: reads `value()` and every resource `status()`
@@ -8796,12 +8906,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  *  ImportRowState { status, settledValue, isValid, validationErrors, colErrors }
  * ```
  *
- * **Concurrency strategy:** every row processes in parallel via
- * `Promise.all(...)`. To avoid 26 rows hammering the same endpoint 26 times,
- * each tower's `httpGetDataFunction` / `httpPostDataFunction` is wrapped to
- * route through {@link TFormImportController._cachedGet} /
- * {@link TFormImportController._cachedPost}, which dedupe identical requests
- * via `shareReplay(1)` for the lifetime of the session.
+ * **Concurrency strategy:** rows are processed **sequentially** (one tower at a
+ * time). Each tower's settle (`waitUntilSettled`) and FormGroup projection rely
+ * on `ApplicationRef.tick()`-driven effect flushes over the application's single
+ * shared `ApplicationRef`; running rows concurrently interleaves those ticks so
+ * `waitUntilSettled` resolves on a spurious `settled === true` before a row's
+ * value resources have drained + projected, leaving most rows with empty
+ * API-derived fields. To still avoid N rows hammering the same endpoint N times,
+ * each tower's `httpGetDataFunction` / `httpPostDataFunction` is wrapped to route
+ * through {@link TFormImportController._cachedGet} /
+ * {@link TFormImportController._cachedPost}, which dedupe identical requests via
+ * `shareReplay(1)` for the lifetime of the session — so sequential rows reuse the
+ * same in-flight/replayed network calls.
  *
  * **Settle model (Phase 1.5):** the signal-graph engine settles by construction —
  * `waitUntilSettled` resolves once every value/options resource and calculation
@@ -8909,9 +9025,23 @@ class TFormImportController {
         this._rows$.next(rows.map((originalData, rowIndex) => ({ rowIndex, originalData, status: 'pending' })));
         const hasPreProcessInputs = form.slides.some(slide => slide.columns.some(col => this._inputPreProcessors.has(col.element)));
         try {
-            console.error("Starting import with rows", rows);
-            await Promise.all(rows.map((row, i) => this._processRow(form, row, i, hasPreProcessInputs)));
-            console.error("Final settled values", this._rows$.value.map(r => r.settledValue));
+            // Rows are processed SEQUENTIALLY, not concurrently. Each row spins up its
+            // own tower whose settle (`waitUntilSettled`) and FormGroup projection rely
+            // on `ApplicationRef.tick()`-driven effect flushes over the application's
+            // single shared `ApplicationRef`. Running every row concurrently makes those
+            // ticks interleave across towers, so `waitUntilSettled` resolves on a
+            // spurious `settled === true` (value resources still `idle`, not yet
+            // `loading`) before a row's derived values have drained and projected —
+            // leaving most rows with empty API-derived fields (objectives/nKPA/etc.).
+            // The per-session HTTP caches (`_getCache`/`_postCache`/`_financialCycles$`)
+            // still dedupe identical requests across rows, so sequential processing
+            // reuses the same network calls without the race.
+            for (let i = 0; i < rows.length; i++) {
+                const row = rows[i];
+                if (!row)
+                    continue;
+                await this._processRow(form, row, i, hasPreProcessInputs);
+            }
         }
         finally {
             // Always release cached Observables — even if an unexpected error escapes
@@ -9054,6 +9184,22 @@ class TFormImportController {
             // Phase 3 makes validation reactive over observed fields).
             this._recomputeAllValidationErrors(tower.mainForm);
             const settledValue = tower.getFormValueNames();
+            // Value-derived MultipleInputs (those carrying a value-API or calculation)
+            // have their settled value produced by the tower resource, which overrides
+            // the import rows in the tower's value graph. Per import semantics the tower
+            // value is FAVORED, but the import rows must fill any gap it leaves — and a
+            // tower value that resolves to an empty array falls back entirely to the
+            // import rows. Deep-merge (tower favored) so neither the tower's computed
+            // fields nor import-only fields (e.g. user selections) are lost.
+            for (const col of this._valueDerivedMultipleInputs(form)) {
+                const fcn = col.formControlName;
+                if (!fcn)
+                    continue;
+                const importVal = resolvedRowData[fcn];
+                if (importVal === undefined)
+                    continue;
+                settledValue[fcn] = this._deepMergePreferTower(importVal, settledValue[fcn]);
+            }
             const validationErrors = this._collectValidationErrors(tower);
             const colErrors = { ...this._collectColErrors(tower), ...preColErrors };
             // Partition the settled errors so a row whose only remaining failures are
@@ -9232,8 +9378,16 @@ class TFormImportController {
         }
         const fcn = input.formControlName;
         const rawCandidate = row[fcn];
-        const rawItems = Array.isArray(rawCandidate)
-            ? rawCandidate
+        // Spreadsheet imports deliver every cell as a primitive, so a MultipleInput
+        // column arrives as a JSON-stringified array (e.g. '[{...},{...}]') — never a
+        // parsed array. Mirror _processSelectInput's tolerance: parse a string
+        // candidate into an array before deciding the field has no rows. A non-array
+        // (empty cell '', plain text) normalizes to [] and is treated as no rows.
+        const normalizedCandidate = typeof rawCandidate === 'string'
+            ? this._tryParseJsonArray(rawCandidate)
+            : rawCandidate;
+        const rawItems = Array.isArray(normalizedCandidate)
+            ? normalizedCandidate
             : [];
         if (rawItems.length === 0) {
             return { errors: [] };
@@ -9245,7 +9399,7 @@ class TFormImportController {
                     sectionId: input.sectionId,
                     label: '',
                     columns: subFormInputs.map(col => ({
-                        ...col,
+                        ...this._localizeSubInputDeps(col, input.id),
                         multipleInputInEditId: undefined, // Prevent nested MultipleInputs from trying to edit the same item in the same shared mock form
                     })),
                 }],
@@ -9254,7 +9408,16 @@ class TFormImportController {
         const processedItems = new Array(rawItems.length);
         const errors = [];
         const overridableErrors = [];
-        await Promise.all(rawItems.map(async (item, index) => {
+        // Sub-rows are processed SEQUENTIALLY for the same reason as the top-level
+        // rows in `runImport` — each sub-row spins its own tower whose settle +
+        // projection rely on `ApplicationRef.tick()` flushes over the shared
+        // `ApplicationRef`; concurrent sub-towers interleave those ticks and resolve
+        // `waitUntilSettled` before their derived values drain. The session HTTP
+        // caches still dedupe identical requests across sub-rows.
+        for (let index = 0; index < rawItems.length; index++) {
+            const item = rawItems[index];
+            if (!item)
+                continue;
             // Step 1: resolve raw codes (MSCOA etc.) before the tower sees the data.
             // Pass _depth + 1 so nested MultipleInputs increment the depth guard correctly.
             const { row: resolvedItem, colErrors: preColErrors, overridableColErrors: preOverridable } = hasPreProcessableSubInputs
@@ -9296,13 +9459,75 @@ class TFormImportController {
             finally {
                 tower.ngOnDestroy();
             }
-        }));
+        }
         return {
             value: processedItems,
             errors,
             overridableErrors,
         };
     }
+    /**
+     * Rewrites a MultipleInput sub-input's cross-field dependency references from
+     * the live form's COMPOUND id scheme back to the SIMPLE id the per-row mock
+     * form uses.
+     *
+     * In the real form, {@link allFormInputs} flattens a MultipleInput's children
+     * and rewrites each child's id to `${multipleInputId}.${childId}`. Every
+     * dependent field's `mapTo.inputId` (value/options-API `minimumInputRequired`)
+     * is authored against that compound id — so `readDep(compoundId)` resolves and
+     * the dependent fetch fires. The mock form built in
+     * {@link TFormImportController._processMultipleFormInput} hoists those children
+     * to top-level columns, so they keep their SIMPLE ids; the baked-in compound
+     * `mapTo.inputId` references then resolve to nothing, `validateMinInput` fails,
+     * the value-API `params` stay `undefined`, and the resource never fetches —
+     * leaving every derived sub-field null (and dropped by `getFormValueNames`).
+     *
+     * Deep-clones `node` (never mutates the shared form definition) and strips the
+     * `${parentId}.` prefix from any `inputId` that targets a sibling in THIS
+     * MultipleInput, so the sub-tower's signal graph resolves dependencies exactly
+     * as the live form does.
+     *
+     * @param node     - The sub-input config (or any nested fragment) to rewrite.
+     * @param parentId - The owning MultipleInput's id (the compound prefix).
+     */
+    _localizeSubInputDeps(node, parentId) {
+        const prefix = `${parentId}.`;
+        const walk = (value) => {
+            if (Array.isArray(value))
+                return value.map(walk);
+            if (value && typeof value === 'object') {
+                const out = {};
+                for (const [key, val] of Object.entries(value)) {
+                    out[key] = key === 'inputId' && typeof val === 'string' && val.startsWith(prefix)
+                        ? val.slice(prefix.length)
+                        : walk(val);
+                }
+                return out;
+            }
+            return value;
+        };
+        return walk(node);
+    }
+    /**
+     * Parses a string MultipleInput cell into an array of row objects.
+     *
+     * Spreadsheet cells are primitives, so a MultipleInput column arrives as a
+     * JSON-stringified array. Returns the parsed array on success; returns the
+     * raw value unchanged on failure (empty string, plain text, malformed JSON,
+     * or a non-array JSON value) so the caller's `Array.isArray` check treats it
+     * as "no rows" rather than throwing.
+     */
+    _tryParseJsonArray(raw) {
+        const trimmed = raw.trim();
+        if (!trimmed.startsWith('['))
+            return raw;
+        try {
+            return JSON.parse(trimmed);
+        }
+        catch {
+            return raw;
+        }
+    }
     /**
      * Resolves a single account code to an IScoaAccount.
      * Routed through `_cachedGet` so identical codes across concurrent rows share
@@ -9483,6 +9708,71 @@ class TFormImportController {
         });
         return colErrors;
     }
+    /**
+     * Collects the MultipleInput columns whose value is tower-derived — i.e. they
+     * carry a value-API fetch (`matOptions.fetch.value.source === 'api'`) or a
+     * value-producing calculation. These are the columns whose import rows are
+     * overridden by the tower's own value graph and therefore need the
+     * tower-favored deep merge applied in {@link TFormImportController._processRow}.
+     */
+    _valueDerivedMultipleInputs(form) {
+        return form.slides.flatMap(slide => slide.columns.filter(col => col.element === ElementTypes.MultipleInput && this._isValueDerivedColumn(col)));
+    }
+    /** True iff the column derives its value from a value-API fetch or a calculation. */
+    _isValueDerivedColumn(col) {
+        const valueFetch = col.matOptions?.fetch?.value;
+        const hasApiValue = valueFetch?.source === 'api';
+        let hasCalculation = false;
+        try {
+            hasCalculation = Boolean(validateCalculatedFieldRules(col.calculatedFieldRules)?.value);
+        }
+        catch {
+            hasCalculation = false;
+        }
+        return hasApiValue || hasCalculation;
+    }
+    /**
+     * Deep-merges two values with the **override** (tower-derived) value favored
+     * and the **base** (import) value filling every gap it leaves.
+     *
+     * Rules (mirrors the import-merge contract):
+     * - `override` wins for scalars and for any key it defines.
+     * - Keys present only on `base` are preserved (import fills gaps).
+     * - Arrays merge **element-wise by index** (each element deep-merged), so a
+     *   tower row that omits an import-only field keeps that field.
+     * - An **empty** `override` array (or `null`/`undefined`) falls back entirely
+     *   to `base` — a tower value that resolves empty never erases the import rows.
+     */
+    _deepMergePreferTower(base, override) {
+        if (override === undefined || override === null)
+            return base;
+        if (base === undefined || base === null)
+            return override;
+        if (Array.isArray(override) || Array.isArray(base)) {
+            // Empty/absent override array → import covers the value.
+            if (!Array.isArray(override) || override.length === 0)
+                return base;
+            if (!Array.isArray(base))
+                return override;
+            const length = Math.max(base.length, override.length);
+            const out = [];
+            for (let i = 0; i < length; i++) {
+                out[i] = this._deepMergePreferTower(base[i], override[i]);
+            }
+            return out;
+        }
+        if (typeof override === 'object' && typeof base === 'object') {
+            const b = base;
+            const o = override;
+            const out = { ...b };
+            for (const key of Object.keys(o)) {
+                out[key] = this._deepMergePreferTower(b[key], o[key]);
+            }
+            return out;
+        }
+        // Scalars / mismatched shapes: tower value is favored.
+        return override;
+    }
     /**
      * Immutable row update — clones the rows array and the targeted row before
      * pushing through `_rows$` so subscribers downstream of `progress$` always
@@ -10652,16 +10942,21 @@ const elementBlurFn = (form, inputId, event, element) => {
     }
 };
 
-function addScoaExtensionInput(form, sectionId, scoaInputId) {
+function addScoaExtensionInput(form, sectionId, scoaInputId, linkedSegmentId, inputId) {
     try {
         if (!form || !sectionId || !scoaInputId) {
             throw new Error('Form, sectionId and scoaExtensionInputInEditId are required');
         }
         // ScoaInnerInput is the actual element type stored in `mscoaConfig.inputs`.
         // A stubbed extension entry carries only id + sectionId until the user fills it.
+        // When `linkedSegmentId` is supplied the input is pre-attached to that segment
+        // (its value projects into the segment's bag — see the mscoa chart projection).
+        // `inputId` lets the caller pre-allocate the id so it can open the new input
+        // in the editor right after adding it.
         const newInput = {
-            id: v4(),
+            id: inputId ?? v4(),
             sectionId,
+            ...(linkedSegmentId ? { linkedSegmentId } : {}),
         };
         return {
             ...form,
@@ -10852,8 +11147,58 @@ function formBuilderStoreActions(store) {
         const form = store.formInEditSnapshot();
         if (!form)
             return;
-        const newForm = addScoaExtensionInput(form.form, sectionId, scoaInputId);
+        // A custom input is an account-level input (a peer of the SCOA segments). It
+        // starts as an unconfigured stub, so open it in the editor right away for the
+        // builder to set its type/label — otherwise it renders nothing in the chart.
+        const newInputId = v4();
+        const newForm = addScoaExtensionInput(form.form, sectionId, scoaInputId, undefined, newInputId);
         applyForm(newForm);
+        store.actions.setInputInEditId({ inputInEdit: newInputId });
+    };
+    /**
+     * Creates or updates a standalone SCOA custom input from the segment-config
+     * quick editor. On create (or when the element type changes) the element
+     * template is applied so the input has all required fields; then the editor
+     * fields (label, control name, single-value-selection, read-only) are merged.
+     */
+    const saveScoaCustomInput = (sectionId, scoaInputId, config) => {
+        const form = store.formInEditSnapshot();
+        if (!form)
+            return;
+        const inputId = config.id ?? v4();
+        const existing = config.id ? returnAnyFormInputFromForm(form.form, inputId) : undefined;
+        let nextForm = form.form;
+        if (!config.id) {
+            nextForm = addScoaExtensionInput(nextForm, sectionId, scoaInputId, undefined, inputId);
+        }
+        if (!existing || existing.element !== config.element) {
+            nextForm = selectInputTemplateFn(nextForm, inputId, config.element);
+        }
+        nextForm = {
+            ...nextForm,
+            slides: nextForm.slides.map((slide) => ({
+                ...slide,
+                columns: slide.columns.map((column) => {
+                    if (column.element !== ElementTypes.MscoaSelection)
+                        return column;
+                    return {
+                        ...column,
+                        mscoaConfig: {
+                            ...column.mscoaConfig,
+                            inputs: (column.mscoaConfig.inputs || []).map((input) => input.id === inputId
+                                ? deepMerge(input, {
+                                    label: config.label,
+                                    formControlName: config.formControlName,
+                                    singleSelect: config.singleSelect,
+                                    readonly: config.readonly,
+                                })
+                                : input),
+                        },
+                    };
+                }),
+            })),
+        };
+        applyForm(nextForm);
     };
     const applyFormTemplate = (form) => {
         if (!form)
@@ -11017,6 +11362,7 @@ function formBuilderStoreActions(store) {
         addMultipleFormInput,
         clearInputInEdit,
         addInputToScoaSelection,
+        saveScoaCustomInput,
     };
 }
 
@@ -11416,10 +11762,17 @@ function setSegmentValues(state, segmentValues) {
     const accountTreeKeys = ((state.accountTreeKeys && state.accountTreeKeys.length > 0)
         ? state.accountTreeKeys
         : (state.segments?.map(s => s.segment) || []));
+    // Standalone custom-input values live as peer keys in each basis bag (written
+    // by `setCustomInputValue`, preserved by `auditStateValues`). They are NOT
+    // segments, so `mapSegments` must carry them through unchanged — otherwise the
+    // down-path strips a key the up-path keeps, the `_isEqual` guard below never
+    // holds, and the form ⇄ store ⇄ form graph oscillates (re-firing the debounced
+    // MSCOA validation API on every lap).
+    const customInputKeys = new Set((state.inputs || []).filter((input) => !input.linkedSegmentId).map((input) => input.formControlName));
     const mapSegments = (source) => {
         if (!source || !accountTreeKeys)
             return {};
-        return accountTreeKeys.reduce((acc, key) => {
+        const mapped = accountTreeKeys.reduce((acc, key) => {
             // Matches 'costing' -> 'COSTING' from your log
             const upperKey = key.toUpperCase();
             const v = source[upperKey] ?? source[key];
@@ -11427,6 +11780,13 @@ function setSegmentValues(state, segmentValues) {
                 acc[key] = v;
             return acc;
         }, {});
+        // Preserve standalone custom-input peer values (mirrors auditStateValues).
+        for (const customKey of customInputKeys) {
+            if (customKey && source[customKey] !== undefined) {
+                mapped[customKey] = source[customKey];
+            }
+        }
+        return mapped;
     };
     // 5. Generate Values
     const accrualValue = mapSegments(rawAccrual);
@@ -11498,11 +11858,80 @@ function setSegmentAccount(state, { segment, account, accountType, isCash }) {
         }
     };
 }
+/**
+ * Writes one **segment-scoped** custom-input value into the segment bag as a
+ * sibling of `debit`/`credit` (e.g. `REGIONAL.budgetValue`, `REGIONAL.DEPARTMENT`).
+ *
+ * The `value` is the custom input's `FormControl` value, projected here so it
+ * lands *inside* the account value object (and thus flows into extracts, the
+ * audit pass, and validation). v1 is segment-scoped: one value per segment, not
+ * per leg. Keying matches {@link setSegmentAccount} (both upper-case the segment
+ * key) so the custom value shares the SAME bag as the debit/credit accounts.
+ */
+function setSegmentInput(state, { segmentKey, customKey, value, isCash }) {
+    const basisKey = isCash ? 'cash' : 'accrual';
+    const upperSegmentKey = segmentKey.toUpperCase();
+    const currentBasisGroup = state.segmentValues?.[basisKey] || {};
+    const oldSegmentData = currentBasisGroup[upperSegmentKey] || {
+        debit: undefined,
+        credit: undefined,
+    };
+    // Set the custom key, or omit it entirely when the input is cleared.
+    const newSegmentData = { ...oldSegmentData };
+    if (value === undefined) {
+        delete newSegmentData[customKey];
+    }
+    else {
+        newSegmentData[customKey] = value;
+    }
+    const newSegmentValues = {
+        ...state.segmentValues,
+        [basisKey]: {
+            ...currentBasisGroup,
+            [upperSegmentKey]: newSegmentData,
+        },
+    };
+    // Idempotency guard (see setSegmentValues / setSegmentAccount): a no-op write
+    // returns the SAME reference so the signal does not emit and the
+    // form ⇄ store ⇄ form graph settles in a single pass instead of oscillating.
+    if (_isEqual(newSegmentValues, state.segmentValues))
+        return state;
+    return { ...state, segmentValues: newSegmentValues };
+}
+/** Legs a custom-input value mirrors across under single-value selection. */
+const CUSTOM_INPUT_LEGS = ['debit', 'credit'];
+/**
+ * Projects a **standalone (account-level) custom input's** value into the account
+ * value object as a peer of the segments, keyed by its `formControlName`, mirrored
+ * across debit/credit (single value selection). The scalar leg values are written
+ * through the bag's string index signature so they stay type-legal without
+ * weakening the account-bag type. Per-leg distinct entry is a later refinement.
+ */
+function setCustomInputValue(state, { inputKey, value, isCash }) {
+    if (!inputKey)
+        return state;
+    const basisKey = isCash ? 'cash' : 'accrual';
+    const currentBasisGroup = state.segmentValues?.[basisKey] || {};
+    const bag = {};
+    for (const leg of CUSTOM_INPUT_LEGS) {
+        bag[leg] = value;
+    }
+    const newSegmentValues = {
+        ...state.segmentValues,
+        [basisKey]: { ...currentBasisGroup, [inputKey]: bag },
+    };
+    if (_isEqual(newSegmentValues, state.segmentValues))
+        return state;
+    return { ...state, segmentValues: newSegmentValues };
+}
 /** Recomputes VAT + cash-from-accrual inheritance across all segment values. */
 function auditStateValues(state) {
     // 1. Safe access to state data
     const { cash = {}, accrual = {} } = state.segmentValues || {};
     const cashSegmentConfigs = state.cashSegments || [];
+    // Standalone custom-input values live as peer keys in `segmentValues`; they are
+    // NOT segments, so the VAT/inheritance passes below must leave them untouched.
+    const customInputKeys = new Set((state.inputs || []).filter((input) => !input.linkedSegmentId).map((input) => input.formControlName));
     // 2. Pre-calculate "Has VAT Applicable" flags for both bases
     //    (Checks if any segment in the group has a 'vatApplicableTo' flag set)
     const hasVatApplicableTo = (val) => val?.vatApplicableTo !== undefined;
@@ -11542,6 +11971,11 @@ function auditStateValues(state) {
     }, {});
     // 5. Process Accrual First (Source of Truth)
     const newAccrual = Object.entries(accrual).reduce((acc, [key, data]) => {
+        // Custom-input peer values pass through untouched (not segments → no VAT).
+        if (customInputKeys.has(key)) {
+            acc[key] = data;
+            return acc;
+        }
         const record = data;
         acc[key] = {
             ...record,
@@ -11551,6 +11985,11 @@ function auditStateValues(state) {
     }, {});
     // 6. Process Cash (With Inheritance)
     const newCash = Object.entries(cash).reduce((acc, [key, data]) => {
+        // Custom-input peer values pass through untouched (no VAT / inheritance).
+        if (customInputKeys.has(key)) {
+            acc[key] = data;
+            return acc;
+        }
         const record = data;
         const shouldInherit = inheritMap[key];
         // A. Determine the Source Data
@@ -11558,13 +11997,26 @@ function auditStateValues(state) {
         // Otherwise, use the existing Cash data.
         let workingData = record;
         if (shouldInherit && newAccrual[key]) {
-            workingData = {
+            const accrualRecord = newAccrual[key];
+            const inherited = {
                 ...workingData, // Keep existing cash props (like ID, etc) if needed
-                debit: newAccrual[key].debit,
-                credit: newAccrual[key].credit,
+                debit: accrualRecord.debit,
+                credit: accrualRecord.credit,
                 // Note: We do NOT inherit 'vatApplicableTo' or 'vat' blindly,
                 // because Cash might have its own VAT context. We recalculate VAT below.
             };
+            // Carry over the accrual segment's custom-input values (segment-scoped
+            // siblings of debit/credit) so an inheriting cash segment mirrors them.
+            // Reserved keys are recomputed for cash, so they are skipped here.
+            for (const [customKey, customValue] of Object.entries(accrualRecord)) {
+                if (customKey !== 'debit' &&
+                    customKey !== 'credit' &&
+                    customKey !== 'vat' &&
+                    customKey !== 'vatApplicableTo') {
+                    inherited[customKey] = customValue;
+                }
+            }
+            workingData = inherited;
         }
         // B. Apply Cash-Specific VAT Logic
         acc[key] = {
@@ -11749,6 +12201,21 @@ class MscoaComponentStore {
     setSegmentAccount(payload) {
         this.#state.update((state) => setSegmentAccount(state, payload));
     }
+    /**
+     * Projects a segment-scoped custom-input value into the account value object
+     * as a sibling of debit/credit. Called from the chart when a linked custom
+     * input's `FormControl` value changes (see {@link reducers.setSegmentInput}).
+     */
+    setSegmentInput(payload) {
+        this.#state.update((state) => setSegmentInput(state, payload));
+    }
+    /**
+     * Projects a standalone (account-level) custom input's value into the account
+     * value object as a peer of the segments (see {@link reducers.setCustomInputValue}).
+     */
+    setCustomInputValue(payload) {
+        this.#state.update((state) => setCustomInputValue(state, payload));
+    }
     /** Records the active segment. */
     setActiveSegment(activeSegment) {
         this.#state.update((state) => setActiveSegment(state, activeSegment));
@@ -12388,9 +12855,9 @@ class FormBuilderComponent {
         this.#store.actionsFormBuilder.setFormTitle(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: FormBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: FormBuilderComponent, isStandalone: true, selector: "lib-form-builder, app-form-builder", inputs: { formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [FormsStoreService], ngImport: i0, template: "<header style=\"position:fixed;width:100%;left:0px;top:0px\">\r\n    <mat-toolbar color=\"primary\">\r\n        @if (closeButton) {\r\n        <button mat-icon-button [style.color]=\"closeButton.color\" (click)=\"closeButton.onClick()\">\r\n            <mat-icon>{{closeButton.icon}}</mat-icon>\r\n        </button>\r\n        }\r\n\r\n        <!-- Navigation group -->\r\n        <div class=\"nav-group\">\r\n            <button mat-button routerLink=\"/\">Forms</button>\r\n            <mat-icon>navigate_next</mat-icon>\r\n        </div>\r\n\r\n        <!-- Title input with optimized binding -->\r\n        @if (selectHasFormId()) {\r\n        <input [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitleValue($event)\" class=\"section-title-input\" placeholder=\"Enter Form Title\">\r\n        }\r\n\r\n        <span class=\"spacer\"></span>\r\n\r\n        @defer (on viewport) {\r\n        <lib-forms-builder-menu />\r\n        } @placeholder {\r\n        <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n            <mat-spinner diameter=\"20\" />\r\n        </div>\r\n\r\n        }\r\n\r\n        <span class=\"divider\">|</span>\r\n\r\n        <!-- Persist to server: visible once local preview is in sync -->\r\n        @if (!pendingExternalRefresh()) {\r\n        <button mat-raised-button color=\"accent\" class=\"save-button\" [disabled]=\"!(canSaveForm())\" (click)=\"saveForm()\">\r\n            <mat-icon style=\"width: 24px;\">cloud_upload</mat-icon>\r\n            @if (selectFormBuilderIsBusy()) {\r\n            <span class=\"save-text\">\r\n                <span class=\"save-label\">{{(isNewForm()) ? 'Creating form...' : 'Saving changes...'}}</span>\r\n            </span>\r\n            } @else {\r\n            <span class=\"save-text\">\r\n                <span class=\"save-label\">{{(isNewForm()) ? 'Save New Form' : 'Save Changes'}}</span>\r\n                @if (canSaveForm()) {\r\n                <span class=\"save-sub\">Not saved to server yet</span>\r\n                }\r\n            </span>\r\n            }\r\n        </button>\r\n        }\r\n\r\n        <!-- Local sync: applies your changes to the builder preview \u00B7 does NOT save to server -->\r\n        @if (pendingExternalRefresh()) {\r\n        <button class=\"refresh-button\" matRipple matRippleColor=\"rgba(255,255,255,0.12)\" (click)=\"triggerRefreshNow()\">\r\n            <span class=\"countdown-ring\">\r\n                <mat-progress-spinner\r\n                    diameter=\"34\"\r\n                    mode=\"determinate\"\r\n                    [value]=\"refreshCountdown() * 20\">\r\n                </mat-progress-spinner>\r\n                <span class=\"countdown-number\">{{refreshCountdown()}}</span>\r\n            </span>\r\n            <span class=\"refresh-text\">\r\n                <span class=\"refresh-label\">Apply Now</span>\r\n                <span class=\"refresh-sub\">Preview updates in {{refreshCountdown()}}s</span>\r\n            </span>\r\n            <mat-icon class=\"refresh-chevron\">chevron_right</mat-icon>\r\n        </button>\r\n        }\r\n\r\n    </mat-toolbar>\r\n</header>\r\n\r\n<!-- Main content with optimized loading -->\r\n@defer (on viewport) {\r\n<div class=\"container\">\r\n    <div class=\"middle\">\r\n        <br>\r\n        @if (selectLoadingForm()) {\r\n        <div class=\"loading-container\">\r\n            <mat-spinner />\r\n        </div>\r\n        } @else {\r\n        <lib-form-section-stepper />\r\n        }\r\n        <br>\r\n        @if ((hasMissingConfigs()) && !(selectLoadingForm())) {\r\n        <lib-missing-form-configs />\r\n        }\r\n            <!-- Updated time info -->\r\n        @if (!(isNewForm())) {\r\n        <div class=\"updated-time\">\r\n            <mat-icon>update</mat-icon>\r\n            <span>Updated {{ selectFormUpdated() }}</span>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    @if (elementEditorOpen()) {\r\n    <lib-input-editor style=\"max-width:480px;height:calc(100vh - 76px);\r\n    position:sticky;\r\n    top:76px;\r\n    z-index:1\" cdkDrag cdkDragBoundary=\"container\" class=\"middle editor-container\" />\r\n    }\r\n    <!-- Missing fields section -->`\r\n\r\n\r\n</div>\r\n}@placeholder {\r\n<div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n    <mat-spinner diameter=\"50\" />\r\n</div>\r\n}", styles: [".container{display:flex;width:100%;height:calc(100% - 64px);padding-top:4em}.side{width:100px;background-color:var(--sem-error-surface)}.middle{flex-grow:1;height:calc(100vh - 68px);overflow:auto;background-color:none}.section-title-input{border:none;background-color:transparent;font-size:.8575em;font-weight:600;color:var(--lib-forms-on-primary);padding-top:12px;padding-bottom:12px;outline:none;width:100%;min-width:268px;transition:border-bottom-color .3s ease-in-out}.section-title-input:focus{border-bottom:1px solid var(--lib-forms-on-primary)}.missing-fields{position:fixed;bottom:0}.updated-time{display:flex;color:var(--mat-sidenav-content-text-color, var(--mat-sys-on-background));gap:8px;align-items:center;line-height:normal;font-size:.875em;bottom:0;position:absolute;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px;border-radius:4px}.nav-group{display:flex;align-items:center;gap:8px}.save-button{margin-left:8px;min-width:168px;height:44px}.save-button .save-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.save-button .save-text .save-label{font-size:13px;font-weight:600;line-height:1;letter-spacing:.01em;white-space:nowrap}.save-button .save-text .save-sub{font-size:10px;line-height:1;opacity:.78;white-space:nowrap}.refresh-button{margin-left:8px;background:var(--mat-fab-small-container-color, var(--mat-sys-tertiary-container));color:var(--mat-sys-on-tertiary-container);border:1.5px solid var(--mat-sys-outline-variant);border-radius:10px;padding:4px 14px 4px 6px;cursor:pointer;display:inline-flex;align-items:center;gap:12px;height:44px;width:fit-content;box-shadow:0 2px 12px color-mix(in srgb,var(--lib-forms-shadow-color) 18%,transparent);transition:box-shadow var(--lib-forms-duration-hover) var(--lib-forms-easing),transform var(--lib-forms-duration-hover) var(--lib-forms-easing);outline:none;overflow:hidden;position:relative}.refresh-button:hover{box-shadow:0 4px 20px color-mix(in srgb,var(--lib-forms-shadow-color) 28%,transparent);transform:translateY(-1px)}.refresh-button:active{transform:translateY(0);box-shadow:0 1px 6px color-mix(in srgb,var(--lib-forms-shadow-color) 12%,transparent)}.refresh-button .countdown-ring{position:relative;width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.refresh-button .countdown-ring mat-progress-spinner{position:absolute;inset:0;--mdc-circular-progress-active-indicator-color: var(--mat-sys-on-tertiary-container);--mdc-circular-progress-track-color: color-mix(in srgb, var(--mat-sys-on-tertiary-container) 18%, transparent)}.refresh-button .countdown-ring .countdown-number{font-size:11px;font-weight:600;line-height:1;z-index:1;letter-spacing:-.3px;color:var(--mat-sys-on-tertiary-container)}.refresh-button .refresh-text{display:flex;flex-direction:column;align-items:flex-start;gap:3px}.refresh-button .refresh-text .refresh-label{font-size:13px;font-weight:600;line-height:1;letter-spacing:.01em;white-space:nowrap;color:var(--mat-sys-on-tertiary-container)}.refresh-button .refresh-text .refresh-sub{font-size:10px;line-height:1;opacity:.68;white-space:nowrap;color:var(--mat-sys-on-tertiary-container)}.refresh-button .refresh-chevron{font-size:18px;width:18px;height:18px;opacity:.65;flex-shrink:0;color:var(--mat-sys-on-tertiary-container)}.loading-container{display:flex;height:calc(100% - 150px);justify-content:center;align-items:center}.editor-container{max-width:500px}.divider{margin:0 8px;opacity:.5}app-missing-form-configs{position:absolute;bottom:0;right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.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: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i7.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i7$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./ngx-t-forms-forms-builder-menu.component-qrhM0jGL.mjs').then(m => m.FormsBuilderMenuComponent)], () => [i3$1.MatIcon, i3$2.MatProgressSpinner, i1$3.CdkDrag, import('./ngx-t-forms-input-editor.component-BPUOM9kQ.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-Bs50-nEB.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-DrnH8qdG.mjs').then(m => m.MissingFormConfigsComponent)]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: FormBuilderComponent, isStandalone: true, selector: "lib-form-builder, app-form-builder", inputs: { formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [FormsStoreService], ngImport: i0, template: "<header style=\"position:fixed;width:100%;left:0px;top:0px\">\r\n    <mat-toolbar color=\"primary\">\r\n        @if (closeButton) {\r\n        <button mat-icon-button [style.color]=\"closeButton.color\" (click)=\"closeButton.onClick()\">\r\n            <mat-icon>{{closeButton.icon}}</mat-icon>\r\n        </button>\r\n        }\r\n\r\n        <!-- Navigation group -->\r\n        <div class=\"nav-group\">\r\n            <button mat-button routerLink=\"/\">Forms</button>\r\n            <mat-icon>navigate_next</mat-icon>\r\n        </div>\r\n\r\n        <!-- Title input with optimized binding -->\r\n        @if (selectHasFormId()) {\r\n        <input [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitleValue($event)\" class=\"section-title-input\" placeholder=\"Enter Form Title\">\r\n        }\r\n\r\n        <span class=\"spacer\"></span>\r\n\r\n        @defer (on viewport) {\r\n        <lib-forms-builder-menu />\r\n        } @placeholder {\r\n        <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n            <mat-spinner diameter=\"20\" />\r\n        </div>\r\n\r\n        }\r\n\r\n        <span class=\"divider\">|</span>\r\n\r\n        <!-- Persist to server: visible once local preview is in sync -->\r\n        @if (!pendingExternalRefresh()) {\r\n        <button mat-raised-button color=\"accent\" class=\"save-button\" [disabled]=\"!(canSaveForm())\" (click)=\"saveForm()\">\r\n            <mat-icon style=\"width: 24px;\">cloud_upload</mat-icon>\r\n            @if (selectFormBuilderIsBusy()) {\r\n            <span class=\"save-text\">\r\n                <span class=\"save-label\">{{(isNewForm()) ? 'Creating form...' : 'Saving changes...'}}</span>\r\n            </span>\r\n            } @else {\r\n            <span class=\"save-text\">\r\n                <span class=\"save-label\">{{(isNewForm()) ? 'Save New Form' : 'Save Changes'}}</span>\r\n                @if (canSaveForm()) {\r\n                <span class=\"save-sub\">Not saved to server yet</span>\r\n                }\r\n            </span>\r\n            }\r\n        </button>\r\n        }\r\n\r\n        <!-- Local sync: applies your changes to the builder preview \u00B7 does NOT save to server -->\r\n        @if (pendingExternalRefresh()) {\r\n        <button class=\"refresh-button\" matRipple matRippleColor=\"rgba(255,255,255,0.12)\" (click)=\"triggerRefreshNow()\">\r\n            <span class=\"countdown-ring\">\r\n                <mat-progress-spinner\r\n                    diameter=\"34\"\r\n                    mode=\"determinate\"\r\n                    [value]=\"refreshCountdown() * 20\">\r\n                </mat-progress-spinner>\r\n                <span class=\"countdown-number\">{{refreshCountdown()}}</span>\r\n            </span>\r\n            <span class=\"refresh-text\">\r\n                <span class=\"refresh-label\">Apply Now</span>\r\n                <span class=\"refresh-sub\">Preview updates in {{refreshCountdown()}}s</span>\r\n            </span>\r\n            <mat-icon class=\"refresh-chevron\">chevron_right</mat-icon>\r\n        </button>\r\n        }\r\n\r\n    </mat-toolbar>\r\n</header>\r\n\r\n<!-- Main content with optimized loading -->\r\n@defer (on viewport) {\r\n<div class=\"container\">\r\n    <div class=\"middle\">\r\n        <br>\r\n        @if (selectLoadingForm()) {\r\n        <div class=\"loading-container\">\r\n            <mat-spinner />\r\n        </div>\r\n        } @else {\r\n        <lib-form-section-stepper />\r\n        }\r\n        <br>\r\n        @if ((hasMissingConfigs()) && !(selectLoadingForm())) {\r\n        <lib-missing-form-configs />\r\n        }\r\n            <!-- Updated time info -->\r\n        @if (!(isNewForm())) {\r\n        <div class=\"updated-time\">\r\n            <mat-icon>update</mat-icon>\r\n            <span>Updated {{ selectFormUpdated() }}</span>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    @if (elementEditorOpen()) {\r\n    <lib-input-editor style=\"max-width:480px;height:calc(100vh - 76px);\r\n    position:sticky;\r\n    top:76px;\r\n    z-index:1\" cdkDrag cdkDragBoundary=\"container\" class=\"middle editor-container\" />\r\n    }\r\n    <!-- Missing fields section -->`\r\n\r\n\r\n</div>\r\n}@placeholder {\r\n<div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n    <mat-spinner diameter=\"50\" />\r\n</div>\r\n}", styles: [".container{display:flex;width:100%;height:calc(100% - 64px);padding-top:4em}.side{width:100px;background-color:var(--sem-error-surface)}.middle{flex-grow:1;height:calc(100vh - 68px);overflow:auto;background-color:none}.section-title-input{border:none;background-color:transparent;font-size:.8575em;font-weight:600;color:var(--lib-forms-on-primary);padding-top:12px;padding-bottom:12px;outline:none;width:100%;min-width:268px;transition:border-bottom-color .3s ease-in-out}.section-title-input:focus{border-bottom:1px solid var(--lib-forms-on-primary)}.missing-fields{position:fixed;bottom:0}.updated-time{display:flex;color:var(--mat-sidenav-content-text-color, var(--mat-sys-on-background));gap:8px;align-items:center;line-height:normal;font-size:.875em;bottom:0;position:absolute;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px;border-radius:4px}.nav-group{display:flex;align-items:center;gap:8px}.save-button{margin-left:8px;min-width:168px;height:44px}.save-button .save-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.save-button .save-text .save-label{font-size:13px;font-weight:600;line-height:1;letter-spacing:.01em;white-space:nowrap}.save-button .save-text .save-sub{font-size:10px;line-height:1;opacity:.78;white-space:nowrap}.refresh-button{margin-left:8px;background:var(--mat-fab-small-container-color, var(--mat-sys-tertiary-container));color:var(--mat-sys-on-tertiary-container);border:1.5px solid var(--mat-sys-outline-variant);border-radius:10px;padding:4px 14px 4px 6px;cursor:pointer;display:inline-flex;align-items:center;gap:12px;height:44px;width:fit-content;box-shadow:0 2px 12px color-mix(in srgb,var(--lib-forms-shadow-color) 18%,transparent);transition:box-shadow var(--lib-forms-duration-hover) var(--lib-forms-easing),transform var(--lib-forms-duration-hover) var(--lib-forms-easing);outline:none;overflow:hidden;position:relative}.refresh-button:hover{box-shadow:0 4px 20px color-mix(in srgb,var(--lib-forms-shadow-color) 28%,transparent);transform:translateY(-1px)}.refresh-button:active{transform:translateY(0);box-shadow:0 1px 6px color-mix(in srgb,var(--lib-forms-shadow-color) 12%,transparent)}.refresh-button .countdown-ring{position:relative;width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.refresh-button .countdown-ring mat-progress-spinner{position:absolute;inset:0;--mdc-circular-progress-active-indicator-color: var(--mat-sys-on-tertiary-container);--mdc-circular-progress-track-color: color-mix(in srgb, var(--mat-sys-on-tertiary-container) 18%, transparent)}.refresh-button .countdown-ring .countdown-number{font-size:11px;font-weight:600;line-height:1;z-index:1;letter-spacing:-.3px;color:var(--mat-sys-on-tertiary-container)}.refresh-button .refresh-text{display:flex;flex-direction:column;align-items:flex-start;gap:3px}.refresh-button .refresh-text .refresh-label{font-size:13px;font-weight:600;line-height:1;letter-spacing:.01em;white-space:nowrap;color:var(--mat-sys-on-tertiary-container)}.refresh-button .refresh-text .refresh-sub{font-size:10px;line-height:1;opacity:.68;white-space:nowrap;color:var(--mat-sys-on-tertiary-container)}.refresh-button .refresh-chevron{font-size:18px;width:18px;height:18px;opacity:.65;flex-shrink:0;color:var(--mat-sys-on-tertiary-container)}.loading-container{display:flex;height:calc(100% - 150px);justify-content:center;align-items:center}.editor-container{max-width:500px}.divider{margin:0 8px;opacity:.5}app-missing-form-configs{position:absolute;bottom:0;right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.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: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i7.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i7$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./ngx-t-forms-forms-builder-menu.component-Dv0Dfw79.mjs').then(m => m.FormsBuilderMenuComponent)], () => [i3$1.MatIcon, i3$2.MatProgressSpinner, i1$3.CdkDrag, import('./ngx-t-forms-input-editor.component-DLru1Ezu.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-BPgPfZSy.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-DxdynZY6.mjs').then(m => m.MissingFormConfigsComponent)]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.12", ngImport: i0, type: FormBuilderComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-forms-builder-menu.component-qrhM0jGL.mjs').then(m => m.FormsBuilderMenuComponent), import('./ngx-t-forms-input-editor.component-BPUOM9kQ.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-Bs50-nEB.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-DrnH8qdG.mjs').then(m => m.MissingFormConfigsComponent)], resolveMetadata: (FormsBuilderMenuComponent, InputEditorComponent, FormSectionStepperComponent, MissingFormConfigsComponent) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.12", ngImport: i0, type: FormBuilderComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-forms-builder-menu.component-Dv0Dfw79.mjs').then(m => m.FormsBuilderMenuComponent), import('./ngx-t-forms-input-editor.component-DLru1Ezu.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-BPgPfZSy.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-DxdynZY6.mjs').then(m => m.MissingFormConfigsComponent)], resolveMetadata: (FormsBuilderMenuComponent, InputEditorComponent, FormSectionStepperComponent, MissingFormConfigsComponent) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'lib-form-builder, app-form-builder', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                             CommonModule,
@@ -12926,6 +13393,16 @@ class TDynamicDataEditComponent {
         this.data = input(undefined, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
         /** Validation errors surfaced by the parent for display. */
         this.validationErrors = input(null, ...(ngDevMode ? [{ debugName: "validationErrors" }] : /* istanbul ignore next */ []));
+        /**
+         * Builder-only: creates or updates an account-level MSCOA custom input (a peer
+         * of the segments) from the segment-config quick editor. Forwarded to that
+         * editor; absent outside the form builder, which hides the related affordance.
+         */
+        this.mscoaSaveCustomInput = input(undefined, ...(ngDevMode ? [{ debugName: "mscoaSaveCustomInput" }] : /* istanbul ignore next */ []));
+        /** Builder-only: opens an MSCOA custom input in the input editor for advanced configuration. */
+        this.mscoaEditInput = input(undefined, ...(ngDevMode ? [{ debugName: "mscoaEditInput" }] : /* istanbul ignore next */ []));
+        /** Builder-only: removes an MSCOA custom input from the config. */
+        this.mscoaDeleteInput = input(undefined, ...(ngDevMode ? [{ debugName: "mscoaDeleteInput" }] : /* istanbul ignore next */ []));
         /** Fires when the edited value changes (debounced). */
         this.valueChange = output();
         /** Fires when an inner editor loses focus (used for expression-style editors). */
@@ -13183,9 +13660,9 @@ class TDynamicDataEditComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TDynamicDataEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TDynamicDataEditComponent, isStandalone: true, selector: "lib-t-dynamic-data-edit", inputs: { editorConfig: { classPropertyName: "editorConfig", publicName: "editorConfig", isSignal: true, isRequired: false, transformFunction: null }, formInputs: { classPropertyName: "formInputs", publicName: "formInputs", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, validationErrors: { classPropertyName: "validationErrors", publicName: "validationErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", blur: "blur" }, providers: [{ provide: NESTED_EDITOR_COMPONENT, useValue: TDynamicDataEditComponent }], ngImport: i0, template: "@defer {\n@if (( vm$ |async); as vm) {\n\n    @if (vm.isFormFieldControl) {\n    <!-- Editor types that resolve to a MatFormFieldControl render inside the field. -->\n    <mat-form-field appearance=\"outline\" [color]=\"((validationErrors())||[]).length>0 ? 'warn' : 'primary'\"\n        [floatLabel]=\"'always'\" [subscriptSizing]=\"'dynamic'\" [hintLabel]=\"vm.editorConfigValue?.hint||''\">\n        <mat-label> {{ (vm. editorConfigValue)?.label }} </mat-label>\n        @switch ((vm. editorConfigValue)?.editType) {\n        @default {\n            <lib-input-custom\n             [id]=\"((vm.editorConfigValue)?.id)\"\n             [inputConfig]=\"$any(vm.inputConfig)\"\n            [placeholder]=\"(vm.  editorConfigValue)?.placeholder ||'Enter value'\"\n            [required]=\"!!(vm.  editorConfigValue)?.required\"\n            [disabled]=\"!!(vm.disabled)\"\n             [ngModel]=\"(vm.value)\"\n             (blur)=\"elementBlur($event)\"\n            (input)=\"inputChange($event)\" ></lib-input-custom>\n\n\n        }\n        @case ( elementEditorTypes.Toggle) {\n        <lib-mat-slider-toggle-editor\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [name]=\"((vm.  editorConfigValue)?.name||'') \"\n            [label]=\"((vm.  editorConfigValue)?.label||'')\" [disabled]=\"(vm.disabled)||false\"\n            (valueChange)=\"valueChanged(!!$event)\" [value]=\"$any(vm.value)\" [errors]=\"(validationErrors())||[]\">\n        </lib-mat-slider-toggle-editor>\n\n        }\n\n        @case (elementEditorTypes.Range) {\n\n\n        <lib-mat-slider-editor\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [format]=\"(  vm.editorConfigValue)?.format \" [formatLabel]=\" formatLabel\"\n            [disabled]=\"(vm.disabled)||false\" [max]=\"(  vm.editorConfigValue)?.max || 100\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" [min]=\"(  vm.editorConfigValue)?.min || 0\"\n            (valueChange)=\"inputChange($event)\" [step]=\"(  vm.editorConfigValue)?.step || 1\">\n\n\n        </lib-mat-slider-editor>\n\n\n\n        }\n\n        @case (elementEditorTypes.OptionSelect) {\n\n        <mat-select\n\n        [value]=\"$any(vm.value)\" (selectionChange)=\"valueChanged($event.value)\"\n            [disabled]=\"(vm.disabled)||false\">\n            @for(option of ( vm.editorConfigValue)?.options || vm.dataOptions;track option.value){\n            <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\n            }\n        </mat-select>\n\n        }\n\n        @case (elementEditorTypes.RichTextEditor) {\n        <lib-editor-js-input\n\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [value]=\"$any(vm.value)\" (valueChanged)=\"valueChanged($event)\"\n            [disabled]=\"(vm.disabled)||false\" [inputConfig]=\"$any(data())\">\n        </lib-editor-js-input>\n        }\n\n        @case (elementEditorTypes.MongoPipelineBuilder) {\n\n        <lib-pipeline-generator [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" [getWorkflowOptions]=\"getWorkflowOptions$\"\n            (valueChanged)=\"valueChanged($event)\"></lib-pipeline-generator>\n\n        }\n        @case (elementEditorTypes.MapMatOptionsKeys) {\n        <lib-map-mat-options-keys [disabled]=\"(vm.disabled)||false\"\n            [value]=\"$any(vm.value)\"\n            [formInputs]=\"formInputs() || []\"\n            [mapToData]=\"vm.dataOptions\"\n            [errors]=\"(validationErrors())||[]\"\n            (valueChanged)=\"valueChanged($event)\">\n        </lib-map-mat-options-keys>\n\n        }\n\n        @case(elementEditorTypes.CalculatedFieldRules){\n\n        <lib-calculated-field-rules [formInputs]=\"formInputs() ||[]\" [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" (valueChanged)=\"valueChanged($event)\"\n            [mapToData]=\"vm.dataOptions\"></lib-calculated-field-rules>\n        }\n\n        @case(elementEditorTypes.Validators){\n\n        <lib-validators-config [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" (valueChanged)=\"valueChanged($event)\" [formInputs]=\"formInputs() ||[]\"\n            [mapToData]=\"vm.dataOptions\">\n        </lib-validators-config>\n\n        }\n        @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\n\n        <lib-config-mscoa-additional-inputs [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" [getMscoaTree]=\"getMscoaTree$\" [mapToData]=\"vm.dataOptions\"\n            (valueChanged)=\"valueChanged($event)\">\n        </lib-config-mscoa-additional-inputs>\n\n        }\n        @case (elementEditorTypes.DataSourcePicker) {\n        <lib-data-source-picker   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm.  editorConfigValue\"\n            (valueChange)=\"valueChanged($event)\" [formInputs]=\"formInputs() ||[]\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\">\n        </lib-data-source-picker>\n        }\n        @case (elementEditorTypes.ListLabelConfigEditor) {\n        <lib-document-list-label-config-editor\n        [id]=\"((vm.editorConfigValue)?.id)\"\n         [formInputs]=\"formInputs() ||[]\"\n         [disabled]=\"(vm.disabled)||false\"\n         [editorConfig]=\"vm.  editorConfigValue\"\n            (valueChange)=\"valueChanged($event)\"\n            [value]=\"$any(vm.value)\" [mapToData]=\"vm.dataOptions\"\n            [errors]=\"(validationErrors())||[]\">\n\n        </lib-document-list-label-config-editor>\n        }\n        @case(\n        elementEditorTypes.WorkflowPicker\n        ){\n        <lib-t-workflow-picker  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [getWorkflowOptions]=\"getWorkflowOptions$\"\n            (valueChanged)=\"valueChanged($event)\" [value]=\"$any(vm.value)\" [errors]=\"(validationErrors())||[]\"></lib-t-workflow-picker>\n        }\n        @case (\n        elementEditorTypes.RecordListManager\n        ) {\n        <lib-record-list-manager\n        [id]=\"((vm.editorConfigValue)?.id)\"\n        [editorConfig]=\"vm.editorConfigValue\" [disabled]=\"(vm.disabled)||false\"\n            [formInputs]=\"formInputs() ||[]\" [mapToData]=\"vm.dataOptions\" (valueChange)=\"valueChanged($event)\"\n\n            [value]=\"$any(vm.value)\" [errors]=\"(validationErrors())||[]\"></lib-record-list-manager>\n        }\n        }\n\n        @if (vm.inputHasBlurFunction) {\n        <button [matTooltip]=\"blurFunctionTooltip((vm.editorConfigValue)?.blurHandle)\"\n            [disabled]=\"(vm.disabled)\" [color]=\"blurOff?'':'primary'\" (click)=\"blurOff=!blurOff\" matSuffix\n            mat-icon-button>\n            <mat-icon>{{\n                blurOff?'blur_off':'blur_on'\n                }}\n\n\n            </mat-icon>\n        </button>\n        }\n    </mat-form-field>\n    } @else {\n    <!-- Editor types backed by plain (signal-based) components render outside\n         the field, since they are not MatFormFieldControls. They are wrapped to\n         mirror the outline mat-form-field appearance: the fieldset draws the\n         outline, its legend is the notched floating label, and the hint renders\n         as a subscript below the box. -->\n    <div class=\"non-control-editor\">\n        <fieldset class=\"non-control-editor__field\">\n        @if ((vm. editorConfigValue)?.label) {\n        <legend class=\"non-control-editor__label\">{{ (vm. editorConfigValue)?.label }}</legend>\n        }\n        @switch ((vm. editorConfigValue)?.editType) {\n\n        @case (elementEditorTypes.ChipSelect) {\n\n        <lib-mat-chip-list-editor\n         [id]=\"((vm.editorConfigValue)?.id)\"\n         [multiple]=\"!!vm.editorConfigValue?.multipleSelection\"\n        [disabled]=\"(vm.disabled)||false\"\n            [options]=\"(vm.editorConfigValue)?.options || vm.dataOptions\"\n            [required]=\"!!( vm.editorConfigValue)?.required\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\"\n            (valueChange)=\"  valueChanged($event)\"></lib-mat-chip-list-editor>\n\n\n        }\n\n        @case (elementEditorTypes.SelectionOptions) {\n\n        <lib-selection-options-editor\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [errors]=\"(validationErrors())||[]\" [disabled]=\"(vm.disabled)||false\"\n            [options]=\"$any(vm.value) || []\" (valueChanged)=\"valueChanged($event)\"></lib-selection-options-editor>\n        }\n\n        @case (\n        elementEditorTypes.ApiCall) {\n\n        <lib-rest-api-call-setup\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\n            [httpGetDataFunction]=\"(vm.editorConfigValue)?.httpGetDataFunction\" [disabled]=\"(vm.disabled)||false\"\n            [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" (valueChanged)=\"valueChanged($event)\">\n\n        </lib-rest-api-call-setup>\n\n        }\n\n        @case (elementEditorTypes.ApiValueAccessRules) {\n\n\n\n        <lib-api-value-access-rules [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\"\n            [formInputs]=\"formInputs() ||[]\"\n\n            [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\" [mapToData]=\"vm.dataOptions\"\n            (valueChanged)=\"valueChanged($event)\">\n        </lib-api-value-access-rules>\n\n        }\n\n        @case (elementEditorTypes.FormInputSelector)\n        {\n\n        <lib-form-input-selector  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [formInputs]=\"formInputs() ||[]\"\n            [errors]=\"(validationErrors())||[]\" [value]=\"$any(vm.value) || []\" (change)=\"valueChanged($event)\">\n        </lib-form-input-selector>\n        }\n\n        @case (\n        elementEditorTypes.RequiredInputs\n        ){\n\n        <lib-required-inputs  [formInputs]=\"formInputs() ||[]\" [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" (valueChanged)=\"valueChanged($event)\">\n        </lib-required-inputs>\n        }\n\n        @case(elementEditorTypes.ConfigMscoaSegments){\n\n        <lib-mscoa-segment-config [disabled]=\"(vm.disabled)||false\"   [id]=\"((vm.editorConfigValue)?.id)\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" [getMscoaTree]=\"getMscoaTree$\" [dataValue]=\"$any(vm.dataValue)\"\n            [isCashSegmentConfig]=\"vm.editorConfigValue?.deepBind?.at(-1) === 'cashSegments'\"\n            [showAllSegments]=\"vm.dataOptions\" (valueChanged)=\"valueChanged($event)\"></lib-mscoa-segment-config>\n        }\n        @case (elementEditorTypes.ChipOptionsCreator) {\n        <lib-chip-options-creator-editor   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" (valueChange)=\"valueChanged($event)\"\n            [value]=\"$any(vm.value)\" [errors]=\"(validationErrors())||[]\">\n\n        </lib-chip-options-creator-editor>\n\n        }\n        @case (elementEditorTypes.FormPayloadProjection) {\n        <lib-form-payload-projection [disabled]=\"(vm.disabled)||false\" [value]=\"$any(vm.value)\"\n            [formInputs]=\"formInputs() ||[]\" [errors]=\"(validationErrors())||[]\"\n            (valueChanged)=\"valueChanged($event)\">\n        </lib-form-payload-projection>\n\n        }\n        }\n        </fieldset>\n\n        @if ((vm. editorConfigValue)?.hint) {\n        <small class=\"non-control-editor__hint\">{{ (vm. editorConfigValue)?.hint }}</small>\n        }\n    </div>\n    }\n\n    @if (!(vm.value) && (vm. editorConfigValue)?.required ) {\n    <mat-error>\n        {{ (vm. editorConfigValue)?.label }}'s  is required\n    </mat-error>}\n\n    @for (error of (validationErrors())||[]; track error.key) {\n    <mat-error style=\"    font-size: 0.75em;\n        margin-left: 14px;\n    \">\n\n        {{error.message}}</mat-error>\n    }\n\n}\n\n}@error {\n<mat-card>\n    <mat-card-content>\n\n        <span>\n            Failed to load form inputs\n        </span>\n    </mat-card-content>\n</mat-card>\n}\n\n\n\n<!-- -\n `TableConfigSetup`\n- `ConditionalInputConfig`\n- `MatrixTable`-->\n", styles: [".showItemValue{opacity:.6}.non-control-editor{display:flex;flex-direction:column;width:100%}.non-control-editor__field{margin:0;min-width:0;width:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:.75rem;border:1px solid var(--mat-sys-outline-variant, var(--mat-app-outline));border-radius:var(--mdc-outlined-text-field-container-shape, 4px)}.non-control-editor__label{padding:0 .25rem;margin-left:.5rem;font-size:.75rem;font-weight:400;line-height:1;color:var(--mat-sys-on-surface-variant, var(--mat-app-on-surface-variant, var(--mat-app-outline)))}.non-control-editor__hint{margin-top:.5rem;padding:0 .875rem;font-size:.75rem;line-height:1.5;color:var(--mat-sys-on-surface-variant, var(--mat-app-on-surface-variant, var(--mat-app-outline)))}mat-form-field{width:100%}mat-slider{width:100%}.range{display:flex;align-items:center}.elementInfo{display:flex;align-items:center;justify-content:center;padding:0;height:24px;width:24px}.infoIcon{font-size:1em;height:16px;width:16px}.toggle-label{margin-left:5px;align-items:center;display:flex;font-weight:500;line-height:normal;justify-content:space-between;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary))}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./ngx-t-forms-selection-options-editor.component-Dhln81DL.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-C9u8zq9B.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-C_aFtdvW.mjs').then(m => m.RestApiCallSetupComponent), Promise.resolve().then(function () { return apiValueAccessRules_component; }).then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-Ch2yNcIS.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-DmNSc5aw.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-C5TPddVe.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-oGjQVGE2.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-CzisLSIP.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-CTSBrM-j.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-C0qsMfsq.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-CcYiwx-8.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-c7uZT1sr.mjs').then(m => m.MatChipListEditorComponent), i2.MatFormField, i2.MatLabel, i2.MatError, i2.MatSuffix, i8.MatSelect, i8.MatOption, i1$2.MatIconButton, i3$1.MatIcon, i5$1.MatTooltip, import('./ngx-t-forms-chip-options-creator-editor.component-CICQaqz6.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-Dzz_o6fJ.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-CLUOXreG.mjs').then(m => m.DocumentListLabelConfigEditorComponent), import('./ngx-t-forms-t-workflow-picker.component-leBokXvM.mjs').then(m => m.TWorkflowPickerComponent), import('./ngx-t-forms-editor-js-input.component-BQL0AH7H.mjs').then(m => m.EditorJsInputComponent), import('./ngx-t-forms-record-list-manager.component-CUMMvMch.mjs').then(m => m.RecordListManagerComponent), import('./ngx-t-forms-form-payload-projection.component-CDkTuX9S.mjs').then(m => m.FormPayloadProjectionComponent), import('./ngx-t-forms-input-custom.component-BkbHFAyR.mjs').then(m => m.InputCustomComponent), i1$1.NgControlStatus, i1$1.RequiredValidator, i1$1.NgModel, import('./ngx-t-forms-map-mat-options-keys-B6hJ7Io5.mjs').then(m => m.MapMatOptionsKeys), import('@angular/common').then(m => m.AsyncPipe)]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TDynamicDataEditComponent, isStandalone: true, selector: "lib-t-dynamic-data-edit", inputs: { editorConfig: { classPropertyName: "editorConfig", publicName: "editorConfig", isSignal: true, isRequired: false, transformFunction: null }, formInputs: { classPropertyName: "formInputs", publicName: "formInputs", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, validationErrors: { classPropertyName: "validationErrors", publicName: "validationErrors", isSignal: true, isRequired: false, transformFunction: null }, mscoaSaveCustomInput: { classPropertyName: "mscoaSaveCustomInput", publicName: "mscoaSaveCustomInput", isSignal: true, isRequired: false, transformFunction: null }, mscoaEditInput: { classPropertyName: "mscoaEditInput", publicName: "mscoaEditInput", isSignal: true, isRequired: false, transformFunction: null }, mscoaDeleteInput: { classPropertyName: "mscoaDeleteInput", publicName: "mscoaDeleteInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", blur: "blur" }, providers: [{ provide: NESTED_EDITOR_COMPONENT, useValue: TDynamicDataEditComponent }], ngImport: i0, template: "@defer {\n@if (( vm$ |async); as vm) {\n\n    @if (vm.isFormFieldControl) {\n    <!-- Editor types that resolve to a MatFormFieldControl render inside the field. -->\n    <mat-form-field appearance=\"outline\" [color]=\"((validationErrors())||[]).length>0 ? 'warn' : 'primary'\"\n        [floatLabel]=\"'always'\" [subscriptSizing]=\"'dynamic'\" [hintLabel]=\"vm.editorConfigValue?.hint||''\">\n        <mat-label> {{ (vm. editorConfigValue)?.label }} </mat-label>\n        @switch ((vm. editorConfigValue)?.editType) {\n        @default {\n            <lib-input-custom\n             [id]=\"((vm.editorConfigValue)?.id)\"\n             [inputConfig]=\"$any(vm.inputConfig)\"\n            [placeholder]=\"(vm.  editorConfigValue)?.placeholder ||'Enter value'\"\n            [required]=\"!!(vm.  editorConfigValue)?.required\"\n            [disabled]=\"!!(vm.disabled)\"\n             [ngModel]=\"(vm.value)\"\n             (blur)=\"elementBlur($event)\"\n            (input)=\"inputChange($event)\" ></lib-input-custom>\n\n\n        }\n        @case ( elementEditorTypes.Toggle) {\n        <lib-mat-slider-toggle-editor\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [name]=\"((vm.  editorConfigValue)?.name||'') \"\n            [label]=\"((vm.  editorConfigValue)?.label||'')\" [disabled]=\"(vm.disabled)||false\"\n            (valueChange)=\"valueChanged(!!$event)\" [value]=\"$any(vm.value)\" [errors]=\"(validationErrors())||[]\">\n        </lib-mat-slider-toggle-editor>\n\n        }\n\n        @case (elementEditorTypes.Range) {\n\n\n        <lib-mat-slider-editor\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [format]=\"(  vm.editorConfigValue)?.format \" [formatLabel]=\" formatLabel\"\n            [disabled]=\"(vm.disabled)||false\" [max]=\"(  vm.editorConfigValue)?.max || 100\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" [min]=\"(  vm.editorConfigValue)?.min || 0\"\n            (valueChange)=\"inputChange($event)\" [step]=\"(  vm.editorConfigValue)?.step || 1\">\n\n\n        </lib-mat-slider-editor>\n\n\n\n        }\n\n        @case (elementEditorTypes.OptionSelect) {\n\n        <mat-select\n\n        [value]=\"$any(vm.value)\" (selectionChange)=\"valueChanged($event.value)\"\n            [disabled]=\"(vm.disabled)||false\">\n            @for(option of ( vm.editorConfigValue)?.options || vm.dataOptions;track option.value){\n            <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\n            }\n        </mat-select>\n\n        }\n\n        @case (elementEditorTypes.RichTextEditor) {\n        <lib-editor-js-input\n\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [value]=\"$any(vm.value)\" (valueChanged)=\"valueChanged($event)\"\n            [disabled]=\"(vm.disabled)||false\" [inputConfig]=\"$any(data())\">\n        </lib-editor-js-input>\n        }\n\n        @case (elementEditorTypes.MongoPipelineBuilder) {\n\n        <lib-pipeline-generator [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" [getWorkflowOptions]=\"getWorkflowOptions$\"\n            (valueChanged)=\"valueChanged($event)\"></lib-pipeline-generator>\n\n        }\n        @case (elementEditorTypes.MapMatOptionsKeys) {\n        <lib-map-mat-options-keys [disabled]=\"(vm.disabled)||false\"\n            [value]=\"$any(vm.value)\"\n            [formInputs]=\"formInputs() || []\"\n            [mapToData]=\"vm.dataOptions\"\n            [errors]=\"(validationErrors())||[]\"\n            (valueChanged)=\"valueChanged($event)\">\n        </lib-map-mat-options-keys>\n\n        }\n\n        @case(elementEditorTypes.CalculatedFieldRules){\n\n        <lib-calculated-field-rules [formInputs]=\"formInputs() ||[]\" [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" (valueChanged)=\"valueChanged($event)\"\n            [mapToData]=\"vm.dataOptions\"></lib-calculated-field-rules>\n        }\n\n        @case(elementEditorTypes.Validators){\n\n        <lib-validators-config [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" (valueChanged)=\"valueChanged($event)\" [formInputs]=\"formInputs() ||[]\"\n            [mapToData]=\"vm.dataOptions\">\n        </lib-validators-config>\n\n        }\n        @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\n\n        <lib-config-mscoa-additional-inputs [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" [getMscoaTree]=\"getMscoaTree$\" [mapToData]=\"vm.dataOptions\"\n            (valueChanged)=\"valueChanged($event)\">\n        </lib-config-mscoa-additional-inputs>\n\n        }\n        @case (elementEditorTypes.DataSourcePicker) {\n        <lib-data-source-picker   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm.  editorConfigValue\"\n            (valueChange)=\"valueChanged($event)\" [formInputs]=\"formInputs() ||[]\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\">\n        </lib-data-source-picker>\n        }\n        @case (elementEditorTypes.ListLabelConfigEditor) {\n        <lib-document-list-label-config-editor\n        [id]=\"((vm.editorConfigValue)?.id)\"\n         [formInputs]=\"formInputs() ||[]\"\n         [disabled]=\"(vm.disabled)||false\"\n         [editorConfig]=\"vm.  editorConfigValue\"\n            (valueChange)=\"valueChanged($event)\"\n            [value]=\"$any(vm.value)\" [mapToData]=\"vm.dataOptions\"\n            [errors]=\"(validationErrors())||[]\">\n\n        </lib-document-list-label-config-editor>\n        }\n        @case(\n        elementEditorTypes.WorkflowPicker\n        ){\n        <lib-t-workflow-picker  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [getWorkflowOptions]=\"getWorkflowOptions$\"\n            (valueChanged)=\"valueChanged($event)\" [value]=\"$any(vm.value)\" [errors]=\"(validationErrors())||[]\"></lib-t-workflow-picker>\n        }\n        @case (\n        elementEditorTypes.RecordListManager\n        ) {\n        <lib-record-list-manager\n        [id]=\"((vm.editorConfigValue)?.id)\"\n        [editorConfig]=\"vm.editorConfigValue\" [disabled]=\"(vm.disabled)||false\"\n            [formInputs]=\"formInputs() ||[]\" [mapToData]=\"vm.dataOptions\" (valueChange)=\"valueChanged($event)\"\n\n            [value]=\"$any(vm.value)\" [errors]=\"(validationErrors())||[]\"></lib-record-list-manager>\n        }\n        }\n\n        @if (vm.inputHasBlurFunction) {\n        <button [matTooltip]=\"blurFunctionTooltip((vm.editorConfigValue)?.blurHandle)\"\n            [disabled]=\"(vm.disabled)\" [color]=\"blurOff?'':'primary'\" (click)=\"blurOff=!blurOff\" matSuffix\n            mat-icon-button>\n            <mat-icon>{{\n                blurOff?'blur_off':'blur_on'\n                }}\n\n\n            </mat-icon>\n        </button>\n        }\n    </mat-form-field>\n    } @else {\n    <!-- Editor types backed by plain (signal-based) components render outside\n         the field, since they are not MatFormFieldControls. They are wrapped to\n         mirror the outline mat-form-field appearance: the fieldset draws the\n         outline, its legend is the notched floating label, and the hint renders\n         as a subscript below the box. -->\n    <div class=\"non-control-editor\">\n        <fieldset class=\"non-control-editor__field\">\n        @if ((vm. editorConfigValue)?.label) {\n        <legend class=\"non-control-editor__label\">{{ (vm. editorConfigValue)?.label }}</legend>\n        }\n        @switch ((vm. editorConfigValue)?.editType) {\n\n        @case (elementEditorTypes.ChipSelect) {\n\n        <lib-mat-chip-list-editor\n         [id]=\"((vm.editorConfigValue)?.id)\"\n         [multiple]=\"!!vm.editorConfigValue?.multipleSelection\"\n        [disabled]=\"(vm.disabled)||false\"\n            [options]=\"(vm.editorConfigValue)?.options || vm.dataOptions\"\n            [required]=\"!!( vm.editorConfigValue)?.required\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\"\n            (valueChange)=\"  valueChanged($event)\"></lib-mat-chip-list-editor>\n\n\n        }\n\n        @case (elementEditorTypes.SelectionOptions) {\n\n        <lib-selection-options-editor\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [errors]=\"(validationErrors())||[]\" [disabled]=\"(vm.disabled)||false\"\n            [options]=\"$any(vm.value) || []\" (valueChanged)=\"valueChanged($event)\"></lib-selection-options-editor>\n        }\n\n        @case (\n        elementEditorTypes.ApiCall) {\n\n        <lib-rest-api-call-setup\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\n            [httpGetDataFunction]=\"(vm.editorConfigValue)?.httpGetDataFunction\" [disabled]=\"(vm.disabled)||false\"\n            [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" (valueChanged)=\"valueChanged($event)\">\n\n        </lib-rest-api-call-setup>\n\n        }\n\n        @case (elementEditorTypes.ApiValueAccessRules) {\n\n\n\n        <lib-api-value-access-rules [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\"\n            [formInputs]=\"formInputs() ||[]\"\n\n            [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\" [mapToData]=\"vm.dataOptions\"\n            (valueChanged)=\"valueChanged($event)\">\n        </lib-api-value-access-rules>\n\n        }\n\n        @case (elementEditorTypes.FormInputSelector)\n        {\n\n        <lib-form-input-selector  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [formInputs]=\"formInputs() ||[]\"\n            [errors]=\"(validationErrors())||[]\" [value]=\"$any(vm.value) || []\" (change)=\"valueChanged($event)\">\n        </lib-form-input-selector>\n        }\n\n        @case (\n        elementEditorTypes.RequiredInputs\n        ){\n\n        <lib-required-inputs  [formInputs]=\"formInputs() ||[]\" [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" (valueChanged)=\"valueChanged($event)\">\n        </lib-required-inputs>\n        }\n\n        @case(elementEditorTypes.ConfigMscoaSegments){\n\n        <lib-mscoa-segment-config [disabled]=\"(vm.disabled)||false\"   [id]=\"((vm.editorConfigValue)?.id)\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" [getMscoaTree]=\"getMscoaTree$\" [dataValue]=\"$any(vm.dataValue)\"\n            [isCashSegmentConfig]=\"vm.editorConfigValue?.deepBind?.at(-1) === 'cashSegments'\"\n            [saveCustomInput]=\"mscoaSaveCustomInput()\"\n            [editSegmentInput]=\"mscoaEditInput()\"\n            [deleteSegmentInput]=\"mscoaDeleteInput()\"\n            [showAllSegments]=\"vm.dataOptions\" (valueChanged)=\"valueChanged($event)\"></lib-mscoa-segment-config>\n        }\n        @case (elementEditorTypes.ChipOptionsCreator) {\n        <lib-chip-options-creator-editor   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" (valueChange)=\"valueChanged($event)\"\n            [value]=\"$any(vm.value)\" [errors]=\"(validationErrors())||[]\">\n\n        </lib-chip-options-creator-editor>\n\n        }\n        @case (elementEditorTypes.FormPayloadProjection) {\n        <lib-form-payload-projection [disabled]=\"(vm.disabled)||false\" [value]=\"$any(vm.value)\"\n            [formInputs]=\"formInputs() ||[]\" [errors]=\"(validationErrors())||[]\"\n            (valueChanged)=\"valueChanged($event)\">\n        </lib-form-payload-projection>\n\n        }\n        }\n        </fieldset>\n\n        @if ((vm. editorConfigValue)?.hint) {\n        <small class=\"non-control-editor__hint\">{{ (vm. editorConfigValue)?.hint }}</small>\n        }\n    </div>\n    }\n\n    @if (!(vm.value) && (vm. editorConfigValue)?.required ) {\n    <mat-error>\n        {{ (vm. editorConfigValue)?.label }}'s  is required\n    </mat-error>}\n\n    @for (error of (validationErrors())||[]; track error.key) {\n    <mat-error style=\"    font-size: 0.75em;\n        margin-left: 14px;\n    \">\n\n        {{error.message}}</mat-error>\n    }\n\n}\n\n}@error {\n<mat-card>\n    <mat-card-content>\n\n        <span>\n            Failed to load form inputs\n        </span>\n    </mat-card-content>\n</mat-card>\n}\n\n\n\n<!-- -\n `TableConfigSetup`\n- `ConditionalInputConfig`\n- `MatrixTable`-->\n", styles: [".showItemValue{opacity:.6}.non-control-editor{display:flex;flex-direction:column;width:100%}.non-control-editor__field{margin:0;min-width:0;width:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:.75rem;border:1px solid var(--mat-sys-outline-variant, var(--mat-app-outline));border-radius:var(--mdc-outlined-text-field-container-shape, 4px)}.non-control-editor__label{padding:0 .25rem;margin-left:.5rem;font-size:.75rem;font-weight:400;line-height:1;color:var(--mat-sys-on-surface-variant, var(--mat-app-on-surface-variant, var(--mat-app-outline)))}.non-control-editor__hint{margin-top:.5rem;padding:0 .875rem;font-size:.75rem;line-height:1.5;color:var(--mat-sys-on-surface-variant, var(--mat-app-on-surface-variant, var(--mat-app-outline)))}mat-form-field{width:100%}mat-slider{width:100%}.range{display:flex;align-items:center}.elementInfo{display:flex;align-items:center;justify-content:center;padding:0;height:24px;width:24px}.infoIcon{font-size:1em;height:16px;width:16px}.toggle-label{margin-left:5px;align-items:center;display:flex;font-weight:500;line-height:normal;justify-content:space-between;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary))}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./ngx-t-forms-selection-options-editor.component-KjbZhc2u.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-B42xP3jh.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-WPUxtY7Q.mjs').then(m => m.RestApiCallSetupComponent), Promise.resolve().then(function () { return apiValueAccessRules_component; }).then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-ONbhxVSH.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-CZ21sd77.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-BhxT6tRq.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-BknyAmV_.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-Gn8exJ9a.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-CTSBrM-j.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-Bo0aDEMy.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-CcYiwx-8.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-BWisS3Em.mjs').then(m => m.MatChipListEditorComponent), i2.MatFormField, i2.MatLabel, i2.MatError, i2.MatSuffix, i8.MatSelect, i8.MatOption, i1$2.MatIconButton, i3$1.MatIcon, i5$1.MatTooltip, import('./ngx-t-forms-chip-options-creator-editor.component-d4QeVhsp.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-Ebf_if9j.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-CR6EvgJO.mjs').then(m => m.DocumentListLabelConfigEditorComponent), import('./ngx-t-forms-t-workflow-picker.component-CtavFAUq.mjs').then(m => m.TWorkflowPickerComponent), import('./ngx-t-forms-editor-js-input.component-5MD8wRj0.mjs').then(m => m.EditorJsInputComponent), import('./ngx-t-forms-record-list-manager.component-CykBq_nW.mjs').then(m => m.RecordListManagerComponent), import('./ngx-t-forms-form-payload-projection.component-Ip9ewB18.mjs').then(m => m.FormPayloadProjectionComponent), import('./ngx-t-forms-input-custom.component-Cn-KH0Lb.mjs').then(m => m.InputCustomComponent), i1$1.NgControlStatus, i1$1.RequiredValidator, i1$1.NgModel, import('./ngx-t-forms-map-mat-options-keys-CVlPdrCO.mjs').then(m => m.MapMatOptionsKeys), import('@angular/common').then(m => m.AsyncPipe)]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.12", ngImport: i0, type: TDynamicDataEditComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-selection-options-editor.component-Dhln81DL.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-C9u8zq9B.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-C_aFtdvW.mjs').then(m => m.RestApiCallSetupComponent), Promise.resolve().then(function () { return apiValueAccessRules_component; }).then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-Ch2yNcIS.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-DmNSc5aw.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-C5TPddVe.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-oGjQVGE2.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-CzisLSIP.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-CTSBrM-j.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-C0qsMfsq.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-CcYiwx-8.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-c7uZT1sr.mjs').then(m => m.MatChipListEditorComponent), import('./ngx-t-forms-chip-options-creator-editor.component-CICQaqz6.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-Dzz_o6fJ.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-CLUOXreG.mjs').then(m => m.DocumentListLabelConfigEditorComponent), import('./ngx-t-forms-t-workflow-picker.component-leBokXvM.mjs').then(m => m.TWorkflowPickerComponent), import('./ngx-t-forms-editor-js-input.component-BQL0AH7H.mjs').then(m => m.EditorJsInputComponent), import('./ngx-t-forms-record-list-manager.component-CUMMvMch.mjs').then(m => m.RecordListManagerComponent), import('./ngx-t-forms-form-payload-projection.component-CDkTuX9S.mjs').then(m => m.FormPayloadProjectionComponent), import('./ngx-t-forms-input-custom.component-BkbHFAyR.mjs').then(m => m.InputCustomComponent), import('./ngx-t-forms-map-mat-options-keys-B6hJ7Io5.mjs').then(m => m.MapMatOptionsKeys), import('@angular/common').then(m => m.AsyncPipe)], resolveMetadata: (SelectionOptionsEditorComponent, FormInputSelectorComponent, RestApiCallSetupComponent, ApiValueAccessRulesComponent, RequiredInputsComponent, PipelineGeneratorComponent, CalculatedFieldRulesComponent, ValidatorsConfigComponent, ConfigMscoaAdditionalInputsComponent, MatSliderEditorComponent, MscoaSegmentConfigComponent, MatSliderToggleEditorComponent, MatChipListEditorComponent, ChipOptionsCreatorEditorComponent, DataSourcePickerComponent, DocumentListLabelConfigEditorComponent, TWorkflowPickerComponent, EditorJsInputComponent, RecordListManagerComponent, FormPayloadProjectionComponent, InputCustomComponent, MapMatOptionsKeys, AsyncPipe) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.12", ngImport: i0, type: TDynamicDataEditComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-selection-options-editor.component-KjbZhc2u.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-B42xP3jh.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-WPUxtY7Q.mjs').then(m => m.RestApiCallSetupComponent), Promise.resolve().then(function () { return apiValueAccessRules_component; }).then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-ONbhxVSH.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-CZ21sd77.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-BhxT6tRq.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-BknyAmV_.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-Gn8exJ9a.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-CTSBrM-j.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-Bo0aDEMy.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-CcYiwx-8.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-BWisS3Em.mjs').then(m => m.MatChipListEditorComponent), import('./ngx-t-forms-chip-options-creator-editor.component-d4QeVhsp.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-Ebf_if9j.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-CR6EvgJO.mjs').then(m => m.DocumentListLabelConfigEditorComponent), import('./ngx-t-forms-t-workflow-picker.component-CtavFAUq.mjs').then(m => m.TWorkflowPickerComponent), import('./ngx-t-forms-editor-js-input.component-5MD8wRj0.mjs').then(m => m.EditorJsInputComponent), import('./ngx-t-forms-record-list-manager.component-CykBq_nW.mjs').then(m => m.RecordListManagerComponent), import('./ngx-t-forms-form-payload-projection.component-Ip9ewB18.mjs').then(m => m.FormPayloadProjectionComponent), import('./ngx-t-forms-input-custom.component-Cn-KH0Lb.mjs').then(m => m.InputCustomComponent), import('./ngx-t-forms-map-mat-options-keys-CVlPdrCO.mjs').then(m => m.MapMatOptionsKeys), import('@angular/common').then(m => m.AsyncPipe)], resolveMetadata: (SelectionOptionsEditorComponent, FormInputSelectorComponent, RestApiCallSetupComponent, ApiValueAccessRulesComponent, RequiredInputsComponent, PipelineGeneratorComponent, CalculatedFieldRulesComponent, ValidatorsConfigComponent, ConfigMscoaAdditionalInputsComponent, MatSliderEditorComponent, MscoaSegmentConfigComponent, MatSliderToggleEditorComponent, MatChipListEditorComponent, ChipOptionsCreatorEditorComponent, DataSourcePickerComponent, DocumentListLabelConfigEditorComponent, TWorkflowPickerComponent, EditorJsInputComponent, RecordListManagerComponent, FormPayloadProjectionComponent, InputCustomComponent, MapMatOptionsKeys, AsyncPipe) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'lib-t-dynamic-data-edit', imports: [
                             AsyncPipe,
@@ -13218,8 +13695,8 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.12", n
                             InputCustomComponent,
                             FormsModule,
                             MapMatOptionsKeys,
-                        ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NESTED_EDITOR_COMPONENT, useValue: TDynamicDataEditComponent }], template: "@defer {\n@if (( vm$ |async); as vm) {\n\n    @if (vm.isFormFieldControl) {\n    <!-- Editor types that resolve to a MatFormFieldControl render inside the field. -->\n    <mat-form-field appearance=\"outline\" [color]=\"((validationErrors())||[]).length>0 ? 'warn' : 'primary'\"\n        [floatLabel]=\"'always'\" [subscriptSizing]=\"'dynamic'\" [hintLabel]=\"vm.editorConfigValue?.hint||''\">\n        <mat-label> {{ (vm. editorConfigValue)?.label }} </mat-label>\n        @switch ((vm. editorConfigValue)?.editType) {\n        @default {\n            <lib-input-custom\n             [id]=\"((vm.editorConfigValue)?.id)\"\n             [inputConfig]=\"$any(vm.inputConfig)\"\n            [placeholder]=\"(vm.  editorConfigValue)?.placeholder ||'Enter value'\"\n            [required]=\"!!(vm.  editorConfigValue)?.required\"\n            [disabled]=\"!!(vm.disabled)\"\n             [ngModel]=\"(vm.value)\"\n             (blur)=\"elementBlur($event)\"\n            (input)=\"inputChange($event)\" ></lib-input-custom>\n\n\n        }\n        @case ( elementEditorTypes.Toggle) {\n        <lib-mat-slider-toggle-editor\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [name]=\"((vm.  editorConfigValue)?.name||'') \"\n            [label]=\"((vm.  editorConfigValue)?.label||'')\" [disabled]=\"(vm.disabled)||false\"\n            (valueChange)=\"valueChanged(!!$event)\" [value]=\"$any(vm.value)\" [errors]=\"(validationErrors())||[]\">\n        </lib-mat-slider-toggle-editor>\n\n        }\n\n        @case (elementEditorTypes.Range) {\n\n\n        <lib-mat-slider-editor\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [format]=\"(  vm.editorConfigValue)?.format \" [formatLabel]=\" formatLabel\"\n            [disabled]=\"(vm.disabled)||false\" [max]=\"(  vm.editorConfigValue)?.max || 100\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" [min]=\"(  vm.editorConfigValue)?.min || 0\"\n            (valueChange)=\"inputChange($event)\" [step]=\"(  vm.editorConfigValue)?.step || 1\">\n\n\n        </lib-mat-slider-editor>\n\n\n\n        }\n\n        @case (elementEditorTypes.OptionSelect) {\n\n        <mat-select\n\n        [value]=\"$any(vm.value)\" (selectionChange)=\"valueChanged($event.value)\"\n            [disabled]=\"(vm.disabled)||false\">\n            @for(option of ( vm.editorConfigValue)?.options || vm.dataOptions;track option.value){\n            <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\n            }\n        </mat-select>\n\n        }\n\n        @case (elementEditorTypes.RichTextEditor) {\n        <lib-editor-js-input\n\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [value]=\"$any(vm.value)\" (valueChanged)=\"valueChanged($event)\"\n            [disabled]=\"(vm.disabled)||false\" [inputConfig]=\"$any(data())\">\n        </lib-editor-js-input>\n        }\n\n        @case (elementEditorTypes.MongoPipelineBuilder) {\n\n        <lib-pipeline-generator [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" [getWorkflowOptions]=\"getWorkflowOptions$\"\n            (valueChanged)=\"valueChanged($event)\"></lib-pipeline-generator>\n\n        }\n        @case (elementEditorTypes.MapMatOptionsKeys) {\n        <lib-map-mat-options-keys [disabled]=\"(vm.disabled)||false\"\n            [value]=\"$any(vm.value)\"\n            [formInputs]=\"formInputs() || []\"\n            [mapToData]=\"vm.dataOptions\"\n            [errors]=\"(validationErrors())||[]\"\n            (valueChanged)=\"valueChanged($event)\">\n        </lib-map-mat-options-keys>\n\n        }\n\n        @case(elementEditorTypes.CalculatedFieldRules){\n\n        <lib-calculated-field-rules [formInputs]=\"formInputs() ||[]\" [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" (valueChanged)=\"valueChanged($event)\"\n            [mapToData]=\"vm.dataOptions\"></lib-calculated-field-rules>\n        }\n\n        @case(elementEditorTypes.Validators){\n\n        <lib-validators-config [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" (valueChanged)=\"valueChanged($event)\" [formInputs]=\"formInputs() ||[]\"\n            [mapToData]=\"vm.dataOptions\">\n        </lib-validators-config>\n\n        }\n        @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\n\n        <lib-config-mscoa-additional-inputs [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" [getMscoaTree]=\"getMscoaTree$\" [mapToData]=\"vm.dataOptions\"\n            (valueChanged)=\"valueChanged($event)\">\n        </lib-config-mscoa-additional-inputs>\n\n        }\n        @case (elementEditorTypes.DataSourcePicker) {\n        <lib-data-source-picker   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm.  editorConfigValue\"\n            (valueChange)=\"valueChanged($event)\" [formInputs]=\"formInputs() ||[]\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\">\n        </lib-data-source-picker>\n        }\n        @case (elementEditorTypes.ListLabelConfigEditor) {\n        <lib-document-list-label-config-editor\n        [id]=\"((vm.editorConfigValue)?.id)\"\n         [formInputs]=\"formInputs() ||[]\"\n         [disabled]=\"(vm.disabled)||false\"\n         [editorConfig]=\"vm.  editorConfigValue\"\n            (valueChange)=\"valueChanged($event)\"\n            [value]=\"$any(vm.value)\" [mapToData]=\"vm.dataOptions\"\n            [errors]=\"(validationErrors())||[]\">\n\n        </lib-document-list-label-config-editor>\n        }\n        @case(\n        elementEditorTypes.WorkflowPicker\n        ){\n        <lib-t-workflow-picker  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [getWorkflowOptions]=\"getWorkflowOptions$\"\n            (valueChanged)=\"valueChanged($event)\" [value]=\"$any(vm.value)\" [errors]=\"(validationErrors())||[]\"></lib-t-workflow-picker>\n        }\n        @case (\n        elementEditorTypes.RecordListManager\n        ) {\n        <lib-record-list-manager\n        [id]=\"((vm.editorConfigValue)?.id)\"\n        [editorConfig]=\"vm.editorConfigValue\" [disabled]=\"(vm.disabled)||false\"\n            [formInputs]=\"formInputs() ||[]\" [mapToData]=\"vm.dataOptions\" (valueChange)=\"valueChanged($event)\"\n\n            [value]=\"$any(vm.value)\" [errors]=\"(validationErrors())||[]\"></lib-record-list-manager>\n        }\n        }\n\n        @if (vm.inputHasBlurFunction) {\n        <button [matTooltip]=\"blurFunctionTooltip((vm.editorConfigValue)?.blurHandle)\"\n            [disabled]=\"(vm.disabled)\" [color]=\"blurOff?'':'primary'\" (click)=\"blurOff=!blurOff\" matSuffix\n            mat-icon-button>\n            <mat-icon>{{\n                blurOff?'blur_off':'blur_on'\n                }}\n\n\n            </mat-icon>\n        </button>\n        }\n    </mat-form-field>\n    } @else {\n    <!-- Editor types backed by plain (signal-based) components render outside\n         the field, since they are not MatFormFieldControls. They are wrapped to\n         mirror the outline mat-form-field appearance: the fieldset draws the\n         outline, its legend is the notched floating label, and the hint renders\n         as a subscript below the box. -->\n    <div class=\"non-control-editor\">\n        <fieldset class=\"non-control-editor__field\">\n        @if ((vm. editorConfigValue)?.label) {\n        <legend class=\"non-control-editor__label\">{{ (vm. editorConfigValue)?.label }}</legend>\n        }\n        @switch ((vm. editorConfigValue)?.editType) {\n\n        @case (elementEditorTypes.ChipSelect) {\n\n        <lib-mat-chip-list-editor\n         [id]=\"((vm.editorConfigValue)?.id)\"\n         [multiple]=\"!!vm.editorConfigValue?.multipleSelection\"\n        [disabled]=\"(vm.disabled)||false\"\n            [options]=\"(vm.editorConfigValue)?.options || vm.dataOptions\"\n            [required]=\"!!( vm.editorConfigValue)?.required\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\"\n            (valueChange)=\"  valueChanged($event)\"></lib-mat-chip-list-editor>\n\n\n        }\n\n        @case (elementEditorTypes.SelectionOptions) {\n\n        <lib-selection-options-editor\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [errors]=\"(validationErrors())||[]\" [disabled]=\"(vm.disabled)||false\"\n            [options]=\"$any(vm.value) || []\" (valueChanged)=\"valueChanged($event)\"></lib-selection-options-editor>\n        }\n\n        @case (\n        elementEditorTypes.ApiCall) {\n\n        <lib-rest-api-call-setup\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\n            [httpGetDataFunction]=\"(vm.editorConfigValue)?.httpGetDataFunction\" [disabled]=\"(vm.disabled)||false\"\n            [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" (valueChanged)=\"valueChanged($event)\">\n\n        </lib-rest-api-call-setup>\n\n        }\n\n        @case (elementEditorTypes.ApiValueAccessRules) {\n\n\n\n        <lib-api-value-access-rules [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\"\n            [formInputs]=\"formInputs() ||[]\"\n\n            [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\" [mapToData]=\"vm.dataOptions\"\n            (valueChanged)=\"valueChanged($event)\">\n        </lib-api-value-access-rules>\n\n        }\n\n        @case (elementEditorTypes.FormInputSelector)\n        {\n\n        <lib-form-input-selector  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [formInputs]=\"formInputs() ||[]\"\n            [errors]=\"(validationErrors())||[]\" [value]=\"$any(vm.value) || []\" (change)=\"valueChanged($event)\">\n        </lib-form-input-selector>\n        }\n\n        @case (\n        elementEditorTypes.RequiredInputs\n        ){\n\n        <lib-required-inputs  [formInputs]=\"formInputs() ||[]\" [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" (valueChanged)=\"valueChanged($event)\">\n        </lib-required-inputs>\n        }\n\n        @case(elementEditorTypes.ConfigMscoaSegments){\n\n        <lib-mscoa-segment-config [disabled]=\"(vm.disabled)||false\"   [id]=\"((vm.editorConfigValue)?.id)\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" [getMscoaTree]=\"getMscoaTree$\" [dataValue]=\"$any(vm.dataValue)\"\n            [isCashSegmentConfig]=\"vm.editorConfigValue?.deepBind?.at(-1) === 'cashSegments'\"\n            [showAllSegments]=\"vm.dataOptions\" (valueChanged)=\"valueChanged($event)\"></lib-mscoa-segment-config>\n        }\n        @case (elementEditorTypes.ChipOptionsCreator) {\n        <lib-chip-options-creator-editor   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" (valueChange)=\"valueChanged($event)\"\n            [value]=\"$any(vm.value)\" [errors]=\"(validationErrors())||[]\">\n\n        </lib-chip-options-creator-editor>\n\n        }\n        @case (elementEditorTypes.FormPayloadProjection) {\n        <lib-form-payload-projection [disabled]=\"(vm.disabled)||false\" [value]=\"$any(vm.value)\"\n            [formInputs]=\"formInputs() ||[]\" [errors]=\"(validationErrors())||[]\"\n            (valueChanged)=\"valueChanged($event)\">\n        </lib-form-payload-projection>\n\n        }\n        }\n        </fieldset>\n\n        @if ((vm. editorConfigValue)?.hint) {\n        <small class=\"non-control-editor__hint\">{{ (vm. editorConfigValue)?.hint }}</small>\n        }\n    </div>\n    }\n\n    @if (!(vm.value) && (vm. editorConfigValue)?.required ) {\n    <mat-error>\n        {{ (vm. editorConfigValue)?.label }}'s  is required\n    </mat-error>}\n\n    @for (error of (validationErrors())||[]; track error.key) {\n    <mat-error style=\"    font-size: 0.75em;\n        margin-left: 14px;\n    \">\n\n        {{error.message}}</mat-error>\n    }\n\n}\n\n}@error {\n<mat-card>\n    <mat-card-content>\n\n        <span>\n            Failed to load form inputs\n        </span>\n    </mat-card-content>\n</mat-card>\n}\n\n\n\n<!-- -\n `TableConfigSetup`\n- `ConditionalInputConfig`\n- `MatrixTable`-->\n", styles: [".showItemValue{opacity:.6}.non-control-editor{display:flex;flex-direction:column;width:100%}.non-control-editor__field{margin:0;min-width:0;width:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:.75rem;border:1px solid var(--mat-sys-outline-variant, var(--mat-app-outline));border-radius:var(--mdc-outlined-text-field-container-shape, 4px)}.non-control-editor__label{padding:0 .25rem;margin-left:.5rem;font-size:.75rem;font-weight:400;line-height:1;color:var(--mat-sys-on-surface-variant, var(--mat-app-on-surface-variant, var(--mat-app-outline)))}.non-control-editor__hint{margin-top:.5rem;padding:0 .875rem;font-size:.75rem;line-height:1.5;color:var(--mat-sys-on-surface-variant, var(--mat-app-on-surface-variant, var(--mat-app-outline)))}mat-form-field{width:100%}mat-slider{width:100%}.range{display:flex;align-items:center}.elementInfo{display:flex;align-items:center;justify-content:center;padding:0;height:24px;width:24px}.infoIcon{font-size:1em;height:16px;width:16px}.toggle-label{margin-left:5px;align-items:center;display:flex;font-weight:500;line-height:normal;justify-content:space-between;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary))}\n"] }]
-            }], ctorParameters: null, propDecorators: { editorConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "editorConfig", required: false }] }], formInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputs", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], validationErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationErrors", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], blur: [{ type: i0.Output, args: ["blur"] }] } }) });
+                        ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NESTED_EDITOR_COMPONENT, useValue: TDynamicDataEditComponent }], template: "@defer {\n@if (( vm$ |async); as vm) {\n\n    @if (vm.isFormFieldControl) {\n    <!-- Editor types that resolve to a MatFormFieldControl render inside the field. -->\n    <mat-form-field appearance=\"outline\" [color]=\"((validationErrors())||[]).length>0 ? 'warn' : 'primary'\"\n        [floatLabel]=\"'always'\" [subscriptSizing]=\"'dynamic'\" [hintLabel]=\"vm.editorConfigValue?.hint||''\">\n        <mat-label> {{ (vm. editorConfigValue)?.label }} </mat-label>\n        @switch ((vm. editorConfigValue)?.editType) {\n        @default {\n            <lib-input-custom\n             [id]=\"((vm.editorConfigValue)?.id)\"\n             [inputConfig]=\"$any(vm.inputConfig)\"\n            [placeholder]=\"(vm.  editorConfigValue)?.placeholder ||'Enter value'\"\n            [required]=\"!!(vm.  editorConfigValue)?.required\"\n            [disabled]=\"!!(vm.disabled)\"\n             [ngModel]=\"(vm.value)\"\n             (blur)=\"elementBlur($event)\"\n            (input)=\"inputChange($event)\" ></lib-input-custom>\n\n\n        }\n        @case ( elementEditorTypes.Toggle) {\n        <lib-mat-slider-toggle-editor\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [name]=\"((vm.  editorConfigValue)?.name||'') \"\n            [label]=\"((vm.  editorConfigValue)?.label||'')\" [disabled]=\"(vm.disabled)||false\"\n            (valueChange)=\"valueChanged(!!$event)\" [value]=\"$any(vm.value)\" [errors]=\"(validationErrors())||[]\">\n        </lib-mat-slider-toggle-editor>\n\n        }\n\n        @case (elementEditorTypes.Range) {\n\n\n        <lib-mat-slider-editor\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [format]=\"(  vm.editorConfigValue)?.format \" [formatLabel]=\" formatLabel\"\n            [disabled]=\"(vm.disabled)||false\" [max]=\"(  vm.editorConfigValue)?.max || 100\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" [min]=\"(  vm.editorConfigValue)?.min || 0\"\n            (valueChange)=\"inputChange($event)\" [step]=\"(  vm.editorConfigValue)?.step || 1\">\n\n\n        </lib-mat-slider-editor>\n\n\n\n        }\n\n        @case (elementEditorTypes.OptionSelect) {\n\n        <mat-select\n\n        [value]=\"$any(vm.value)\" (selectionChange)=\"valueChanged($event.value)\"\n            [disabled]=\"(vm.disabled)||false\">\n            @for(option of ( vm.editorConfigValue)?.options || vm.dataOptions;track option.value){\n            <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\n            }\n        </mat-select>\n\n        }\n\n        @case (elementEditorTypes.RichTextEditor) {\n        <lib-editor-js-input\n\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [value]=\"$any(vm.value)\" (valueChanged)=\"valueChanged($event)\"\n            [disabled]=\"(vm.disabled)||false\" [inputConfig]=\"$any(data())\">\n        </lib-editor-js-input>\n        }\n\n        @case (elementEditorTypes.MongoPipelineBuilder) {\n\n        <lib-pipeline-generator [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" [getWorkflowOptions]=\"getWorkflowOptions$\"\n            (valueChanged)=\"valueChanged($event)\"></lib-pipeline-generator>\n\n        }\n        @case (elementEditorTypes.MapMatOptionsKeys) {\n        <lib-map-mat-options-keys [disabled]=\"(vm.disabled)||false\"\n            [value]=\"$any(vm.value)\"\n            [formInputs]=\"formInputs() || []\"\n            [mapToData]=\"vm.dataOptions\"\n            [errors]=\"(validationErrors())||[]\"\n            (valueChanged)=\"valueChanged($event)\">\n        </lib-map-mat-options-keys>\n\n        }\n\n        @case(elementEditorTypes.CalculatedFieldRules){\n\n        <lib-calculated-field-rules [formInputs]=\"formInputs() ||[]\" [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" (valueChanged)=\"valueChanged($event)\"\n            [mapToData]=\"vm.dataOptions\"></lib-calculated-field-rules>\n        }\n\n        @case(elementEditorTypes.Validators){\n\n        <lib-validators-config [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" (valueChanged)=\"valueChanged($event)\" [formInputs]=\"formInputs() ||[]\"\n            [mapToData]=\"vm.dataOptions\">\n        </lib-validators-config>\n\n        }\n        @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\n\n        <lib-config-mscoa-additional-inputs [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" [getMscoaTree]=\"getMscoaTree$\" [mapToData]=\"vm.dataOptions\"\n            (valueChanged)=\"valueChanged($event)\">\n        </lib-config-mscoa-additional-inputs>\n\n        }\n        @case (elementEditorTypes.DataSourcePicker) {\n        <lib-data-source-picker   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm.  editorConfigValue\"\n            (valueChange)=\"valueChanged($event)\" [formInputs]=\"formInputs() ||[]\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\">\n        </lib-data-source-picker>\n        }\n        @case (elementEditorTypes.ListLabelConfigEditor) {\n        <lib-document-list-label-config-editor\n        [id]=\"((vm.editorConfigValue)?.id)\"\n         [formInputs]=\"formInputs() ||[]\"\n         [disabled]=\"(vm.disabled)||false\"\n         [editorConfig]=\"vm.  editorConfigValue\"\n            (valueChange)=\"valueChanged($event)\"\n            [value]=\"$any(vm.value)\" [mapToData]=\"vm.dataOptions\"\n            [errors]=\"(validationErrors())||[]\">\n\n        </lib-document-list-label-config-editor>\n        }\n        @case(\n        elementEditorTypes.WorkflowPicker\n        ){\n        <lib-t-workflow-picker  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [getWorkflowOptions]=\"getWorkflowOptions$\"\n            (valueChanged)=\"valueChanged($event)\" [value]=\"$any(vm.value)\" [errors]=\"(validationErrors())||[]\"></lib-t-workflow-picker>\n        }\n        @case (\n        elementEditorTypes.RecordListManager\n        ) {\n        <lib-record-list-manager\n        [id]=\"((vm.editorConfigValue)?.id)\"\n        [editorConfig]=\"vm.editorConfigValue\" [disabled]=\"(vm.disabled)||false\"\n            [formInputs]=\"formInputs() ||[]\" [mapToData]=\"vm.dataOptions\" (valueChange)=\"valueChanged($event)\"\n\n            [value]=\"$any(vm.value)\" [errors]=\"(validationErrors())||[]\"></lib-record-list-manager>\n        }\n        }\n\n        @if (vm.inputHasBlurFunction) {\n        <button [matTooltip]=\"blurFunctionTooltip((vm.editorConfigValue)?.blurHandle)\"\n            [disabled]=\"(vm.disabled)\" [color]=\"blurOff?'':'primary'\" (click)=\"blurOff=!blurOff\" matSuffix\n            mat-icon-button>\n            <mat-icon>{{\n                blurOff?'blur_off':'blur_on'\n                }}\n\n\n            </mat-icon>\n        </button>\n        }\n    </mat-form-field>\n    } @else {\n    <!-- Editor types backed by plain (signal-based) components render outside\n         the field, since they are not MatFormFieldControls. They are wrapped to\n         mirror the outline mat-form-field appearance: the fieldset draws the\n         outline, its legend is the notched floating label, and the hint renders\n         as a subscript below the box. -->\n    <div class=\"non-control-editor\">\n        <fieldset class=\"non-control-editor__field\">\n        @if ((vm. editorConfigValue)?.label) {\n        <legend class=\"non-control-editor__label\">{{ (vm. editorConfigValue)?.label }}</legend>\n        }\n        @switch ((vm. editorConfigValue)?.editType) {\n\n        @case (elementEditorTypes.ChipSelect) {\n\n        <lib-mat-chip-list-editor\n         [id]=\"((vm.editorConfigValue)?.id)\"\n         [multiple]=\"!!vm.editorConfigValue?.multipleSelection\"\n        [disabled]=\"(vm.disabled)||false\"\n            [options]=\"(vm.editorConfigValue)?.options || vm.dataOptions\"\n            [required]=\"!!( vm.editorConfigValue)?.required\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\"\n            (valueChange)=\"  valueChanged($event)\"></lib-mat-chip-list-editor>\n\n\n        }\n\n        @case (elementEditorTypes.SelectionOptions) {\n\n        <lib-selection-options-editor\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [errors]=\"(validationErrors())||[]\" [disabled]=\"(vm.disabled)||false\"\n            [options]=\"$any(vm.value) || []\" (valueChanged)=\"valueChanged($event)\"></lib-selection-options-editor>\n        }\n\n        @case (\n        elementEditorTypes.ApiCall) {\n\n        <lib-rest-api-call-setup\n         [id]=\"((vm.editorConfigValue)?.id)\"\n        [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\n            [httpGetDataFunction]=\"(vm.editorConfigValue)?.httpGetDataFunction\" [disabled]=\"(vm.disabled)||false\"\n            [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" (valueChanged)=\"valueChanged($event)\">\n\n        </lib-rest-api-call-setup>\n\n        }\n\n        @case (elementEditorTypes.ApiValueAccessRules) {\n\n\n\n        <lib-api-value-access-rules [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\"\n            [formInputs]=\"formInputs() ||[]\"\n\n            [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\" [mapToData]=\"vm.dataOptions\"\n            (valueChanged)=\"valueChanged($event)\">\n        </lib-api-value-access-rules>\n\n        }\n\n        @case (elementEditorTypes.FormInputSelector)\n        {\n\n        <lib-form-input-selector  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [formInputs]=\"formInputs() ||[]\"\n            [errors]=\"(validationErrors())||[]\" [value]=\"$any(vm.value) || []\" (change)=\"valueChanged($event)\">\n        </lib-form-input-selector>\n        }\n\n        @case (\n        elementEditorTypes.RequiredInputs\n        ){\n\n        <lib-required-inputs  [formInputs]=\"formInputs() ||[]\" [disabled]=\"(vm.disabled)||false\"\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" (valueChanged)=\"valueChanged($event)\">\n        </lib-required-inputs>\n        }\n\n        @case(elementEditorTypes.ConfigMscoaSegments){\n\n        <lib-mscoa-segment-config [disabled]=\"(vm.disabled)||false\"   [id]=\"((vm.editorConfigValue)?.id)\" [value]=\"$any(vm.value)\"\n            [errors]=\"(validationErrors())||[]\" [getMscoaTree]=\"getMscoaTree$\" [dataValue]=\"$any(vm.dataValue)\"\n            [isCashSegmentConfig]=\"vm.editorConfigValue?.deepBind?.at(-1) === 'cashSegments'\"\n            [saveCustomInput]=\"mscoaSaveCustomInput()\"\n            [editSegmentInput]=\"mscoaEditInput()\"\n            [deleteSegmentInput]=\"mscoaDeleteInput()\"\n            [showAllSegments]=\"vm.dataOptions\" (valueChanged)=\"valueChanged($event)\"></lib-mscoa-segment-config>\n        }\n        @case (elementEditorTypes.ChipOptionsCreator) {\n        <lib-chip-options-creator-editor   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" (valueChange)=\"valueChanged($event)\"\n            [value]=\"$any(vm.value)\" [errors]=\"(validationErrors())||[]\">\n\n        </lib-chip-options-creator-editor>\n\n        }\n        @case (elementEditorTypes.FormPayloadProjection) {\n        <lib-form-payload-projection [disabled]=\"(vm.disabled)||false\" [value]=\"$any(vm.value)\"\n            [formInputs]=\"formInputs() ||[]\" [errors]=\"(validationErrors())||[]\"\n            (valueChanged)=\"valueChanged($event)\">\n        </lib-form-payload-projection>\n\n        }\n        }\n        </fieldset>\n\n        @if ((vm. editorConfigValue)?.hint) {\n        <small class=\"non-control-editor__hint\">{{ (vm. editorConfigValue)?.hint }}</small>\n        }\n    </div>\n    }\n\n    @if (!(vm.value) && (vm. editorConfigValue)?.required ) {\n    <mat-error>\n        {{ (vm. editorConfigValue)?.label }}'s  is required\n    </mat-error>}\n\n    @for (error of (validationErrors())||[]; track error.key) {\n    <mat-error style=\"    font-size: 0.75em;\n        margin-left: 14px;\n    \">\n\n        {{error.message}}</mat-error>\n    }\n\n}\n\n}@error {\n<mat-card>\n    <mat-card-content>\n\n        <span>\n            Failed to load form inputs\n        </span>\n    </mat-card-content>\n</mat-card>\n}\n\n\n\n<!-- -\n `TableConfigSetup`\n- `ConditionalInputConfig`\n- `MatrixTable`-->\n", styles: [".showItemValue{opacity:.6}.non-control-editor{display:flex;flex-direction:column;width:100%}.non-control-editor__field{margin:0;min-width:0;width:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:.75rem;border:1px solid var(--mat-sys-outline-variant, var(--mat-app-outline));border-radius:var(--mdc-outlined-text-field-container-shape, 4px)}.non-control-editor__label{padding:0 .25rem;margin-left:.5rem;font-size:.75rem;font-weight:400;line-height:1;color:var(--mat-sys-on-surface-variant, var(--mat-app-on-surface-variant, var(--mat-app-outline)))}.non-control-editor__hint{margin-top:.5rem;padding:0 .875rem;font-size:.75rem;line-height:1.5;color:var(--mat-sys-on-surface-variant, var(--mat-app-on-surface-variant, var(--mat-app-outline)))}mat-form-field{width:100%}mat-slider{width:100%}.range{display:flex;align-items:center}.elementInfo{display:flex;align-items:center;justify-content:center;padding:0;height:24px;width:24px}.infoIcon{font-size:1em;height:16px;width:16px}.toggle-label{margin-left:5px;align-items:center;display:flex;font-weight:500;line-height:normal;justify-content:space-between;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary))}\n"] }]
+            }], ctorParameters: null, propDecorators: { editorConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "editorConfig", required: false }] }], formInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputs", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], validationErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationErrors", required: false }] }], mscoaSaveCustomInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "mscoaSaveCustomInput", required: false }] }], mscoaEditInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "mscoaEditInput", required: false }] }], mscoaDeleteInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "mscoaDeleteInput", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], blur: [{ type: i0.Output, args: ["blur"] }] } }) });
 
 const isEmptyPath = (path) => path.length === 0;
 const isEmptyTree = (tree) => tree.length === 0;
@@ -13732,41 +14209,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
 const ELEMENT_REGISTRY = {
     [ElementTypes.Location]: {
         builderAware: true,
-        load: () => import('./ngx-t-forms-geo-location.component-Bosp1UzR.mjs').then(m => m.GeoLocationComponent),
+        load: () => import('./ngx-t-forms-geo-location.component-Bmd84Gcb.mjs').then(m => m.GeoLocationComponent),
     },
     [ElementTypes.AutoCompleteInput]: {
-        load: () => import('./ngx-t-forms-auto-complete-input-element.component-DCKuXHAW.mjs').then(m => m.AutoCompleteInputElementComponent),
+        load: () => import('./ngx-t-forms-auto-complete-input-element.component-CaXs4561.mjs').then(m => m.AutoCompleteInputElementComponent),
     },
     [ElementTypes.Toggle]: {
-        load: () => import('./ngx-t-forms-toggle-input-element.component-DDErRUJd.mjs').then(m => m.ToggleInputElementComponent),
+        load: () => import('./ngx-t-forms-toggle-input-element.component-Dr7MNli8.mjs').then(m => m.ToggleInputElementComponent),
     },
     [ElementTypes.Select]: {
-        load: () => import('./ngx-t-forms-select-input-element.component-DbgZdNoe.mjs').then(m => m.SelectInputElementComponent),
+        load: () => import('./ngx-t-forms-select-input-element.component-CWcywuS6.mjs').then(m => m.SelectInputElementComponent),
     },
     [ElementTypes.Textarea]: {
-        load: () => import('./ngx-t-forms-textarea-input-element.component-BEbXJjFA.mjs').then(m => m.TextareaInputElementComponent),
+        load: () => import('./ngx-t-forms-textarea-input-element.component-DkJkBQif.mjs').then(m => m.TextareaInputElementComponent),
     },
     [ElementTypes.DateRangePicker]: {
-        load: () => import('./ngx-t-forms-date-range-picker-input-element.component-CmoquQGV.mjs').then(m => m.DateRangePickerInputElementComponent),
+        load: () => import('./ngx-t-forms-date-range-picker-input-element.component-4W6uvrDU.mjs').then(m => m.DateRangePickerInputElementComponent),
     },
     [ElementTypes.DatePicker]: {
-        load: () => import('./ngx-t-forms-date-picker-input-element.component-CYUbVyzP.mjs').then(m => m.DatePickerInputElementComponent),
+        load: () => import('./ngx-t-forms-date-picker-input-element.component-kdinBGRA.mjs').then(m => m.DatePickerInputElementComponent),
     },
     [ElementTypes.FileUpload]: {
-        load: () => import('./ngx-t-forms-file-upload-input-element.component-C7mMeEjF.mjs').then(m => m.FileUploadInputElementComponent),
+        load: () => import('./ngx-t-forms-file-upload-input-element.component-BAtuymMY.mjs').then(m => m.FileUploadInputElementComponent),
     },
     [ElementTypes.ImageCapture]: {
-        load: () => import('./ngx-t-forms-image-capture-input-element.component-C1g7Z0cK.mjs').then(m => m.ImageCaptureInputElementComponent),
+        load: () => import('./ngx-t-forms-image-capture-input-element.component-CUd04Ghl.mjs').then(m => m.ImageCaptureInputElementComponent),
     },
     [ElementTypes.Editor]: {
-        load: () => import('./ngx-t-forms-editor-input-element.component-BLXlfb6F.mjs').then(m => m.EditorInputElementComponent),
+        load: () => import('./ngx-t-forms-editor-input-element.component-1X6uAPeZ.mjs').then(m => m.EditorInputElementComponent),
     },
     [ElementTypes.Signature]: {
         load: () => Promise.resolve().then(function () { return signatureInputElement_component; }).then(m => m.SignatureInputElementComponent),
     },
     [ElementTypes.MultipleInput]: {
         builderAware: true,
-        load: () => import('./ngx-t-forms-multiple-input-input-element.component-C7y1OGPx.mjs').then(m => m.MultipleInputInputElementComponent),
+        load: () => import('./ngx-t-forms-multiple-input-input-element.component-C8JP3D6r.mjs').then(m => m.MultipleInputInputElementComponent),
     },
     [ElementTypes.MscoaSelection]: {
         builderAware: true,
@@ -13774,14 +14251,14 @@ const ELEMENT_REGISTRY = {
     },
     [ElementTypes.WorkflowDocumentPicker]: {
         builderAware: true,
-        load: () => import('./ngx-t-forms-document-picker.component-qObjcqhE.mjs').then(m => m.DocumentPickerComponent),
+        load: () => import('./ngx-t-forms-document-picker.component-BThdRFec.mjs').then(m => m.DocumentPickerComponent),
     },
     [ElementTypes.WorkflowAdjudication]: {
         builderAware: true,
-        load: () => import('./ngx-t-forms-workflow-adjudication.component-CtU8dECN.mjs').then(m => m.WorkflowAdjudicationComponent),
+        load: () => import('./ngx-t-forms-workflow-adjudication.component-CPvwm7f4.mjs').then(m => m.WorkflowAdjudicationComponent),
     },
     [ElementTypes.PaginatedSelectionTable]: {
-        load: () => import('./ngx-t-forms-paginated-selection-table-AQZSMmhr.mjs').then(m => m.PaginatedSelectionTable),
+        load: () => import('./ngx-t-forms-paginated-selection-table-0OI1ikWW.mjs').then(m => m.PaginatedSelectionTable),
     },
 };
 /**
@@ -13789,7 +14266,7 @@ const ELEMENT_REGISTRY = {
  * `@default` switch branch (a basic input).
  */
 const FALLBACK_ELEMENT = {
-    load: () => import('./ngx-t-forms-basic-input-input-element.component-Ce4ipSUc.mjs').then(m => m.BasicInputInputElementComponent),
+    load: () => import('./ngx-t-forms-basic-input-input-element.component-Dotyd-Qs.mjs').then(m => m.BasicInputInputElementComponent),
 };
 /**
  * Resolves the renderer entry for a given element type, falling back to the
@@ -15590,6 +16067,9 @@ class MscoaChartComponent {
     // Form-builder functions, mirrored for dialog / portal use (read-only here).
     #formBuilderFunctions;
     #previousInputsHash;
+    // Control keys already wired to the custom-input value projection (control → store),
+    // guarding against duplicate subscriptions across input refreshes.
+    #wiredInputProjections;
     #prevValidating;
     /**
      * Gets the success message for a specific accounting basis
@@ -15691,6 +16171,9 @@ class MscoaChartComponent {
         // Form-builder functions, mirrored for dialog / portal use (read-only here).
         this.#formBuilderFunctions = undefined;
         this.#previousInputsHash = '';
+        // Control keys already wired to the custom-input value projection (control → store),
+        // guarding against duplicate subscriptions across input refreshes.
+        this.#wiredInputProjections = new Set();
         // Portal management — the portal component is loaded lazily via `import('../../../t-form-input/...')`
         // at runtime, so the eager `ComponentPortal<T>` generic cannot be tightened without breaking the
         // lazy module boundary. `ComponentPortal<T>` is invariant in T so `unknown` is not assignable from
@@ -15771,6 +16254,7 @@ class MscoaChartComponent {
         }))
             .subscribe(inputs => {
             this.setupPortals(inputs);
+            this.#wireCustomInputProjections(inputs);
             this.#cdr.markForCheck();
         });
         // Show shield icon on validated cells when validation completes (true -> false)
@@ -15884,13 +16368,62 @@ class MscoaChartComponent {
     setupPortals(inputs) {
         this.#setupPortalsInternal(inputs);
     }
+    /**
+     * Wires each standalone (account-level) custom input's `FormControl` to the
+     * store so its value is projected into the account value object as a peer of
+     * the segments — single value selection mirrors the value across debit/credit.
+     * Projects to the configured accounting basis (both for dual). `startWith`
+     * seeds the store from the control on wire-up; `distinctUntilChanged` plus the
+     * reducer's idempotency guard keep the form ⇄ store graph from oscillating.
+     * Each control is wired at most once. (Per-leg distinct entry is a later step.)
+     */
+    #wireCustomInputProjections(inputs) {
+        const formGroup = this.formGroup();
+        const mscoaId = this.inputConfig()?.id;
+        if (!formGroup || !mscoaId)
+            return;
+        const basis = this.config()?.accountingBasis;
+        const cashFlags = basis === ACCOUNTING_BASIS.CASH ? [true]
+            : basis === ACCOUNTING_BASIS.DUAL ? [false, true]
+                : [false];
+        for (const input of inputs) {
+            if (input.linkedSegmentId || !input.formControlName)
+                continue;
+            const controlKey = `${mscoaId}.${input.id}`;
+            const control = formGroup.controls[controlKey];
+            if (!control)
+                continue;
+            if (this.#wiredInputProjections.has(controlKey))
+                continue;
+            this.#wiredInputProjections.add(controlKey);
+            const inputKey = input.formControlName;
+            control.valueChanges.pipe(startWith$1(control.value), distinctUntilChanged((a, b) => _isEqual(a, b)), takeUntilDestroyed(this.#destroyRef)).subscribe(value => {
+                for (const isCash of cashFlags) {
+                    this.#store.setCustomInputValue({ inputKey, value, isCash });
+                }
+            });
+        }
+    }
     /**
      * Creates a hash of inputs array for comparison
      */
     getInputsHash(inputs) {
         if (!inputs || inputs.length === 0)
             return '';
-        return inputs.map(i => i.id).sort().join(',');
+        // Hash the FULL config, not just id/element/formControlName. A custom input's
+        // `type`, `validators`, `pattern`, `min`/`max`, calc/API rules etc. are all
+        // edited through the advanced editor WITHOUT changing element/formControlName,
+        // and each portal carries a STATIC `inputConfig` snapshot — so it must rebuild
+        // whenever ANY of those change, or the live edit silently never reaches the
+        // rendered input (it keeps behaving like a bare text field). Emissions here
+        // are config-driven (not per-keystroke), so serializing is cheap.
+        try {
+            return JSON.stringify(inputs);
+        }
+        catch {
+            // Non-serializable config (cycles): fall back to identity fields.
+            return inputs.map(i => `${i.id}:${i.element ?? ''}:${i.formControlName ?? ''}`).sort().join(',');
+        }
     }
     /**
      * Generates a consistent portal key for an input
@@ -16484,9 +17017,9 @@ class MscoaChartComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MscoaChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: MscoaChartComponent, isStandalone: true, selector: "lib-mscoa-chart", inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: true, transformFunction: null }, editorMode: { classPropertyName: "editorMode", publicName: "editorMode", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null }, formBuilderFunctions: { classPropertyName: "formBuilderFunctions", publicName: "formBuilderFunctions", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onContainerClick: "onContainerClick", interaction: "interaction" }, ngImport: i0, template: "@if ((viewData$ | async); as viewData) {\r\n<section\r\n  (click)=\"setAsTouched($event)\"\r\n  class=\"mscoa-chart__container\"\r\n  [class.mscoa-chart__container--touched]=\"touched()\"\r\n  role=\"region\"\r\n  [attr.aria-label]=\"'MSCOA Account Chart'\"\r\n  [attr.aria-busy]=\"viewData.loading || viewData.validatingValue\">\r\n\r\n  @if (viewData.loading) {\r\n    <div class=\"mscoa-chart__loading-container\" role=\"status\" aria-live=\"polite\">\r\n      <mat-spinner [diameter]=\"40\"></mat-spinner>\r\n      <span class=\"sr-only\">Loading account chart data...</span>\r\n    </div>\r\n  } @else {\r\n    @defer () {\r\n      @if (viewData.accountTreeKeys || viewData.cashAccountTreeKeys) {\r\n        <div class=\"mscoa-chart__table-container\">\r\n          @if (isDualAccountBasis) {\r\n            <div class=\"dual-basis-container\" role=\"group\" aria-label=\"Dual accounting basis tables\">\r\n              <div class=\"dual-basis-container__item\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"selectionTable;\r\n                  context: {\r\n                    accountingBasis: ACCOUNTING_BASIS.ACCRUAL,\r\n                    canCollapse: true,\r\n                    viewData: viewData\r\n                  }\">\r\n                </ng-container>\r\n              </div>\r\n\r\n              <div class=\"dual-basis-container__item\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"selectionTable;\r\n                  context: {\r\n                    accountingBasis: ACCOUNTING_BASIS.CASH,\r\n                    canCollapse: true,\r\n                    viewData: viewData\r\n                  }\">\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          } @else {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"selectionTable;\r\n              context: {\r\n                accountingBasis: config()?.accountingBasis,\r\n                canCollapse: false,\r\n                viewData: viewData\r\n              }\">\r\n            </ng-container>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <ng-template\r\n        #selectionTable\r\n        let-accountingBasis=\"accountingBasis\"\r\n        let-canCollapse=\"canCollapse\"\r\n        let-viewData=\"viewData\">\r\n\r\n        <div class=\"mscoa-chart-table\" role=\"group\" [attr.aria-label]=\"'Accounting basis: ' + (accountingBasis || 'Accrual')\">\r\n          <!-- Toolbar -->\r\n          <lib-mscoa-chart-toolbar\r\n            [accountingBasis]=\"accountingBasis\"\r\n            [canCollapse]=\"canCollapse\"\r\n            [isExpanded]=\"getExpansionState(accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\"\r\n            (toggleExpansion)=\"toggleDualBasisExpansion(accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\">\r\n          </lib-mscoa-chart-toolbar>\r\n\r\n          @if (shouldShowTable(isDualAccountBasis, getExpansionState(accountingBasis || ACCOUNTING_BASIS.ACCRUAL), accountingBasis)) {\r\n            <div class=\"account-selection-table-wrapper\">\r\n              <div\r\n                class=\"account-selection-table-container\"\r\n                [class.account-selection-table-container--accrual]=\"!accountingBasis || accountingBasis === ACCOUNTING_BASIS.ACCRUAL\"\r\n                [class.account-selection-table-container--cash]=\"accountingBasis === ACCOUNTING_BASIS.CASH\"\r\n                role=\"table\"\r\n                [attr.aria-label]=\"'Account selection table for ' + (accountingBasis || 'Accrual') + ' basis'\">\r\n\r\n              <table\r\n                mat-table\r\n                [dataSource]=\"accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashTableData : viewData.tableData\"\r\n                [trackBy]=\"trackByRow\"\r\n                class=\"table\"\r\n                [attr.aria-label]=\"'Account selection table for ' + (accountingBasis || 'Accrual') + ' basis'\"\r\n                [attr.aria-describedby]=\"'table-description-' + (accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\"\r\n                role=\"table\">\r\n                <span [id]=\"'table-description-' + (accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\" class=\"sr-only\">\r\n                  Use arrow keys to navigate between cells. Press Enter or Space to select an account.\r\n                </span>\r\n\r\n                @for (\r\n                  col of (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols);\r\n                  track trackByColumn($index, col);\r\n                  let i = $index\r\n                ) {\r\n                  <ng-container [matColumnDef]=\"col\" [sticky]=\"i === 0\">\r\n                    <!-- Header Cell -->\r\n                    <th\r\n                      mat-header-cell\r\n                      *matHeaderCellDef\r\n                      [class.table__header-cell--segment]=\"isSegmentColumn(i)\"\r\n                      [class.table__header-cell--regular]=\"!isSegmentColumn(i)\"\r\n                      [style.width.%]=\"getColumnWidthPercent(isSegmentColumn(i), (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols).length)\"\r\n                      [style.min-width.px]=\"isSegmentColumn(i) ? 150 : 200\"\r\n                      [attr.aria-sort]=\"i === 0 ? 'none' : null\"\r\n                      [attr.scope]=\"'col'\"\r\n                      [attr.aria-label]=\"getHeaderText(col, i, accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashHasMultiSelect : viewData.hasMultiSelect) + ' column'\">\r\n                      {{ getHeaderText(col, i, accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashHasMultiSelect : viewData.hasMultiSelect) | titlecase | unCamelCase }}\r\n                    </th>\r\n\r\n                    <!-- Data Cell -->\r\n                    <td\r\n                      mat-cell\r\n                      *matCellDef=\"let row\"\r\n                      [class.table__cell--segment]=\"isSegmentColumn(i)\"\r\n                      [class.table__cell--regular]=\"!isSegmentColumn(i)\"\r\n                      [class.table__cell--active]=\"editSelection?.segment === row['segment'] && activeColumn === col\"\r\n                      [class.table__cell--business-error]=\"!isSegmentColumn(i) && getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                      [attr.aria-label]=\"'Cell for ' + row['segment'] + ' segment, ' + col + ' column'\"\r\n                      [attr.aria-selected]=\"!!row[col]\"\r\n                      [attr.aria-invalid]=\"!isSegmentColumn(i) && !!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                      [attr.role]=\"'gridcell'\"\r\n                      [attr.tabindex]=\"isSegmentColumn(i) ? -1 : (row[col] ? 0 : -1)\">\r\n\r\n                      @if (isSegmentColumn(i)) {\r\n                        <!-- Segment Column -->\r\n                        <div class=\"segment-cell-content\">\r\n                          @if (editorMode() && row.innerInput?.id) {\r\n                            <button\r\n                              mat-icon-button\r\n                              [matMenuTriggerData]=\"{innerInput: row.innerInput}\"\r\n                              [matMenuTriggerFor]=\"inputMenu\"\r\n                              [matTooltip]=\"'Options for: ' + row.innerInput.label\"\r\n                              [attr.aria-label]=\"'Options menu for ' + row.innerInput.label\"\r\n                              (click)=\"$event.stopPropagation()\">\r\n                              <mat-icon>more_vert</mat-icon>\r\n                            </button>\r\n                          }\r\n                          <span class=\"segment-cell-content__label\">{{ row['label'] }}</span>\r\n                        </div>\r\n                      } @else {\r\n                        <!-- Regular Column -->\r\n                        @if (row.innerInput?.id && formGroup() && inputPortals[getPortalKey(row.innerInput.id)]) {\r\n                          <div class=\"portal-container\">\r\n                            <ng-template [cdkPortalOutlet]=\"inputPortals[getPortalKey(row.innerInput.id)]\"></ng-template>\r\n                          </div>\r\n                          } @else {\r\n                            @if (row[col]) {\r\n                            <!-- Account Selected -->\r\n                            @if (getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment']); as cellError) {\r\n                              <div class=\"account-cell-wrapper\"\r\n                                   [class.account-cell-wrapper--expandable]=\"isTextTruncated(row[col] | unCamelCase)\">\r\n                                <button\r\n                                  [disabled]=\"row['singleSelect'] === true && col === COLUMNS.CREDIT\"\r\n                                  (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); setAsTouched($event)\"\r\n                                  (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\r\n                                  color=\"primary\"\r\n                                  mat-button\r\n                                  class=\"cell-button cell-button--selected cell-button--business-error\"\r\n                                  [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase) + ' for ' + row['segment'] + ' segment, ' + col + ' column. Business error: ' + cellError.message\"\r\n                                  [attr.aria-invalid]=\"true\"\r\n                                  [attr.aria-pressed]=\"true\"\r\n                                  [matTooltip]=\"cellError.message\">\r\n                                  <div class=\"content\">\r\n                                    <span\r\n                                      class=\"selected-acount-label selected-acount-label--tag selected-acount-label--business-error\"\r\n                                      [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase)\">\r\n                                      {{ row[col] | unCamelCase }}\r\n                                      @if (shouldShowVatChip(row, col)) {\r\n                                        <span\r\n                                          class=\"vat-badge\"\r\n                                          [attr.aria-label]=\"'VAT applicable to ' + col + ' column'\"\r\n                                          [matTooltip]=\"'VAT is applicable to this ' + col + ' account selection'\">\r\n                                          VAT\r\n                                        </span>\r\n                                      }\r\n                                    </span>\r\n                                    <mat-icon class=\"business-error-indicator\" aria-hidden=\"true\">error</mat-icon>\r\n                                  </div>\r\n                                </button>\r\n                              </div>\r\n                            } @else {\r\n                              <div class=\"account-cell-wrapper\"\r\n                                   [class.account-cell-wrapper--expandable]=\"isTextTruncated(row[col] | unCamelCase)\">\r\n                                <button\r\n                                  [disabled]=\"(row['singleSelect'] === true && col === COLUMNS.CREDIT) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                  (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); setAsTouched($event)\"\r\n                                  (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\r\n                                  color=\"primary\"\r\n                                  mat-button\r\n                                  class=\"cell-button cell-button--selected\"\r\n                                  [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase) + ' for ' + row['segment'] + ' segment, ' + col + ' column. Press Enter or Space to change'\"\r\n                                  [attr.aria-invalid]=\"false\"\r\n                                  [attr.aria-disabled]=\"(row['singleSelect'] === true && col === COLUMNS.CREDIT) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                  [attr.aria-pressed]=\"true\">\r\n                                  <div class=\"content\">\r\n                                    <span\r\n                                      class=\"selected-acount-label selected-acount-label--tag\"\r\n                                      [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase)\">\r\n                                      {{ row[col] | unCamelCase }}\r\n                                      @if (shouldShowVatChip(row, col)) {\r\n                                        <span\r\n                                          class=\"vat-badge\"\r\n                                          [attr.aria-label]=\"'VAT applicable to ' + col + ' column'\"\r\n                                          [matTooltip]=\"'VAT is applicable to this ' + col + ' account selection'\">\r\n                                          VAT\r\n                                        </span>\r\n                                      }\r\n                                    </span>\r\n                                    @if (showValidationSuccessIndicators) {\r\n                                      <mat-icon class=\"validated-indicator\" aria-hidden=\"true\" [matTooltip]=\"'Validated'\">shield</mat-icon>\r\n                                    } @else {\r\n                                      <mat-icon class=\"success-indicator\" aria-hidden=\"true\">check_circle</mat-icon>\r\n                                    }\r\n                                  </div>\r\n                                </button>\r\n                              </div>\r\n                            }\r\n                          } @else {\r\n                            <!-- No Account Selected -->\r\n                            <div class=\"cell-button-wrapper\">\r\n                              <button\r\n                                [disabled]=\"selectionDisabled(row, col) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                [color]=\"\"\r\n                                (click)=\"selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); $event.stopPropagation(); setAsTouched($event)\"\r\n                                (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\r\n                                mat-button\r\n                                class=\"cell-button\"\r\n                                [class.cell-button--business-error]=\"!!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                [attr.aria-label]=\"shouldShowAutoSelectedLabel(row, col) ? 'Auto selected for ' + row['segment'] + ' segment, ' + col + ' column' : 'Select account for ' + row['segment'] + ' segment, ' + col + ' column'\"\r\n                                [attr.aria-disabled]=\"selectionDisabled(row, col) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                [attr.aria-describedby]=\"getValidationHint(row, col, accountingBasis || ACCOUNTING_BASIS.ACCRUAL) ? 'hint-' + row['segment'] + '-' + col : null\"\r\n                                [attr.aria-invalid]=\"hasError(touched(), inputConfig().required || false, !!row[col]) || !!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                [attr.aria-required]=\"inputConfig().required && !row[col]\"\r\n                                [matTooltip]=\"getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])?.message\">\r\n                                <div class=\"content\">\r\n                                  <span\r\n                                    class=\"selected-acount-label\"\r\n                                    [class.selected-acount-label--error]=\"hasError(touched(), inputConfig().required || false, !!row[col])\"\r\n                                    [class.selected-acount-label--business-error]=\"!!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\">\r\n                                    {{ (shouldShowAutoSelectedLabel(row, col) ? 'auto selected' : 'Select account') | unCamelCase }}\r\n                                    @if (inputConfig().required && !row[col]) {\r\n                                      <span class=\"required-indicator\" aria-label=\"Required field\">*</span>\r\n                                    }\r\n                                  </span>\r\n                                  @if (getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])) {\r\n                                    <mat-icon class=\"business-error-indicator\" aria-hidden=\"true\">error</mat-icon>\r\n                                  } @else if (shouldShowDropdownIcon(row, col)) {\r\n                                    <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\r\n                                  }\r\n                                </div>\r\n                              </button>\r\n                              @if (getValidationHint(row, col, accountingBasis || ACCOUNTING_BASIS.ACCRUAL); as hint) {\r\n                                <span\r\n                                  class=\"inline-hint\"\r\n                                  [id]=\"'hint-' + row['segment'] + '-' + col\"\r\n                                  role=\"tooltip\"\r\n                                  aria-live=\"polite\">\r\n                                  {{ hint }}\r\n                                </span>\r\n                              }\r\n                            </div>\r\n                          }\r\n                        }\r\n                      }\r\n                    </td>\r\n                  </ng-container>\r\n                }\r\n\r\n                <tr mat-header-row *matHeaderRowDef=\"accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols\"></tr>\r\n                <tr mat-row *matRowDef=\"let row; columns: (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols)\"></tr>\r\n              </table>\r\n            </div>\r\n            </div>\r\n\r\n            <!-- Empty State -->\r\n            @if ((accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashAccountTreeKeys : viewData.accountTreeKeys).length === 0) {\r\n              <section class=\"empty-state\" role=\"status\" aria-live=\"polite\">\r\n                <mat-icon aria-hidden=\"true\">info</mat-icon>\r\n                <span>\r\n                  No account segments are currently configured.\r\n                  Please configure account segments to proceed.\r\n                </span>\r\n              </section>\r\n            }\r\n\r\n            <!-- Success Messages (Temporary) -->\r\n            @if ((successMessage$ | async); as successMessages) {\r\n              @if (getSuccessMessage(successMessages, accountingBasis || ACCOUNTING_BASIS.ACCRUAL); as msg) {\r\n                <lib-mscoa-temporary-hint\r\n                  [message]=\"getSuccessMessage(successMessages, accountingBasis || ACCOUNTING_BASIS.ACCRUAL) ?? ''\"\r\n                  [type]=\"'info'\"\r\n                  [duration]=\"6000\"\r\n                  [showDismiss]=\"true\">\r\n                </lib-mscoa-temporary-hint>\r\n              }\r\n            }\r\n\r\n            <!-- Business Rule Errors (Temporary display, keeps error styling) -->\r\n            @if ((viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL] || []).length > 0) {\r\n              <lib-mscoa-error-display\r\n                [errors]=\"viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL] || []\"\r\n                type=\"error\"\r\n                [context]=\"{ accountingBasis: accountingBasis || ACCOUNTING_BASIS.ACCRUAL }\"\r\n                [duration]=\"6000\"\r\n                [showDismiss]=\"true\">\r\n              </lib-mscoa-error-display>\r\n            }\r\n\r\n            <!-- Temporary Contextual Hints -->\r\n            @if (temporaryHintMessage) {\r\n              <lib-mscoa-temporary-hint\r\n                [message]=\"temporaryHintMessage\"\r\n                [type]=\"temporaryHintType\"\r\n                [duration]=\"6000\"\r\n                [showDismiss]=\"true\">\r\n              </lib-mscoa-temporary-hint>\r\n            }\r\n\r\n            <!-- Validation Hints (Context-Aware) -->\r\n            @if (!touched() && inputConfig().required && !viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL]?.length && (!isDualAccountBasis || accountingBasis === ACCOUNTING_BASIS.ACCRUAL || !accountingBasis)) {\r\n              <div class=\"validation-hints\" role=\"region\" aria-label=\"Validation guidance\">\r\n                <p class=\"validation-hints__title\">Guidance:</p>\r\n                <ul class=\"validation-hints__list\">\r\n                  <li>Account combinations are validated automatically. Select accounts that belong to compatible reporting categories.</li>\r\n                  <li>Required fields are marked with an asterisk (*). Complete all required selections to proceed.</li>\r\n                  <li>Some fields may be automatically populated based on your selections to ensure consistency.</li>\r\n                </ul>\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      </ng-template>\r\n    } @placeholder {\r\n      <div class=\"loading-placeholder\" role=\"status\" aria-live=\"polite\">\r\n        <p>Loading data...</p>\r\n      </div>\r\n    } @loading (minimum 100ms) {\r\n      <div class=\"loading-spinner-container\" role=\"status\" aria-live=\"polite\">\r\n        <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"40\"></mat-progress-spinner>\r\n        <span class=\"sr-only\">Loading account chart...</span>\r\n      </div>\r\n    } @error {\r\n      <div class=\"error-state\" role=\"alert\" aria-live=\"assertive\">\r\n        <p>Error loading data. Please try again.</p>\r\n      </div>\r\n    }\r\n  }\r\n</section>\r\n}\r\n\r\n<!-- Input Menu -->\r\n<mat-menu #inputMenu=\"matMenu\">\r\n  <ng-template matMenuContent let-innerInput=\"innerInput\">\r\n    <lib-mscoa-chart-input-menu\r\n      [innerInput]=\"innerInput\"\r\n      [countdownSeconds]=\"inputWillBeRemovedIn(innerInput.id)\"\r\n      [hoveredId]=\"hoveredInputId\"\r\n      (edit)=\"onInputMenuEdit($event)\"\r\n      (delete)=\"onInputMenuDelete($event)\"\r\n      (cancelDelete)=\"onInputMenuCancelDelete($event)\"\r\n      (hoverStart)=\"onInputMenuHoverStart($event)\"\r\n      (hoverEnd)=\"onInputMenuHoverEnd()\">\r\n    </lib-mscoa-chart-input-menu>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["@charset \"UTF-8\";:host{--mscoa-chart-spacing-xs: 4px;--mscoa-chart-spacing-sm: 8px;--mscoa-chart-spacing-md: 16px;--mscoa-chart-spacing-lg: 24px;--mscoa-chart-spacing-xl: 32px;--mscoa-chart-border-radius: 4px;--mscoa-chart-transition: var(--lib-forms-duration-hover) var(--lib-forms-easing);--mscoa-chart-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--mscoa-chart-font-size-base: 14px;--mscoa-chart-line-height: 1.5;display:block;font-family:var(--mscoa-chart-font-family);font-size:var(--mscoa-chart-font-size-base);line-height:var(--mscoa-chart-line-height)}.mscoa-chart__container{padding:0;transition:background-color var(--mscoa-chart-transition);width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}.mscoa-chart__loading-container{padding:var(--mscoa-chart-spacing-lg);display:flex;align-items:center;justify-content:center}.mscoa-chart__table-container{position:relative;width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;box-sizing:border-box}.dual-basis-container{display:flex;flex-direction:column;gap:var(--mscoa-chart-spacing-sm)}.dual-basis-container__item{flex:1}:host .single-base{gap:var(--mscoa-chart-spacing-sm);height:48px;font-size:.875em;font-weight:500;transition:background-color var(--mscoa-chart-transition)}:host .single-base--cash{background:var(--mat-sys-inverse-primary)}.account-selection-table-wrapper{position:relative;width:100%}.account-selection-table-container{border-radius:var(--mscoa-chart-border-radius);overflow-x:auto;overflow-y:visible;transition:border-color var(--mscoa-chart-transition);width:100%;max-width:100%;box-sizing:border-box;display:block}.account-selection-table-container--accrual{border:solid 1px var(--mat-sys-primary)}.account-selection-table-container--cash{border:solid 1px var(--mat-sys-inverse-primary)}.account-selection-table-container::-webkit-scrollbar{height:8px}.account-selection-table-container::-webkit-scrollbar-track{background:var(--lib-forms-surface-container-low);border-radius:4px}.account-selection-table-container::-webkit-scrollbar-thumb{background:var(--lib-forms-outline-variant);border-radius:4px}.account-selection-table-container::-webkit-scrollbar-thumb:hover{background:var(--lib-forms-outline)}.table{width:100%;table-layout:fixed;font-family:var(--mscoa-chart-font-family);font-size:var(--mscoa-chart-font-size-base);line-height:var(--mscoa-chart-line-height);border-collapse:separate;border-spacing:0;display:table;box-sizing:border-box;max-width:100%}.table__header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}.table__header-cell--segment{text-align:right;padding-right:var(--mscoa-chart-spacing-md);min-width:150px;max-width:200px}.table__header-cell--regular{padding-left:var(--mscoa-chart-spacing-lg);min-width:200px;max-width:none}.table__cell{overflow:visible;box-sizing:border-box;position:relative;vertical-align:top}.table__cell--segment{background:var(--mat-list-active-indicator-color, var(--mat-sys-secondary-container));text-align:right;font-weight:500;padding-right:var(--mscoa-chart-spacing-md);min-width:150px;max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;vertical-align:middle}.table__cell--regular{padding:0;min-width:200px;max-width:none;word-wrap:break-word;vertical-align:top;overflow:visible}.table__cell--active{background-color:var(--mat-sys-primary-container);transition:background-color var(--mscoa-chart-transition)}mat-header-cell{background:var(--mat-sys-surface-container);font-weight:600;font-size:var(--mscoa-chart-font-size-base);padding:var(--mscoa-chart-spacing-md)}.mscoa-chart-table{display:flex;flex-direction:column}.portal-container{width:100%}.account-cell-wrapper{position:relative;width:100%;max-width:100%;overflow:visible;z-index:1;min-height:38px;display:flex;flex-direction:column;gap:4px}.cell-button-wrapper{position:relative;width:100%;max-width:100%;overflow:hidden}.cell-button{height:fit-content;min-height:38px;width:100%;max-width:100%;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing),transform var(--lib-forms-duration-hover) var(--lib-forms-easing),box-shadow var(--lib-forms-duration-hover) var(--lib-forms-easing);font-family:var(--mscoa-chart-font-family);font-size:var(--mscoa-chart-font-size-base);line-height:var(--mscoa-chart-line-height);position:relative;overflow:visible;padding:8px}.cell-button:hover:not(:disabled){background-color:var(--mat-sys-surface-container);transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.cell-button:focus-visible{outline:3px solid var(--mat-sys-primary);outline-offset:2px;z-index:1}.cell-button:disabled{opacity:.6;cursor:not-allowed}.cell-button--selected{background-color:transparent}.cell-button--selected:hover:not(:disabled){background-color:var(--lib-forms-surface-container-low);border-color:var(--lib-forms-primary)}.cell-button.cell-button--selected{animation:fadeInSuccess var(--mscoa-chart-transition)}.cell-button.cell-button--business-error{border-color:var(--lib-forms-error)}.cell-button.cell-button--business-error .selected-acount-label--business-error{color:var(--mat-sys-error);border-color:var(--mat-sys-error)}.success-indicator{color:var(--sem-success);font-size:18px;width:18px;right:-8px;top:-4px;background:var(--lib-forms-surface);border-radius:16px;position:absolute;height:18px;margin-left:var(--mscoa-chart-spacing-xs);animation:scaleIn var(--mscoa-chart-transition);flex-shrink:0}.validated-indicator{color:var(--lib-forms-primary);font-size:18px;width:18px;height:18px;right:-8px;top:-4px;background:var(--lib-forms-surface);border-radius:16px;position:absolute;margin-left:var(--mscoa-chart-spacing-xs);flex-shrink:0;animation:validatedShieldIn .3s ease-out forwards}.business-error-indicator{color:var(--lib-forms-error);font-size:18px;width:18px;right:-8px;top:-4px;background:var(--lib-forms-surface);border-radius:16px;position:absolute;height:18px;margin-left:var(--mscoa-chart-spacing-xs);flex-shrink:0}.required-indicator{color:var(--lib-forms-error);font-weight:600;margin-left:2px}.inline-hint{display:block;font-size:12px;color:var(--lib-forms-on-surface-variant);margin-top:var(--mscoa-chart-spacing-xs);padding:var(--mscoa-chart-spacing-xs) var(--mscoa-chart-spacing-sm);background-color:var(--lib-forms-surface-container-low);border-radius:var(--mscoa-chart-border-radius);line-height:1.4;max-width:100%;word-wrap:break-word}.content{padding:0;display:flex;gap:6px;width:100%;max-width:100%;overflow:visible;min-width:0;flex-wrap:wrap;align-items:center}.selected-acount-label{text-align:left;flex:1;font-weight:400;transition:color var(--mscoa-chart-transition)}.selected-acount-label--error,.selected-acount-label--business-error{color:var(--mat-sys-error);font-weight:500}.selected-acount-label--tag{display:inline-block;padding:4px 10px;background-color:var(--lib-forms-primary-container);color:var(--lib-forms-on-primary-container);border-radius:16px;font-size:13px;font-weight:500;line-height:1.5;border:1px solid var(--lib-forms-primary);box-shadow:0 1px 2px #0000001a;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing),box-shadow var(--lib-forms-duration-hover) var(--lib-forms-easing);width:100%;max-width:100%;overflow:visible;white-space:normal;word-wrap:break-word;word-break:break-word;cursor:pointer;box-sizing:border-box;position:relative}.selected-acount-label--tag:hover{background-color:var(--sem-info-surface);box-shadow:0 2px 4px #1976d226}.segment-cell-content{display:flex;align-items:center;justify-content:flex-end;font-weight:500}.vat-badge{display:inline-flex;align-items:center;justify-content:center;height:16px;padding:2px 6px;border-radius:8px;font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;background-color:var(--sem-success-surface);color:var(--sem-warning);border:1px solid var(--lib-forms-outline-variant);box-shadow:none;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing),border-color var(--lib-forms-duration-hover) var(--lib-forms-easing);flex-shrink:0;align-self:flex-start;margin-top:2px;line-height:1}.vat-badge:hover{background-color:var(--sem-warning-surface);border-color:var(--sem-warning)}.vat-chip-container{padding-left:var(--mscoa-chart-spacing-sm);padding-right:var(--mscoa-chart-spacing-sm);padding-bottom:var(--mscoa-chart-spacing-xs);margin-top:var(--mscoa-chart-spacing-xs)}.vat-chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:4px 8px;border-radius:12px;font-size:11px;font-weight:600;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing),box-shadow var(--lib-forms-duration-hover) var(--lib-forms-easing),transform var(--lib-forms-duration-hover) var(--lib-forms-easing);box-shadow:0 1px 3px #0000001f}.vat-chip--applicable{background:linear-gradient(135deg,var(--sem-warning) 0%,var(--sem-warning) 100%);color:var(--lib-forms-on-primary);border:1px solid var(--sem-warning)}.vat-chip--applicable:hover{box-shadow:0 2px 6px #f57c004d;transform:translateY(-1px)}.vat-chip__icon{font-size:14px;width:14px;height:14px;opacity:.9}.vat-chip__text{font-size:11px;font-weight:600;letter-spacing:.3px}.info-box{display:flex;align-items:center;gap:var(--mscoa-chart-spacing-sm);padding:12px;background:var(--sem-info-surface);border-radius:var(--mscoa-chart-border-radius);margin-bottom:var(--mscoa-chart-spacing-md)}.info-icon{min-width:38px;margin:auto;margin-top:var(--mscoa-chart-spacing-sm)}.empty-state{padding:var(--mscoa-chart-spacing-md);text-align:center;display:flex;align-items:center;justify-content:center;gap:var(--mscoa-chart-spacing-sm);color:var(--mat-sys-on-surface-variant)}.validation-hints{margin-top:var(--mscoa-chart-spacing-md);padding:var(--mscoa-chart-spacing-md);background-color:var(--lib-forms-surface-container-low);border-radius:var(--mscoa-chart-border-radius);border-left:4px solid var(--lib-forms-primary);box-shadow:0 1px 3px #00000014}.validation-hints__title{font-weight:600;font-size:var(--mscoa-chart-font-size-base);margin:0 0 var(--mscoa-chart-spacing-sm) 0;color:var(--lib-forms-on-surface);display:flex;align-items:center;gap:var(--mscoa-chart-spacing-xs)}.validation-hints__title:before{content:\"\\1f4a1\";font-size:16px}.validation-hints__list{margin:0;padding-left:var(--mscoa-chart-spacing-md);color:var(--lib-forms-on-surface-variant);font-size:13px;line-height:1.6}.validation-hints__list li{margin-bottom:var(--mscoa-chart-spacing-sm);position:relative}.validation-hints__list li::marker{color:var(--lib-forms-primary)}.validation-hints__list li:last-child{margin-bottom:0}mat-error{font-size:.75em;margin-top:var(--mscoa-chart-spacing-xs)}mat-error ul{margin:0;padding-left:var(--mscoa-chart-spacing-md)}mat-error li{margin-bottom:var(--mscoa-chart-spacing-xs)}.loading-placeholder{padding:var(--mscoa-chart-spacing-md);color:var(--mat-sys-on-surface-variant)}.loading-spinner-container{display:flex;justify-content:center;align-items:center;height:256px}.error-state{padding:var(--mscoa-chart-spacing-md);color:var(--mat-sys-error)}mat-panel-description{font-size:.875em;line-height:1.4}:host .main-expanse-content{background:var(--mat-sys-surface-container)}@media(max-width:768px){.dual-basis-container{gap:var(--mscoa-chart-spacing-md)}.cell-button{min-height:44px;font-size:15px;max-width:300px}.content{padding:var(--mscoa-chart-spacing-md)}.validation-hints{font-size:13px;padding:var(--mscoa-chart-spacing-sm)}.inline-hint{font-size:11px}}.cell-button:focus-visible,button:focus-visible{outline:3px solid var(--mat-sys-primary);outline-offset:2px;outline-style:solid}@media(prefers-contrast:high){.cell-button{border:2px solid currentColor}.cell-button:focus-visible{outline-width:4px}.selected-acount-label--error{font-weight:600}}@media(prefers-reduced-motion:reduce){.cell-button,.success-indicator,.fade-in,.validated-indicator{animation:none;transition:none}}.table__cell--active{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}@media(prefers-contrast:high){.table__cell--active{background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}}.table__cell--business-error{background-color:var(--lib-forms-error-container);border-left:3px solid var(--lib-forms-error)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInSuccess{0%{background-color:transparent}50%{background-color:var(--sem-success-surface)}to{background-color:var(--mat-sys-primary-container)}}@keyframes scaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes validatedShieldIn{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.fade-in{animation:fadeIn var(--mscoa-chart-transition)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.skeleton-loader{background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-high) 50%,var(--mat-sys-surface-container) 75%);background-size:200% 100%;animation:loading 1.5s ease-in-out infinite;border-radius:var(--mscoa-chart-border-radius)}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-row{height:48px;margin-bottom:var(--mscoa-chart-spacing-xs)}.skeleton-cell{height:100%;margin-right:var(--mscoa-chart-spacing-md)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MscoaChartInputMenuComponent, selector: "lib-mscoa-chart-input-menu", inputs: ["innerInput", "countdownSeconds", "hoveredId"], outputs: ["edit", "delete", "cancelDelete", "hoverStart", "hoverEnd"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i3.NgTemplateOutlet, i4$2.CdkPortalOutlet, i1$2.MatButton, i1$2.MatIconButton, i3$1.MatIcon, i6.MatMenuTrigger, i5$2.MatTable, i5$2.MatHeaderCellDef, i5$2.MatHeaderRowDef, i5$2.MatColumnDef, i5$2.MatCellDef, i5$2.MatRowDef, i5$2.MatHeaderCell, i5$2.MatCell, i5$2.MatHeaderRow, i5$2.MatRow, i5$1.MatTooltip, import('./ngx-t-forms-mscoa-chart-toolbar.component-C_abEBQ5.mjs').then(m => m.MscoaChartToolbarComponent), import('./ngx-t-forms-mscoa-error-display.component-99DpVSy7.mjs').then(m => m.MscoaErrorDisplayComponent), import('./ngx-t-forms-mscoa-temporary-hint.component-B1Z-IXSL.mjs').then(m => m.MscoaTemporaryHintComponent), i3.AsyncPipe, i3.TitleCasePipe, Promise.resolve().then(function () { return daysAgo_pipe; }).then(m => m.ConvertCamelCasePipe)]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: MscoaChartComponent, isStandalone: true, selector: "lib-mscoa-chart", inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "inputConfig", isSignal: true, isRequired: true, transformFunction: null }, editorMode: { classPropertyName: "editorMode", publicName: "editorMode", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: false, transformFunction: null }, formBuilderFunctions: { classPropertyName: "formBuilderFunctions", publicName: "formBuilderFunctions", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onContainerClick: "onContainerClick", interaction: "interaction" }, ngImport: i0, template: "@if ((viewData$ | async); as viewData) {\r\n<section\r\n  (click)=\"setAsTouched($event)\"\r\n  class=\"mscoa-chart__container\"\r\n  [class.mscoa-chart__container--touched]=\"touched()\"\r\n  role=\"region\"\r\n  [attr.aria-label]=\"'MSCOA Account Chart'\"\r\n  [attr.aria-busy]=\"viewData.loading || viewData.validatingValue\">\r\n\r\n  @if (viewData.loading) {\r\n    <div class=\"mscoa-chart__loading-container\" role=\"status\" aria-live=\"polite\">\r\n      <mat-spinner [diameter]=\"40\"></mat-spinner>\r\n      <span class=\"sr-only\">Loading account chart data...</span>\r\n    </div>\r\n  } @else {\r\n    @defer () {\r\n      @if (viewData.accountTreeKeys || viewData.cashAccountTreeKeys) {\r\n        <div class=\"mscoa-chart__table-container\">\r\n          @if (isDualAccountBasis) {\r\n            <div class=\"dual-basis-container\" role=\"group\" aria-label=\"Dual accounting basis tables\">\r\n              <div class=\"dual-basis-container__item\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"selectionTable;\r\n                  context: {\r\n                    accountingBasis: ACCOUNTING_BASIS.ACCRUAL,\r\n                    canCollapse: true,\r\n                    viewData: viewData\r\n                  }\">\r\n                </ng-container>\r\n              </div>\r\n\r\n              <div class=\"dual-basis-container__item\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"selectionTable;\r\n                  context: {\r\n                    accountingBasis: ACCOUNTING_BASIS.CASH,\r\n                    canCollapse: true,\r\n                    viewData: viewData\r\n                  }\">\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          } @else {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"selectionTable;\r\n              context: {\r\n                accountingBasis: config()?.accountingBasis,\r\n                canCollapse: false,\r\n                viewData: viewData\r\n              }\">\r\n            </ng-container>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <ng-template\r\n        #selectionTable\r\n        let-accountingBasis=\"accountingBasis\"\r\n        let-canCollapse=\"canCollapse\"\r\n        let-viewData=\"viewData\">\r\n\r\n        <div class=\"mscoa-chart-table\" role=\"group\" [attr.aria-label]=\"'Accounting basis: ' + (accountingBasis || 'Accrual')\">\r\n          <!-- Toolbar -->\r\n          <lib-mscoa-chart-toolbar\r\n            [accountingBasis]=\"accountingBasis\"\r\n            [canCollapse]=\"canCollapse\"\r\n            [isExpanded]=\"getExpansionState(accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\"\r\n            (toggleExpansion)=\"toggleDualBasisExpansion(accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\">\r\n          </lib-mscoa-chart-toolbar>\r\n\r\n          @if (shouldShowTable(isDualAccountBasis, getExpansionState(accountingBasis || ACCOUNTING_BASIS.ACCRUAL), accountingBasis)) {\r\n            <div class=\"account-selection-table-wrapper\">\r\n              <div\r\n                class=\"account-selection-table-container\"\r\n                [class.account-selection-table-container--accrual]=\"!accountingBasis || accountingBasis === ACCOUNTING_BASIS.ACCRUAL\"\r\n                [class.account-selection-table-container--cash]=\"accountingBasis === ACCOUNTING_BASIS.CASH\"\r\n                role=\"table\"\r\n                [attr.aria-label]=\"'Account selection table for ' + (accountingBasis || 'Accrual') + ' basis'\">\r\n\r\n              <table\r\n                mat-table\r\n                [dataSource]=\"accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashTableData : viewData.tableData\"\r\n                [trackBy]=\"trackByRow\"\r\n                class=\"table\"\r\n                [attr.aria-label]=\"'Account selection table for ' + (accountingBasis || 'Accrual') + ' basis'\"\r\n                [attr.aria-describedby]=\"'table-description-' + (accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\"\r\n                role=\"table\">\r\n                <span [id]=\"'table-description-' + (accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\" class=\"sr-only\">\r\n                  Use arrow keys to navigate between cells. Press Enter or Space to select an account.\r\n                </span>\r\n\r\n                @for (\r\n                  col of (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols);\r\n                  track trackByColumn($index, col);\r\n                  let i = $index\r\n                ) {\r\n                  <ng-container [matColumnDef]=\"col\" [sticky]=\"i === 0\">\r\n                    <!-- Header Cell -->\r\n                    <th\r\n                      mat-header-cell\r\n                      *matHeaderCellDef\r\n                      [class.table__header-cell--segment]=\"isSegmentColumn(i)\"\r\n                      [class.table__header-cell--regular]=\"!isSegmentColumn(i)\"\r\n                      [style.width.%]=\"getColumnWidthPercent(isSegmentColumn(i), (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols).length)\"\r\n                      [style.min-width.px]=\"isSegmentColumn(i) ? 150 : 200\"\r\n                      [attr.aria-sort]=\"i === 0 ? 'none' : null\"\r\n                      [attr.scope]=\"'col'\"\r\n                      [attr.aria-label]=\"getHeaderText(col, i, accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashHasMultiSelect : viewData.hasMultiSelect) + ' column'\">\r\n                      {{ getHeaderText(col, i, accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashHasMultiSelect : viewData.hasMultiSelect) | titlecase | unCamelCase }}\r\n                    </th>\r\n\r\n                    <!-- Data Cell -->\r\n                    <td\r\n                      mat-cell\r\n                      *matCellDef=\"let row\"\r\n                      [class.table__cell--segment]=\"isSegmentColumn(i)\"\r\n                      [class.table__cell--regular]=\"!isSegmentColumn(i)\"\r\n                      [class.table__cell--active]=\"editSelection?.segment === row['segment'] && activeColumn === col\"\r\n                      [class.table__cell--business-error]=\"!isSegmentColumn(i) && getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                      [attr.aria-label]=\"'Cell for ' + row['segment'] + ' segment, ' + col + ' column'\"\r\n                      [attr.aria-selected]=\"!!row[col]\"\r\n                      [attr.aria-invalid]=\"!isSegmentColumn(i) && !!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                      [attr.role]=\"'gridcell'\"\r\n                      [attr.tabindex]=\"isSegmentColumn(i) ? -1 : (row[col] ? 0 : -1)\">\r\n\r\n                      @if (isSegmentColumn(i)) {\r\n                        <!-- Segment Column -->\r\n                        <div class=\"segment-cell-content\">\r\n                          @if (editorMode() && row.innerInput?.id) {\r\n                            <button\r\n                              mat-icon-button\r\n                              [matMenuTriggerData]=\"{innerInput: row.innerInput}\"\r\n                              [matMenuTriggerFor]=\"inputMenu\"\r\n                              [matTooltip]=\"'Options for: ' + row.innerInput.label\"\r\n                              [attr.aria-label]=\"'Options menu for ' + row.innerInput.label\"\r\n                              (click)=\"$event.stopPropagation()\">\r\n                              <mat-icon>more_vert</mat-icon>\r\n                            </button>\r\n                          }\r\n                          <span class=\"segment-cell-content__label\">{{ row['label'] }}</span>\r\n                        </div>\r\n                      } @else {\r\n                        <!-- Regular Column -->\r\n                        @if (row.innerInput?.id) {\r\n                          <!-- Custom-input row (peer of the segments): the value is entered inline via the\r\n                               input portal on the primary (debit) leg; other legs mirror it and render no\r\n                               control. `innerInput.id` is already the namespaced portal key, so it is looked\r\n                               up directly \u2014 prepending it again (getPortalKey) double-namespaces and misses. -->\r\n                          @if (col === COLUMNS.DEBIT && formGroup() && inputPortals[row.innerInput.id]) {\r\n                            <div class=\"portal-container\">\r\n                              <ng-template [cdkPortalOutlet]=\"inputPortals[row.innerInput.id]\"></ng-template>\r\n                            </div>\r\n                          }\r\n                          } @else {\r\n                            @if (row[col]) {\r\n                            <!-- Account Selected -->\r\n                            @if (getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment']); as cellError) {\r\n                              <div class=\"account-cell-wrapper\"\r\n                                   [class.account-cell-wrapper--expandable]=\"isTextTruncated(row[col] | unCamelCase)\">\r\n                                <button\r\n                                  [disabled]=\"row['singleSelect'] === true && col === COLUMNS.CREDIT\"\r\n                                  (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); setAsTouched($event)\"\r\n                                  (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\r\n                                  color=\"primary\"\r\n                                  mat-button\r\n                                  class=\"cell-button cell-button--selected cell-button--business-error\"\r\n                                  [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase) + ' for ' + row['segment'] + ' segment, ' + col + ' column. Business error: ' + cellError.message\"\r\n                                  [attr.aria-invalid]=\"true\"\r\n                                  [attr.aria-pressed]=\"true\"\r\n                                  [matTooltip]=\"cellError.message\">\r\n                                  <div class=\"content\">\r\n                                    <span\r\n                                      class=\"selected-acount-label selected-acount-label--tag selected-acount-label--business-error\"\r\n                                      [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase)\">\r\n                                      {{ row[col] | unCamelCase }}\r\n                                      @if (shouldShowVatChip(row, col)) {\r\n                                        <span\r\n                                          class=\"vat-badge\"\r\n                                          [attr.aria-label]=\"'VAT applicable to ' + col + ' column'\"\r\n                                          [matTooltip]=\"'VAT is applicable to this ' + col + ' account selection'\">\r\n                                          VAT\r\n                                        </span>\r\n                                      }\r\n                                    </span>\r\n                                    <mat-icon class=\"business-error-indicator\" aria-hidden=\"true\">error</mat-icon>\r\n                                  </div>\r\n                                </button>\r\n                              </div>\r\n                            } @else {\r\n                              <div class=\"account-cell-wrapper\"\r\n                                   [class.account-cell-wrapper--expandable]=\"isTextTruncated(row[col] | unCamelCase)\">\r\n                                <button\r\n                                  [disabled]=\"(row['singleSelect'] === true && col === COLUMNS.CREDIT) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                  (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); setAsTouched($event)\"\r\n                                  (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\r\n                                  color=\"primary\"\r\n                                  mat-button\r\n                                  class=\"cell-button cell-button--selected\"\r\n                                  [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase) + ' for ' + row['segment'] + ' segment, ' + col + ' column. Press Enter or Space to change'\"\r\n                                  [attr.aria-invalid]=\"false\"\r\n                                  [attr.aria-disabled]=\"(row['singleSelect'] === true && col === COLUMNS.CREDIT) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                  [attr.aria-pressed]=\"true\">\r\n                                  <div class=\"content\">\r\n                                    <span\r\n                                      class=\"selected-acount-label selected-acount-label--tag\"\r\n                                      [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase)\">\r\n                                      {{ row[col] | unCamelCase }}\r\n                                      @if (shouldShowVatChip(row, col)) {\r\n                                        <span\r\n                                          class=\"vat-badge\"\r\n                                          [attr.aria-label]=\"'VAT applicable to ' + col + ' column'\"\r\n                                          [matTooltip]=\"'VAT is applicable to this ' + col + ' account selection'\">\r\n                                          VAT\r\n                                        </span>\r\n                                      }\r\n                                    </span>\r\n                                    @if (showValidationSuccessIndicators) {\r\n                                      <mat-icon class=\"validated-indicator\" aria-hidden=\"true\" [matTooltip]=\"'Validated'\">shield</mat-icon>\r\n                                    } @else {\r\n                                      <mat-icon class=\"success-indicator\" aria-hidden=\"true\">check_circle</mat-icon>\r\n                                    }\r\n                                  </div>\r\n                                </button>\r\n                              </div>\r\n                            }\r\n                          } @else {\r\n                            <!-- No Account Selected -->\r\n                            <div class=\"cell-button-wrapper\">\r\n                              <button\r\n                                [disabled]=\"selectionDisabled(row, col) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                [color]=\"\"\r\n                                (click)=\"selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); $event.stopPropagation(); setAsTouched($event)\"\r\n                                (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\r\n                                mat-button\r\n                                class=\"cell-button\"\r\n                                [class.cell-button--business-error]=\"!!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                [attr.aria-label]=\"shouldShowAutoSelectedLabel(row, col) ? 'Auto selected for ' + row['segment'] + ' segment, ' + col + ' column' : 'Select account for ' + row['segment'] + ' segment, ' + col + ' column'\"\r\n                                [attr.aria-disabled]=\"selectionDisabled(row, col) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                [attr.aria-describedby]=\"getValidationHint(row, col, accountingBasis || ACCOUNTING_BASIS.ACCRUAL) ? 'hint-' + row['segment'] + '-' + col : null\"\r\n                                [attr.aria-invalid]=\"hasError(touched(), inputConfig().required || false, !!row[col]) || !!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                [attr.aria-required]=\"inputConfig().required && !row[col]\"\r\n                                [matTooltip]=\"getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])?.message\">\r\n                                <div class=\"content\">\r\n                                  <span\r\n                                    class=\"selected-acount-label\"\r\n                                    [class.selected-acount-label--error]=\"hasError(touched(), inputConfig().required || false, !!row[col])\"\r\n                                    [class.selected-acount-label--business-error]=\"!!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\">\r\n                                    {{ (shouldShowAutoSelectedLabel(row, col) ? 'auto selected' : 'Select account') | unCamelCase }}\r\n                                    @if (inputConfig().required && !row[col]) {\r\n                                      <span class=\"required-indicator\" aria-label=\"Required field\">*</span>\r\n                                    }\r\n                                  </span>\r\n                                  @if (getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])) {\r\n                                    <mat-icon class=\"business-error-indicator\" aria-hidden=\"true\">error</mat-icon>\r\n                                  } @else if (shouldShowDropdownIcon(row, col)) {\r\n                                    <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\r\n                                  }\r\n                                </div>\r\n                              </button>\r\n                              @if (getValidationHint(row, col, accountingBasis || ACCOUNTING_BASIS.ACCRUAL); as hint) {\r\n                                <span\r\n                                  class=\"inline-hint\"\r\n                                  [id]=\"'hint-' + row['segment'] + '-' + col\"\r\n                                  role=\"tooltip\"\r\n                                  aria-live=\"polite\">\r\n                                  {{ hint }}\r\n                                </span>\r\n                              }\r\n                            </div>\r\n                          }\r\n                        }\r\n                      }\r\n                    </td>\r\n                  </ng-container>\r\n                }\r\n\r\n                <tr mat-header-row *matHeaderRowDef=\"accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols\"></tr>\r\n                <tr mat-row *matRowDef=\"let row; columns: (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols)\"></tr>\r\n              </table>\r\n            </div>\r\n            </div>\r\n\r\n            <!-- Empty State -->\r\n            @if ((accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashAccountTreeKeys : viewData.accountTreeKeys).length === 0) {\r\n              <section class=\"empty-state\" role=\"status\" aria-live=\"polite\">\r\n                <mat-icon aria-hidden=\"true\">info</mat-icon>\r\n                <span>\r\n                  No account segments are currently configured.\r\n                  Please configure account segments to proceed.\r\n                </span>\r\n              </section>\r\n            }\r\n\r\n            <!-- Success Messages (Temporary) -->\r\n            @if ((successMessage$ | async); as successMessages) {\r\n              @if (getSuccessMessage(successMessages, accountingBasis || ACCOUNTING_BASIS.ACCRUAL); as msg) {\r\n                <lib-mscoa-temporary-hint\r\n                  [message]=\"getSuccessMessage(successMessages, accountingBasis || ACCOUNTING_BASIS.ACCRUAL) ?? ''\"\r\n                  [type]=\"'info'\"\r\n                  [duration]=\"6000\"\r\n                  [showDismiss]=\"true\">\r\n                </lib-mscoa-temporary-hint>\r\n              }\r\n            }\r\n\r\n            <!-- Business Rule Errors (Temporary display, keeps error styling) -->\r\n            @if ((viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL] || []).length > 0) {\r\n              <lib-mscoa-error-display\r\n                [errors]=\"viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL] || []\"\r\n                type=\"error\"\r\n                [context]=\"{ accountingBasis: accountingBasis || ACCOUNTING_BASIS.ACCRUAL }\"\r\n                [duration]=\"6000\"\r\n                [showDismiss]=\"true\">\r\n              </lib-mscoa-error-display>\r\n            }\r\n\r\n            <!-- Temporary Contextual Hints -->\r\n            @if (temporaryHintMessage) {\r\n              <lib-mscoa-temporary-hint\r\n                [message]=\"temporaryHintMessage\"\r\n                [type]=\"temporaryHintType\"\r\n                [duration]=\"6000\"\r\n                [showDismiss]=\"true\">\r\n              </lib-mscoa-temporary-hint>\r\n            }\r\n\r\n            <!-- Validation Hints (Context-Aware) -->\r\n            @if (!touched() && inputConfig().required && !viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL]?.length && (!isDualAccountBasis || accountingBasis === ACCOUNTING_BASIS.ACCRUAL || !accountingBasis)) {\r\n              <div class=\"validation-hints\" role=\"region\" aria-label=\"Validation guidance\">\r\n                <p class=\"validation-hints__title\">Guidance:</p>\r\n                <ul class=\"validation-hints__list\">\r\n                  <li>Account combinations are validated automatically. Select accounts that belong to compatible reporting categories.</li>\r\n                  <li>Required fields are marked with an asterisk (*). Complete all required selections to proceed.</li>\r\n                  <li>Some fields may be automatically populated based on your selections to ensure consistency.</li>\r\n                </ul>\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      </ng-template>\r\n    } @placeholder {\r\n      <div class=\"loading-placeholder\" role=\"status\" aria-live=\"polite\">\r\n        <p>Loading data...</p>\r\n      </div>\r\n    } @loading (minimum 100ms) {\r\n      <div class=\"loading-spinner-container\" role=\"status\" aria-live=\"polite\">\r\n        <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"40\"></mat-progress-spinner>\r\n        <span class=\"sr-only\">Loading account chart...</span>\r\n      </div>\r\n    } @error {\r\n      <div class=\"error-state\" role=\"alert\" aria-live=\"assertive\">\r\n        <p>Error loading data. Please try again.</p>\r\n      </div>\r\n    }\r\n  }\r\n</section>\r\n}\r\n\r\n<!-- Input Menu -->\r\n<mat-menu #inputMenu=\"matMenu\">\r\n  <ng-template matMenuContent let-innerInput=\"innerInput\">\r\n    <lib-mscoa-chart-input-menu\r\n      [innerInput]=\"innerInput\"\r\n      [countdownSeconds]=\"inputWillBeRemovedIn(innerInput.id)\"\r\n      [hoveredId]=\"hoveredInputId\"\r\n      (edit)=\"onInputMenuEdit($event)\"\r\n      (delete)=\"onInputMenuDelete($event)\"\r\n      (cancelDelete)=\"onInputMenuCancelDelete($event)\"\r\n      (hoverStart)=\"onInputMenuHoverStart($event)\"\r\n      (hoverEnd)=\"onInputMenuHoverEnd()\">\r\n    </lib-mscoa-chart-input-menu>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["@charset \"UTF-8\";:host{--mscoa-chart-spacing-xs: 4px;--mscoa-chart-spacing-sm: 8px;--mscoa-chart-spacing-md: 16px;--mscoa-chart-spacing-lg: 24px;--mscoa-chart-spacing-xl: 32px;--mscoa-chart-border-radius: 4px;--mscoa-chart-transition: var(--lib-forms-duration-hover) var(--lib-forms-easing);--mscoa-chart-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--mscoa-chart-font-size-base: 14px;--mscoa-chart-line-height: 1.5;display:block;font-family:var(--mscoa-chart-font-family);font-size:var(--mscoa-chart-font-size-base);line-height:var(--mscoa-chart-line-height)}.mscoa-chart__container{padding:0;transition:background-color var(--mscoa-chart-transition);width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}.mscoa-chart__loading-container{padding:var(--mscoa-chart-spacing-lg);display:flex;align-items:center;justify-content:center}.mscoa-chart__table-container{position:relative;width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;box-sizing:border-box}.dual-basis-container{display:flex;flex-direction:column;gap:var(--mscoa-chart-spacing-sm)}.dual-basis-container__item{flex:1}:host .single-base{gap:var(--mscoa-chart-spacing-sm);height:48px;font-size:.875em;font-weight:500;transition:background-color var(--mscoa-chart-transition)}:host .single-base--cash{background:var(--mat-sys-inverse-primary)}.account-selection-table-wrapper{position:relative;width:100%}.account-selection-table-container{border-radius:var(--mscoa-chart-border-radius);overflow-x:auto;overflow-y:visible;transition:border-color var(--mscoa-chart-transition);width:100%;max-width:100%;box-sizing:border-box;display:block}.account-selection-table-container--accrual{border:solid 1px var(--mat-sys-primary)}.account-selection-table-container--cash{border:solid 1px var(--mat-sys-inverse-primary)}.account-selection-table-container::-webkit-scrollbar{height:8px}.account-selection-table-container::-webkit-scrollbar-track{background:var(--lib-forms-surface-container-low);border-radius:4px}.account-selection-table-container::-webkit-scrollbar-thumb{background:var(--lib-forms-outline-variant);border-radius:4px}.account-selection-table-container::-webkit-scrollbar-thumb:hover{background:var(--lib-forms-outline)}.table{width:100%;table-layout:fixed;font-family:var(--mscoa-chart-font-family);font-size:var(--mscoa-chart-font-size-base);line-height:var(--mscoa-chart-line-height);border-collapse:separate;border-spacing:0;display:table;box-sizing:border-box;max-width:100%}.table__header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}.table__header-cell--segment{text-align:right;padding-right:var(--mscoa-chart-spacing-md);min-width:150px;max-width:200px}.table__header-cell--regular{padding-left:var(--mscoa-chart-spacing-lg);min-width:200px;max-width:none}.table__cell{overflow:visible;box-sizing:border-box;position:relative;vertical-align:top}.table__cell--segment{background:var(--mat-list-active-indicator-color, var(--mat-sys-secondary-container));text-align:right;font-weight:500;padding-right:var(--mscoa-chart-spacing-md);min-width:150px;max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;vertical-align:middle}.table__cell--regular{padding:0;min-width:200px;max-width:none;word-wrap:break-word;vertical-align:top;overflow:visible}.table__cell--active{background-color:var(--mat-sys-primary-container);transition:background-color var(--mscoa-chart-transition)}mat-header-cell{background:var(--mat-sys-surface-container);font-weight:600;font-size:var(--mscoa-chart-font-size-base);padding:var(--mscoa-chart-spacing-md)}.mscoa-chart-table{display:flex;flex-direction:column}.portal-container{width:100%}.account-cell-wrapper{position:relative;width:100%;max-width:100%;overflow:visible;z-index:1;min-height:38px;display:flex;flex-direction:column;gap:4px}.cell-button-wrapper{position:relative;width:100%;max-width:100%;overflow:hidden}.cell-button{height:fit-content;min-height:38px;width:100%;max-width:100%;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing),transform var(--lib-forms-duration-hover) var(--lib-forms-easing),box-shadow var(--lib-forms-duration-hover) var(--lib-forms-easing);font-family:var(--mscoa-chart-font-family);font-size:var(--mscoa-chart-font-size-base);line-height:var(--mscoa-chart-line-height);position:relative;overflow:visible;padding:8px}.cell-button:hover:not(:disabled){background-color:var(--mat-sys-surface-container);transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.cell-button:focus-visible{outline:3px solid var(--mat-sys-primary);outline-offset:2px;z-index:1}.cell-button:disabled{opacity:.6;cursor:not-allowed}.cell-button--selected{background-color:transparent}.cell-button--selected:hover:not(:disabled){background-color:var(--lib-forms-surface-container-low);border-color:var(--lib-forms-primary)}.cell-button.cell-button--selected{animation:fadeInSuccess var(--mscoa-chart-transition)}.cell-button.cell-button--business-error{border-color:var(--lib-forms-error)}.cell-button.cell-button--business-error .selected-acount-label--business-error{color:var(--mat-sys-error);border-color:var(--mat-sys-error)}.success-indicator{color:var(--sem-success);font-size:18px;width:18px;right:-8px;top:-4px;background:var(--lib-forms-surface);border-radius:16px;position:absolute;height:18px;margin-left:var(--mscoa-chart-spacing-xs);animation:scaleIn var(--mscoa-chart-transition);flex-shrink:0}.validated-indicator{color:var(--lib-forms-primary);font-size:18px;width:18px;height:18px;right:-8px;top:-4px;background:var(--lib-forms-surface);border-radius:16px;position:absolute;margin-left:var(--mscoa-chart-spacing-xs);flex-shrink:0;animation:validatedShieldIn .3s ease-out forwards}.business-error-indicator{color:var(--lib-forms-error);font-size:18px;width:18px;right:-8px;top:-4px;background:var(--lib-forms-surface);border-radius:16px;position:absolute;height:18px;margin-left:var(--mscoa-chart-spacing-xs);flex-shrink:0}.required-indicator{color:var(--lib-forms-error);font-weight:600;margin-left:2px}.inline-hint{display:block;font-size:12px;color:var(--lib-forms-on-surface-variant);margin-top:var(--mscoa-chart-spacing-xs);padding:var(--mscoa-chart-spacing-xs) var(--mscoa-chart-spacing-sm);background-color:var(--lib-forms-surface-container-low);border-radius:var(--mscoa-chart-border-radius);line-height:1.4;max-width:100%;word-wrap:break-word}.content{padding:0;display:flex;gap:6px;width:100%;max-width:100%;overflow:visible;min-width:0;flex-wrap:wrap;align-items:center}.selected-acount-label{text-align:left;flex:1;font-weight:400;transition:color var(--mscoa-chart-transition)}.selected-acount-label--error,.selected-acount-label--business-error{color:var(--mat-sys-error);font-weight:500}.selected-acount-label--tag{display:inline-block;padding:4px 10px;background-color:var(--lib-forms-primary-container);color:var(--lib-forms-on-primary-container);border-radius:16px;font-size:13px;font-weight:500;line-height:1.5;border:1px solid var(--lib-forms-primary);box-shadow:0 1px 2px #0000001a;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing),box-shadow var(--lib-forms-duration-hover) var(--lib-forms-easing);width:100%;max-width:100%;overflow:visible;white-space:normal;word-wrap:break-word;word-break:break-word;cursor:pointer;box-sizing:border-box;position:relative}.selected-acount-label--tag:hover{background-color:var(--sem-info-surface);box-shadow:0 2px 4px #1976d226}.segment-cell-content{display:flex;align-items:center;justify-content:flex-end;font-weight:500}.vat-badge{display:inline-flex;align-items:center;justify-content:center;height:16px;padding:2px 6px;border-radius:8px;font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;background-color:var(--sem-success-surface);color:var(--sem-warning);border:1px solid var(--lib-forms-outline-variant);box-shadow:none;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing),border-color var(--lib-forms-duration-hover) var(--lib-forms-easing);flex-shrink:0;align-self:flex-start;margin-top:2px;line-height:1}.vat-badge:hover{background-color:var(--sem-warning-surface);border-color:var(--sem-warning)}.vat-chip-container{padding-left:var(--mscoa-chart-spacing-sm);padding-right:var(--mscoa-chart-spacing-sm);padding-bottom:var(--mscoa-chart-spacing-xs);margin-top:var(--mscoa-chart-spacing-xs)}.vat-chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:4px 8px;border-radius:12px;font-size:11px;font-weight:600;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing),box-shadow var(--lib-forms-duration-hover) var(--lib-forms-easing),transform var(--lib-forms-duration-hover) var(--lib-forms-easing);box-shadow:0 1px 3px #0000001f}.vat-chip--applicable{background:linear-gradient(135deg,var(--sem-warning) 0%,var(--sem-warning) 100%);color:var(--lib-forms-on-primary);border:1px solid var(--sem-warning)}.vat-chip--applicable:hover{box-shadow:0 2px 6px #f57c004d;transform:translateY(-1px)}.vat-chip__icon{font-size:14px;width:14px;height:14px;opacity:.9}.vat-chip__text{font-size:11px;font-weight:600;letter-spacing:.3px}.info-box{display:flex;align-items:center;gap:var(--mscoa-chart-spacing-sm);padding:12px;background:var(--sem-info-surface);border-radius:var(--mscoa-chart-border-radius);margin-bottom:var(--mscoa-chart-spacing-md)}.info-icon{min-width:38px;margin:auto;margin-top:var(--mscoa-chart-spacing-sm)}.empty-state{padding:var(--mscoa-chart-spacing-md);text-align:center;display:flex;align-items:center;justify-content:center;gap:var(--mscoa-chart-spacing-sm);color:var(--mat-sys-on-surface-variant)}.validation-hints{margin-top:var(--mscoa-chart-spacing-md);padding:var(--mscoa-chart-spacing-md);background-color:var(--lib-forms-surface-container-low);border-radius:var(--mscoa-chart-border-radius);border-left:4px solid var(--lib-forms-primary);box-shadow:0 1px 3px #00000014}.validation-hints__title{font-weight:600;font-size:var(--mscoa-chart-font-size-base);margin:0 0 var(--mscoa-chart-spacing-sm) 0;color:var(--lib-forms-on-surface);display:flex;align-items:center;gap:var(--mscoa-chart-spacing-xs)}.validation-hints__title:before{content:\"\\1f4a1\";font-size:16px}.validation-hints__list{margin:0;padding-left:var(--mscoa-chart-spacing-md);color:var(--lib-forms-on-surface-variant);font-size:13px;line-height:1.6}.validation-hints__list li{margin-bottom:var(--mscoa-chart-spacing-sm);position:relative}.validation-hints__list li::marker{color:var(--lib-forms-primary)}.validation-hints__list li:last-child{margin-bottom:0}mat-error{font-size:.75em;margin-top:var(--mscoa-chart-spacing-xs)}mat-error ul{margin:0;padding-left:var(--mscoa-chart-spacing-md)}mat-error li{margin-bottom:var(--mscoa-chart-spacing-xs)}.loading-placeholder{padding:var(--mscoa-chart-spacing-md);color:var(--mat-sys-on-surface-variant)}.loading-spinner-container{display:flex;justify-content:center;align-items:center;height:256px}.error-state{padding:var(--mscoa-chart-spacing-md);color:var(--mat-sys-error)}mat-panel-description{font-size:.875em;line-height:1.4}:host .main-expanse-content{background:var(--mat-sys-surface-container)}@media(max-width:768px){.dual-basis-container{gap:var(--mscoa-chart-spacing-md)}.cell-button{min-height:44px;font-size:15px;max-width:300px}.content{padding:var(--mscoa-chart-spacing-md)}.validation-hints{font-size:13px;padding:var(--mscoa-chart-spacing-sm)}.inline-hint{font-size:11px}}.cell-button:focus-visible,button:focus-visible{outline:3px solid var(--mat-sys-primary);outline-offset:2px;outline-style:solid}@media(prefers-contrast:high){.cell-button{border:2px solid currentColor}.cell-button:focus-visible{outline-width:4px}.selected-acount-label--error{font-weight:600}}@media(prefers-reduced-motion:reduce){.cell-button,.success-indicator,.fade-in,.validated-indicator{animation:none;transition:none}}.table__cell--active{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}@media(prefers-contrast:high){.table__cell--active{background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}}.table__cell--business-error{background-color:var(--lib-forms-error-container);border-left:3px solid var(--lib-forms-error)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInSuccess{0%{background-color:transparent}50%{background-color:var(--sem-success-surface)}to{background-color:var(--mat-sys-primary-container)}}@keyframes scaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes validatedShieldIn{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.fade-in{animation:fadeIn var(--mscoa-chart-transition)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.skeleton-loader{background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-high) 50%,var(--mat-sys-surface-container) 75%);background-size:200% 100%;animation:loading 1.5s ease-in-out infinite;border-radius:var(--mscoa-chart-border-radius)}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-row{height:48px;margin-bottom:var(--mscoa-chart-spacing-xs)}.skeleton-cell{height:100%;margin-right:var(--mscoa-chart-spacing-md)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MscoaChartInputMenuComponent, selector: "lib-mscoa-chart-input-menu", inputs: ["innerInput", "countdownSeconds", "hoveredId"], outputs: ["edit", "delete", "cancelDelete", "hoverStart", "hoverEnd"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i3.NgTemplateOutlet, i4$2.CdkPortalOutlet, i1$2.MatButton, i1$2.MatIconButton, i3$1.MatIcon, i6.MatMenuTrigger, i5$2.MatTable, i5$2.MatHeaderCellDef, i5$2.MatHeaderRowDef, i5$2.MatColumnDef, i5$2.MatCellDef, i5$2.MatRowDef, i5$2.MatHeaderCell, i5$2.MatCell, i5$2.MatHeaderRow, i5$2.MatRow, i5$1.MatTooltip, import('./ngx-t-forms-mscoa-chart-toolbar.component-D4Xa_Yi0.mjs').then(m => m.MscoaChartToolbarComponent), import('./ngx-t-forms-mscoa-error-display.component-99DpVSy7.mjs').then(m => m.MscoaErrorDisplayComponent), import('./ngx-t-forms-mscoa-temporary-hint.component-B1Z-IXSL.mjs').then(m => m.MscoaTemporaryHintComponent), i3.AsyncPipe, i3.TitleCasePipe, Promise.resolve().then(function () { return daysAgo_pipe; }).then(m => m.ConvertCamelCasePipe)]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.12", ngImport: i0, type: MscoaChartComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-mscoa-chart-toolbar.component-C_abEBQ5.mjs').then(m => m.MscoaChartToolbarComponent), import('./ngx-t-forms-mscoa-error-display.component-99DpVSy7.mjs').then(m => m.MscoaErrorDisplayComponent), import('./ngx-t-forms-mscoa-temporary-hint.component-B1Z-IXSL.mjs').then(m => m.MscoaTemporaryHintComponent), Promise.resolve().then(function () { return daysAgo_pipe; }).then(m => m.ConvertCamelCasePipe)], resolveMetadata: (MscoaChartToolbarComponent, MscoaErrorDisplayComponent, MscoaTemporaryHintComponent, ConvertCamelCasePipe) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.12", ngImport: i0, type: MscoaChartComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-mscoa-chart-toolbar.component-D4Xa_Yi0.mjs').then(m => m.MscoaChartToolbarComponent), import('./ngx-t-forms-mscoa-error-display.component-99DpVSy7.mjs').then(m => m.MscoaErrorDisplayComponent), import('./ngx-t-forms-mscoa-temporary-hint.component-B1Z-IXSL.mjs').then(m => m.MscoaTemporaryHintComponent), Promise.resolve().then(function () { return daysAgo_pipe; }).then(m => m.ConvertCamelCasePipe)], resolveMetadata: (MscoaChartToolbarComponent, MscoaErrorDisplayComponent, MscoaTemporaryHintComponent, ConvertCamelCasePipe) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'lib-mscoa-chart', imports: [
                             CommonModule,
@@ -16503,7 +17036,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.2.12", n
                             MscoaChartInputMenuComponent,
                             MscoaErrorDisplayComponent,
                             MscoaTemporaryHintComponent
-                        ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ((viewData$ | async); as viewData) {\r\n<section\r\n  (click)=\"setAsTouched($event)\"\r\n  class=\"mscoa-chart__container\"\r\n  [class.mscoa-chart__container--touched]=\"touched()\"\r\n  role=\"region\"\r\n  [attr.aria-label]=\"'MSCOA Account Chart'\"\r\n  [attr.aria-busy]=\"viewData.loading || viewData.validatingValue\">\r\n\r\n  @if (viewData.loading) {\r\n    <div class=\"mscoa-chart__loading-container\" role=\"status\" aria-live=\"polite\">\r\n      <mat-spinner [diameter]=\"40\"></mat-spinner>\r\n      <span class=\"sr-only\">Loading account chart data...</span>\r\n    </div>\r\n  } @else {\r\n    @defer () {\r\n      @if (viewData.accountTreeKeys || viewData.cashAccountTreeKeys) {\r\n        <div class=\"mscoa-chart__table-container\">\r\n          @if (isDualAccountBasis) {\r\n            <div class=\"dual-basis-container\" role=\"group\" aria-label=\"Dual accounting basis tables\">\r\n              <div class=\"dual-basis-container__item\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"selectionTable;\r\n                  context: {\r\n                    accountingBasis: ACCOUNTING_BASIS.ACCRUAL,\r\n                    canCollapse: true,\r\n                    viewData: viewData\r\n                  }\">\r\n                </ng-container>\r\n              </div>\r\n\r\n              <div class=\"dual-basis-container__item\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"selectionTable;\r\n                  context: {\r\n                    accountingBasis: ACCOUNTING_BASIS.CASH,\r\n                    canCollapse: true,\r\n                    viewData: viewData\r\n                  }\">\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          } @else {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"selectionTable;\r\n              context: {\r\n                accountingBasis: config()?.accountingBasis,\r\n                canCollapse: false,\r\n                viewData: viewData\r\n              }\">\r\n            </ng-container>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <ng-template\r\n        #selectionTable\r\n        let-accountingBasis=\"accountingBasis\"\r\n        let-canCollapse=\"canCollapse\"\r\n        let-viewData=\"viewData\">\r\n\r\n        <div class=\"mscoa-chart-table\" role=\"group\" [attr.aria-label]=\"'Accounting basis: ' + (accountingBasis || 'Accrual')\">\r\n          <!-- Toolbar -->\r\n          <lib-mscoa-chart-toolbar\r\n            [accountingBasis]=\"accountingBasis\"\r\n            [canCollapse]=\"canCollapse\"\r\n            [isExpanded]=\"getExpansionState(accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\"\r\n            (toggleExpansion)=\"toggleDualBasisExpansion(accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\">\r\n          </lib-mscoa-chart-toolbar>\r\n\r\n          @if (shouldShowTable(isDualAccountBasis, getExpansionState(accountingBasis || ACCOUNTING_BASIS.ACCRUAL), accountingBasis)) {\r\n            <div class=\"account-selection-table-wrapper\">\r\n              <div\r\n                class=\"account-selection-table-container\"\r\n                [class.account-selection-table-container--accrual]=\"!accountingBasis || accountingBasis === ACCOUNTING_BASIS.ACCRUAL\"\r\n                [class.account-selection-table-container--cash]=\"accountingBasis === ACCOUNTING_BASIS.CASH\"\r\n                role=\"table\"\r\n                [attr.aria-label]=\"'Account selection table for ' + (accountingBasis || 'Accrual') + ' basis'\">\r\n\r\n              <table\r\n                mat-table\r\n                [dataSource]=\"accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashTableData : viewData.tableData\"\r\n                [trackBy]=\"trackByRow\"\r\n                class=\"table\"\r\n                [attr.aria-label]=\"'Account selection table for ' + (accountingBasis || 'Accrual') + ' basis'\"\r\n                [attr.aria-describedby]=\"'table-description-' + (accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\"\r\n                role=\"table\">\r\n                <span [id]=\"'table-description-' + (accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\" class=\"sr-only\">\r\n                  Use arrow keys to navigate between cells. Press Enter or Space to select an account.\r\n                </span>\r\n\r\n                @for (\r\n                  col of (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols);\r\n                  track trackByColumn($index, col);\r\n                  let i = $index\r\n                ) {\r\n                  <ng-container [matColumnDef]=\"col\" [sticky]=\"i === 0\">\r\n                    <!-- Header Cell -->\r\n                    <th\r\n                      mat-header-cell\r\n                      *matHeaderCellDef\r\n                      [class.table__header-cell--segment]=\"isSegmentColumn(i)\"\r\n                      [class.table__header-cell--regular]=\"!isSegmentColumn(i)\"\r\n                      [style.width.%]=\"getColumnWidthPercent(isSegmentColumn(i), (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols).length)\"\r\n                      [style.min-width.px]=\"isSegmentColumn(i) ? 150 : 200\"\r\n                      [attr.aria-sort]=\"i === 0 ? 'none' : null\"\r\n                      [attr.scope]=\"'col'\"\r\n                      [attr.aria-label]=\"getHeaderText(col, i, accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashHasMultiSelect : viewData.hasMultiSelect) + ' column'\">\r\n                      {{ getHeaderText(col, i, accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashHasMultiSelect : viewData.hasMultiSelect) | titlecase | unCamelCase }}\r\n                    </th>\r\n\r\n                    <!-- Data Cell -->\r\n                    <td\r\n                      mat-cell\r\n                      *matCellDef=\"let row\"\r\n                      [class.table__cell--segment]=\"isSegmentColumn(i)\"\r\n                      [class.table__cell--regular]=\"!isSegmentColumn(i)\"\r\n                      [class.table__cell--active]=\"editSelection?.segment === row['segment'] && activeColumn === col\"\r\n                      [class.table__cell--business-error]=\"!isSegmentColumn(i) && getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                      [attr.aria-label]=\"'Cell for ' + row['segment'] + ' segment, ' + col + ' column'\"\r\n                      [attr.aria-selected]=\"!!row[col]\"\r\n                      [attr.aria-invalid]=\"!isSegmentColumn(i) && !!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                      [attr.role]=\"'gridcell'\"\r\n                      [attr.tabindex]=\"isSegmentColumn(i) ? -1 : (row[col] ? 0 : -1)\">\r\n\r\n                      @if (isSegmentColumn(i)) {\r\n                        <!-- Segment Column -->\r\n                        <div class=\"segment-cell-content\">\r\n                          @if (editorMode() && row.innerInput?.id) {\r\n                            <button\r\n                              mat-icon-button\r\n                              [matMenuTriggerData]=\"{innerInput: row.innerInput}\"\r\n                              [matMenuTriggerFor]=\"inputMenu\"\r\n                              [matTooltip]=\"'Options for: ' + row.innerInput.label\"\r\n                              [attr.aria-label]=\"'Options menu for ' + row.innerInput.label\"\r\n                              (click)=\"$event.stopPropagation()\">\r\n                              <mat-icon>more_vert</mat-icon>\r\n                            </button>\r\n                          }\r\n                          <span class=\"segment-cell-content__label\">{{ row['label'] }}</span>\r\n                        </div>\r\n                      } @else {\r\n                        <!-- Regular Column -->\r\n                        @if (row.innerInput?.id && formGroup() && inputPortals[getPortalKey(row.innerInput.id)]) {\r\n                          <div class=\"portal-container\">\r\n                            <ng-template [cdkPortalOutlet]=\"inputPortals[getPortalKey(row.innerInput.id)]\"></ng-template>\r\n                          </div>\r\n                          } @else {\r\n                            @if (row[col]) {\r\n                            <!-- Account Selected -->\r\n                            @if (getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment']); as cellError) {\r\n                              <div class=\"account-cell-wrapper\"\r\n                                   [class.account-cell-wrapper--expandable]=\"isTextTruncated(row[col] | unCamelCase)\">\r\n                                <button\r\n                                  [disabled]=\"row['singleSelect'] === true && col === COLUMNS.CREDIT\"\r\n                                  (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); setAsTouched($event)\"\r\n                                  (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\r\n                                  color=\"primary\"\r\n                                  mat-button\r\n                                  class=\"cell-button cell-button--selected cell-button--business-error\"\r\n                                  [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase) + ' for ' + row['segment'] + ' segment, ' + col + ' column. Business error: ' + cellError.message\"\r\n                                  [attr.aria-invalid]=\"true\"\r\n                                  [attr.aria-pressed]=\"true\"\r\n                                  [matTooltip]=\"cellError.message\">\r\n                                  <div class=\"content\">\r\n                                    <span\r\n                                      class=\"selected-acount-label selected-acount-label--tag selected-acount-label--business-error\"\r\n                                      [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase)\">\r\n                                      {{ row[col] | unCamelCase }}\r\n                                      @if (shouldShowVatChip(row, col)) {\r\n                                        <span\r\n                                          class=\"vat-badge\"\r\n                                          [attr.aria-label]=\"'VAT applicable to ' + col + ' column'\"\r\n                                          [matTooltip]=\"'VAT is applicable to this ' + col + ' account selection'\">\r\n                                          VAT\r\n                                        </span>\r\n                                      }\r\n                                    </span>\r\n                                    <mat-icon class=\"business-error-indicator\" aria-hidden=\"true\">error</mat-icon>\r\n                                  </div>\r\n                                </button>\r\n                              </div>\r\n                            } @else {\r\n                              <div class=\"account-cell-wrapper\"\r\n                                   [class.account-cell-wrapper--expandable]=\"isTextTruncated(row[col] | unCamelCase)\">\r\n                                <button\r\n                                  [disabled]=\"(row['singleSelect'] === true && col === COLUMNS.CREDIT) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                  (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); setAsTouched($event)\"\r\n                                  (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\r\n                                  color=\"primary\"\r\n                                  mat-button\r\n                                  class=\"cell-button cell-button--selected\"\r\n                                  [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase) + ' for ' + row['segment'] + ' segment, ' + col + ' column. Press Enter or Space to change'\"\r\n                                  [attr.aria-invalid]=\"false\"\r\n                                  [attr.aria-disabled]=\"(row['singleSelect'] === true && col === COLUMNS.CREDIT) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                  [attr.aria-pressed]=\"true\">\r\n                                  <div class=\"content\">\r\n                                    <span\r\n                                      class=\"selected-acount-label selected-acount-label--tag\"\r\n                                      [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase)\">\r\n                                      {{ row[col] | unCamelCase }}\r\n                                      @if (shouldShowVatChip(row, col)) {\r\n                                        <span\r\n                                          class=\"vat-badge\"\r\n                                          [attr.aria-label]=\"'VAT applicable to ' + col + ' column'\"\r\n                                          [matTooltip]=\"'VAT is applicable to this ' + col + ' account selection'\">\r\n                                          VAT\r\n                                        </span>\r\n                                      }\r\n                                    </span>\r\n                                    @if (showValidationSuccessIndicators) {\r\n                                      <mat-icon class=\"validated-indicator\" aria-hidden=\"true\" [matTooltip]=\"'Validated'\">shield</mat-icon>\r\n                                    } @else {\r\n                                      <mat-icon class=\"success-indicator\" aria-hidden=\"true\">check_circle</mat-icon>\r\n                                    }\r\n                                  </div>\r\n                                </button>\r\n                              </div>\r\n                            }\r\n                          } @else {\r\n                            <!-- No Account Selected -->\r\n                            <div class=\"cell-button-wrapper\">\r\n                              <button\r\n                                [disabled]=\"selectionDisabled(row, col) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                [color]=\"\"\r\n                                (click)=\"selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); $event.stopPropagation(); setAsTouched($event)\"\r\n                                (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\r\n                                mat-button\r\n                                class=\"cell-button\"\r\n                                [class.cell-button--business-error]=\"!!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                [attr.aria-label]=\"shouldShowAutoSelectedLabel(row, col) ? 'Auto selected for ' + row['segment'] + ' segment, ' + col + ' column' : 'Select account for ' + row['segment'] + ' segment, ' + col + ' column'\"\r\n                                [attr.aria-disabled]=\"selectionDisabled(row, col) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                [attr.aria-describedby]=\"getValidationHint(row, col, accountingBasis || ACCOUNTING_BASIS.ACCRUAL) ? 'hint-' + row['segment'] + '-' + col : null\"\r\n                                [attr.aria-invalid]=\"hasError(touched(), inputConfig().required || false, !!row[col]) || !!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                [attr.aria-required]=\"inputConfig().required && !row[col]\"\r\n                                [matTooltip]=\"getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])?.message\">\r\n                                <div class=\"content\">\r\n                                  <span\r\n                                    class=\"selected-acount-label\"\r\n                                    [class.selected-acount-label--error]=\"hasError(touched(), inputConfig().required || false, !!row[col])\"\r\n                                    [class.selected-acount-label--business-error]=\"!!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\">\r\n                                    {{ (shouldShowAutoSelectedLabel(row, col) ? 'auto selected' : 'Select account') | unCamelCase }}\r\n                                    @if (inputConfig().required && !row[col]) {\r\n                                      <span class=\"required-indicator\" aria-label=\"Required field\">*</span>\r\n                                    }\r\n                                  </span>\r\n                                  @if (getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])) {\r\n                                    <mat-icon class=\"business-error-indicator\" aria-hidden=\"true\">error</mat-icon>\r\n                                  } @else if (shouldShowDropdownIcon(row, col)) {\r\n                                    <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\r\n                                  }\r\n                                </div>\r\n                              </button>\r\n                              @if (getValidationHint(row, col, accountingBasis || ACCOUNTING_BASIS.ACCRUAL); as hint) {\r\n                                <span\r\n                                  class=\"inline-hint\"\r\n                                  [id]=\"'hint-' + row['segment'] + '-' + col\"\r\n                                  role=\"tooltip\"\r\n                                  aria-live=\"polite\">\r\n                                  {{ hint }}\r\n                                </span>\r\n                              }\r\n                            </div>\r\n                          }\r\n                        }\r\n                      }\r\n                    </td>\r\n                  </ng-container>\r\n                }\r\n\r\n                <tr mat-header-row *matHeaderRowDef=\"accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols\"></tr>\r\n                <tr mat-row *matRowDef=\"let row; columns: (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols)\"></tr>\r\n              </table>\r\n            </div>\r\n            </div>\r\n\r\n            <!-- Empty State -->\r\n            @if ((accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashAccountTreeKeys : viewData.accountTreeKeys).length === 0) {\r\n              <section class=\"empty-state\" role=\"status\" aria-live=\"polite\">\r\n                <mat-icon aria-hidden=\"true\">info</mat-icon>\r\n                <span>\r\n                  No account segments are currently configured.\r\n                  Please configure account segments to proceed.\r\n                </span>\r\n              </section>\r\n            }\r\n\r\n            <!-- Success Messages (Temporary) -->\r\n            @if ((successMessage$ | async); as successMessages) {\r\n              @if (getSuccessMessage(successMessages, accountingBasis || ACCOUNTING_BASIS.ACCRUAL); as msg) {\r\n                <lib-mscoa-temporary-hint\r\n                  [message]=\"getSuccessMessage(successMessages, accountingBasis || ACCOUNTING_BASIS.ACCRUAL) ?? ''\"\r\n                  [type]=\"'info'\"\r\n                  [duration]=\"6000\"\r\n                  [showDismiss]=\"true\">\r\n                </lib-mscoa-temporary-hint>\r\n              }\r\n            }\r\n\r\n            <!-- Business Rule Errors (Temporary display, keeps error styling) -->\r\n            @if ((viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL] || []).length > 0) {\r\n              <lib-mscoa-error-display\r\n                [errors]=\"viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL] || []\"\r\n                type=\"error\"\r\n                [context]=\"{ accountingBasis: accountingBasis || ACCOUNTING_BASIS.ACCRUAL }\"\r\n                [duration]=\"6000\"\r\n                [showDismiss]=\"true\">\r\n              </lib-mscoa-error-display>\r\n            }\r\n\r\n            <!-- Temporary Contextual Hints -->\r\n            @if (temporaryHintMessage) {\r\n              <lib-mscoa-temporary-hint\r\n                [message]=\"temporaryHintMessage\"\r\n                [type]=\"temporaryHintType\"\r\n                [duration]=\"6000\"\r\n                [showDismiss]=\"true\">\r\n              </lib-mscoa-temporary-hint>\r\n            }\r\n\r\n            <!-- Validation Hints (Context-Aware) -->\r\n            @if (!touched() && inputConfig().required && !viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL]?.length && (!isDualAccountBasis || accountingBasis === ACCOUNTING_BASIS.ACCRUAL || !accountingBasis)) {\r\n              <div class=\"validation-hints\" role=\"region\" aria-label=\"Validation guidance\">\r\n                <p class=\"validation-hints__title\">Guidance:</p>\r\n                <ul class=\"validation-hints__list\">\r\n                  <li>Account combinations are validated automatically. Select accounts that belong to compatible reporting categories.</li>\r\n                  <li>Required fields are marked with an asterisk (*). Complete all required selections to proceed.</li>\r\n                  <li>Some fields may be automatically populated based on your selections to ensure consistency.</li>\r\n                </ul>\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      </ng-template>\r\n    } @placeholder {\r\n      <div class=\"loading-placeholder\" role=\"status\" aria-live=\"polite\">\r\n        <p>Loading data...</p>\r\n      </div>\r\n    } @loading (minimum 100ms) {\r\n      <div class=\"loading-spinner-container\" role=\"status\" aria-live=\"polite\">\r\n        <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"40\"></mat-progress-spinner>\r\n        <span class=\"sr-only\">Loading account chart...</span>\r\n      </div>\r\n    } @error {\r\n      <div class=\"error-state\" role=\"alert\" aria-live=\"assertive\">\r\n        <p>Error loading data. Please try again.</p>\r\n      </div>\r\n    }\r\n  }\r\n</section>\r\n}\r\n\r\n<!-- Input Menu -->\r\n<mat-menu #inputMenu=\"matMenu\">\r\n  <ng-template matMenuContent let-innerInput=\"innerInput\">\r\n    <lib-mscoa-chart-input-menu\r\n      [innerInput]=\"innerInput\"\r\n      [countdownSeconds]=\"inputWillBeRemovedIn(innerInput.id)\"\r\n      [hoveredId]=\"hoveredInputId\"\r\n      (edit)=\"onInputMenuEdit($event)\"\r\n      (delete)=\"onInputMenuDelete($event)\"\r\n      (cancelDelete)=\"onInputMenuCancelDelete($event)\"\r\n      (hoverStart)=\"onInputMenuHoverStart($event)\"\r\n      (hoverEnd)=\"onInputMenuHoverEnd()\">\r\n    </lib-mscoa-chart-input-menu>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["@charset \"UTF-8\";:host{--mscoa-chart-spacing-xs: 4px;--mscoa-chart-spacing-sm: 8px;--mscoa-chart-spacing-md: 16px;--mscoa-chart-spacing-lg: 24px;--mscoa-chart-spacing-xl: 32px;--mscoa-chart-border-radius: 4px;--mscoa-chart-transition: var(--lib-forms-duration-hover) var(--lib-forms-easing);--mscoa-chart-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--mscoa-chart-font-size-base: 14px;--mscoa-chart-line-height: 1.5;display:block;font-family:var(--mscoa-chart-font-family);font-size:var(--mscoa-chart-font-size-base);line-height:var(--mscoa-chart-line-height)}.mscoa-chart__container{padding:0;transition:background-color var(--mscoa-chart-transition);width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}.mscoa-chart__loading-container{padding:var(--mscoa-chart-spacing-lg);display:flex;align-items:center;justify-content:center}.mscoa-chart__table-container{position:relative;width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;box-sizing:border-box}.dual-basis-container{display:flex;flex-direction:column;gap:var(--mscoa-chart-spacing-sm)}.dual-basis-container__item{flex:1}:host .single-base{gap:var(--mscoa-chart-spacing-sm);height:48px;font-size:.875em;font-weight:500;transition:background-color var(--mscoa-chart-transition)}:host .single-base--cash{background:var(--mat-sys-inverse-primary)}.account-selection-table-wrapper{position:relative;width:100%}.account-selection-table-container{border-radius:var(--mscoa-chart-border-radius);overflow-x:auto;overflow-y:visible;transition:border-color var(--mscoa-chart-transition);width:100%;max-width:100%;box-sizing:border-box;display:block}.account-selection-table-container--accrual{border:solid 1px var(--mat-sys-primary)}.account-selection-table-container--cash{border:solid 1px var(--mat-sys-inverse-primary)}.account-selection-table-container::-webkit-scrollbar{height:8px}.account-selection-table-container::-webkit-scrollbar-track{background:var(--lib-forms-surface-container-low);border-radius:4px}.account-selection-table-container::-webkit-scrollbar-thumb{background:var(--lib-forms-outline-variant);border-radius:4px}.account-selection-table-container::-webkit-scrollbar-thumb:hover{background:var(--lib-forms-outline)}.table{width:100%;table-layout:fixed;font-family:var(--mscoa-chart-font-family);font-size:var(--mscoa-chart-font-size-base);line-height:var(--mscoa-chart-line-height);border-collapse:separate;border-spacing:0;display:table;box-sizing:border-box;max-width:100%}.table__header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}.table__header-cell--segment{text-align:right;padding-right:var(--mscoa-chart-spacing-md);min-width:150px;max-width:200px}.table__header-cell--regular{padding-left:var(--mscoa-chart-spacing-lg);min-width:200px;max-width:none}.table__cell{overflow:visible;box-sizing:border-box;position:relative;vertical-align:top}.table__cell--segment{background:var(--mat-list-active-indicator-color, var(--mat-sys-secondary-container));text-align:right;font-weight:500;padding-right:var(--mscoa-chart-spacing-md);min-width:150px;max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;vertical-align:middle}.table__cell--regular{padding:0;min-width:200px;max-width:none;word-wrap:break-word;vertical-align:top;overflow:visible}.table__cell--active{background-color:var(--mat-sys-primary-container);transition:background-color var(--mscoa-chart-transition)}mat-header-cell{background:var(--mat-sys-surface-container);font-weight:600;font-size:var(--mscoa-chart-font-size-base);padding:var(--mscoa-chart-spacing-md)}.mscoa-chart-table{display:flex;flex-direction:column}.portal-container{width:100%}.account-cell-wrapper{position:relative;width:100%;max-width:100%;overflow:visible;z-index:1;min-height:38px;display:flex;flex-direction:column;gap:4px}.cell-button-wrapper{position:relative;width:100%;max-width:100%;overflow:hidden}.cell-button{height:fit-content;min-height:38px;width:100%;max-width:100%;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing),transform var(--lib-forms-duration-hover) var(--lib-forms-easing),box-shadow var(--lib-forms-duration-hover) var(--lib-forms-easing);font-family:var(--mscoa-chart-font-family);font-size:var(--mscoa-chart-font-size-base);line-height:var(--mscoa-chart-line-height);position:relative;overflow:visible;padding:8px}.cell-button:hover:not(:disabled){background-color:var(--mat-sys-surface-container);transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.cell-button:focus-visible{outline:3px solid var(--mat-sys-primary);outline-offset:2px;z-index:1}.cell-button:disabled{opacity:.6;cursor:not-allowed}.cell-button--selected{background-color:transparent}.cell-button--selected:hover:not(:disabled){background-color:var(--lib-forms-surface-container-low);border-color:var(--lib-forms-primary)}.cell-button.cell-button--selected{animation:fadeInSuccess var(--mscoa-chart-transition)}.cell-button.cell-button--business-error{border-color:var(--lib-forms-error)}.cell-button.cell-button--business-error .selected-acount-label--business-error{color:var(--mat-sys-error);border-color:var(--mat-sys-error)}.success-indicator{color:var(--sem-success);font-size:18px;width:18px;right:-8px;top:-4px;background:var(--lib-forms-surface);border-radius:16px;position:absolute;height:18px;margin-left:var(--mscoa-chart-spacing-xs);animation:scaleIn var(--mscoa-chart-transition);flex-shrink:0}.validated-indicator{color:var(--lib-forms-primary);font-size:18px;width:18px;height:18px;right:-8px;top:-4px;background:var(--lib-forms-surface);border-radius:16px;position:absolute;margin-left:var(--mscoa-chart-spacing-xs);flex-shrink:0;animation:validatedShieldIn .3s ease-out forwards}.business-error-indicator{color:var(--lib-forms-error);font-size:18px;width:18px;right:-8px;top:-4px;background:var(--lib-forms-surface);border-radius:16px;position:absolute;height:18px;margin-left:var(--mscoa-chart-spacing-xs);flex-shrink:0}.required-indicator{color:var(--lib-forms-error);font-weight:600;margin-left:2px}.inline-hint{display:block;font-size:12px;color:var(--lib-forms-on-surface-variant);margin-top:var(--mscoa-chart-spacing-xs);padding:var(--mscoa-chart-spacing-xs) var(--mscoa-chart-spacing-sm);background-color:var(--lib-forms-surface-container-low);border-radius:var(--mscoa-chart-border-radius);line-height:1.4;max-width:100%;word-wrap:break-word}.content{padding:0;display:flex;gap:6px;width:100%;max-width:100%;overflow:visible;min-width:0;flex-wrap:wrap;align-items:center}.selected-acount-label{text-align:left;flex:1;font-weight:400;transition:color var(--mscoa-chart-transition)}.selected-acount-label--error,.selected-acount-label--business-error{color:var(--mat-sys-error);font-weight:500}.selected-acount-label--tag{display:inline-block;padding:4px 10px;background-color:var(--lib-forms-primary-container);color:var(--lib-forms-on-primary-container);border-radius:16px;font-size:13px;font-weight:500;line-height:1.5;border:1px solid var(--lib-forms-primary);box-shadow:0 1px 2px #0000001a;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing),box-shadow var(--lib-forms-duration-hover) var(--lib-forms-easing);width:100%;max-width:100%;overflow:visible;white-space:normal;word-wrap:break-word;word-break:break-word;cursor:pointer;box-sizing:border-box;position:relative}.selected-acount-label--tag:hover{background-color:var(--sem-info-surface);box-shadow:0 2px 4px #1976d226}.segment-cell-content{display:flex;align-items:center;justify-content:flex-end;font-weight:500}.vat-badge{display:inline-flex;align-items:center;justify-content:center;height:16px;padding:2px 6px;border-radius:8px;font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;background-color:var(--sem-success-surface);color:var(--sem-warning);border:1px solid var(--lib-forms-outline-variant);box-shadow:none;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing),border-color var(--lib-forms-duration-hover) var(--lib-forms-easing);flex-shrink:0;align-self:flex-start;margin-top:2px;line-height:1}.vat-badge:hover{background-color:var(--sem-warning-surface);border-color:var(--sem-warning)}.vat-chip-container{padding-left:var(--mscoa-chart-spacing-sm);padding-right:var(--mscoa-chart-spacing-sm);padding-bottom:var(--mscoa-chart-spacing-xs);margin-top:var(--mscoa-chart-spacing-xs)}.vat-chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:4px 8px;border-radius:12px;font-size:11px;font-weight:600;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing),box-shadow var(--lib-forms-duration-hover) var(--lib-forms-easing),transform var(--lib-forms-duration-hover) var(--lib-forms-easing);box-shadow:0 1px 3px #0000001f}.vat-chip--applicable{background:linear-gradient(135deg,var(--sem-warning) 0%,var(--sem-warning) 100%);color:var(--lib-forms-on-primary);border:1px solid var(--sem-warning)}.vat-chip--applicable:hover{box-shadow:0 2px 6px #f57c004d;transform:translateY(-1px)}.vat-chip__icon{font-size:14px;width:14px;height:14px;opacity:.9}.vat-chip__text{font-size:11px;font-weight:600;letter-spacing:.3px}.info-box{display:flex;align-items:center;gap:var(--mscoa-chart-spacing-sm);padding:12px;background:var(--sem-info-surface);border-radius:var(--mscoa-chart-border-radius);margin-bottom:var(--mscoa-chart-spacing-md)}.info-icon{min-width:38px;margin:auto;margin-top:var(--mscoa-chart-spacing-sm)}.empty-state{padding:var(--mscoa-chart-spacing-md);text-align:center;display:flex;align-items:center;justify-content:center;gap:var(--mscoa-chart-spacing-sm);color:var(--mat-sys-on-surface-variant)}.validation-hints{margin-top:var(--mscoa-chart-spacing-md);padding:var(--mscoa-chart-spacing-md);background-color:var(--lib-forms-surface-container-low);border-radius:var(--mscoa-chart-border-radius);border-left:4px solid var(--lib-forms-primary);box-shadow:0 1px 3px #00000014}.validation-hints__title{font-weight:600;font-size:var(--mscoa-chart-font-size-base);margin:0 0 var(--mscoa-chart-spacing-sm) 0;color:var(--lib-forms-on-surface);display:flex;align-items:center;gap:var(--mscoa-chart-spacing-xs)}.validation-hints__title:before{content:\"\\1f4a1\";font-size:16px}.validation-hints__list{margin:0;padding-left:var(--mscoa-chart-spacing-md);color:var(--lib-forms-on-surface-variant);font-size:13px;line-height:1.6}.validation-hints__list li{margin-bottom:var(--mscoa-chart-spacing-sm);position:relative}.validation-hints__list li::marker{color:var(--lib-forms-primary)}.validation-hints__list li:last-child{margin-bottom:0}mat-error{font-size:.75em;margin-top:var(--mscoa-chart-spacing-xs)}mat-error ul{margin:0;padding-left:var(--mscoa-chart-spacing-md)}mat-error li{margin-bottom:var(--mscoa-chart-spacing-xs)}.loading-placeholder{padding:var(--mscoa-chart-spacing-md);color:var(--mat-sys-on-surface-variant)}.loading-spinner-container{display:flex;justify-content:center;align-items:center;height:256px}.error-state{padding:var(--mscoa-chart-spacing-md);color:var(--mat-sys-error)}mat-panel-description{font-size:.875em;line-height:1.4}:host .main-expanse-content{background:var(--mat-sys-surface-container)}@media(max-width:768px){.dual-basis-container{gap:var(--mscoa-chart-spacing-md)}.cell-button{min-height:44px;font-size:15px;max-width:300px}.content{padding:var(--mscoa-chart-spacing-md)}.validation-hints{font-size:13px;padding:var(--mscoa-chart-spacing-sm)}.inline-hint{font-size:11px}}.cell-button:focus-visible,button:focus-visible{outline:3px solid var(--mat-sys-primary);outline-offset:2px;outline-style:solid}@media(prefers-contrast:high){.cell-button{border:2px solid currentColor}.cell-button:focus-visible{outline-width:4px}.selected-acount-label--error{font-weight:600}}@media(prefers-reduced-motion:reduce){.cell-button,.success-indicator,.fade-in,.validated-indicator{animation:none;transition:none}}.table__cell--active{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}@media(prefers-contrast:high){.table__cell--active{background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}}.table__cell--business-error{background-color:var(--lib-forms-error-container);border-left:3px solid var(--lib-forms-error)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInSuccess{0%{background-color:transparent}50%{background-color:var(--sem-success-surface)}to{background-color:var(--mat-sys-primary-container)}}@keyframes scaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes validatedShieldIn{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.fade-in{animation:fadeIn var(--mscoa-chart-transition)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.skeleton-loader{background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-high) 50%,var(--mat-sys-surface-container) 75%);background-size:200% 100%;animation:loading 1.5s ease-in-out infinite;border-radius:var(--mscoa-chart-border-radius)}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-row{height:48px;margin-bottom:var(--mscoa-chart-spacing-xs)}.skeleton-cell{height:100%;margin-right:var(--mscoa-chart-spacing-md)}\n"] }]
+                        ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ((viewData$ | async); as viewData) {\r\n<section\r\n  (click)=\"setAsTouched($event)\"\r\n  class=\"mscoa-chart__container\"\r\n  [class.mscoa-chart__container--touched]=\"touched()\"\r\n  role=\"region\"\r\n  [attr.aria-label]=\"'MSCOA Account Chart'\"\r\n  [attr.aria-busy]=\"viewData.loading || viewData.validatingValue\">\r\n\r\n  @if (viewData.loading) {\r\n    <div class=\"mscoa-chart__loading-container\" role=\"status\" aria-live=\"polite\">\r\n      <mat-spinner [diameter]=\"40\"></mat-spinner>\r\n      <span class=\"sr-only\">Loading account chart data...</span>\r\n    </div>\r\n  } @else {\r\n    @defer () {\r\n      @if (viewData.accountTreeKeys || viewData.cashAccountTreeKeys) {\r\n        <div class=\"mscoa-chart__table-container\">\r\n          @if (isDualAccountBasis) {\r\n            <div class=\"dual-basis-container\" role=\"group\" aria-label=\"Dual accounting basis tables\">\r\n              <div class=\"dual-basis-container__item\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"selectionTable;\r\n                  context: {\r\n                    accountingBasis: ACCOUNTING_BASIS.ACCRUAL,\r\n                    canCollapse: true,\r\n                    viewData: viewData\r\n                  }\">\r\n                </ng-container>\r\n              </div>\r\n\r\n              <div class=\"dual-basis-container__item\">\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"selectionTable;\r\n                  context: {\r\n                    accountingBasis: ACCOUNTING_BASIS.CASH,\r\n                    canCollapse: true,\r\n                    viewData: viewData\r\n                  }\">\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          } @else {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"selectionTable;\r\n              context: {\r\n                accountingBasis: config()?.accountingBasis,\r\n                canCollapse: false,\r\n                viewData: viewData\r\n              }\">\r\n            </ng-container>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      <ng-template\r\n        #selectionTable\r\n        let-accountingBasis=\"accountingBasis\"\r\n        let-canCollapse=\"canCollapse\"\r\n        let-viewData=\"viewData\">\r\n\r\n        <div class=\"mscoa-chart-table\" role=\"group\" [attr.aria-label]=\"'Accounting basis: ' + (accountingBasis || 'Accrual')\">\r\n          <!-- Toolbar -->\r\n          <lib-mscoa-chart-toolbar\r\n            [accountingBasis]=\"accountingBasis\"\r\n            [canCollapse]=\"canCollapse\"\r\n            [isExpanded]=\"getExpansionState(accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\"\r\n            (toggleExpansion)=\"toggleDualBasisExpansion(accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\">\r\n          </lib-mscoa-chart-toolbar>\r\n\r\n          @if (shouldShowTable(isDualAccountBasis, getExpansionState(accountingBasis || ACCOUNTING_BASIS.ACCRUAL), accountingBasis)) {\r\n            <div class=\"account-selection-table-wrapper\">\r\n              <div\r\n                class=\"account-selection-table-container\"\r\n                [class.account-selection-table-container--accrual]=\"!accountingBasis || accountingBasis === ACCOUNTING_BASIS.ACCRUAL\"\r\n                [class.account-selection-table-container--cash]=\"accountingBasis === ACCOUNTING_BASIS.CASH\"\r\n                role=\"table\"\r\n                [attr.aria-label]=\"'Account selection table for ' + (accountingBasis || 'Accrual') + ' basis'\">\r\n\r\n              <table\r\n                mat-table\r\n                [dataSource]=\"accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashTableData : viewData.tableData\"\r\n                [trackBy]=\"trackByRow\"\r\n                class=\"table\"\r\n                [attr.aria-label]=\"'Account selection table for ' + (accountingBasis || 'Accrual') + ' basis'\"\r\n                [attr.aria-describedby]=\"'table-description-' + (accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\"\r\n                role=\"table\">\r\n                <span [id]=\"'table-description-' + (accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\" class=\"sr-only\">\r\n                  Use arrow keys to navigate between cells. Press Enter or Space to select an account.\r\n                </span>\r\n\r\n                @for (\r\n                  col of (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols);\r\n                  track trackByColumn($index, col);\r\n                  let i = $index\r\n                ) {\r\n                  <ng-container [matColumnDef]=\"col\" [sticky]=\"i === 0\">\r\n                    <!-- Header Cell -->\r\n                    <th\r\n                      mat-header-cell\r\n                      *matHeaderCellDef\r\n                      [class.table__header-cell--segment]=\"isSegmentColumn(i)\"\r\n                      [class.table__header-cell--regular]=\"!isSegmentColumn(i)\"\r\n                      [style.width.%]=\"getColumnWidthPercent(isSegmentColumn(i), (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols).length)\"\r\n                      [style.min-width.px]=\"isSegmentColumn(i) ? 150 : 200\"\r\n                      [attr.aria-sort]=\"i === 0 ? 'none' : null\"\r\n                      [attr.scope]=\"'col'\"\r\n                      [attr.aria-label]=\"getHeaderText(col, i, accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashHasMultiSelect : viewData.hasMultiSelect) + ' column'\">\r\n                      {{ getHeaderText(col, i, accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashHasMultiSelect : viewData.hasMultiSelect) | titlecase | unCamelCase }}\r\n                    </th>\r\n\r\n                    <!-- Data Cell -->\r\n                    <td\r\n                      mat-cell\r\n                      *matCellDef=\"let row\"\r\n                      [class.table__cell--segment]=\"isSegmentColumn(i)\"\r\n                      [class.table__cell--regular]=\"!isSegmentColumn(i)\"\r\n                      [class.table__cell--active]=\"editSelection?.segment === row['segment'] && activeColumn === col\"\r\n                      [class.table__cell--business-error]=\"!isSegmentColumn(i) && getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                      [attr.aria-label]=\"'Cell for ' + row['segment'] + ' segment, ' + col + ' column'\"\r\n                      [attr.aria-selected]=\"!!row[col]\"\r\n                      [attr.aria-invalid]=\"!isSegmentColumn(i) && !!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                      [attr.role]=\"'gridcell'\"\r\n                      [attr.tabindex]=\"isSegmentColumn(i) ? -1 : (row[col] ? 0 : -1)\">\r\n\r\n                      @if (isSegmentColumn(i)) {\r\n                        <!-- Segment Column -->\r\n                        <div class=\"segment-cell-content\">\r\n                          @if (editorMode() && row.innerInput?.id) {\r\n                            <button\r\n                              mat-icon-button\r\n                              [matMenuTriggerData]=\"{innerInput: row.innerInput}\"\r\n                              [matMenuTriggerFor]=\"inputMenu\"\r\n                              [matTooltip]=\"'Options for: ' + row.innerInput.label\"\r\n                              [attr.aria-label]=\"'Options menu for ' + row.innerInput.label\"\r\n                              (click)=\"$event.stopPropagation()\">\r\n                              <mat-icon>more_vert</mat-icon>\r\n                            </button>\r\n                          }\r\n                          <span class=\"segment-cell-content__label\">{{ row['label'] }}</span>\r\n                        </div>\r\n                      } @else {\r\n                        <!-- Regular Column -->\r\n                        @if (row.innerInput?.id) {\r\n                          <!-- Custom-input row (peer of the segments): the value is entered inline via the\r\n                               input portal on the primary (debit) leg; other legs mirror it and render no\r\n                               control. `innerInput.id` is already the namespaced portal key, so it is looked\r\n                               up directly \u2014 prepending it again (getPortalKey) double-namespaces and misses. -->\r\n                          @if (col === COLUMNS.DEBIT && formGroup() && inputPortals[row.innerInput.id]) {\r\n                            <div class=\"portal-container\">\r\n                              <ng-template [cdkPortalOutlet]=\"inputPortals[row.innerInput.id]\"></ng-template>\r\n                            </div>\r\n                          }\r\n                          } @else {\r\n                            @if (row[col]) {\r\n                            <!-- Account Selected -->\r\n                            @if (getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment']); as cellError) {\r\n                              <div class=\"account-cell-wrapper\"\r\n                                   [class.account-cell-wrapper--expandable]=\"isTextTruncated(row[col] | unCamelCase)\">\r\n                                <button\r\n                                  [disabled]=\"row['singleSelect'] === true && col === COLUMNS.CREDIT\"\r\n                                  (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); setAsTouched($event)\"\r\n                                  (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\r\n                                  color=\"primary\"\r\n                                  mat-button\r\n                                  class=\"cell-button cell-button--selected cell-button--business-error\"\r\n                                  [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase) + ' for ' + row['segment'] + ' segment, ' + col + ' column. Business error: ' + cellError.message\"\r\n                                  [attr.aria-invalid]=\"true\"\r\n                                  [attr.aria-pressed]=\"true\"\r\n                                  [matTooltip]=\"cellError.message\">\r\n                                  <div class=\"content\">\r\n                                    <span\r\n                                      class=\"selected-acount-label selected-acount-label--tag selected-acount-label--business-error\"\r\n                                      [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase)\">\r\n                                      {{ row[col] | unCamelCase }}\r\n                                      @if (shouldShowVatChip(row, col)) {\r\n                                        <span\r\n                                          class=\"vat-badge\"\r\n                                          [attr.aria-label]=\"'VAT applicable to ' + col + ' column'\"\r\n                                          [matTooltip]=\"'VAT is applicable to this ' + col + ' account selection'\">\r\n                                          VAT\r\n                                        </span>\r\n                                      }\r\n                                    </span>\r\n                                    <mat-icon class=\"business-error-indicator\" aria-hidden=\"true\">error</mat-icon>\r\n                                  </div>\r\n                                </button>\r\n                              </div>\r\n                            } @else {\r\n                              <div class=\"account-cell-wrapper\"\r\n                                   [class.account-cell-wrapper--expandable]=\"isTextTruncated(row[col] | unCamelCase)\">\r\n                                <button\r\n                                  [disabled]=\"(row['singleSelect'] === true && col === COLUMNS.CREDIT) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                  (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); setAsTouched($event)\"\r\n                                  (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\r\n                                  color=\"primary\"\r\n                                  mat-button\r\n                                  class=\"cell-button cell-button--selected\"\r\n                                  [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase) + ' for ' + row['segment'] + ' segment, ' + col + ' column. Press Enter or Space to change'\"\r\n                                  [attr.aria-invalid]=\"false\"\r\n                                  [attr.aria-disabled]=\"(row['singleSelect'] === true && col === COLUMNS.CREDIT) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                  [attr.aria-pressed]=\"true\">\r\n                                  <div class=\"content\">\r\n                                    <span\r\n                                      class=\"selected-acount-label selected-acount-label--tag\"\r\n                                      [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase)\">\r\n                                      {{ row[col] | unCamelCase }}\r\n                                      @if (shouldShowVatChip(row, col)) {\r\n                                        <span\r\n                                          class=\"vat-badge\"\r\n                                          [attr.aria-label]=\"'VAT applicable to ' + col + ' column'\"\r\n                                          [matTooltip]=\"'VAT is applicable to this ' + col + ' account selection'\">\r\n                                          VAT\r\n                                        </span>\r\n                                      }\r\n                                    </span>\r\n                                    @if (showValidationSuccessIndicators) {\r\n                                      <mat-icon class=\"validated-indicator\" aria-hidden=\"true\" [matTooltip]=\"'Validated'\">shield</mat-icon>\r\n                                    } @else {\r\n                                      <mat-icon class=\"success-indicator\" aria-hidden=\"true\">check_circle</mat-icon>\r\n                                    }\r\n                                  </div>\r\n                                </button>\r\n                              </div>\r\n                            }\r\n                          } @else {\r\n                            <!-- No Account Selected -->\r\n                            <div class=\"cell-button-wrapper\">\r\n                              <button\r\n                                [disabled]=\"selectionDisabled(row, col) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                [color]=\"\"\r\n                                (click)=\"selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); $event.stopPropagation(); setAsTouched($event)\"\r\n                                (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\r\n                                mat-button\r\n                                class=\"cell-button\"\r\n                                [class.cell-button--business-error]=\"!!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                [attr.aria-label]=\"shouldShowAutoSelectedLabel(row, col) ? 'Auto selected for ' + row['segment'] + ' segment, ' + col + ' column' : 'Select account for ' + row['segment'] + ' segment, ' + col + ' column'\"\r\n                                [attr.aria-disabled]=\"selectionDisabled(row, col) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                [attr.aria-describedby]=\"getValidationHint(row, col, accountingBasis || ACCOUNTING_BASIS.ACCRUAL) ? 'hint-' + row['segment'] + '-' + col : null\"\r\n                                [attr.aria-invalid]=\"hasError(touched(), inputConfig().required || false, !!row[col]) || !!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\r\n                                [attr.aria-required]=\"inputConfig().required && !row[col]\"\r\n                                [matTooltip]=\"getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])?.message\">\r\n                                <div class=\"content\">\r\n                                  <span\r\n                                    class=\"selected-acount-label\"\r\n                                    [class.selected-acount-label--error]=\"hasError(touched(), inputConfig().required || false, !!row[col])\"\r\n                                    [class.selected-acount-label--business-error]=\"!!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\">\r\n                                    {{ (shouldShowAutoSelectedLabel(row, col) ? 'auto selected' : 'Select account') | unCamelCase }}\r\n                                    @if (inputConfig().required && !row[col]) {\r\n                                      <span class=\"required-indicator\" aria-label=\"Required field\">*</span>\r\n                                    }\r\n                                  </span>\r\n                                  @if (getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])) {\r\n                                    <mat-icon class=\"business-error-indicator\" aria-hidden=\"true\">error</mat-icon>\r\n                                  } @else if (shouldShowDropdownIcon(row, col)) {\r\n                                    <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\r\n                                  }\r\n                                </div>\r\n                              </button>\r\n                              @if (getValidationHint(row, col, accountingBasis || ACCOUNTING_BASIS.ACCRUAL); as hint) {\r\n                                <span\r\n                                  class=\"inline-hint\"\r\n                                  [id]=\"'hint-' + row['segment'] + '-' + col\"\r\n                                  role=\"tooltip\"\r\n                                  aria-live=\"polite\">\r\n                                  {{ hint }}\r\n                                </span>\r\n                              }\r\n                            </div>\r\n                          }\r\n                        }\r\n                      }\r\n                    </td>\r\n                  </ng-container>\r\n                }\r\n\r\n                <tr mat-header-row *matHeaderRowDef=\"accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols\"></tr>\r\n                <tr mat-row *matRowDef=\"let row; columns: (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols)\"></tr>\r\n              </table>\r\n            </div>\r\n            </div>\r\n\r\n            <!-- Empty State -->\r\n            @if ((accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashAccountTreeKeys : viewData.accountTreeKeys).length === 0) {\r\n              <section class=\"empty-state\" role=\"status\" aria-live=\"polite\">\r\n                <mat-icon aria-hidden=\"true\">info</mat-icon>\r\n                <span>\r\n                  No account segments are currently configured.\r\n                  Please configure account segments to proceed.\r\n                </span>\r\n              </section>\r\n            }\r\n\r\n            <!-- Success Messages (Temporary) -->\r\n            @if ((successMessage$ | async); as successMessages) {\r\n              @if (getSuccessMessage(successMessages, accountingBasis || ACCOUNTING_BASIS.ACCRUAL); as msg) {\r\n                <lib-mscoa-temporary-hint\r\n                  [message]=\"getSuccessMessage(successMessages, accountingBasis || ACCOUNTING_BASIS.ACCRUAL) ?? ''\"\r\n                  [type]=\"'info'\"\r\n                  [duration]=\"6000\"\r\n                  [showDismiss]=\"true\">\r\n                </lib-mscoa-temporary-hint>\r\n              }\r\n            }\r\n\r\n            <!-- Business Rule Errors (Temporary display, keeps error styling) -->\r\n            @if ((viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL] || []).length > 0) {\r\n              <lib-mscoa-error-display\r\n                [errors]=\"viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL] || []\"\r\n                type=\"error\"\r\n                [context]=\"{ accountingBasis: accountingBasis || ACCOUNTING_BASIS.ACCRUAL }\"\r\n                [duration]=\"6000\"\r\n                [showDismiss]=\"true\">\r\n              </lib-mscoa-error-display>\r\n            }\r\n\r\n            <!-- Temporary Contextual Hints -->\r\n            @if (temporaryHintMessage) {\r\n              <lib-mscoa-temporary-hint\r\n                [message]=\"temporaryHintMessage\"\r\n                [type]=\"temporaryHintType\"\r\n                [duration]=\"6000\"\r\n                [showDismiss]=\"true\">\r\n              </lib-mscoa-temporary-hint>\r\n            }\r\n\r\n            <!-- Validation Hints (Context-Aware) -->\r\n            @if (!touched() && inputConfig().required && !viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL]?.length && (!isDualAccountBasis || accountingBasis === ACCOUNTING_BASIS.ACCRUAL || !accountingBasis)) {\r\n              <div class=\"validation-hints\" role=\"region\" aria-label=\"Validation guidance\">\r\n                <p class=\"validation-hints__title\">Guidance:</p>\r\n                <ul class=\"validation-hints__list\">\r\n                  <li>Account combinations are validated automatically. Select accounts that belong to compatible reporting categories.</li>\r\n                  <li>Required fields are marked with an asterisk (*). Complete all required selections to proceed.</li>\r\n                  <li>Some fields may be automatically populated based on your selections to ensure consistency.</li>\r\n                </ul>\r\n              </div>\r\n            }\r\n          }\r\n        </div>\r\n      </ng-template>\r\n    } @placeholder {\r\n      <div class=\"loading-placeholder\" role=\"status\" aria-live=\"polite\">\r\n        <p>Loading data...</p>\r\n      </div>\r\n    } @loading (minimum 100ms) {\r\n      <div class=\"loading-spinner-container\" role=\"status\" aria-live=\"polite\">\r\n        <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"40\"></mat-progress-spinner>\r\n        <span class=\"sr-only\">Loading account chart...</span>\r\n      </div>\r\n    } @error {\r\n      <div class=\"error-state\" role=\"alert\" aria-live=\"assertive\">\r\n        <p>Error loading data. Please try again.</p>\r\n      </div>\r\n    }\r\n  }\r\n</section>\r\n}\r\n\r\n<!-- Input Menu -->\r\n<mat-menu #inputMenu=\"matMenu\">\r\n  <ng-template matMenuContent let-innerInput=\"innerInput\">\r\n    <lib-mscoa-chart-input-menu\r\n      [innerInput]=\"innerInput\"\r\n      [countdownSeconds]=\"inputWillBeRemovedIn(innerInput.id)\"\r\n      [hoveredId]=\"hoveredInputId\"\r\n      (edit)=\"onInputMenuEdit($event)\"\r\n      (delete)=\"onInputMenuDelete($event)\"\r\n      (cancelDelete)=\"onInputMenuCancelDelete($event)\"\r\n      (hoverStart)=\"onInputMenuHoverStart($event)\"\r\n      (hoverEnd)=\"onInputMenuHoverEnd()\">\r\n    </lib-mscoa-chart-input-menu>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["@charset \"UTF-8\";:host{--mscoa-chart-spacing-xs: 4px;--mscoa-chart-spacing-sm: 8px;--mscoa-chart-spacing-md: 16px;--mscoa-chart-spacing-lg: 24px;--mscoa-chart-spacing-xl: 32px;--mscoa-chart-border-radius: 4px;--mscoa-chart-transition: var(--lib-forms-duration-hover) var(--lib-forms-easing);--mscoa-chart-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;--mscoa-chart-font-size-base: 14px;--mscoa-chart-line-height: 1.5;display:block;font-family:var(--mscoa-chart-font-family);font-size:var(--mscoa-chart-font-size-base);line-height:var(--mscoa-chart-line-height)}.mscoa-chart__container{padding:0;transition:background-color var(--mscoa-chart-transition);width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}.mscoa-chart__loading-container{padding:var(--mscoa-chart-spacing-lg);display:flex;align-items:center;justify-content:center}.mscoa-chart__table-container{position:relative;width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;box-sizing:border-box}.dual-basis-container{display:flex;flex-direction:column;gap:var(--mscoa-chart-spacing-sm)}.dual-basis-container__item{flex:1}:host .single-base{gap:var(--mscoa-chart-spacing-sm);height:48px;font-size:.875em;font-weight:500;transition:background-color var(--mscoa-chart-transition)}:host .single-base--cash{background:var(--mat-sys-inverse-primary)}.account-selection-table-wrapper{position:relative;width:100%}.account-selection-table-container{border-radius:var(--mscoa-chart-border-radius);overflow-x:auto;overflow-y:visible;transition:border-color var(--mscoa-chart-transition);width:100%;max-width:100%;box-sizing:border-box;display:block}.account-selection-table-container--accrual{border:solid 1px var(--mat-sys-primary)}.account-selection-table-container--cash{border:solid 1px var(--mat-sys-inverse-primary)}.account-selection-table-container::-webkit-scrollbar{height:8px}.account-selection-table-container::-webkit-scrollbar-track{background:var(--lib-forms-surface-container-low);border-radius:4px}.account-selection-table-container::-webkit-scrollbar-thumb{background:var(--lib-forms-outline-variant);border-radius:4px}.account-selection-table-container::-webkit-scrollbar-thumb:hover{background:var(--lib-forms-outline)}.table{width:100%;table-layout:fixed;font-family:var(--mscoa-chart-font-family);font-size:var(--mscoa-chart-font-size-base);line-height:var(--mscoa-chart-line-height);border-collapse:separate;border-spacing:0;display:table;box-sizing:border-box;max-width:100%}.table__header-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box}.table__header-cell--segment{text-align:right;padding-right:var(--mscoa-chart-spacing-md);min-width:150px;max-width:200px}.table__header-cell--regular{padding-left:var(--mscoa-chart-spacing-lg);min-width:200px;max-width:none}.table__cell{overflow:visible;box-sizing:border-box;position:relative;vertical-align:top}.table__cell--segment{background:var(--mat-list-active-indicator-color, var(--mat-sys-secondary-container));text-align:right;font-weight:500;padding-right:var(--mscoa-chart-spacing-md);min-width:150px;max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;vertical-align:middle}.table__cell--regular{padding:0;min-width:200px;max-width:none;word-wrap:break-word;vertical-align:top;overflow:visible}.table__cell--active{background-color:var(--mat-sys-primary-container);transition:background-color var(--mscoa-chart-transition)}mat-header-cell{background:var(--mat-sys-surface-container);font-weight:600;font-size:var(--mscoa-chart-font-size-base);padding:var(--mscoa-chart-spacing-md)}.mscoa-chart-table{display:flex;flex-direction:column}.portal-container{width:100%}.account-cell-wrapper{position:relative;width:100%;max-width:100%;overflow:visible;z-index:1;min-height:38px;display:flex;flex-direction:column;gap:4px}.cell-button-wrapper{position:relative;width:100%;max-width:100%;overflow:hidden}.cell-button{height:fit-content;min-height:38px;width:100%;max-width:100%;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing),transform var(--lib-forms-duration-hover) var(--lib-forms-easing),box-shadow var(--lib-forms-duration-hover) var(--lib-forms-easing);font-family:var(--mscoa-chart-font-family);font-size:var(--mscoa-chart-font-size-base);line-height:var(--mscoa-chart-line-height);position:relative;overflow:visible;padding:8px}.cell-button:hover:not(:disabled){background-color:var(--mat-sys-surface-container);transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.cell-button:focus-visible{outline:3px solid var(--mat-sys-primary);outline-offset:2px;z-index:1}.cell-button:disabled{opacity:.6;cursor:not-allowed}.cell-button--selected{background-color:transparent}.cell-button--selected:hover:not(:disabled){background-color:var(--lib-forms-surface-container-low);border-color:var(--lib-forms-primary)}.cell-button.cell-button--selected{animation:fadeInSuccess var(--mscoa-chart-transition)}.cell-button.cell-button--business-error{border-color:var(--lib-forms-error)}.cell-button.cell-button--business-error .selected-acount-label--business-error{color:var(--mat-sys-error);border-color:var(--mat-sys-error)}.success-indicator{color:var(--sem-success);font-size:18px;width:18px;right:-8px;top:-4px;background:var(--lib-forms-surface);border-radius:16px;position:absolute;height:18px;margin-left:var(--mscoa-chart-spacing-xs);animation:scaleIn var(--mscoa-chart-transition);flex-shrink:0}.validated-indicator{color:var(--lib-forms-primary);font-size:18px;width:18px;height:18px;right:-8px;top:-4px;background:var(--lib-forms-surface);border-radius:16px;position:absolute;margin-left:var(--mscoa-chart-spacing-xs);flex-shrink:0;animation:validatedShieldIn .3s ease-out forwards}.business-error-indicator{color:var(--lib-forms-error);font-size:18px;width:18px;right:-8px;top:-4px;background:var(--lib-forms-surface);border-radius:16px;position:absolute;height:18px;margin-left:var(--mscoa-chart-spacing-xs);flex-shrink:0}.required-indicator{color:var(--lib-forms-error);font-weight:600;margin-left:2px}.inline-hint{display:block;font-size:12px;color:var(--lib-forms-on-surface-variant);margin-top:var(--mscoa-chart-spacing-xs);padding:var(--mscoa-chart-spacing-xs) var(--mscoa-chart-spacing-sm);background-color:var(--lib-forms-surface-container-low);border-radius:var(--mscoa-chart-border-radius);line-height:1.4;max-width:100%;word-wrap:break-word}.content{padding:0;display:flex;gap:6px;width:100%;max-width:100%;overflow:visible;min-width:0;flex-wrap:wrap;align-items:center}.selected-acount-label{text-align:left;flex:1;font-weight:400;transition:color var(--mscoa-chart-transition)}.selected-acount-label--error,.selected-acount-label--business-error{color:var(--mat-sys-error);font-weight:500}.selected-acount-label--tag{display:inline-block;padding:4px 10px;background-color:var(--lib-forms-primary-container);color:var(--lib-forms-on-primary-container);border-radius:16px;font-size:13px;font-weight:500;line-height:1.5;border:1px solid var(--lib-forms-primary);box-shadow:0 1px 2px #0000001a;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing),box-shadow var(--lib-forms-duration-hover) var(--lib-forms-easing);width:100%;max-width:100%;overflow:visible;white-space:normal;word-wrap:break-word;word-break:break-word;cursor:pointer;box-sizing:border-box;position:relative}.selected-acount-label--tag:hover{background-color:var(--sem-info-surface);box-shadow:0 2px 4px #1976d226}.segment-cell-content{display:flex;align-items:center;justify-content:flex-end;font-weight:500}.vat-badge{display:inline-flex;align-items:center;justify-content:center;height:16px;padding:2px 6px;border-radius:8px;font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;background-color:var(--sem-success-surface);color:var(--sem-warning);border:1px solid var(--lib-forms-outline-variant);box-shadow:none;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing),border-color var(--lib-forms-duration-hover) var(--lib-forms-easing);flex-shrink:0;align-self:flex-start;margin-top:2px;line-height:1}.vat-badge:hover{background-color:var(--sem-warning-surface);border-color:var(--sem-warning)}.vat-chip-container{padding-left:var(--mscoa-chart-spacing-sm);padding-right:var(--mscoa-chart-spacing-sm);padding-bottom:var(--mscoa-chart-spacing-xs);margin-top:var(--mscoa-chart-spacing-xs)}.vat-chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:4px 8px;border-radius:12px;font-size:11px;font-weight:600;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing),box-shadow var(--lib-forms-duration-hover) var(--lib-forms-easing),transform var(--lib-forms-duration-hover) var(--lib-forms-easing);box-shadow:0 1px 3px #0000001f}.vat-chip--applicable{background:linear-gradient(135deg,var(--sem-warning) 0%,var(--sem-warning) 100%);color:var(--lib-forms-on-primary);border:1px solid var(--sem-warning)}.vat-chip--applicable:hover{box-shadow:0 2px 6px #f57c004d;transform:translateY(-1px)}.vat-chip__icon{font-size:14px;width:14px;height:14px;opacity:.9}.vat-chip__text{font-size:11px;font-weight:600;letter-spacing:.3px}.info-box{display:flex;align-items:center;gap:var(--mscoa-chart-spacing-sm);padding:12px;background:var(--sem-info-surface);border-radius:var(--mscoa-chart-border-radius);margin-bottom:var(--mscoa-chart-spacing-md)}.info-icon{min-width:38px;margin:auto;margin-top:var(--mscoa-chart-spacing-sm)}.empty-state{padding:var(--mscoa-chart-spacing-md);text-align:center;display:flex;align-items:center;justify-content:center;gap:var(--mscoa-chart-spacing-sm);color:var(--mat-sys-on-surface-variant)}.validation-hints{margin-top:var(--mscoa-chart-spacing-md);padding:var(--mscoa-chart-spacing-md);background-color:var(--lib-forms-surface-container-low);border-radius:var(--mscoa-chart-border-radius);border-left:4px solid var(--lib-forms-primary);box-shadow:0 1px 3px #00000014}.validation-hints__title{font-weight:600;font-size:var(--mscoa-chart-font-size-base);margin:0 0 var(--mscoa-chart-spacing-sm) 0;color:var(--lib-forms-on-surface);display:flex;align-items:center;gap:var(--mscoa-chart-spacing-xs)}.validation-hints__title:before{content:\"\\1f4a1\";font-size:16px}.validation-hints__list{margin:0;padding-left:var(--mscoa-chart-spacing-md);color:var(--lib-forms-on-surface-variant);font-size:13px;line-height:1.6}.validation-hints__list li{margin-bottom:var(--mscoa-chart-spacing-sm);position:relative}.validation-hints__list li::marker{color:var(--lib-forms-primary)}.validation-hints__list li:last-child{margin-bottom:0}mat-error{font-size:.75em;margin-top:var(--mscoa-chart-spacing-xs)}mat-error ul{margin:0;padding-left:var(--mscoa-chart-spacing-md)}mat-error li{margin-bottom:var(--mscoa-chart-spacing-xs)}.loading-placeholder{padding:var(--mscoa-chart-spacing-md);color:var(--mat-sys-on-surface-variant)}.loading-spinner-container{display:flex;justify-content:center;align-items:center;height:256px}.error-state{padding:var(--mscoa-chart-spacing-md);color:var(--mat-sys-error)}mat-panel-description{font-size:.875em;line-height:1.4}:host .main-expanse-content{background:var(--mat-sys-surface-container)}@media(max-width:768px){.dual-basis-container{gap:var(--mscoa-chart-spacing-md)}.cell-button{min-height:44px;font-size:15px;max-width:300px}.content{padding:var(--mscoa-chart-spacing-md)}.validation-hints{font-size:13px;padding:var(--mscoa-chart-spacing-sm)}.inline-hint{font-size:11px}}.cell-button:focus-visible,button:focus-visible{outline:3px solid var(--mat-sys-primary);outline-offset:2px;outline-style:solid}@media(prefers-contrast:high){.cell-button{border:2px solid currentColor}.cell-button:focus-visible{outline-width:4px}.selected-acount-label--error{font-weight:600}}@media(prefers-reduced-motion:reduce){.cell-button,.success-indicator,.fade-in,.validated-indicator{animation:none;transition:none}}.table__cell--active{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}@media(prefers-contrast:high){.table__cell--active{background-color:var(--mat-sys-primary);color:var(--mat-sys-on-primary)}}.table__cell--business-error{background-color:var(--lib-forms-error-container);border-left:3px solid var(--lib-forms-error)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInSuccess{0%{background-color:transparent}50%{background-color:var(--sem-success-surface)}to{background-color:var(--mat-sys-primary-container)}}@keyframes scaleIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes validatedShieldIn{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.fade-in{animation:fadeIn var(--mscoa-chart-transition)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.skeleton-loader{background:linear-gradient(90deg,var(--mat-sys-surface-container) 25%,var(--mat-sys-surface-container-high) 50%,var(--mat-sys-surface-container) 75%);background-size:200% 100%;animation:loading 1.5s ease-in-out infinite;border-radius:var(--mscoa-chart-border-radius)}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-row{height:48px;margin-bottom:var(--mscoa-chart-spacing-xs)}.skeleton-cell{height:100%;margin-right:var(--mscoa-chart-spacing-md)}\n"] }]
             }], ctorParameters: () => [], propDecorators: { inputConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputConfig", required: true }] }], editorMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editorMode", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: false }] }], formBuilderFunctions: [{ type: i0.Input, args: [{ isSignal: true, alias: "formBuilderFunctions", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], onContainerClick: [{ type: i0.Output, args: ["onContainerClick"] }], interaction: [{ type: i0.Output, args: ["interaction"] }] } }) });
 
 /**
@@ -17799,9 +18332,9 @@ function builderKind(fn) {
     }
 }
 // --- helpers ----------------------------------------------------------------
-const KEYWORD_OPS = ['includes', 'startsWith', 'endsWith', 'matches', 'in'];
-const SYMBOLIC_OPS = ['===', '!==', '==', '!=', '>=', '<=', '>', '<'];
-const unquote = (v) => {
+const KEYWORD_OPS$1 = ['includes', 'startsWith', 'endsWith', 'matches', 'in'];
+const SYMBOLIC_OPS$1 = ['===', '!==', '==', '!=', '>=', '<=', '>', '<'];
+const unquote$1 = (v) => {
     const t = v.trim();
     if (t.length >= 2) {
         const a = t[0];
@@ -17811,28 +18344,28 @@ const unquote = (v) => {
     }
     return t;
 };
-const isBareLiteral = (v) => v === 'true' || v === 'false' || v === 'null' || (v.trim() !== '' && !Number.isNaN(Number(v)));
+const isBareLiteral$1 = (v) => v === 'true' || v === 'false' || v === 'null' || (v.trim() !== '' && !Number.isNaN(Number(v)));
 /** Formats a builder value for the expression string (bare for numbers/bools, else quoted). */
-const formatValue = (v) => (isBareLiteral(v.trim()) ? v.trim() : `"${v}"`);
+const formatValue = (v) => (isBareLiteral$1(v.trim()) ? v.trim() : `"${v}"`);
 const toNum = (v, fallback = 0) => {
     const n = Number(v);
     return Number.isNaN(n) ? fallback : n;
 };
 // --- parse ------------------------------------------------------------------
-function parseCondition(part) {
+function parseCondition$1(part) {
     const p = part.trim();
-    for (const kw of KEYWORD_OPS) {
+    for (const kw of KEYWORD_OPS$1) {
         const m = p.match(new RegExp(`^(.+?)\\s+${kw}\\s+(.+)$`, 'i'));
         if (m && m[1] && m[2])
-            return { field: m[1].trim(), operator: kw, value: unquote(m[2]) };
+            return { field: m[1].trim(), operator: kw, value: unquote$1(m[2]) };
     }
-    for (const op of SYMBOLIC_OPS) {
+    for (const op of SYMBOLIC_OPS$1) {
         const idx = p.indexOf(op);
         if (idx > 0) {
             const field = p.slice(0, idx).trim();
             const value = p.slice(idx + op.length).trim();
             if (field && value)
-                return { field, operator: op, value: unquote(value) };
+                return { field, operator: op, value: unquote$1(value) };
         }
     }
     return null;
@@ -17851,7 +18384,7 @@ function parsePredicate(expr) {
     const parts = hasOr ? e.split('||') : hasAnd ? e.split('&&') : [e];
     const conditions = [];
     for (const part of parts) {
-        const c = parseCondition(part);
+        const c = parseCondition$1(part);
         if (!c)
             return null;
         conditions.push(c);
@@ -17884,7 +18417,7 @@ function parseProjection(expr) {
             items.push({ type: 'rename', alias: (segs[segs.length - 1] ?? '').trim(), path });
         }
         else if (!hasBrace && c !== -1) {
-            items.push({ type: 'literal', alias: t.slice(0, c).trim(), value: unquote(t.slice(c + 1)) });
+            items.push({ type: 'literal', alias: t.slice(0, c).trim(), value: unquote$1(t.slice(c + 1)) });
         }
         else if (/^[\w.$-]+$/.test(t)) {
             items.push({ type: 'field', field: t });
@@ -18562,7 +19095,7 @@ class DataTreeComponent {
         setTimeout(() => textarea?.setSelectionRange(newCursorPosition, newCursorPosition), 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DataTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DataTreeComponent, isStandalone: true, selector: "lib-data-tree", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, formInputs: { classPropertyName: "formInputs", publicName: "formInputs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pathChanged: "pathChanged" }, host: { classAttribute: "lib-data-tree" }, viewQueries: [{ propertyName: "textareaElementRef", first: true, predicate: ["textarea"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-accordion multi class=\"surface\">\n  <!-- 1 - Pick the data -->\n  <mat-expansion-panel expanded>\n    <mat-expansion-panel-header>\n      <mat-panel-title>\n        <mat-icon class=\"title-icon\">dataset_linked</mat-icon>\n        <span class=\"panel-title\">1 &middot; Pick your data</span>\n      </mat-panel-title>\n    </mat-expansion-panel-header>\n\n    <div class=\"content\">\n      <p class=\"hint-line\">\n        <mat-icon class=\"info-icon\">touch_app</mat-icon>\n        <span>Tick a field to map it. Pick an array (<mat-icon class=\"inline-icon\">data_array</mat-icon>) to transform its items next.</span>\n      </p>\n\n      <mat-tree [dataSource]=\"treeClass.dataSource\" [treeControl]=\"treeClass.treeControl\" class=\"data-tree\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding>\n          <span class=\"node-spacer\" aria-hidden=\"true\"></span>\n          <mat-checkbox (change)=\"update(node)\" [checked]=\"nodeIsChecked(node)\" class=\"node-checkbox\"\n            [matTooltip]=\"'Map field: ' + node.key\">\n            <span class=\"node-key\">{{ node.key }}</span>\n            <span class=\"node-value\" [style.color]=\"getNodeValueColor(node.value)\">{{ node.value }}</span>\n          </mat-checkbox>\n        </mat-tree-node>\n\n        <mat-tree-node *matTreeNodeDef=\"let node; when: treeClass.hasChild\" matTreeNodePadding>\n          <button class=\"node-toggle\" mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.key\">\n            <mat-icon>{{ treeClass.treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          </button>\n          <mat-checkbox (change)=\"update(node)\" [checked]=\"nodeIsChecked(node)\" [matTooltip]=\"'Select ' + node.key\">\n            <span class=\"node-key\">{{ node.key }}</span>\n          </mat-checkbox>\n        </mat-tree-node>\n      </mat-tree>\n    </div>\n  </mat-expansion-panel>\n\n  <!-- 2 - Build the pipeline -->\n  <mat-expansion-panel expanded>\n    <mat-expansion-panel-header>\n      <mat-panel-title>\n        <mat-icon class=\"title-icon\">account_tree</mat-icon>\n        <span class=\"panel-title\">2 &middot; Transform your data</span>\n      </mat-panel-title>\n    </mat-expansion-panel-header>\n\n    <div class=\"content\">\n      @if (treeClass.activePath.length === 0) {\n        <p class=\"hint-line\">\n          <mat-icon class=\"info-icon\">arrow_upward</mat-icon>\n          <span>Select a field above to begin.</span>\n        </p>\n      } @else {\n        <nav class=\"breadcrumb\" aria-label=\"Selected path\">\n          @for (path of treeClass.activePath; track trackByPath($index, path); let isLast = $last) {\n            <button type=\"button\" class=\"crumb\" [class.crumb-active]=\"path.inEdit\"\n              [class.crumb-array]=\"path.keyIsArrayIndex\" [disabled]=\"!path.keyIsArrayIndex && !path.inEdit\"\n              [matTooltip]=\"path.keyIsArrayIndex ? 'Transform this array' : path.key\" (click)=\"setupPath(path)\">\n              <mat-icon>{{ path.keyIsArrayIndex ? 'data_array' : 'folder' }}</mat-icon>\n              <span class=\"crumb-text\">{{ path.key }}</span>\n              @if (path.functions.length > 0) { <span class=\"crumb-badge\">{{ path.functions.length }}</span> }\n            </button>\n            @if (!isLast) { <mat-icon class=\"crumb-sep\">chevron_right</mat-icon> }\n          }\n        </nav>\n\n        @if (hasANodeInEdit()) {\n          <div class=\"pipeline\" role=\"list\" aria-label=\"Transform pipeline\">\n            <span class=\"stage stage-source\" role=\"listitem\">\n              <mat-icon>database</mat-icon>\n              <span class=\"stage-label\">Source</span>\n            </span>\n\n            @for (step of steps; track step.id; let i = $index) {\n              <mat-icon class=\"flow-arrow\">chevron_right</mat-icon>\n              <button class=\"stage stage-step\" role=\"listitem\" [class.stage-active]=\"step.inEdit\"\n                [class.stage-empty]=\"!step.function\" (click)=\"editFunction(step.id)\"\n                [matTooltip]=\"functionMeta(step.function)?.hint || 'Choose an operation'\">\n                <mat-icon>{{ functionMeta(step.function)?.icon || 'help_outline' }}</mat-icon>\n                <span class=\"stage-label\">{{ (step.function | titlecase) || 'Choose' }}</span>\n                @if (stepRowCount(i); as n) {\n                  <span class=\"stage-count\">{{ n }} {{ n === 1 ? 'row' : 'rows' }}</span>\n                }\n              </button>\n            }\n\n            <mat-icon class=\"flow-arrow\">chevron_right</mat-icon>\n            <button class=\"stage stage-add\" [matMenuTriggerFor]=\"addMenu\" matTooltip=\"Add a transform step\">\n              <mat-icon>add</mat-icon>\n              <span class=\"stage-label\">Add</span>\n            </button>\n            <mat-menu #addMenu=\"matMenu\">\n              @for (option of functionOptions; track option.value) {\n                <button mat-menu-item (click)=\"addStep(option.value)\">\n                  <mat-icon>{{ option.icon }}</mat-icon>\n                  <span>{{ option.label }}</span>\n                  <span class=\"menu-hint\">{{ option.hint }}</span>\n                </button>\n              }\n            </mat-menu>\n          </div>\n\n          @if (getFunctionInEdit(); as fn) {\n            <section class=\"editor\">\n              <label class=\"f-field full\">\n                <span class=\"f-label\">Operation</span>\n                <select class=\"f-control\" [value]=\"fn.function\" (change)=\"functionChanged(inputValue($event))\">\n                  <option value=\"\" disabled>Choose what this step does</option>\n                  @for (option of functionOptions; track option.value) {\n                    <option [value]=\"option.value\">{{ option.label }}</option>\n                  }\n                </select>\n              </label>\n              @if (fn.function && activeFunctionMeta(); as meta) {\n                <p class=\"sub-hint\">{{ meta.hint }}</p>\n              }\n\n              @if (!fn.function) {\n                <p class=\"hint-line\">\n                  <mat-icon class=\"info-icon\">info</mat-icon>\n                  <span>Choose an operation to configure this step.</span>\n                </p>\n              } @else {\n                @if (rawMode()) {\n                  <label class=\"f-field full\">\n                    <span class=\"f-label\">Expression</span>\n                    <textarea class=\"f-control f-textarea\" #textarea rows=\"2\" [value]=\"fn.expression\"\n                      (input)=\"onRawChange($event)\" (focus)=\"onFocus()\" placeholder=\"Type the raw expression\"></textarea>\n                  </label>\n                  <p class=\"sub-hint\">Type <code>$</code> to insert a field or operator.</p>\n\n                  @if (showSuggestions()) {\n                    <div class=\"suggestions\">\n                      <div class=\"suggestion-group\">\n                        <span class=\"field-label\">Operators</span>\n                        <div class=\"chip-row\">\n                          @for (method of getMethods(); track method.value) {\n                            <button mat-stroked-button class=\"ins-chip\" (click)=\"selectSuggestionInput(method.value)\">\n                              {{ method.value }}\n                            </button>\n                          }\n                        </div>\n                      </div>\n                      <div class=\"suggestion-group\">\n                        <span class=\"field-label\">Inputs</span>\n                        <div class=\"chip-row\">\n                          @for (input of getAllInputs(); track input.formControlName) {\n                            <button mat-stroked-button class=\"ins-chip\" (click)=\"selectSuggestionInput(input.formControlName)\">\n                              {{ input.label }}\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    </div>\n                  }\n                } @else {\n                  @switch (activeKind()) {\n                    @case ('predicate') {\n                      @if (predicate(); as p) {\n                        @if (p.conditions.length > 1) {\n                          <div class=\"match-row\">\n                            <span class=\"field-label\">Match</span>\n                            <mat-button-toggle-group class=\"seg\" [value]=\"p.connector\" hideSingleSelectionIndicator\n                              (change)=\"setConnector($event.value)\">\n                              <mat-button-toggle value=\"&&\">All</mat-button-toggle>\n                              <mat-button-toggle value=\"||\">Any</mat-button-toggle>\n                            </mat-button-toggle-group>\n                            <span class=\"muted\">of the conditions</span>\n                          </div>\n                        }\n                        @for (cond of p.conditions; track $index) {\n                          <div class=\"q-item\">\n                            <div class=\"q-stack\">\n                              <label class=\"f-field\">\n                                <span class=\"f-label\">Field</span>\n                                <select class=\"f-control\" [value]=\"cond.field\"\n                                  (change)=\"updateCondition($index, { field: inputValue($event) })\">\n                                  @for (f of fieldOptionsWith(cond.field); track f) { <option [value]=\"f\">{{ f }}</option> }\n                                </select>\n                              </label>\n                              <div class=\"q-pair q-pair-op\">\n                                <label class=\"f-field\">\n                                  <span class=\"f-label\">Operator</span>\n                                  <select class=\"f-control\" [value]=\"cond.operator\"\n                                    (change)=\"updateCondition($index, { operator: inputValue($event) })\">\n                                    @for (op of operators; track op.value) { <option [value]=\"op.value\">{{ op.label }}</option> }\n                                  </select>\n                                </label>\n                                <label class=\"f-field\">\n                                  <span class=\"f-label\">Value</span>\n                                  <input class=\"f-control\" [value]=\"cond.value\" placeholder=\"active, 18, Durban\"\n                                    (input)=\"updateCondition($index, { value: inputValue($event) })\">\n                                </label>\n                              </div>\n                            </div>\n                            <button mat-icon-button class=\"q-remove\" (click)=\"removeCondition($index)\"\n                              matTooltip=\"Remove\"><mat-icon>close</mat-icon></button>\n                          </div>\n                        }\n                        <button type=\"button\" class=\"link-btn\" (click)=\"addCondition()\">\n                          <mat-icon>add</mat-icon> Add condition\n                        </button>\n                      }\n                    }\n\n                    @case ('project') {\n                      @if (projection(); as proj) {\n                        <span class=\"field-label\">Keep fields</span>\n                        <div class=\"checklist\">\n                          @for (f of availableFields(); track f) {\n                            <mat-checkbox [checked]=\"fieldPicked(f)\" (change)=\"toggleField(f)\">{{ f }}</mat-checkbox>\n                          }\n                          <mat-checkbox [checked]=\"hasSpread()\" (change)=\"toggleSpread()\"\n                            matTooltip=\"Include every field\">everything (*)</mat-checkbox>\n                        </div>\n\n                        <div class=\"section-head\">\n                          <span class=\"field-label\">Mapped fields</span>\n                          <span class=\"section-actions\">\n                            <button type=\"button\" class=\"link-btn\" (click)=\"addRename()\"><mat-icon>add</mat-icon> Field</button>\n                            <button type=\"button\" class=\"link-btn\" (click)=\"addLiteral()\"><mat-icon>add</mat-icon> Constant</button>\n                          </span>\n                        </div>\n\n                        @for (r of renameItems(); track r.index) {\n                          <div class=\"map-row\">\n                            <label class=\"f-field\">\n                              <span class=\"f-label\">New name</span>\n                              <input class=\"f-control\" [value]=\"r.item.alias\"\n                                (input)=\"updateItem(r.index, { alias: inputValue($event) })\">\n                            </label>\n                            <div class=\"f-field\">\n                              <span class=\"f-label\">From path</span>\n                              <button type=\"button\" class=\"f-control f-picker\" [matMenuTriggerFor]=\"pathMenu\">\n                                <span class=\"f-picker-text\" [class.f-placeholder]=\"!r.item.path\">{{ r.item.path || 'Select a path' }}</span>\n                                <mat-icon>account_tree</mat-icon>\n                              </button>\n                              <mat-menu #pathMenu=\"matMenu\" class=\"path-menu\">\n                                @for (p of availableDeepPaths(); track p.path) {\n                                  <button mat-menu-item class=\"path-item\" [style.padding-left.px]=\"12 + p.depth * 14\"\n                                    (click)=\"updateItem(r.index, { path: p.path })\">\n                                    <mat-icon class=\"path-icon\">{{ p.leaf ? 'chevron_right' : 'folder_open' }}</mat-icon>\n                                    <span>{{ p.name }}</span>\n                                  </button>\n                                } @empty {\n                                  <button mat-menu-item disabled>No paths detected</button>\n                                }\n                              </mat-menu>\n                            </div>\n                            <button mat-icon-button class=\"q-remove\" (click)=\"removeItem(r.index)\"\n                              matTooltip=\"Remove\"><mat-icon>close</mat-icon></button>\n                          </div>\n                        }\n                        @for (l of literalItems(); track l.index) {\n                          <div class=\"map-row\">\n                            <label class=\"f-field\">\n                              <span class=\"f-label\">Field name</span>\n                              <input class=\"f-control\" [value]=\"l.item.alias\"\n                                (input)=\"updateItem(l.index, { alias: inputValue($event) })\">\n                            </label>\n                            <label class=\"f-field\">\n                              <span class=\"f-label\">Constant</span>\n                              <input class=\"f-control\" [value]=\"l.item.value\" placeholder='\"api\", 1, true'\n                                (input)=\"updateItem(l.index, { value: inputValue($event) })\">\n                            </label>\n                            <button mat-icon-button class=\"q-remove\" (click)=\"removeItem(l.index)\"\n                              matTooltip=\"Remove\"><mat-icon>close</mat-icon></button>\n                          </div>\n                        }\n                      }\n                    }\n\n                    @case ('sort') {\n                      @if (sort(); as s) {\n                        @for (key of s.keys; track $index) {\n                          <div class=\"q-item\">\n                            <div class=\"q-pair q-pair-sort\">\n                              <label class=\"f-field\">\n                                <span class=\"f-label\">Sort by</span>\n                                <select class=\"f-control\" [value]=\"key.field\"\n                                  (change)=\"updateSortKey($index, { field: inputValue($event) })\">\n                                  @for (f of fieldOptionsWith(key.field); track f) { <option [value]=\"f\">{{ f }}</option> }\n                                </select>\n                              </label>\n                              <mat-button-toggle-group class=\"seg seg-dir\" [value]=\"key.dir\" hideSingleSelectionIndicator\n                                (change)=\"updateSortKey($index, { dir: $event.value })\">\n                                <mat-button-toggle value=\"asc\" matTooltip=\"Ascending\"><mat-icon>arrow_upward</mat-icon></mat-button-toggle>\n                                <mat-button-toggle value=\"desc\" matTooltip=\"Descending\"><mat-icon>arrow_downward</mat-icon></mat-button-toggle>\n                              </mat-button-toggle-group>\n                            </div>\n                            <button mat-icon-button class=\"q-remove\" (click)=\"removeSortKey($index)\"\n                              matTooltip=\"Remove\"><mat-icon>close</mat-icon></button>\n                          </div>\n                        }\n                        <button type=\"button\" class=\"link-btn\" (click)=\"addSortKey()\">\n                          <mat-icon>add</mat-icon> Add sort key\n                        </button>\n                      }\n                    }\n\n                    @case ('slice') {\n                      @if (slice(); as sl) {\n                        <div class=\"field-grid\">\n                          <label class=\"f-field\">\n                            <span class=\"f-label\">Take</span>\n                            <select class=\"f-control\" [value]=\"sl.mode\" (change)=\"setSliceMode(inputValue($event))\">\n                              @for (mode of sliceModes; track mode.value) { <option [value]=\"mode.value\">{{ mode.label }}</option> }\n                            </select>\n                          </label>\n                          @switch (sl.mode) {\n                            @case ('range') {\n                              <label class=\"f-field\"><span class=\"f-label\">Start</span>\n                                <input class=\"f-control\" type=\"number\" [value]=\"sl.a\" (input)=\"setSliceA($event)\"></label>\n                              <label class=\"f-field\"><span class=\"f-label\">End</span>\n                                <input class=\"f-control\" type=\"number\" [value]=\"sl.b\" (input)=\"setSliceB($event)\"></label>\n                            }\n                            @case ('fromCount') {\n                              <label class=\"f-field\"><span class=\"f-label\">From index</span>\n                                <input class=\"f-control\" type=\"number\" [value]=\"sl.a\" (input)=\"setSliceA($event)\"></label>\n                              <label class=\"f-field\"><span class=\"f-label\">Count</span>\n                                <input class=\"f-control\" type=\"number\" [value]=\"sl.b\" (input)=\"setSliceB($event)\"></label>\n                            }\n                            @default {\n                              <label class=\"f-field\"><span class=\"f-label\">How many</span>\n                                <input class=\"f-control\" type=\"number\" [value]=\"sl.b\" (input)=\"setSliceB($event)\"></label>\n                            }\n                          }\n                        </div>\n                      }\n                    }\n\n                    @case ('keys') {\n                      @if (keysModel(); as k) {\n                        <span class=\"field-label\">\n                          @if (isUnique(fn.function)) { Unique by &mdash; none = whole row } @else { Group by }\n                        </span>\n                        <div class=\"checklist\">\n                          @for (f of availableFields(); track f) {\n                            <mat-checkbox [checked]=\"keyPicked(f)\" (change)=\"toggleKey(f)\">{{ f }}</mat-checkbox>\n                          }\n                        </div>\n                        @if (availableFields().length === 0) {\n                          <p class=\"hint-line\"><mat-icon class=\"info-icon\">info</mat-icon>\n                            <span>No fields detected &mdash; use Advanced to type a key path.</span></p>\n                        }\n                      }\n                    }\n\n                    @case ('flatten') {\n                      @if (flatten(); as fl) {\n                        <label class=\"f-field full\">\n                          <span class=\"f-label\">Flatten</span>\n                          <select class=\"f-control\" [value]=\"fl.path\" (change)=\"setFlatten(inputValue($event))\">\n                            <option [value]=\"''\">nested arrays (one level)</option>\n                            @for (f of fieldOptionsWith(fl.path); track f) { <option [value]=\"f\">items in {{ f }}</option> }\n                          </select>\n                        </label>\n                        <p class=\"sub-hint\">Blank flattens one level; a field flat-maps that child array.</p>\n                      }\n                    }\n\n                    @case ('reduce') {\n                      @if (reduce(); as red) {\n                        @for (agg of red.aggs; track $index) {\n                          <div class=\"q-item\">\n                            <div class=\"q-stack\">\n                              @if (red.aggs.length > 1) {\n                                <label class=\"f-field\">\n                                  <span class=\"f-label\">Output name</span>\n                                  <input class=\"f-control\" [value]=\"agg.alias\"\n                                    (input)=\"updateAgg($index, { alias: inputValue($event) })\">\n                                </label>\n                              }\n                              <div class=\"q-pair\">\n                                <label class=\"f-field\">\n                                  <span class=\"f-label\">Aggregate</span>\n                                  <select class=\"f-control\" [value]=\"agg.agg\"\n                                    (change)=\"updateAgg($index, { agg: inputValue($event) })\">\n                                    @for (a of aggregates; track a.value) { <option [value]=\"a.value\">{{ a.label }}</option> }\n                                  </select>\n                                </label>\n                                @if (aggNeedsField(agg.agg)) {\n                                  <label class=\"f-field\">\n                                    <span class=\"f-label\">Field</span>\n                                    <select class=\"f-control\" [value]=\"agg.field\"\n                                      (change)=\"updateAgg($index, { field: inputValue($event) })\">\n                                      @for (f of fieldOptionsWith(agg.field); track f) { <option [value]=\"f\">{{ f }}</option> }\n                                    </select>\n                                  </label>\n                                }\n                              </div>\n                            </div>\n                            <button mat-icon-button class=\"q-remove\" (click)=\"removeAgg($index)\"\n                              matTooltip=\"Remove\"><mat-icon>close</mat-icon></button>\n                          </div>\n                        }\n                        <button type=\"button\" class=\"link-btn\" (click)=\"addAgg()\">\n                          <mat-icon>add</mat-icon> Add aggregate\n                        </button>\n                      }\n                    }\n                  }\n                }\n\n                <div class=\"editor-foot\">\n                  <button type=\"button\" class=\"link-btn\" (click)=\"toggleRaw()\">\n                    @if (rawMode()) { <mat-icon>view_module</mat-icon> Guided }\n                    @else { <mat-icon>code</mat-icon> Advanced }\n                  </button>\n                </div>\n              }\n\n              <div class=\"editor-actions\">\n                <button mat-icon-button (click)=\"moveStep(fn.id, -1)\" matTooltip=\"Move earlier\"\n                  aria-label=\"Move step earlier\"><mat-icon>chevron_left</mat-icon></button>\n                <button mat-icon-button (click)=\"moveStep(fn.id, 1)\" matTooltip=\"Move later\"\n                  aria-label=\"Move step later\"><mat-icon>chevron_right</mat-icon></button>\n                <button mat-icon-button (click)=\"removeFunction(fn.id)\" matTooltip=\"Remove step\"\n                  aria-label=\"Remove step\"><mat-icon>delete_outline</mat-icon></button>\n                <span class=\"spacer\"></span>\n                <button mat-flat-button color=\"primary\" (click)=\"saveNodeInEdit()\">\n                  <mat-icon>check</mat-icon> Apply\n                </button>\n              </div>\n            </section>\n          }\n        } @else {\n          <p class=\"hint-line\">\n            <mat-icon class=\"info-icon\">data_array</mat-icon>\n            <span>Click an array (<mat-icon class=\"inline-icon\">data_array</mat-icon>) in the path above to add steps.</span>\n          </p>\n        }\n      }\n    </div>\n  </mat-expansion-panel>\n\n  <!-- 3 - Preview -->\n  <mat-expansion-panel expanded>\n    <mat-expansion-panel-header>\n      <mat-panel-title>\n        <mat-icon class=\"title-icon\">preview</mat-icon>\n        <span class=\"panel-title\">3 &middot; Result preview</span>\n      </mat-panel-title>\n    </mat-expansion-panel-header>\n\n    <div class=\"content\">\n      @if (resultRowCount(); as n) {\n        <span class=\"result-count\"><mat-icon>check_circle</mat-icon> {{ n }} {{ n === 1 ? 'result' : 'results' }}</span>\n      }\n      <div class=\"mapped-value\">\n        <pre>{{ mappedValue | json }}</pre>\n      </div>\n    </div>\n  </mat-expansion-panel>\n</mat-accordion>\n", styles: ["@charset \"UTF-8\";:host{display:block}.surface mat-expansion-panel{background:var(--mat-sys-surface-container-low, var(--lib-forms-surface-container-low))}:host ::ng-deep .mat-expansion-panel-header{height:44px;padding:0 .875rem}:host ::ng-deep .mat-expansion-panel-body{padding:0 .875rem .75rem}button mat-icon{vertical-align:middle}.panel-title{font-size:.875rem;font-weight:500;letter-spacing:-.01em}.title-icon{margin-right:.625rem;vertical-align:middle;color:var(--lib-forms-on-surface-variant)}.content{display:flex;flex-direction:column;gap:.875rem;padding:.5rem 0 .25rem}.hint-line{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.8125rem;color:var(--lib-forms-on-surface-variant)}.info-icon{color:var(--sem-info, var(--lib-forms-primary));flex:none}.inline-icon{font-size:1rem;width:1rem;height:1rem;vertical-align:text-bottom}.field-label{font-size:.625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lib-forms-on-surface-variant)}.muted{font-size:.8125rem;color:var(--lib-forms-on-surface-variant)}.data-tree{background:var(--lib-forms-surface-container-low);border-radius:var(--lib-forms-radius-md);padding:.5rem .75rem;min-width:fit-content}:host mat-tree-node{min-height:34px}.node-spacer{display:inline-block;width:36px}.node-toggle{color:var(--lib-forms-on-surface-variant)}.node-checkbox{width:100%}.node-key{font-weight:500;color:var(--lib-forms-on-surface);margin-right:.5rem}.node-value{font-family:var(--lib-forms-font-mono, monospace);padding:.0625rem .4375rem;background:var(--lib-forms-surface-container);border-radius:var(--lib-forms-radius-sm);font-size:.8125rem;white-space:nowrap}.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:.125rem}.crumb{display:inline-flex;align-items:center;gap:.25rem;height:1.75rem;max-width:9rem;padding:0 .5rem;font:inherit;font-size:.8125rem;font-weight:500;color:var(--lib-forms-on-surface-variant);background:transparent;border:0;border-radius:var(--lib-forms-radius-pill);cursor:pointer;white-space:nowrap;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing),color var(--lib-forms-duration-hover) var(--lib-forms-easing)}.crumb:hover:not(:disabled){background:var(--lib-forms-surface-container-high)}.crumb:disabled{cursor:default;opacity:.65}.crumb mat-icon{flex:none;font-size:1.0625rem;width:1.0625rem;height:1.0625rem}.crumb-text{overflow:hidden;text-overflow:ellipsis}.crumb-array{color:var(--lib-forms-primary)}.crumb-active,.crumb-active:hover:not(:disabled){background:var(--lib-forms-primary-container);color:var(--lib-forms-on-surface)}.crumb-badge{min-width:1.0625rem;padding:0 .3125rem;border-radius:var(--lib-forms-radius-pill);background:var(--lib-forms-primary);color:var(--mat-sys-on-primary, #fff);font-size:.625rem;line-height:1.0625rem;text-align:center}.crumb-sep{color:var(--lib-forms-outline);font-size:1rem;width:1rem;height:1rem}.pipeline{display:flex;align-items:stretch;flex-wrap:wrap;gap:.375rem}.stage{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.0625rem;min-width:4rem;padding:.375rem .5rem;border:1px solid var(--lib-forms-outline-variant);border-radius:var(--lib-forms-radius-md);background:var(--lib-forms-surface-container-low);color:var(--lib-forms-on-surface);cursor:pointer;transition:border-color var(--lib-forms-duration-hover) var(--lib-forms-easing),background-color var(--lib-forms-duration-hover) var(--lib-forms-easing)}.stage mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.stage-source{cursor:default;color:var(--lib-forms-on-surface-variant);background:transparent;border-style:dashed}.stage-active{border-color:var(--lib-forms-primary);background:var(--lib-forms-primary-container)}.stage-empty{border-style:dashed;color:var(--lib-forms-on-surface-variant)}.stage-add{border-style:dashed;color:var(--lib-forms-primary);min-width:3.75rem}.stage-label{font-size:.75rem;font-weight:500}.stage-count{font-size:.625rem;color:var(--lib-forms-on-surface-variant)}.flow-arrow{align-self:center;color:var(--lib-forms-outline);font-size:1.125rem;width:1rem;height:1.125rem}.menu-hint{display:block;font-size:.6875rem;color:var(--lib-forms-on-surface-variant)}.editor{display:flex;flex-direction:column;gap:.75rem;padding:1.125rem;border-radius:var(--lib-forms-radius-lg);background:var(--lib-forms-surface-container-low);box-shadow:var(--mat-sys-level1, 0 1px 3px rgba(0, 0, 0, .12))}.full{width:100%}.f-field{display:flex;flex-direction:column;gap:.1875rem;min-width:0}.f-label{font-size:.625rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--lib-forms-on-surface-variant)}.f-control{box-sizing:border-box;width:100%;min-width:0;height:2rem;padding:.3125rem .5rem;font-family:inherit;font-size:.8125rem;line-height:1.25;color:var(--lib-forms-on-surface);background:var(--lib-forms-surface-container-lowest);border:1px solid var(--lib-forms-outline-variant);border-radius:var(--lib-forms-radius-sm);transition:border-color var(--lib-forms-duration-hover) var(--lib-forms-easing)}select.f-control{cursor:pointer}.f-textarea{height:auto;min-height:3rem;line-height:1.4;resize:vertical}.f-control:hover{border-color:var(--lib-forms-outline)}.f-control:focus{outline:none;border-color:var(--lib-forms-primary);box-shadow:0 0 0 1px var(--lib-forms-primary)}.sub-hint{margin:-.25rem 0 0;font-size:.75rem;color:var(--lib-forms-on-surface-variant)}.section-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.25rem}.section-actions{display:flex;gap:.25rem}.map-row{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:.5rem;padding:.5rem .5rem .5rem .625rem;background:var(--lib-forms-surface-container);border-radius:var(--lib-forms-radius-sm)}.q-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.25rem;padding:.5rem .5rem .5rem .625rem;background:var(--lib-forms-surface-container);border-radius:var(--lib-forms-radius-sm)}.q-stack{display:flex;flex-direction:column;gap:.5rem;min-width:0}.q-pair{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;min-width:0}.q-pair-op{grid-template-columns:8rem 1fr}.q-pair-sort{grid-template-columns:1fr auto;align-items:end}.q-remove{color:var(--lib-forms-on-surface-variant)}.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:.5rem}.match-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.seg{--mat-standard-button-toggle-height: 34px;height:34px}.checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.125rem 1rem;padding:.25rem 0}.link-btn{display:inline-flex;align-items:center;align-self:flex-start;gap:.25rem;height:1.75rem;padding:0 .5rem;font:inherit;font-size:.8125rem;font-weight:500;color:var(--lib-forms-primary);background:transparent;border:0;border-radius:var(--lib-forms-radius-sm);cursor:pointer;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing)}.link-btn:hover{background:var(--lib-forms-primary-container)}.link-btn mat-icon{flex:none;font-size:1.0625rem;width:1.0625rem;height:1.0625rem}.f-picker{display:flex;align-items:center;justify-content:space-between;gap:.25rem;text-align:left;cursor:pointer}.f-picker-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.f-placeholder{color:var(--lib-forms-on-surface-variant)}.f-picker mat-icon{flex:none;font-size:1.0625rem;width:1.0625rem;height:1.0625rem;color:var(--lib-forms-on-surface-variant)}.path-icon{margin-right:.25rem;font-size:1rem;width:1rem;height:1rem;color:var(--lib-forms-on-surface-variant)}.editor-foot{display:flex;justify-content:flex-end;margin-top:-.25rem}.editor-actions{display:flex;align-items:center;gap:.125rem;padding-top:.5rem}.spacer{flex:1}.suggestions{display:flex;gap:1rem;flex-wrap:wrap;padding:.75rem;border-radius:var(--lib-forms-radius-md);background:var(--sem-info-surface, var(--lib-forms-surface-container))}.suggestion-group{flex:1 1 10rem;display:flex;flex-direction:column;gap:.375rem}.chip-row{display:flex;flex-wrap:wrap;gap:.25rem}.ins-chip{font-size:.75rem}.result-count{display:inline-flex;align-items:center;gap:.375rem;font-size:.8125rem;font-weight:500;color:var(--sem-emerald, var(--lib-forms-method-get))}.result-count mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.mapped-value{padding:1rem 1.25rem;background:var(--lib-forms-on-surface);color:var(--lib-forms-surface);border-radius:var(--lib-forms-radius-md);overflow:auto}.mapped-value pre{margin:0;font-family:var(--lib-forms-font-mono, monospace);font-size:.8125rem}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.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: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i2$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i5$3.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i1$4.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i1$4.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i1$4.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i1$4.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i1$4.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DataTreeComponent, isStandalone: true, selector: "lib-data-tree", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, formInputs: { classPropertyName: "formInputs", publicName: "formInputs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pathChanged: "pathChanged" }, host: { classAttribute: "lib-data-tree" }, viewQueries: [{ propertyName: "textareaElementRef", first: true, predicate: ["textarea"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-accordion multi class=\"surface\">\n  <!-- 1 - Pick the data -->\n  <mat-expansion-panel expanded>\n    <mat-expansion-panel-header>\n      <mat-panel-title>\n        <mat-icon class=\"title-icon\">dataset_linked</mat-icon>\n        <span class=\"panel-title\">1 &middot; Pick your data</span>\n      </mat-panel-title>\n    </mat-expansion-panel-header>\n\n    <div class=\"content\">\n      <p class=\"hint-line\">\n        <mat-icon class=\"info-icon\">touch_app</mat-icon>\n        <span>Tick a field to map it. Pick an array (<mat-icon class=\"inline-icon\">data_array</mat-icon>) to transform its items next.</span>\n      </p>\n\n      <mat-tree [dataSource]=\"treeClass.dataSource\" [treeControl]=\"treeClass.treeControl\" class=\"data-tree\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding>\n          <span class=\"node-spacer\" aria-hidden=\"true\"></span>\n          <mat-checkbox (change)=\"update(node)\" [checked]=\"nodeIsChecked(node)\" class=\"node-checkbox\"\n            [matTooltip]=\"'Map field: ' + node.key\">\n            <span class=\"node-key\">{{ node.key }}</span>\n            <span class=\"node-value\" [style.color]=\"getNodeValueColor(node.value)\">{{ node.value }}</span>\n          </mat-checkbox>\n        </mat-tree-node>\n\n        <mat-tree-node *matTreeNodeDef=\"let node; when: treeClass.hasChild\" matTreeNodePadding>\n          <button class=\"node-toggle\" mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.key\">\n            <mat-icon>{{ treeClass.treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}</mat-icon>\n          </button>\n          <mat-checkbox (change)=\"update(node)\" [checked]=\"nodeIsChecked(node)\" [matTooltip]=\"'Select ' + node.key\">\n            <span class=\"node-key\">{{ node.key }}</span>\n          </mat-checkbox>\n        </mat-tree-node>\n      </mat-tree>\n    </div>\n  </mat-expansion-panel>\n\n  <!-- 2 - Build the pipeline -->\n  <mat-expansion-panel expanded>\n    <mat-expansion-panel-header>\n      <mat-panel-title>\n        <mat-icon class=\"title-icon\">account_tree</mat-icon>\n        <span class=\"panel-title\">2 &middot; Transform your data</span>\n      </mat-panel-title>\n    </mat-expansion-panel-header>\n\n    <div class=\"content\">\n      @if (treeClass.activePath.length === 0) {\n        <p class=\"hint-line\">\n          <mat-icon class=\"info-icon\">arrow_upward</mat-icon>\n          <span>Select a field above to begin.</span>\n        </p>\n      } @else {\n        <nav class=\"breadcrumb\" aria-label=\"Selected path\">\n          @for (path of treeClass.activePath; track trackByPath($index, path); let isLast = $last) {\n            <button type=\"button\" class=\"crumb\" [class.crumb-active]=\"path.inEdit\"\n              [class.crumb-array]=\"path.keyIsArrayIndex\" [disabled]=\"!path.keyIsArrayIndex && !path.inEdit\"\n              [matTooltip]=\"path.keyIsArrayIndex ? 'Transform this array' : path.key\" (click)=\"setupPath(path)\">\n              <mat-icon>{{ path.keyIsArrayIndex ? 'data_array' : 'folder' }}</mat-icon>\n              <span class=\"crumb-text\">{{ path.key }}</span>\n              @if (path.functions.length > 0) { <span class=\"crumb-badge\">{{ path.functions.length }}</span> }\n            </button>\n            @if (!isLast) { <mat-icon class=\"crumb-sep\">chevron_right</mat-icon> }\n          }\n        </nav>\n\n        @if (hasANodeInEdit()) {\n          <div class=\"pipeline\" role=\"list\" aria-label=\"Transform pipeline\">\n            <span class=\"stage stage-source\" role=\"listitem\">\n              <mat-icon>database</mat-icon>\n              <span class=\"stage-label\">Source</span>\n            </span>\n\n            @for (step of steps; track step.id; let i = $index) {\n              <mat-icon class=\"flow-arrow\">chevron_right</mat-icon>\n              <button class=\"stage stage-step\" role=\"listitem\" [class.stage-active]=\"step.inEdit\"\n                [class.stage-empty]=\"!step.function\" (click)=\"editFunction(step.id)\"\n                [matTooltip]=\"functionMeta(step.function)?.hint || 'Choose an operation'\">\n                <mat-icon>{{ functionMeta(step.function)?.icon || 'help_outline' }}</mat-icon>\n                <span class=\"stage-label\">{{ (step.function | titlecase) || 'Choose' }}</span>\n                @if (stepRowCount(i); as n) {\n                  <span class=\"stage-count\">{{ n }} {{ n === 1 ? 'row' : 'rows' }}</span>\n                }\n              </button>\n            }\n\n            <mat-icon class=\"flow-arrow\">chevron_right</mat-icon>\n            <button class=\"stage stage-add\" [matMenuTriggerFor]=\"addMenu\" matTooltip=\"Add a transform step\">\n              <mat-icon>add</mat-icon>\n              <span class=\"stage-label\">Add</span>\n            </button>\n            <mat-menu #addMenu=\"matMenu\">\n              @for (option of functionOptions; track option.value) {\n                <button mat-menu-item (click)=\"addStep(option.value)\">\n                  <mat-icon>{{ option.icon }}</mat-icon>\n                  <span>{{ option.label }}</span>\n                  <span class=\"menu-hint\">{{ option.hint }}</span>\n                </button>\n              }\n            </mat-menu>\n          </div>\n\n          @if (getFunctionInEdit(); as fn) {\n            <section class=\"editor\">\n              <label class=\"f-field full\">\n                <span class=\"f-label\">Operation</span>\n                <select class=\"f-control\" [value]=\"fn.function\" (change)=\"functionChanged(inputValue($event))\">\n                  <option value=\"\" disabled>Choose what this step does</option>\n                  @for (option of functionOptions; track option.value) {\n                    <option [value]=\"option.value\">{{ option.label }}</option>\n                  }\n                </select>\n              </label>\n              @if (fn.function && activeFunctionMeta(); as meta) {\n                <p class=\"sub-hint\">{{ meta.hint }}</p>\n              }\n\n              @if (!fn.function) {\n                <p class=\"hint-line\">\n                  <mat-icon class=\"info-icon\">info</mat-icon>\n                  <span>Choose an operation to configure this step.</span>\n                </p>\n              } @else {\n                @if (rawMode()) {\n                  <label class=\"f-field full\">\n                    <span class=\"f-label\">Expression</span>\n                    <textarea class=\"f-control f-textarea\" #textarea rows=\"2\" [value]=\"fn.expression\"\n                      (input)=\"onRawChange($event)\" (focus)=\"onFocus()\" placeholder=\"Type the raw expression\"></textarea>\n                  </label>\n                  <p class=\"sub-hint\">Type <code>$</code> to insert a field or operator.</p>\n\n                  @if (showSuggestions()) {\n                    <div class=\"suggestions\">\n                      <div class=\"suggestion-group\">\n                        <span class=\"field-label\">Operators</span>\n                        <div class=\"chip-row\">\n                          @for (method of getMethods(); track method.value) {\n                            <button mat-stroked-button class=\"ins-chip\" (click)=\"selectSuggestionInput(method.value)\">\n                              {{ method.value }}\n                            </button>\n                          }\n                        </div>\n                      </div>\n                      <div class=\"suggestion-group\">\n                        <span class=\"field-label\">Inputs</span>\n                        <div class=\"chip-row\">\n                          @for (input of getAllInputs(); track input.formControlName) {\n                            <button mat-stroked-button class=\"ins-chip\" (click)=\"selectSuggestionInput(input.formControlName)\">\n                              {{ input.label }}\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    </div>\n                  }\n                } @else {\n                  @switch (activeKind()) {\n                    @case ('predicate') {\n                      @if (predicate(); as p) {\n                        @if (p.conditions.length > 1) {\n                          <div class=\"match-row\">\n                            <span class=\"field-label\">Match</span>\n                            <mat-button-toggle-group class=\"seg\" [value]=\"p.connector\" hideSingleSelectionIndicator\n                              (change)=\"setConnector($event.value)\">\n                              <mat-button-toggle value=\"&&\">All</mat-button-toggle>\n                              <mat-button-toggle value=\"||\">Any</mat-button-toggle>\n                            </mat-button-toggle-group>\n                            <span class=\"muted\">of the conditions</span>\n                          </div>\n                        }\n                        @for (cond of p.conditions; track $index) {\n                          <div class=\"q-item\">\n                            <div class=\"q-stack\">\n                              <label class=\"f-field\">\n                                <span class=\"f-label\">Field</span>\n                                <select class=\"f-control\" [value]=\"cond.field\"\n                                  (change)=\"updateCondition($index, { field: inputValue($event) })\">\n                                  @for (f of fieldOptionsWith(cond.field); track f) { <option [value]=\"f\">{{ f }}</option> }\n                                </select>\n                              </label>\n                              <div class=\"q-pair q-pair-op\">\n                                <label class=\"f-field\">\n                                  <span class=\"f-label\">Operator</span>\n                                  <select class=\"f-control\" [value]=\"cond.operator\"\n                                    (change)=\"updateCondition($index, { operator: inputValue($event) })\">\n                                    @for (op of operators; track op.value) { <option [value]=\"op.value\">{{ op.label }}</option> }\n                                  </select>\n                                </label>\n                                <label class=\"f-field\">\n                                  <span class=\"f-label\">Value</span>\n                                  <input class=\"f-control\" [value]=\"cond.value\" placeholder=\"active, 18, Durban\"\n                                    (input)=\"updateCondition($index, { value: inputValue($event) })\">\n                                </label>\n                              </div>\n                            </div>\n                            <button mat-icon-button class=\"q-remove\" (click)=\"removeCondition($index)\"\n                              matTooltip=\"Remove\"><mat-icon>close</mat-icon></button>\n                          </div>\n                        }\n                        <button type=\"button\" class=\"link-btn\" (click)=\"addCondition()\">\n                          <mat-icon>add</mat-icon> Add condition\n                        </button>\n                      }\n                    }\n\n                    @case ('project') {\n                      @if (projection(); as proj) {\n                        <span class=\"field-label\">Keep fields</span>\n                        <div class=\"checklist\">\n                          @for (f of availableFields(); track f) {\n                            <mat-checkbox [checked]=\"fieldPicked(f)\" (change)=\"toggleField(f)\">{{ f }}</mat-checkbox>\n                          }\n                          <mat-checkbox [checked]=\"hasSpread()\" (change)=\"toggleSpread()\"\n                            matTooltip=\"Include every field\">everything (*)</mat-checkbox>\n                        </div>\n\n                        <div class=\"section-head\">\n                          <span class=\"field-label\">Mapped fields</span>\n                          <span class=\"section-actions\">\n                            <button type=\"button\" class=\"link-btn\" (click)=\"addRename()\"><mat-icon>add</mat-icon> Field</button>\n                            <button type=\"button\" class=\"link-btn\" (click)=\"addLiteral()\"><mat-icon>add</mat-icon> Constant</button>\n                          </span>\n                        </div>\n\n                        @for (r of renameItems(); track r.index) {\n                          <div class=\"map-row\">\n                            <label class=\"f-field\">\n                              <span class=\"f-label\">New name</span>\n                              <input class=\"f-control\" [value]=\"r.item.alias\"\n                                (input)=\"updateItem(r.index, { alias: inputValue($event) })\">\n                            </label>\n                            <div class=\"f-field\">\n                              <span class=\"f-label\">From path</span>\n                              <button type=\"button\" class=\"f-control f-picker\" [matMenuTriggerFor]=\"pathMenu\">\n                                <span class=\"f-picker-text\" [class.f-placeholder]=\"!r.item.path\">{{ r.item.path || 'Select a path' }}</span>\n                                <mat-icon>account_tree</mat-icon>\n                              </button>\n                              <mat-menu #pathMenu=\"matMenu\" class=\"path-menu\">\n                                @for (p of availableDeepPaths(); track p.path) {\n                                  <button mat-menu-item class=\"path-item\" [style.padding-left.px]=\"12 + p.depth * 14\"\n                                    (click)=\"updateItem(r.index, { path: p.path })\">\n                                    <mat-icon class=\"path-icon\">{{ p.leaf ? 'chevron_right' : 'folder_open' }}</mat-icon>\n                                    <span>{{ p.name }}</span>\n                                  </button>\n                                } @empty {\n                                  <button mat-menu-item disabled>No paths detected</button>\n                                }\n                              </mat-menu>\n                            </div>\n                            <button mat-icon-button class=\"q-remove\" (click)=\"removeItem(r.index)\"\n                              matTooltip=\"Remove\"><mat-icon>close</mat-icon></button>\n                          </div>\n                        }\n                        @for (l of literalItems(); track l.index) {\n                          <div class=\"map-row\">\n                            <label class=\"f-field\">\n                              <span class=\"f-label\">Field name</span>\n                              <input class=\"f-control\" [value]=\"l.item.alias\"\n                                (input)=\"updateItem(l.index, { alias: inputValue($event) })\">\n                            </label>\n                            <label class=\"f-field\">\n                              <span class=\"f-label\">Constant</span>\n                              <input class=\"f-control\" [value]=\"l.item.value\" placeholder='\"api\", 1, true'\n                                (input)=\"updateItem(l.index, { value: inputValue($event) })\">\n                            </label>\n                            <button mat-icon-button class=\"q-remove\" (click)=\"removeItem(l.index)\"\n                              matTooltip=\"Remove\"><mat-icon>close</mat-icon></button>\n                          </div>\n                        }\n                      }\n                    }\n\n                    @case ('sort') {\n                      @if (sort(); as s) {\n                        @for (key of s.keys; track $index) {\n                          <div class=\"q-item\">\n                            <div class=\"q-pair q-pair-sort\">\n                              <label class=\"f-field\">\n                                <span class=\"f-label\">Sort by</span>\n                                <select class=\"f-control\" [value]=\"key.field\"\n                                  (change)=\"updateSortKey($index, { field: inputValue($event) })\">\n                                  @for (f of fieldOptionsWith(key.field); track f) { <option [value]=\"f\">{{ f }}</option> }\n                                </select>\n                              </label>\n                              <mat-button-toggle-group class=\"seg seg-dir\" [value]=\"key.dir\" hideSingleSelectionIndicator\n                                (change)=\"updateSortKey($index, { dir: $event.value })\">\n                                <mat-button-toggle value=\"asc\" matTooltip=\"Ascending\"><mat-icon>arrow_upward</mat-icon></mat-button-toggle>\n                                <mat-button-toggle value=\"desc\" matTooltip=\"Descending\"><mat-icon>arrow_downward</mat-icon></mat-button-toggle>\n                              </mat-button-toggle-group>\n                            </div>\n                            <button mat-icon-button class=\"q-remove\" (click)=\"removeSortKey($index)\"\n                              matTooltip=\"Remove\"><mat-icon>close</mat-icon></button>\n                          </div>\n                        }\n                        <button type=\"button\" class=\"link-btn\" (click)=\"addSortKey()\">\n                          <mat-icon>add</mat-icon> Add sort key\n                        </button>\n                      }\n                    }\n\n                    @case ('slice') {\n                      @if (slice(); as sl) {\n                        <div class=\"field-grid\">\n                          <label class=\"f-field\">\n                            <span class=\"f-label\">Take</span>\n                            <select class=\"f-control\" [value]=\"sl.mode\" (change)=\"setSliceMode(inputValue($event))\">\n                              @for (mode of sliceModes; track mode.value) { <option [value]=\"mode.value\">{{ mode.label }}</option> }\n                            </select>\n                          </label>\n                          @switch (sl.mode) {\n                            @case ('range') {\n                              <label class=\"f-field\"><span class=\"f-label\">Start</span>\n                                <input class=\"f-control\" type=\"number\" [value]=\"sl.a\" (input)=\"setSliceA($event)\"></label>\n                              <label class=\"f-field\"><span class=\"f-label\">End</span>\n                                <input class=\"f-control\" type=\"number\" [value]=\"sl.b\" (input)=\"setSliceB($event)\"></label>\n                            }\n                            @case ('fromCount') {\n                              <label class=\"f-field\"><span class=\"f-label\">From index</span>\n                                <input class=\"f-control\" type=\"number\" [value]=\"sl.a\" (input)=\"setSliceA($event)\"></label>\n                              <label class=\"f-field\"><span class=\"f-label\">Count</span>\n                                <input class=\"f-control\" type=\"number\" [value]=\"sl.b\" (input)=\"setSliceB($event)\"></label>\n                            }\n                            @default {\n                              <label class=\"f-field\"><span class=\"f-label\">How many</span>\n                                <input class=\"f-control\" type=\"number\" [value]=\"sl.b\" (input)=\"setSliceB($event)\"></label>\n                            }\n                          }\n                        </div>\n                      }\n                    }\n\n                    @case ('keys') {\n                      @if (keysModel(); as k) {\n                        <span class=\"field-label\">\n                          @if (isUnique(fn.function)) { Unique by &mdash; none = whole row } @else { Group by }\n                        </span>\n                        <div class=\"checklist\">\n                          @for (f of availableFields(); track f) {\n                            <mat-checkbox [checked]=\"keyPicked(f)\" (change)=\"toggleKey(f)\">{{ f }}</mat-checkbox>\n                          }\n                        </div>\n                        @if (availableFields().length === 0) {\n                          <p class=\"hint-line\"><mat-icon class=\"info-icon\">info</mat-icon>\n                            <span>No fields detected &mdash; use Advanced to type a key path.</span></p>\n                        }\n                      }\n                    }\n\n                    @case ('flatten') {\n                      @if (flatten(); as fl) {\n                        <label class=\"f-field full\">\n                          <span class=\"f-label\">Flatten</span>\n                          <select class=\"f-control\" [value]=\"fl.path\" (change)=\"setFlatten(inputValue($event))\">\n                            <option [value]=\"''\">nested arrays (one level)</option>\n                            @for (f of fieldOptionsWith(fl.path); track f) { <option [value]=\"f\">items in {{ f }}</option> }\n                          </select>\n                        </label>\n                        <p class=\"sub-hint\">Blank flattens one level; a field flat-maps that child array.</p>\n                      }\n                    }\n\n                    @case ('reduce') {\n                      @if (reduce(); as red) {\n                        @for (agg of red.aggs; track $index) {\n                          <div class=\"q-item\">\n                            <div class=\"q-stack\">\n                              @if (red.aggs.length > 1) {\n                                <label class=\"f-field\">\n                                  <span class=\"f-label\">Output name</span>\n                                  <input class=\"f-control\" [value]=\"agg.alias\"\n                                    (input)=\"updateAgg($index, { alias: inputValue($event) })\">\n                                </label>\n                              }\n                              <div class=\"q-pair\">\n                                <label class=\"f-field\">\n                                  <span class=\"f-label\">Aggregate</span>\n                                  <select class=\"f-control\" [value]=\"agg.agg\"\n                                    (change)=\"updateAgg($index, { agg: inputValue($event) })\">\n                                    @for (a of aggregates; track a.value) { <option [value]=\"a.value\">{{ a.label }}</option> }\n                                  </select>\n                                </label>\n                                @if (aggNeedsField(agg.agg)) {\n                                  <label class=\"f-field\">\n                                    <span class=\"f-label\">Field</span>\n                                    <select class=\"f-control\" [value]=\"agg.field\"\n                                      (change)=\"updateAgg($index, { field: inputValue($event) })\">\n                                      @for (f of fieldOptionsWith(agg.field); track f) { <option [value]=\"f\">{{ f }}</option> }\n                                    </select>\n                                  </label>\n                                }\n                              </div>\n                            </div>\n                            <button mat-icon-button class=\"q-remove\" (click)=\"removeAgg($index)\"\n                              matTooltip=\"Remove\"><mat-icon>close</mat-icon></button>\n                          </div>\n                        }\n                        <button type=\"button\" class=\"link-btn\" (click)=\"addAgg()\">\n                          <mat-icon>add</mat-icon> Add aggregate\n                        </button>\n                      }\n                    }\n                  }\n                }\n\n                <div class=\"editor-foot\">\n                  <button type=\"button\" class=\"link-btn\" (click)=\"toggleRaw()\">\n                    @if (rawMode()) { <mat-icon>view_module</mat-icon> Guided }\n                    @else { <mat-icon>code</mat-icon> Advanced }\n                  </button>\n                </div>\n              }\n\n              <div class=\"editor-actions\">\n                <button mat-icon-button (click)=\"moveStep(fn.id, -1)\" matTooltip=\"Move earlier\"\n                  aria-label=\"Move step earlier\"><mat-icon>chevron_left</mat-icon></button>\n                <button mat-icon-button (click)=\"moveStep(fn.id, 1)\" matTooltip=\"Move later\"\n                  aria-label=\"Move step later\"><mat-icon>chevron_right</mat-icon></button>\n                <button mat-icon-button (click)=\"removeFunction(fn.id)\" matTooltip=\"Remove step\"\n                  aria-label=\"Remove step\"><mat-icon>delete_outline</mat-icon></button>\n                <span class=\"spacer\"></span>\n                <button mat-flat-button color=\"primary\" (click)=\"saveNodeInEdit()\">\n                  <mat-icon>check</mat-icon> Apply\n                </button>\n              </div>\n            </section>\n          }\n        } @else {\n          <p class=\"hint-line\">\n            <mat-icon class=\"info-icon\">data_array</mat-icon>\n            <span>Click an array (<mat-icon class=\"inline-icon\">data_array</mat-icon>) in the path above to add steps.</span>\n          </p>\n        }\n      }\n    </div>\n  </mat-expansion-panel>\n\n  <!-- 3 - Preview -->\n  <mat-expansion-panel expanded>\n    <mat-expansion-panel-header>\n      <mat-panel-title>\n        <mat-icon class=\"title-icon\">preview</mat-icon>\n        <span class=\"panel-title\">3 &middot; Result preview</span>\n      </mat-panel-title>\n    </mat-expansion-panel-header>\n\n    <div class=\"content\">\n      @if (resultRowCount(); as n) {\n        <span class=\"result-count\"><mat-icon>check_circle</mat-icon> {{ n }} {{ n === 1 ? 'result' : 'results' }}</span>\n      }\n      <div class=\"mapped-value\">\n        <pre>{{ mappedValue | json }}</pre>\n      </div>\n    </div>\n  </mat-expansion-panel>\n</mat-accordion>\n", styles: ["@charset \"UTF-8\";:host{display:block}.surface mat-expansion-panel{background:var(--mat-sys-surface-container-low, var(--lib-forms-surface-container-low))}:host ::ng-deep .mat-expansion-panel-header{height:44px;padding:0 .875rem}:host ::ng-deep .mat-expansion-panel-body{padding:0 .875rem .75rem}button mat-icon{vertical-align:middle}.panel-title{font-size:.875rem;font-weight:500;letter-spacing:-.01em}.title-icon{margin-right:.625rem;vertical-align:middle;color:var(--lib-forms-on-surface-variant)}.content{display:flex;flex-direction:column;gap:.875rem;padding:.5rem 0 .25rem}.hint-line{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.8125rem;color:var(--lib-forms-on-surface-variant)}.info-icon{color:var(--sem-info, var(--lib-forms-primary));flex:none}.inline-icon{font-size:1rem;width:1rem;height:1rem;vertical-align:text-bottom}.field-label{font-size:.625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lib-forms-on-surface-variant)}.muted{font-size:.8125rem;color:var(--lib-forms-on-surface-variant)}.data-tree{background:var(--lib-forms-surface-container-low);border-radius:var(--lib-forms-radius-md);padding:.5rem .75rem;min-width:fit-content}:host mat-tree-node{min-height:34px}.node-spacer{display:inline-block;width:36px}.node-toggle{color:var(--lib-forms-on-surface-variant)}.node-checkbox{width:100%}.node-key{font-weight:500;color:var(--lib-forms-on-surface);margin-right:.5rem}.node-value{font-family:var(--lib-forms-font-mono, monospace);padding:.0625rem .4375rem;background:var(--lib-forms-surface-container);border-radius:var(--lib-forms-radius-sm);font-size:.8125rem;white-space:nowrap}.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:.125rem}.crumb{display:inline-flex;align-items:center;gap:.25rem;height:1.75rem;max-width:9rem;padding:0 .5rem;font:inherit;font-size:.8125rem;font-weight:500;color:var(--lib-forms-on-surface-variant);background:transparent;border:0;border-radius:var(--lib-forms-radius-pill);cursor:pointer;white-space:nowrap;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing),color var(--lib-forms-duration-hover) var(--lib-forms-easing)}.crumb:hover:not(:disabled){background:var(--lib-forms-surface-container-high)}.crumb:disabled{cursor:default;opacity:.65}.crumb mat-icon{flex:none;font-size:1.0625rem;width:1.0625rem;height:1.0625rem}.crumb-text{overflow:hidden;text-overflow:ellipsis}.crumb-array{color:var(--lib-forms-primary)}.crumb-active,.crumb-active:hover:not(:disabled){background:var(--lib-forms-primary-container);color:var(--lib-forms-on-surface)}.crumb-badge{min-width:1.0625rem;padding:0 .3125rem;border-radius:var(--lib-forms-radius-pill);background:var(--lib-forms-primary);color:var(--mat-sys-on-primary, #fff);font-size:.625rem;line-height:1.0625rem;text-align:center}.crumb-sep{color:var(--lib-forms-outline);font-size:1rem;width:1rem;height:1rem}.pipeline{display:flex;align-items:stretch;flex-wrap:wrap;gap:.375rem}.stage{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.0625rem;min-width:4rem;padding:.375rem .5rem;border:1px solid var(--lib-forms-outline-variant);border-radius:var(--lib-forms-radius-md);background:var(--lib-forms-surface-container-low);color:var(--lib-forms-on-surface);cursor:pointer;transition:border-color var(--lib-forms-duration-hover) var(--lib-forms-easing),background-color var(--lib-forms-duration-hover) var(--lib-forms-easing)}.stage mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.stage-source{cursor:default;color:var(--lib-forms-on-surface-variant);background:transparent;border-style:dashed}.stage-active{border-color:var(--lib-forms-primary);background:var(--lib-forms-primary-container)}.stage-empty{border-style:dashed;color:var(--lib-forms-on-surface-variant)}.stage-add{border-style:dashed;color:var(--lib-forms-primary);min-width:3.75rem}.stage-label{font-size:.75rem;font-weight:500}.stage-count{font-size:.625rem;color:var(--lib-forms-on-surface-variant)}.flow-arrow{align-self:center;color:var(--lib-forms-outline);font-size:1.125rem;width:1rem;height:1.125rem}.menu-hint{display:block;font-size:.6875rem;color:var(--lib-forms-on-surface-variant)}.editor{display:flex;flex-direction:column;gap:.75rem;padding:1.125rem;border-radius:var(--lib-forms-radius-lg);background:var(--lib-forms-surface-container-low);box-shadow:var(--mat-sys-level1, 0 1px 3px rgba(0, 0, 0, .12))}.full{width:100%}.f-field{display:flex;flex-direction:column;gap:.1875rem;min-width:0}.f-label{font-size:.625rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--lib-forms-on-surface-variant)}.f-control{box-sizing:border-box;width:100%;min-width:0;height:2rem;padding:.3125rem .5rem;font-family:inherit;font-size:.8125rem;line-height:1.25;color:var(--lib-forms-on-surface);background:var(--lib-forms-surface-container-lowest);border:1px solid var(--lib-forms-outline-variant);border-radius:var(--lib-forms-radius-sm);transition:border-color var(--lib-forms-duration-hover) var(--lib-forms-easing)}select.f-control{cursor:pointer}.f-textarea{height:auto;min-height:3rem;line-height:1.4;resize:vertical}.f-control:hover{border-color:var(--lib-forms-outline)}.f-control:focus{outline:none;border-color:var(--lib-forms-primary);box-shadow:0 0 0 1px var(--lib-forms-primary)}.sub-hint{margin:-.25rem 0 0;font-size:.75rem;color:var(--lib-forms-on-surface-variant)}.section-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.25rem}.section-actions{display:flex;gap:.25rem}.map-row{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:.5rem;padding:.5rem .5rem .5rem .625rem;background:var(--lib-forms-surface-container);border-radius:var(--lib-forms-radius-sm)}.q-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.25rem;padding:.5rem .5rem .5rem .625rem;background:var(--lib-forms-surface-container);border-radius:var(--lib-forms-radius-sm)}.q-stack{display:flex;flex-direction:column;gap:.5rem;min-width:0}.q-pair{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;min-width:0}.q-pair-op{grid-template-columns:8rem 1fr}.q-pair-sort{grid-template-columns:1fr auto;align-items:end}.q-remove{color:var(--lib-forms-on-surface-variant)}.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:.5rem}.match-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.seg{--mat-standard-button-toggle-height: 34px;height:34px}.checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.125rem 1rem;padding:.25rem 0}.link-btn{display:inline-flex;align-items:center;align-self:flex-start;gap:.25rem;height:1.75rem;padding:0 .5rem;font:inherit;font-size:.8125rem;font-weight:500;color:var(--lib-forms-primary);background:transparent;border:0;border-radius:var(--lib-forms-radius-sm);cursor:pointer;transition:background-color var(--lib-forms-duration-hover) var(--lib-forms-easing)}.link-btn:hover{background:var(--lib-forms-primary-container)}.link-btn mat-icon{flex:none;font-size:1.0625rem;width:1.0625rem;height:1.0625rem}.f-picker{display:flex;align-items:center;justify-content:space-between;gap:.25rem;text-align:left;cursor:pointer}.f-picker-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.f-placeholder{color:var(--lib-forms-on-surface-variant)}.f-picker mat-icon{flex:none;font-size:1.0625rem;width:1.0625rem;height:1.0625rem;color:var(--lib-forms-on-surface-variant)}.path-icon{margin-right:.25rem;font-size:1rem;width:1rem;height:1rem;color:var(--lib-forms-on-surface-variant)}.editor-foot{display:flex;justify-content:flex-end;margin-top:-.25rem}.editor-actions{display:flex;align-items:center;gap:.125rem;padding-top:.5rem}.spacer{flex:1}.suggestions{display:flex;gap:1rem;flex-wrap:wrap;padding:.75rem;border-radius:var(--lib-forms-radius-md);background:var(--sem-info-surface, var(--lib-forms-surface-container))}.suggestion-group{flex:1 1 10rem;display:flex;flex-direction:column;gap:.375rem}.chip-row{display:flex;flex-wrap:wrap;gap:.25rem}.ins-chip{font-size:.75rem}.result-count{display:inline-flex;align-items:center;gap:.375rem;font-size:.8125rem;font-weight:500;color:var(--sem-emerald, var(--lib-forms-method-get))}.result-count mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.mapped-value{padding:1rem 1.25rem;background:var(--lib-forms-on-surface);color:var(--lib-forms-surface);border-radius:var(--lib-forms-radius-md);overflow:auto}.mapped-value pre{margin:0;font-family:var(--lib-forms-font-mono, monospace);font-size:.8125rem}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.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: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i3$5.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$5.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i5$3.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i1$4.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i1$4.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i1$4.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i1$4.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i1$4.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DataTreeComponent, decorators: [{
             type: Component,
@@ -19049,7 +19582,7 @@ class ApiValueAccessRulesComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ApiValueAccessRulesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ApiValueAccessRulesComponent, isStandalone: true, selector: "lib-api-value-access-rules", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multipleBind: { classPropertyName: "multipleBind", publicName: "multipleBind", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, formInputs: { classPropertyName: "formInputs", publicName: "formInputs", isSignal: true, isRequired: false, transformFunction: null }, mapToData: { classPropertyName: "mapToData", publicName: "mapToData", isSignal: true, isRequired: false, transformFunction: null }, postmanCollectionConfig: { classPropertyName: "postmanCollectionConfig", publicName: "postmanCollectionConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", reload: "reload" }, host: { classAttribute: "lib-api-value-access-rules" }, ngImport: i0, template: "@if (hasErrors()) {\n  <lib-error-list [errors]=\"errors()\" />\n}\n\n<div class=\"mode-toggle\">\n  <mat-button-toggle-group name=\"valueAccessMode\" aria-label=\"Value access mode\" [value]=\"viewMode()\">\n    <mat-button-toggle (click)=\"setViewMode('map')\" [checked]=\"viewMode() === 'map'\" value=\"map\">\n      Value Mapping\n    </mat-button-toggle>\n    <mat-button-toggle (click)=\"setViewMode('sync')\" [checked]=\"viewMode() === 'sync'\" value=\"sync\">\n      Data Sync\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n\n@if (error(); as err) {\n  <lib-empty-state icon=\"error_outline\"\n    [message]=\"err.error || err.message || 'Failed to load the collection.'\" />\n}\n\n@switch (viewMode()) {\n  @case ('sync') {\n    @if (parsedRequestBody(); as body) {\n      <lib-json-editor (valueChange)=\"requestBodyChanged($event)\" [value]=\"body\" />\n    } @else {\n      <lib-empty-state icon=\"data_object\"\n        message=\"No request body found in the selected API request.\" />\n    }\n\n    <div class=\"run-bar\">\n      <p class=\"run-bar__hint\">Run the API call with the body above to load a live response.</p>\n      <span class=\"run-bar__spacer\"></span>\n      <button mat-stroked-button type=\"button\" [disabled]=\"loading()\" (click)=\"runApiCall()\"\n        [attr.aria-busy]=\"loading()\" aria-label=\"Run API call\">\n        @if (loading()) {\n          <mat-spinner diameter=\"16\" />\n        } @else {\n          <mat-icon>play_arrow</mat-icon>\n        }\n        <span>{{ loading() ? 'Running API\u2026' : 'Run API Call' }}</span>\n      </button>\n    </div>\n  }\n\n  @case ('map') {\n    @if (multipleBind(); as controls) {\n      @for (controlName of controls; track controlName) {\n        <section class=\"mapping-section\">\n          <label class=\"mapping-section__label\" [attr.for]=\"controlName\">\n            Map <strong>{{ controlName }}</strong>\n          </label>\n          <lib-data-tree [formInputs]=\"formInputs()\" [data]=\"treeData()\"\n            [value]=\"keyedValueFor(controlName)\"\n            (pathChanged)=\"pathChanged($event, controlName)\" />\n        </section>\n      }\n    } @else {\n      <lib-data-tree [formInputs]=\"formInputs()\" [data]=\"treeData()\" [value]=\"singleValue()\"\n        (pathChanged)=\"pathChanged($event)\" />\n    }\n  }\n}\n\n<!-- CDK overlay shown while disabled -->\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOpen]=\"disabled()\">\n  <div class=\"disabled-overlay\" aria-hidden=\"true\"></div>\n</ng-template>\n", styles: [":host{display:block;position:relative}.mode-toggle{display:flex;justify-content:center;margin-bottom:1rem}.run-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.5rem;padding:1rem 1.25rem;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)}.run-bar__hint{margin:0;font-size:.8125rem;line-height:1.4;color:var(--lib-forms-on-surface-variant)}.run-bar__spacer{flex:1 1 auto}.mapping-section{margin-bottom:1.5rem}.mapping-section__label{display:block;margin-bottom:.75rem;font-size:.875rem;color:var(--lib-forms-on-surface)}.disabled-overlay{position:absolute;inset:0;background:color-mix(in srgb,var(--lib-forms-on-surface) 30%,transparent);border-radius:var(--lib-forms-radius-lg, 12px);z-index:10}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$3.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: MatButtonModule }, { kind: "component", type: i1$2.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: MatButtonToggleModule }, { kind: "directive", type: i2$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: DataTreeComponent, selector: "lib-data-tree", inputs: ["data", "value", "formInputs"], outputs: ["pathChanged"] }, { kind: "component", type: JsonEditorComponent, selector: "lib-json-editor", inputs: ["value", "height", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: EmptyStateComponent, selector: "lib-empty-state", inputs: ["icon", "message"] }, { kind: "component", type: ErrorListComponent, selector: "lib-error-list", inputs: ["errors"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ApiValueAccessRulesComponent, isStandalone: true, selector: "lib-api-value-access-rules", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multipleBind: { classPropertyName: "multipleBind", publicName: "multipleBind", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, formInputs: { classPropertyName: "formInputs", publicName: "formInputs", isSignal: true, isRequired: false, transformFunction: null }, mapToData: { classPropertyName: "mapToData", publicName: "mapToData", isSignal: true, isRequired: false, transformFunction: null }, postmanCollectionConfig: { classPropertyName: "postmanCollectionConfig", publicName: "postmanCollectionConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged", reload: "reload" }, host: { classAttribute: "lib-api-value-access-rules" }, ngImport: i0, template: "@if (hasErrors()) {\n  <lib-error-list [errors]=\"errors()\" />\n}\n\n<div class=\"mode-toggle\">\n  <mat-button-toggle-group name=\"valueAccessMode\" aria-label=\"Value access mode\" [value]=\"viewMode()\">\n    <mat-button-toggle (click)=\"setViewMode('map')\" [checked]=\"viewMode() === 'map'\" value=\"map\">\n      Value Mapping\n    </mat-button-toggle>\n    <mat-button-toggle (click)=\"setViewMode('sync')\" [checked]=\"viewMode() === 'sync'\" value=\"sync\">\n      Data Sync\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n\n@if (error(); as err) {\n  <lib-empty-state icon=\"error_outline\"\n    [message]=\"err.error || err.message || 'Failed to load the collection.'\" />\n}\n\n@switch (viewMode()) {\n  @case ('sync') {\n    @if (parsedRequestBody(); as body) {\n      <lib-json-editor (valueChange)=\"requestBodyChanged($event)\" [value]=\"body\" />\n    } @else {\n      <lib-empty-state icon=\"data_object\"\n        message=\"No request body found in the selected API request.\" />\n    }\n\n    <div class=\"run-bar\">\n      <p class=\"run-bar__hint\">Run the API call with the body above to load a live response.</p>\n      <span class=\"run-bar__spacer\"></span>\n      <button mat-stroked-button type=\"button\" [disabled]=\"loading()\" (click)=\"runApiCall()\"\n        [attr.aria-busy]=\"loading()\" aria-label=\"Run API call\">\n        @if (loading()) {\n          <mat-spinner diameter=\"16\" />\n        } @else {\n          <mat-icon>play_arrow</mat-icon>\n        }\n        <span>{{ loading() ? 'Running API\u2026' : 'Run API Call' }}</span>\n      </button>\n    </div>\n  }\n\n  @case ('map') {\n    @if (multipleBind(); as controls) {\n      @for (controlName of controls; track controlName) {\n        <section class=\"mapping-section\">\n          <label class=\"mapping-section__label\" [attr.for]=\"controlName\">\n            Map <strong>{{ controlName }}</strong>\n          </label>\n          <lib-data-tree [formInputs]=\"formInputs()\" [data]=\"treeData()\"\n            [value]=\"keyedValueFor(controlName)\"\n            (pathChanged)=\"pathChanged($event, controlName)\" />\n        </section>\n      }\n    } @else {\n      <lib-data-tree [formInputs]=\"formInputs()\" [data]=\"treeData()\" [value]=\"singleValue()\"\n        (pathChanged)=\"pathChanged($event)\" />\n    }\n  }\n}\n\n<!-- CDK overlay shown while disabled -->\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOpen]=\"disabled()\">\n  <div class=\"disabled-overlay\" aria-hidden=\"true\"></div>\n</ng-template>\n", styles: [":host{display:block;position:relative}.mode-toggle{display:flex;justify-content:center;margin-bottom:1rem}.run-bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.5rem;padding:1rem 1.25rem;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)}.run-bar__hint{margin:0;font-size:.8125rem;line-height:1.4;color:var(--lib-forms-on-surface-variant)}.run-bar__spacer{flex:1 1 auto}.mapping-section{margin-bottom:1.5rem}.mapping-section__label{display:block;margin-bottom:.75rem;font-size:.875rem;color:var(--lib-forms-on-surface)}.disabled-overlay{position:absolute;inset:0;background:color-mix(in srgb,var(--lib-forms-on-surface) 30%,transparent);border-radius:var(--lib-forms-radius-lg, 12px);z-index:10}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$2.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: MatButtonModule }, { kind: "component", type: i1$2.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: MatButtonToggleModule }, { kind: "directive", type: i3$5.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$5.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: DataTreeComponent, selector: "lib-data-tree", inputs: ["data", "value", "formInputs"], outputs: ["pathChanged"] }, { kind: "component", type: JsonEditorComponent, selector: "lib-json-editor", inputs: ["value", "height", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: EmptyStateComponent, selector: "lib-empty-state", inputs: ["icon", "message"] }, { kind: "component", type: ErrorListComponent, selector: "lib-error-list", inputs: ["errors"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ApiValueAccessRulesComponent, decorators: [{
             type: Component,
@@ -19071,6 +19604,165 @@ var apiValueAccessRules_component = /*#__PURE__*/Object.freeze({
     ApiValueAccessRulesComponent: ApiValueAccessRulesComponent
 });
 
+/** Canonical operator value keyed by its lower-cased spelling (for parse normalisation). */
+const OPERATOR_BY_KEY = new Map(PREDICATE_OPERATORS.map((op) => [op.value.toLowerCase(), op.value]));
+/** Symbolic operators, longest-match first so `===` wins over `==`. */
+const SYMBOLIC_OPS = ['===', '!==', '>=', '<=', '==', '!=', '>', '<'];
+/** Keyword operators (matched case-insensitively, surrounded by whitespace). */
+const KEYWORD_OPS = ['includes', 'startsWith', 'endsWith', 'matches', 'in'];
+/** An empty condition seeded with the given field and a sensible default operator. */
+function emptyCondition(field = '') {
+    return { field, operator: '===', compareTo: 'value', value: '' };
+}
+const isBareLiteral = (v) => v === 'true' || v === 'false' || v === 'null' || (v.trim() !== '' && !Number.isNaN(Number(v)));
+const isQuoted = (v) => {
+    const t = v.trim();
+    if (t.length < 2)
+        return false;
+    const a = t[0];
+    const b = t[t.length - 1];
+    return (a === '"' && b === '"') || (a === "'" && b === "'");
+};
+const unquote = (v) => (isQuoted(v) ? v.trim().slice(1, -1) : v.trim());
+/** Formats a literal: bare for numbers/booleans/null, otherwise a quoted, escaped string. */
+function formatLiteral(value) {
+    const t = value.trim();
+    if (t === '')
+        return '""';
+    if (isBareLiteral(t))
+        return t;
+    return `"${t.replace(/"/g, '\\"')}"`;
+}
+/** The expression token for a condition's right operand. */
+function rightToken(condition) {
+    return condition.compareTo === 'field' ? condition.value.trim() : formatLiteral(condition.value);
+}
+/** Whether a condition is complete enough to contribute to the expression. */
+function isComplete(condition) {
+    if (condition.field.trim() === '')
+        return false;
+    if (condition.compareTo === 'field')
+        return condition.value.trim() !== '';
+    return true;
+}
+/**
+ * Serialises a condition group into a predicate expression string. Incomplete
+ * conditions are dropped, so an empty/half-built group yields `''` (which the
+ * editor treats as "nothing to save yet").
+ */
+function serializeConditions(group) {
+    return group.conditions
+        .filter(isComplete)
+        .map((c) => `${c.field.trim()} ${c.operator} ${rightToken(c)}`)
+        .join(` ${group.connector} `);
+}
+/** Resolves a raw operator spelling to its canonical {@link PREDICATE_OPERATORS} value, or `null`. */
+function canonicalOperator(raw) {
+    return OPERATOR_BY_KEY.get(raw.toLowerCase()) ?? null;
+}
+/** Classifies a raw right-hand operand as a field reference or a literal value. */
+function classifyRight(raw, fieldNames) {
+    const t = raw.trim();
+    if (isQuoted(t))
+        return { compareTo: 'value', value: unquote(t) };
+    if (fieldNames.has(t))
+        return { compareTo: 'field', value: t };
+    return { compareTo: 'value', value: t };
+}
+/** Parses a single `left op right` comparison, or `null` if it is not representable. */
+function parseCondition(part, fieldNames) {
+    const p = part.trim();
+    for (const op of SYMBOLIC_OPS) {
+        const idx = p.indexOf(op);
+        if (idx > 0) {
+            const operator = canonicalOperator(op);
+            if (!operator)
+                return null;
+            const field = p.slice(0, idx).trim();
+            const right = p.slice(idx + op.length).trim();
+            if (field === '' || right === '')
+                return null;
+            return { field, operator, ...classifyRight(right, fieldNames) };
+        }
+    }
+    for (const kw of KEYWORD_OPS) {
+        const m = p.match(new RegExp(`^(.+?)\\s+${kw}\\s+(.+)$`, 'i'));
+        if (m && m[1] && m[2]) {
+            const operator = canonicalOperator(kw);
+            if (!operator)
+                return null;
+            return { field: m[1].trim(), operator, ...classifyRight(m[2], fieldNames) };
+        }
+    }
+    return null;
+}
+/**
+ * Best-effort parse of an expression into a guided condition group. Returns
+ * `null` (→ raw editor) for anything the builder cannot represent losslessly:
+ * grouping `()`, mixed `&&`/`||`, unary `!`, or an unknown operator.
+ */
+function parseConditions(expression, fieldNames) {
+    const e = expression.trim();
+    if (e === '')
+        return { connector: '&&', conditions: [] };
+    if (/[()]/.test(e))
+        return null; // grouping → raw
+    if (/!(?!=)/.test(e))
+        return null; // unary negation (`!field`) → raw
+    const hasAnd = e.includes('&&');
+    const hasOr = e.includes('||');
+    if (hasAnd && hasOr)
+        return null; // mixed connectors → raw
+    const connector = hasOr ? '||' : '&&';
+    const parts = hasOr ? e.split('||') : hasAnd ? e.split('&&') : [e];
+    const conditions = [];
+    for (const part of parts) {
+        const condition = parseCondition(part, fieldNames);
+        if (!condition)
+            return null;
+        conditions.push(condition);
+    }
+    return { connector, conditions };
+}
+/** Returns the unique identifier tokens referenced in an expression. */
+function referencedTokens(expression) {
+    return new Set(expression.match(/[A-Za-z_][A-Za-z0-9_]*/g) ?? []);
+}
+/**
+ * Derives the `inputsObservedForChanges` dependency list from an expression by
+ * matching identifier tokens against the editor's resolved {@link FieldBinding}s.
+ * Works for both guided and raw expressions, so observed inputs always reflect
+ * what the expression actually references — no manual add/remove, no orphans.
+ *
+ * When an aggregate has been chosen for a field (only possible for a
+ * multiple-input column), the binding carries `parentInputId` + `function` so
+ * the engine reduces its row array to a scalar. Otherwise it resolves directly
+ * (a scalar primary input, or a per-row list value).
+ */
+function deriveObservedInputs(expression, fields, functions) {
+    const tokens = referencedTokens(expression);
+    const observed = [];
+    const seen = new Set();
+    for (const field of fields) {
+        if (!tokens.has(field.variable) || seen.has(field.variable))
+            continue;
+        seen.add(field.variable);
+        const aggregate = functions[field.variable];
+        if (aggregate && field.parentInputId) {
+            observed.push({
+                inputId: field.inputId,
+                variable: field.variable,
+                parentInputId: field.parentInputId,
+                function: aggregate,
+            });
+        }
+        else {
+            observed.push({ inputId: field.inputId, variable: field.variable });
+        }
+    }
+    return observed;
+}
+
 /**
  * Builder-side editor for authoring a boolean expression (used for guarded
  * navigation, conditional validation, and API path-selection rules). Validates
@@ -19099,6 +19791,12 @@ var apiValueAccessRules_component = /*#__PURE__*/Object.freeze({
  */
 class ValidationExpressioCreatorComponent {
     #cursorPosition;
+    /** Whether the expression is authored via the guided rows or the raw editor. */
+    #mode;
+    /** Guided builder model mirroring the current expression. */
+    #group;
+    /** Reactive mirror of the control value (the control itself is not a signal). */
+    #expressionText;
     /** Local mutable mirror of incoming `valueAccessRules`. */
     #valueAccessRules;
     #destroyRef;
@@ -19118,7 +19816,9 @@ class ValidationExpressioCreatorComponent {
         this.valueAccessRules = input({}, ...(ngDevMode ? [{ debugName: "valueAccessRules" }] : /* istanbul ignore next */ []));
         /** Fires when either the expression text or its derived value-access tree changes. */
         this.expressionChange = output();
-        this.textareaElementRef = viewChild.required('textarea');
+        // Optional: the raw textarea only exists in Advanced mode, so the guided
+        // builder must not assume it is in the DOM.
+        this.textareaElementRef = viewChild('textarea', ...(ngDevMode ? [{ debugName: "textareaElementRef" }] : /* istanbul ignore next */ []));
         this.expressionControl = new FormControl('', [
             Validators.required,
             expressionSyntaxValidator(),
@@ -19127,6 +19827,52 @@ class ValidationExpressioCreatorComponent {
         this.optionsSearch = signal(undefined, ...(ngDevMode ? [{ debugName: "optionsSearch" }] : /* istanbul ignore next */ []));
         this.variableInEdit = signal(null, ...(ngDevMode ? [{ debugName: "variableInEdit" }] : /* istanbul ignore next */ []));
         this.#cursorPosition = 0;
+        /** Operator choices, shared with the validators builder for label parity. */
+        this.operators = PREDICATE_OPERATORS;
+        /** Whether the expression is authored via the guided rows or the raw editor. */
+        this.#mode = signal('guided', ...(ngDevMode ? [{ debugName: "#mode" }] : /* istanbul ignore next */ []));
+        this.mode = this.#mode.asReadonly();
+        /** Guided builder model mirroring the current expression. */
+        this.#group = signal({ connector: '&&', conditions: [] }, ...(ngDevMode ? [{ debugName: "#group" }] : /* istanbul ignore next */ []));
+        this.group = this.#group.asReadonly();
+        /** Reactive mirror of the control value (the control itself is not a signal). */
+        this.#expressionText = signal('', ...(ngDevMode ? [{ debugName: "#expressionText" }] : /* istanbul ignore next */ []));
+        this.expressionText = this.#expressionText.asReadonly();
+        /** Fields the guided builder can reference, as friendly options. */
+        this.fieldOptions = computed(() => this.allInputs().map((inp) => ({
+            variable: inp.formControlName,
+            label: inp.label || inp.formControlName,
+            // `stepName` is attached at runtime by the form builder; it is not on the
+            // static FormColumnInputs type, so read it defensively.
+            stepName: inp.stepName ?? null,
+        })), ...(ngDevMode ? [{ debugName: "fieldOptions" }] : /* istanbul ignore next */ []));
+        /**
+         * Field options grouped by their `stepName` for the dropdowns, preserving
+         * first-seen order. Fields without a step collapse into a single ungrouped
+         * bucket (rendered without an `<optgroup>`), so forms that don't carry step
+         * names degrade to a plain flat list.
+         */
+        this.fieldOptionGroups = computed(() => {
+            const buckets = new Map();
+            const order = [];
+            for (const option of this.fieldOptions()) {
+                const key = option.stepName ?? '';
+                const existing = buckets.get(key);
+                if (existing) {
+                    existing.push(option);
+                }
+                else {
+                    buckets.set(key, [option]);
+                    order.push(key);
+                }
+            }
+            return order.map((key) => ({
+                label: key === '' ? null : key,
+                options: buckets.get(key) ?? [],
+            }));
+        }, ...(ngDevMode ? [{ debugName: "fieldOptionGroups" }] : /* istanbul ignore next */ []));
+        /** Whether the current expression can be represented by the guided builder. */
+        this.canUseGuided = computed(() => parseConditions(this.expressionText(), this.#fieldNameSet()) !== null, ...(ngDevMode ? [{ debugName: "canUseGuided" }] : /* istanbul ignore next */ []));
         /** Local mutable mirror of incoming `valueAccessRules`. */
         this.#valueAccessRules = {};
         this.methods = [
@@ -19173,7 +19919,11 @@ class ValidationExpressioCreatorComponent {
                 value: '<=',
             },
         ];
-        /** Bridge the `expression` input into the FormControl. */
+        /**
+         * Bridge the `expression` input into the FormControl and seed the guided
+         * builder. Reparsing is `untracked` so this only re-runs when the `expression`
+         * input changes — never when the user edits inside either mode.
+         */
         this.expressionBridge = effect(() => {
             const value = this.expression();
             if (this.expressionControl.value !== value) {
@@ -19181,6 +19931,10 @@ class ValidationExpressioCreatorComponent {
                 this.expressionControl.markAsPristine();
                 this.expressionControl.markAsUntouched();
             }
+            untracked(() => {
+                this.#expressionText.set(value);
+                this.#syncBuilderFromExpression(value);
+            });
         }, ...(ngDevMode ? [{ debugName: "expressionBridge" }] : /* istanbul ignore next */ []));
         /** Mirror the `valueAccessRules` input into the local mutable copy. */
         this.valueAccessRulesBridge = effect(() => {
@@ -19191,6 +19945,7 @@ class ValidationExpressioCreatorComponent {
         this.#destroyRef = inject(DestroyRef);
         this.expressionControl.valueChanges
             .pipe(distinctUntilChanged((prev, curr) => prev === curr), tap((value) => {
+            this.#expressionText.set(value || '');
             this.onTextChange(value || '').then(() => {
                 this.expressionChange.emit({
                     expression: this.expressionControl.value,
@@ -19220,7 +19975,14 @@ class ValidationExpressioCreatorComponent {
         return this.#valueAccessRules[key] ?? [];
     }
     async onTextChange(expression) {
-        const textarea = this.textareaElementRef().nativeElement;
+        const textarea = this.textareaElementRef()?.nativeElement;
+        // Guided mode has no textarea: skip the `$`-suggestion handling and just
+        // keep the derived value-access rules in sync with the expression.
+        if (!textarea) {
+            this.showSuggestions.set(false);
+            this.cleanValueAccessRules();
+            return;
+        }
         this.#cursorPosition = textarea.selectionStart || 0;
         // Define the operators that should prevent suggestions from showing
         const operators = this.methods.map((method) => method.value);
@@ -19280,7 +20042,9 @@ class ValidationExpressioCreatorComponent {
             this.expressionControl.setValue(newValue);
             this.expressionControl.markAsDirty();
             this.showSuggestions.set(false);
-            const textarea = this.textareaElementRef().nativeElement;
+            const textarea = this.textareaElementRef()?.nativeElement;
+            if (!textarea)
+                return;
             textarea.focus();
             const newCursorPosition = (beforeDollar + suggestion + ' ').length;
             setTimeout(() => {
@@ -19304,9 +20068,65 @@ class ValidationExpressioCreatorComponent {
         }
     }
     onFocus() {
-        const textarea = this.textareaElementRef().nativeElement;
+        const textarea = this.textareaElementRef()?.nativeElement;
+        if (!textarea)
+            return;
         this.#cursorPosition = textarea.selectionStart || 0;
     }
+    // ---- guided condition builder ------------------------------------------
+    /** Read the value-event target as a string. */
+    inputValue(event) {
+        return event.target.value;
+    }
+    /** Switch the All/Any connector joining the conditions. */
+    setConnector(connector) {
+        this.#applyGroup({ ...this.#group(), connector });
+    }
+    /** Append a fresh condition defaulting its field to the first available one. */
+    addCondition() {
+        const fallback = this.fieldOptions()[0]?.variable ?? '';
+        const group = this.#group();
+        this.#applyGroup({
+            ...group,
+            conditions: [...group.conditions, emptyCondition(fallback)],
+        });
+    }
+    /** Apply a partial change to the condition at `index`. */
+    updateCondition(index, patch) {
+        const group = this.#group();
+        const conditions = group.conditions.map((c, i) => (i === index ? { ...c, ...patch } : c));
+        this.#applyGroup({ ...group, conditions });
+    }
+    /** Flip a condition between comparing to a typed value and another field. */
+    toggleCompareTo(index) {
+        const condition = this.#group().conditions[index];
+        if (!condition)
+            return;
+        if (condition.compareTo === 'value') {
+            const field = this.fieldOptions().find((f) => f.variable !== condition.field);
+            this.updateCondition(index, { compareTo: 'field', value: field?.variable ?? '' });
+        }
+        else {
+            this.updateCondition(index, { compareTo: 'value', value: '' });
+        }
+    }
+    /** Remove the condition at `index`. */
+    removeCondition(index) {
+        const group = this.#group();
+        this.#applyGroup({ ...group, conditions: group.conditions.filter((_, i) => i !== index) });
+    }
+    /** Switch to the raw expression editor (the escape hatch for power users). */
+    useAdvanced() {
+        this.#mode.set('advanced');
+    }
+    /** Switch back to the guided builder, reparsing the current expression. */
+    useGuided() {
+        const parsed = parseConditions(this.expressionText(), this.#fieldNameSet());
+        if (!parsed)
+            return;
+        this.#group.set(parsed);
+        this.#mode.set('guided');
+    }
     toggleVariableInEdit(variable) {
         this.variableInEdit.update((current) => (current === variable ? null : variable));
     }
@@ -19319,8 +20139,35 @@ class ValidationExpressioCreatorComponent {
             },
         });
     }
+    // ---- internal ----------------------------------------------------------
+    /** Set of field variable names the builder recognises (for parsing). */
+    #fieldNameSet() {
+        return new Set(this.fieldOptions().map((f) => f.variable));
+    }
+    /**
+     * Store a builder change: update the model, then serialise it into the
+     * control. Writing the control drives the existing valueChanges pipeline
+     * (value-access rule sync + `expressionChange` emit), so the guided and raw
+     * paths share one source of truth.
+     */
+    #applyGroup(next) {
+        this.#group.set(next);
+        this.expressionControl.setValue(serializeConditions(next));
+        this.expressionControl.markAsDirty();
+    }
+    /** Seed the builder from an expression: guided when parseable, else raw. */
+    #syncBuilderFromExpression(expression) {
+        const parsed = parseConditions(expression, this.#fieldNameSet());
+        if (parsed) {
+            this.#group.set(parsed);
+            this.#mode.set('guided');
+        }
+        else {
+            this.#mode.set('advanced');
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ValidationExpressioCreatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ValidationExpressioCreatorComponent, isStandalone: true, selector: "lib-validation-expressio-creator", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, formInputs: { classPropertyName: "formInputs", publicName: "formInputs", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, expression: { classPropertyName: "expression", publicName: "expression", isSignal: true, isRequired: false, transformFunction: null }, valueAccessRules: { classPropertyName: "valueAccessRules", publicName: "valueAccessRules", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expressionChange: "expressionChange" }, host: { classAttribute: "lib-validation-expressio-creator" }, viewQueries: [{ propertyName: "textareaElementRef", first: true, predicate: ["textarea"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" style=\"width: 100%;\" floatLabel=\"always\"\r\n    id=\"validationExpressionCreator\">\r\n    <mat-label>Condition expression</mat-label>\r\n    <textarea [formControl]=\"expressionControl\" matInput #textarea (focus)=\"onFocus()\"\r\n        placeholder=\"Enter a validation string for the function\"></textarea>\r\n\r\n\r\n    <mat-hint\r\n        [style.color]=\"expressionControl.invalid && !showSuggestions() ? 'var(--mat-form-field-error-text-color, var(--mat-sys-error))' : ''\">\r\n        @if (expressionControl.invalid && errorMessage !== null && !showSuggestions()) {\r\n            {{ errorMessage }}\r\n        } @else {\r\n            {{ showSuggestions() ? 'Click a suggestion to apply it' : 'Enter a filter condition. Type $ for options' }}\r\n            @if (showSuggestions()) {\r\n                <section class=\"showSuggestionContainer\">\r\n                    <mat-divider></mat-divider>\r\n                    <div style=\"padding: 0px;margin-top:8px\" class=\"\">\r\n                        <div class=\"suggestion-container\">\r\n                            <div class=\"suggestion-column\">\r\n                                <div class=\"suggestion-heading\">\r\n                                    Logical Operators\r\n                                </div>\r\n                                <div class=\"button-container\">\r\n                                    @for (method of getMethods() | searchList:optionsSearch(); track method.value) {\r\n                                        <button matTooltipPosition=\"left\" [matTooltip]=\"method.hint\" color=\"primary\" mat-button\r\n                                            (click)=\"selectSuggestionInput(method.value)\" class=\"suggestion-button\">\r\n                                            {{ method.label | titlecase }}\r\n                                        </button>\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"suggestion-column\">\r\n                                <div class=\"suggestion-heading\">\r\n                                    Add Input as a Variable\r\n                                </div>\r\n                                <div class=\"button-container\">\r\n                                    @for (inp of allInputs() | searchList:optionsSearch(); track inp.formControlName) {\r\n                                        <button mat-button matTooltipPosition=\"right\"\r\n                                            [matTooltip]=\"'Add Variable - ' + inp.label\"\r\n                                            (click)=\"selectSuggestionInput(inp.formControlName)\" class=\"suggestion-button\">\r\n                                            {{ inp.label | titlecase }}\r\n                                        </button>\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </section>\r\n            }\r\n        }\r\n    </mat-hint>\r\n</mat-form-field>\r\n\r\n@if (valueAccessOptions().length > 0) {\r\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" style=\"width: 100%;margin-top:12px\"\r\n        floatLabel=\"always\" id=\"Value access options\">\r\n        <mat-label>\r\n            Form Fields for expression\r\n        </mat-label>\r\n        <mat-chip-grid #chipGrid aria-label=\"value access options\">\r\n            @for (variable of valueAccessOptions(); track variable) {\r\n                <mat-chip-option\r\n                    [selected]=\"variableInEdit() === variable\"\r\n                    (click)=\"toggleVariableInEdit(variable)\"\r\n                    [aria-description]=\"'press enter to edit ' + variable\">\r\n                    {{ variable }}\r\n                </mat-chip-option>\r\n            }\r\n            <input placeholder=\"\" style=\"display: none;\" [matChipInputFor]=\"chipGrid\" />\r\n        </mat-chip-grid>\r\n        @if (variableInEdit(); as activeVariable) {\r\n            <lib-api-value-access-rules\r\n                [value]=\"getValueAccessRule(activeVariable)\"\r\n                [errors]=\"[]\"\r\n                [formInputs]=\"formInputs() || []\"\r\n                [mapToData]=\"data()\"\r\n                (valueChanged)=\"activeVariableChanged($event)\">\r\n            </lib-api-value-access-rules>\r\n        }\r\n        <mat-hint>\r\n            Click a field to define how to process its value. You can filter a list, count its items, or access specific\r\n            data within a complex object.\r\n        </mat-hint>\r\n    </mat-form-field>\r\n}\r\n", styles: [".suggestion-container{display:flex;width:100%;gap:8px}.suggestion-column{flex:1;min-width:0}.button-container{display:flex;flex-wrap:wrap}.suggestion-button{height:auto;text-align:left;font-size:10.5px;border-radius:4px;margin-bottom:4px;line-height:normal;padding:4px;white-space:nowrap;overflow:hidden;display:inline-block;text-overflow:ellipsis}.suggestion-heading{margin-bottom:8px;font-size:.6875em;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.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: i1$6.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i1$6.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.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: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ApiValueAccessRulesComponent, selector: "lib-api-value-access-rules", inputs: ["disabled", "multipleBind", "errors", "value", "formInputs", "mapToData", "postmanCollectionConfig"], outputs: ["valueChanged", "reload"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: SearchListPipe, name: "searchList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: ValidationExpressioCreatorComponent, isStandalone: true, selector: "lib-validation-expressio-creator", inputs: { hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, formInputs: { classPropertyName: "formInputs", publicName: "formInputs", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, expression: { classPropertyName: "expression", publicName: "expression", isSignal: true, isRequired: false, transformFunction: null }, valueAccessRules: { classPropertyName: "valueAccessRules", publicName: "valueAccessRules", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expressionChange: "expressionChange" }, host: { classAttribute: "lib-validation-expressio-creator" }, viewQueries: [{ propertyName: "textareaElementRef", first: true, predicate: ["textarea"], descendants: true, isSignal: true }], ngImport: i0, template: "<section class=\"lib-vec\">\n    <div class=\"lib-vec__head\">\n        <div class=\"lib-vec__heading\">\n            <span class=\"lib-vec__f-label\">Condition expression</span>\n            <p class=\"lib-vec__sub-hint\">{{ hint() }}</p>\n        </div>\n\n        @if (mode() === 'advanced') {\n            <button type=\"button\" class=\"lib-vec__link\" [disabled]=\"!canUseGuided()\"\n                [matTooltip]=\"canUseGuided() ? 'Build this with guided rows' : 'This expression is too advanced for the guided builder'\"\n                (click)=\"useGuided()\">\n                <mat-icon>view_module</mat-icon> Guided\n            </button>\n        } @else {\n            <button type=\"button\" class=\"lib-vec__link\" matTooltip=\"Type the expression yourself\"\n                (click)=\"useAdvanced()\">\n                <mat-icon>code</mat-icon> Advanced\n            </button>\n        }\n    </div>\n\n    @if (mode() === 'guided') {\n        @if (fieldOptions().length === 0) {\n            <p class=\"lib-vec__sub-hint\">\n                No fields available yet \u2014 switch to Advanced to type an expression.\n            </p>\n        } @else if (group().conditions.length === 0) {\n            <p class=\"lib-vec__sub-hint lib-vec__sub-hint--lead\">\n                <mat-icon class=\"lib-vec__lead-icon\">lightbulb</mat-icon>\n                <span>Add a check below \u2014 this passes when it\u2019s true.</span>\n            </p>\n        } @else if (group().conditions.length > 1) {\n            <div class=\"lib-vec__match\">\n                <span class=\"lib-vec__muted\">Match</span>\n                <mat-button-toggle-group class=\"lib-vec__seg\" [value]=\"group().connector\"\n                    hideSingleSelectionIndicator (change)=\"setConnector($event.value)\"\n                    aria-label=\"Combine conditions\">\n                    <mat-button-toggle value=\"&&\">All</mat-button-toggle>\n                    <mat-button-toggle value=\"||\">Any</mat-button-toggle>\n                </mat-button-toggle-group>\n                <span class=\"lib-vec__muted\">of the checks</span>\n            </div>\n        }\n\n        @for (cond of group().conditions; track $index; let first = $first) {\n            @if (!first) {\n                <div class=\"lib-vec__connector\" aria-hidden=\"true\">\n                    <span>{{ group().connector === '&&' ? 'AND' : 'OR' }}</span>\n                </div>\n            }\n            <div class=\"lib-vec__cond\" [class.lib-vec__cond--incomplete]=\"!cond.field || !cond.value\">\n                <div class=\"lib-vec__cond-row\">\n                    <select class=\"lib-vec__control lib-vec__control--field\"\n                        [class.lib-vec__control--invalid]=\"!cond.field\"\n                        (change)=\"updateCondition($index, { field: inputValue($event) })\">\n                        <option value=\"\" disabled [selected]=\"!cond.field\">Choose a field</option>\n                        @for (group of fieldOptionGroups(); track $index) {\n                            @if (group.label) {\n                                <optgroup [label]=\"group.label\">\n                                    @for (f of group.options; track f.variable) {\n                                        <option [value]=\"f.variable\" [selected]=\"f.variable === cond.field\">\n                                            {{ f.label }}\n                                        </option>\n                                    }\n                                </optgroup>\n                            } @else {\n                                @for (f of group.options; track f.variable) {\n                                    <option [value]=\"f.variable\" [selected]=\"f.variable === cond.field\">\n                                        {{ f.label }}\n                                    </option>\n                                }\n                            }\n                        }\n                    </select>\n                    <button type=\"button\" class=\"lib-vec__icon-btn\"\n                        (click)=\"removeCondition($index)\" matTooltip=\"Remove check\" aria-label=\"Remove check\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n\n                <div class=\"lib-vec__cond-row lib-vec__cond-row--ops\">\n                    <select class=\"lib-vec__control\"\n                        (change)=\"updateCondition($index, { operator: inputValue($event) })\">\n                        @for (op of operators; track op.value) {\n                            <option [value]=\"op.value\" [selected]=\"op.value === cond.operator\">\n                                {{ op.label }}\n                            </option>\n                        }\n                    </select>\n\n                    @if (cond.compareTo === 'field') {\n                        <select class=\"lib-vec__control\"\n                            [class.lib-vec__control--invalid]=\"!cond.value\"\n                            (change)=\"updateCondition($index, { value: inputValue($event) })\">\n                            <option value=\"\" disabled [selected]=\"!cond.value\">Choose a field</option>\n                            @for (group of fieldOptionGroups(); track $index) {\n                                @if (group.label) {\n                                    <optgroup [label]=\"group.label\">\n                                        @for (f of group.options; track f.variable) {\n                                            <option [value]=\"f.variable\" [selected]=\"f.variable === cond.value\">\n                                                {{ f.label }}\n                                            </option>\n                                        }\n                                    </optgroup>\n                                } @else {\n                                    @for (f of group.options; track f.variable) {\n                                        <option [value]=\"f.variable\" [selected]=\"f.variable === cond.value\">\n                                            {{ f.label }}\n                                        </option>\n                                    }\n                                }\n                            }\n                        </select>\n                    } @else {\n                        <input class=\"lib-vec__control\"\n                            [class.lib-vec__control--invalid]=\"!cond.value\"\n                            [value]=\"cond.value\"\n                            (input)=\"updateCondition($index, { value: inputValue($event) })\"\n                            [placeholder]=\"'a value'\" />\n                    }\n\n                    <button type=\"button\" class=\"lib-vec__icon-btn\"\n                        [class.lib-vec__icon-btn--on]=\"cond.compareTo === 'field'\"\n                        (click)=\"toggleCompareTo($index)\"\n                        [attr.aria-label]=\"cond.compareTo === 'field' ? 'Compare to a typed value' : 'Compare to another field'\"\n                        [matTooltip]=\"cond.compareTo === 'field' ? 'Comparing to a field \u2014 switch to a typed value' : 'Compare to another field instead'\">\n                        <mat-icon>{{ cond.compareTo === 'field' ? 'link' : 'link_off' }}</mat-icon>\n                    </button>\n                </div>\n            </div>\n        }\n\n        <div class=\"lib-vec__foot\">\n            <button type=\"button\" class=\"lib-vec__link\" [disabled]=\"fieldOptions().length === 0\"\n                (click)=\"addCondition()\">\n                <mat-icon>add</mat-icon> Add check\n            </button>\n\n            @if (expressionText()) {\n                <span class=\"lib-vec__valid\" matTooltip=\"Generated expression: {{ expressionText() }}\">\n                    <mat-icon>check_circle</mat-icon> Ready\n                </span>\n            }\n        </div>\n    } @else {\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" style=\"width: 100%;\"\n            floatLabel=\"always\" id=\"validationExpressionCreator\">\n            <mat-label>Expression</mat-label>\n            <textarea [formControl]=\"expressionControl\" matInput #textarea (focus)=\"onFocus()\"\n                class=\"lib-vec__mono\"\n                placeholder=\"Enter a validation string for the function\"></textarea>\n\n            <mat-hint\n                [style.color]=\"expressionControl.invalid && !showSuggestions() ? 'var(--mat-form-field-error-text-color, var(--mat-sys-error))' : ''\">\n                @if (expressionControl.invalid && errorMessage !== null && !showSuggestions()) {\n                    {{ errorMessage }}\n                } @else {\n                    {{ showSuggestions() ? 'Click a suggestion to apply it' : 'Enter a filter condition. Type $ for options' }}\n                    @if (showSuggestions()) {\n                        <section class=\"showSuggestionContainer\">\n                            <mat-divider></mat-divider>\n                            <div style=\"padding: 0px;margin-top:8px\" class=\"\">\n                                <div class=\"suggestion-container\">\n                                    <div class=\"suggestion-column\">\n                                        <div class=\"suggestion-heading\">\n                                            Logical Operators\n                                        </div>\n                                        <div class=\"button-container\">\n                                            @for (method of getMethods() | searchList:optionsSearch(); track method.value) {\n                                                <button matTooltipPosition=\"left\" [matTooltip]=\"method.hint\" color=\"primary\" mat-button\n                                                    (click)=\"selectSuggestionInput(method.value)\" class=\"suggestion-button\">\n                                                    {{ method.label | titlecase }}\n                                                </button>\n                                            }\n                                        </div>\n                                    </div>\n                                    <div class=\"suggestion-column\">\n                                        <div class=\"suggestion-heading\">\n                                            Add Input as a Variable\n                                        </div>\n                                        <div class=\"button-container\">\n                                            @for (inp of allInputs() | searchList:optionsSearch(); track inp.formControlName) {\n                                                <button mat-button matTooltipPosition=\"right\"\n                                                    [matTooltip]=\"'Add Variable - ' + inp.label\"\n                                                    (click)=\"selectSuggestionInput(inp.formControlName)\" class=\"suggestion-button\">\n                                                    {{ inp.label | titlecase }}\n                                                </button>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </section>\n                    }\n                }\n            </mat-hint>\n        </mat-form-field>\n    }\n</section>\n\n@if (valueAccessOptions().length > 0) {\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" style=\"width: 100%;margin-top:12px\"\n        floatLabel=\"always\" id=\"Value access options\">\n        <mat-label>\n            Form Fields for expression\n        </mat-label>\n        <mat-chip-grid #chipGrid aria-label=\"value access options\">\n            @for (variable of valueAccessOptions(); track variable) {\n                <mat-chip-option\n                    [selected]=\"variableInEdit() === variable\"\n                    (click)=\"toggleVariableInEdit(variable)\"\n                    [aria-description]=\"'press enter to edit ' + variable\">\n                    {{ variable }}\n                </mat-chip-option>\n            }\n            <input placeholder=\"\" style=\"display: none;\" [matChipInputFor]=\"chipGrid\" />\n        </mat-chip-grid>\n        @if (variableInEdit(); as activeVariable) {\n            <lib-api-value-access-rules\n                [value]=\"getValueAccessRule(activeVariable)\"\n                [errors]=\"[]\"\n                [formInputs]=\"formInputs() || []\"\n                [mapToData]=\"data()\"\n                (valueChanged)=\"activeVariableChanged($event)\">\n            </lib-api-value-access-rules>\n        }\n        <mat-hint>\n            Click a field to define how to process its value. You can filter a list, count its items, or access specific\n            data within a complex object.\n        </mat-hint>\n    </mat-form-field>\n}\n", styles: [".lib-vec{display:flex;flex-direction:column;gap:.625rem}.lib-vec__head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.lib-vec__heading{display:flex;flex-direction:column;gap:.125rem;min-width:0}.lib-vec__f-label{font-size:.625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--lib-forms-on-surface-variant)}.lib-vec__sub-hint{margin:0;font-size:.75rem;line-height:1.4;color:var(--lib-forms-on-surface-variant)}.lib-vec__sub-hint--lead{display:flex;align-items:center;gap:.375rem;padding:.4375rem .625rem;background:var(--lib-forms-surface-container-lowest);border:1px dashed var(--lib-forms-outline-variant);border-radius:var(--lib-forms-radius-sm, 8px)}.lib-vec__lead-icon{flex:none;font-size:1rem;width:1rem;height:1rem;color:var(--sem-info, var(--lib-forms-primary))}.lib-vec__match{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.lib-vec__muted{font-size:.75rem;color:var(--lib-forms-on-surface-variant)}.lib-vec__seg{--mat-standard-button-toggle-height: 28px;height:28px}.lib-vec__connector{display:flex;justify-content:center;margin:-.1875rem 0}.lib-vec__connector span{padding:.0625rem .5rem;font-size:.5625rem;font-weight:600;letter-spacing:.1em;color:var(--lib-forms-on-surface-variant);background:var(--lib-forms-surface-container-high);border-radius:var(--lib-forms-radius-pill, 999px)}.lib-vec__cond{display:flex;flex-direction:column;gap:.375rem;padding:.5rem .5rem .5625rem;background:var(--lib-forms-surface-container-lowest);border:1px solid var(--lib-forms-outline-variant);border-radius:var(--lib-forms-radius-md, 12px);transition:border-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing, cubic-bezier(.16, 1, .3, 1))}.lib-vec__cond:hover{border-color:var(--lib-forms-outline)}.lib-vec__cond--incomplete{border-color:var(--sem-warning, var(--lib-forms-outline-variant))}.lib-vec__cond-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.375rem;min-width:0}.lib-vec__cond-row--ops{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.lib-vec__control{box-sizing:border-box;width:100%;min-width:0;height:2rem;padding:.3125rem .5rem;font-family:inherit;font-size:.8125rem;line-height:1.2;color:var(--lib-forms-on-surface);background:var(--lib-forms-surface-container-lowest);border:1px solid var(--lib-forms-outline-variant);border-radius:var(--lib-forms-radius-sm, 8px);transition:border-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing, cubic-bezier(.16, 1, .3, 1))}.lib-vec__control--field{font-weight:500}select.lib-vec__control{cursor:pointer}.lib-vec__control:hover{border-color:var(--lib-forms-outline)}.lib-vec__control:focus{outline:none;border-color:var(--lib-forms-primary);box-shadow:0 0 0 1px var(--lib-forms-primary)}.lib-vec__control--invalid:not(:focus){border-color:var(--sem-warning, var(--lib-forms-outline));background:var(--sem-warning-surface, var(--lib-forms-surface-container-lowest))}.lib-vec__icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.875rem;height:1.875rem;padding:0;color:var(--lib-forms-on-surface-variant);background:transparent;border:1px solid transparent;border-radius:var(--lib-forms-radius-sm, 8px);cursor:pointer;transition:color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing, cubic-bezier(.16, 1, .3, 1)),background-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing, cubic-bezier(.16, 1, .3, 1)),border-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing, cubic-bezier(.16, 1, .3, 1))}.lib-vec__icon-btn:hover{color:var(--lib-forms-primary);background:var(--lib-forms-primary-container)}.lib-vec__icon-btn--on{color:var(--lib-forms-primary);border-color:var(--lib-forms-primary)}.lib-vec__icon-btn mat-icon{font-size:1.0625rem;width:1.0625rem;height:1.0625rem}.lib-vec__link{display:inline-flex;align-items:center;gap:.25rem;height:1.75rem;padding:0 .5rem;font:inherit;font-size:.8125rem;font-weight:500;color:var(--lib-forms-primary);background:transparent;border:0;border-radius:var(--lib-forms-radius-sm, 8px);cursor:pointer;transition:background-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing, cubic-bezier(.16, 1, .3, 1))}.lib-vec__head .lib-vec__link{flex:none}.lib-vec__link:hover:not(:disabled){background:var(--lib-forms-primary-container)}.lib-vec__link:disabled{color:var(--lib-forms-on-surface-variant);cursor:default;opacity:.6}.lib-vec__link mat-icon{flex:none;font-size:1.0625rem;width:1.0625rem;height:1.0625rem}.lib-vec__foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.lib-vec__valid{display:inline-flex;align-items:center;gap:.25rem;font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sem-success, var(--lib-forms-primary));cursor:default}.lib-vec__valid mat-icon{font-size:.9375rem;width:.9375rem;height:.9375rem}.lib-vec__mono{font-family:var(--lib-forms-font-mono, monospace)}:host ::ng-deep .mat-mdc-form-field-hint-wrapper{min-width:0}:host ::ng-deep .mat-mdc-form-field-hint{min-width:0;width:100%}.showSuggestionContainer{display:block;box-sizing:border-box;width:100%;max-width:100%;overflow:hidden}.suggestion-container{display:flex;flex-wrap:wrap;box-sizing:border-box;width:100%;gap:24px;max-height:220px;overflow-x:hidden;overflow-y:auto}.suggestion-column{flex:1 1 150px;min-width:0}.suggestion-heading{margin-bottom:12px;font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.7}.button-container{display:flex;flex-wrap:wrap;gap:4px}.suggestion-button{height:auto;min-width:0;max-width:100%;text-align:left;font-size:11px;line-height:normal;padding:4px 8px;border-radius:4px;overflow:hidden}.suggestion-button ::ng-deep .mdc-button__label{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.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: MatButtonToggleModule }, { kind: "directive", type: i3$5.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$5.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i4$3.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.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: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ApiValueAccessRulesComponent, selector: "lib-api-value-access-rules", inputs: ["disabled", "multipleBind", "errors", "value", "formInputs", "mapToData", "postmanCollectionConfig"], outputs: ["valueChanged", "reload"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: SearchListPipe, name: "searchList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: ValidationExpressioCreatorComponent, decorators: [{
             type: Component,
@@ -19328,16 +20175,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                         TitleCasePipe,
                         ReactiveFormsModule,
                         MatButtonModule,
+                        MatButtonToggleModule,
                         MatChipsModule,
                         MatDividerModule,
                         MatFormFieldModule,
+                        MatIconModule,
                         MatInputModule,
                         MatTooltipModule,
                         SearchListPipe,
                         ApiValueAccessRulesComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
                         class: 'lib-validation-expressio-creator',
-                    }, template: "<mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" style=\"width: 100%;\" floatLabel=\"always\"\r\n    id=\"validationExpressionCreator\">\r\n    <mat-label>Condition expression</mat-label>\r\n    <textarea [formControl]=\"expressionControl\" matInput #textarea (focus)=\"onFocus()\"\r\n        placeholder=\"Enter a validation string for the function\"></textarea>\r\n\r\n\r\n    <mat-hint\r\n        [style.color]=\"expressionControl.invalid && !showSuggestions() ? 'var(--mat-form-field-error-text-color, var(--mat-sys-error))' : ''\">\r\n        @if (expressionControl.invalid && errorMessage !== null && !showSuggestions()) {\r\n            {{ errorMessage }}\r\n        } @else {\r\n            {{ showSuggestions() ? 'Click a suggestion to apply it' : 'Enter a filter condition. Type $ for options' }}\r\n            @if (showSuggestions()) {\r\n                <section class=\"showSuggestionContainer\">\r\n                    <mat-divider></mat-divider>\r\n                    <div style=\"padding: 0px;margin-top:8px\" class=\"\">\r\n                        <div class=\"suggestion-container\">\r\n                            <div class=\"suggestion-column\">\r\n                                <div class=\"suggestion-heading\">\r\n                                    Logical Operators\r\n                                </div>\r\n                                <div class=\"button-container\">\r\n                                    @for (method of getMethods() | searchList:optionsSearch(); track method.value) {\r\n                                        <button matTooltipPosition=\"left\" [matTooltip]=\"method.hint\" color=\"primary\" mat-button\r\n                                            (click)=\"selectSuggestionInput(method.value)\" class=\"suggestion-button\">\r\n                                            {{ method.label | titlecase }}\r\n                                        </button>\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"suggestion-column\">\r\n                                <div class=\"suggestion-heading\">\r\n                                    Add Input as a Variable\r\n                                </div>\r\n                                <div class=\"button-container\">\r\n                                    @for (inp of allInputs() | searchList:optionsSearch(); track inp.formControlName) {\r\n                                        <button mat-button matTooltipPosition=\"right\"\r\n                                            [matTooltip]=\"'Add Variable - ' + inp.label\"\r\n                                            (click)=\"selectSuggestionInput(inp.formControlName)\" class=\"suggestion-button\">\r\n                                            {{ inp.label | titlecase }}\r\n                                        </button>\r\n                                    }\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </section>\r\n            }\r\n        }\r\n    </mat-hint>\r\n</mat-form-field>\r\n\r\n@if (valueAccessOptions().length > 0) {\r\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" style=\"width: 100%;margin-top:12px\"\r\n        floatLabel=\"always\" id=\"Value access options\">\r\n        <mat-label>\r\n            Form Fields for expression\r\n        </mat-label>\r\n        <mat-chip-grid #chipGrid aria-label=\"value access options\">\r\n            @for (variable of valueAccessOptions(); track variable) {\r\n                <mat-chip-option\r\n                    [selected]=\"variableInEdit() === variable\"\r\n                    (click)=\"toggleVariableInEdit(variable)\"\r\n                    [aria-description]=\"'press enter to edit ' + variable\">\r\n                    {{ variable }}\r\n                </mat-chip-option>\r\n            }\r\n            <input placeholder=\"\" style=\"display: none;\" [matChipInputFor]=\"chipGrid\" />\r\n        </mat-chip-grid>\r\n        @if (variableInEdit(); as activeVariable) {\r\n            <lib-api-value-access-rules\r\n                [value]=\"getValueAccessRule(activeVariable)\"\r\n                [errors]=\"[]\"\r\n                [formInputs]=\"formInputs() || []\"\r\n                [mapToData]=\"data()\"\r\n                (valueChanged)=\"activeVariableChanged($event)\">\r\n            </lib-api-value-access-rules>\r\n        }\r\n        <mat-hint>\r\n            Click a field to define how to process its value. You can filter a list, count its items, or access specific\r\n            data within a complex object.\r\n        </mat-hint>\r\n    </mat-form-field>\r\n}\r\n", styles: [".suggestion-container{display:flex;width:100%;gap:8px}.suggestion-column{flex:1;min-width:0}.button-container{display:flex;flex-wrap:wrap}.suggestion-button{height:auto;text-align:left;font-size:10.5px;border-radius:4px;margin-bottom:4px;line-height:normal;padding:4px;white-space:nowrap;overflow:hidden;display:inline-block;text-overflow:ellipsis}.suggestion-heading{margin-bottom:8px;font-size:.6875em;font-weight:500}\n"] }]
+                    }, template: "<section class=\"lib-vec\">\n    <div class=\"lib-vec__head\">\n        <div class=\"lib-vec__heading\">\n            <span class=\"lib-vec__f-label\">Condition expression</span>\n            <p class=\"lib-vec__sub-hint\">{{ hint() }}</p>\n        </div>\n\n        @if (mode() === 'advanced') {\n            <button type=\"button\" class=\"lib-vec__link\" [disabled]=\"!canUseGuided()\"\n                [matTooltip]=\"canUseGuided() ? 'Build this with guided rows' : 'This expression is too advanced for the guided builder'\"\n                (click)=\"useGuided()\">\n                <mat-icon>view_module</mat-icon> Guided\n            </button>\n        } @else {\n            <button type=\"button\" class=\"lib-vec__link\" matTooltip=\"Type the expression yourself\"\n                (click)=\"useAdvanced()\">\n                <mat-icon>code</mat-icon> Advanced\n            </button>\n        }\n    </div>\n\n    @if (mode() === 'guided') {\n        @if (fieldOptions().length === 0) {\n            <p class=\"lib-vec__sub-hint\">\n                No fields available yet \u2014 switch to Advanced to type an expression.\n            </p>\n        } @else if (group().conditions.length === 0) {\n            <p class=\"lib-vec__sub-hint lib-vec__sub-hint--lead\">\n                <mat-icon class=\"lib-vec__lead-icon\">lightbulb</mat-icon>\n                <span>Add a check below \u2014 this passes when it\u2019s true.</span>\n            </p>\n        } @else if (group().conditions.length > 1) {\n            <div class=\"lib-vec__match\">\n                <span class=\"lib-vec__muted\">Match</span>\n                <mat-button-toggle-group class=\"lib-vec__seg\" [value]=\"group().connector\"\n                    hideSingleSelectionIndicator (change)=\"setConnector($event.value)\"\n                    aria-label=\"Combine conditions\">\n                    <mat-button-toggle value=\"&&\">All</mat-button-toggle>\n                    <mat-button-toggle value=\"||\">Any</mat-button-toggle>\n                </mat-button-toggle-group>\n                <span class=\"lib-vec__muted\">of the checks</span>\n            </div>\n        }\n\n        @for (cond of group().conditions; track $index; let first = $first) {\n            @if (!first) {\n                <div class=\"lib-vec__connector\" aria-hidden=\"true\">\n                    <span>{{ group().connector === '&&' ? 'AND' : 'OR' }}</span>\n                </div>\n            }\n            <div class=\"lib-vec__cond\" [class.lib-vec__cond--incomplete]=\"!cond.field || !cond.value\">\n                <div class=\"lib-vec__cond-row\">\n                    <select class=\"lib-vec__control lib-vec__control--field\"\n                        [class.lib-vec__control--invalid]=\"!cond.field\"\n                        (change)=\"updateCondition($index, { field: inputValue($event) })\">\n                        <option value=\"\" disabled [selected]=\"!cond.field\">Choose a field</option>\n                        @for (group of fieldOptionGroups(); track $index) {\n                            @if (group.label) {\n                                <optgroup [label]=\"group.label\">\n                                    @for (f of group.options; track f.variable) {\n                                        <option [value]=\"f.variable\" [selected]=\"f.variable === cond.field\">\n                                            {{ f.label }}\n                                        </option>\n                                    }\n                                </optgroup>\n                            } @else {\n                                @for (f of group.options; track f.variable) {\n                                    <option [value]=\"f.variable\" [selected]=\"f.variable === cond.field\">\n                                        {{ f.label }}\n                                    </option>\n                                }\n                            }\n                        }\n                    </select>\n                    <button type=\"button\" class=\"lib-vec__icon-btn\"\n                        (click)=\"removeCondition($index)\" matTooltip=\"Remove check\" aria-label=\"Remove check\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n\n                <div class=\"lib-vec__cond-row lib-vec__cond-row--ops\">\n                    <select class=\"lib-vec__control\"\n                        (change)=\"updateCondition($index, { operator: inputValue($event) })\">\n                        @for (op of operators; track op.value) {\n                            <option [value]=\"op.value\" [selected]=\"op.value === cond.operator\">\n                                {{ op.label }}\n                            </option>\n                        }\n                    </select>\n\n                    @if (cond.compareTo === 'field') {\n                        <select class=\"lib-vec__control\"\n                            [class.lib-vec__control--invalid]=\"!cond.value\"\n                            (change)=\"updateCondition($index, { value: inputValue($event) })\">\n                            <option value=\"\" disabled [selected]=\"!cond.value\">Choose a field</option>\n                            @for (group of fieldOptionGroups(); track $index) {\n                                @if (group.label) {\n                                    <optgroup [label]=\"group.label\">\n                                        @for (f of group.options; track f.variable) {\n                                            <option [value]=\"f.variable\" [selected]=\"f.variable === cond.value\">\n                                                {{ f.label }}\n                                            </option>\n                                        }\n                                    </optgroup>\n                                } @else {\n                                    @for (f of group.options; track f.variable) {\n                                        <option [value]=\"f.variable\" [selected]=\"f.variable === cond.value\">\n                                            {{ f.label }}\n                                        </option>\n                                    }\n                                }\n                            }\n                        </select>\n                    } @else {\n                        <input class=\"lib-vec__control\"\n                            [class.lib-vec__control--invalid]=\"!cond.value\"\n                            [value]=\"cond.value\"\n                            (input)=\"updateCondition($index, { value: inputValue($event) })\"\n                            [placeholder]=\"'a value'\" />\n                    }\n\n                    <button type=\"button\" class=\"lib-vec__icon-btn\"\n                        [class.lib-vec__icon-btn--on]=\"cond.compareTo === 'field'\"\n                        (click)=\"toggleCompareTo($index)\"\n                        [attr.aria-label]=\"cond.compareTo === 'field' ? 'Compare to a typed value' : 'Compare to another field'\"\n                        [matTooltip]=\"cond.compareTo === 'field' ? 'Comparing to a field \u2014 switch to a typed value' : 'Compare to another field instead'\">\n                        <mat-icon>{{ cond.compareTo === 'field' ? 'link' : 'link_off' }}</mat-icon>\n                    </button>\n                </div>\n            </div>\n        }\n\n        <div class=\"lib-vec__foot\">\n            <button type=\"button\" class=\"lib-vec__link\" [disabled]=\"fieldOptions().length === 0\"\n                (click)=\"addCondition()\">\n                <mat-icon>add</mat-icon> Add check\n            </button>\n\n            @if (expressionText()) {\n                <span class=\"lib-vec__valid\" matTooltip=\"Generated expression: {{ expressionText() }}\">\n                    <mat-icon>check_circle</mat-icon> Ready\n                </span>\n            }\n        </div>\n    } @else {\n        <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" style=\"width: 100%;\"\n            floatLabel=\"always\" id=\"validationExpressionCreator\">\n            <mat-label>Expression</mat-label>\n            <textarea [formControl]=\"expressionControl\" matInput #textarea (focus)=\"onFocus()\"\n                class=\"lib-vec__mono\"\n                placeholder=\"Enter a validation string for the function\"></textarea>\n\n            <mat-hint\n                [style.color]=\"expressionControl.invalid && !showSuggestions() ? 'var(--mat-form-field-error-text-color, var(--mat-sys-error))' : ''\">\n                @if (expressionControl.invalid && errorMessage !== null && !showSuggestions()) {\n                    {{ errorMessage }}\n                } @else {\n                    {{ showSuggestions() ? 'Click a suggestion to apply it' : 'Enter a filter condition. Type $ for options' }}\n                    @if (showSuggestions()) {\n                        <section class=\"showSuggestionContainer\">\n                            <mat-divider></mat-divider>\n                            <div style=\"padding: 0px;margin-top:8px\" class=\"\">\n                                <div class=\"suggestion-container\">\n                                    <div class=\"suggestion-column\">\n                                        <div class=\"suggestion-heading\">\n                                            Logical Operators\n                                        </div>\n                                        <div class=\"button-container\">\n                                            @for (method of getMethods() | searchList:optionsSearch(); track method.value) {\n                                                <button matTooltipPosition=\"left\" [matTooltip]=\"method.hint\" color=\"primary\" mat-button\n                                                    (click)=\"selectSuggestionInput(method.value)\" class=\"suggestion-button\">\n                                                    {{ method.label | titlecase }}\n                                                </button>\n                                            }\n                                        </div>\n                                    </div>\n                                    <div class=\"suggestion-column\">\n                                        <div class=\"suggestion-heading\">\n                                            Add Input as a Variable\n                                        </div>\n                                        <div class=\"button-container\">\n                                            @for (inp of allInputs() | searchList:optionsSearch(); track inp.formControlName) {\n                                                <button mat-button matTooltipPosition=\"right\"\n                                                    [matTooltip]=\"'Add Variable - ' + inp.label\"\n                                                    (click)=\"selectSuggestionInput(inp.formControlName)\" class=\"suggestion-button\">\n                                                    {{ inp.label | titlecase }}\n                                                </button>\n                                            }\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </section>\n                    }\n                }\n            </mat-hint>\n        </mat-form-field>\n    }\n</section>\n\n@if (valueAccessOptions().length > 0) {\n    <mat-form-field appearance=\"outline\" subscriptSizing=\"dynamic\" style=\"width: 100%;margin-top:12px\"\n        floatLabel=\"always\" id=\"Value access options\">\n        <mat-label>\n            Form Fields for expression\n        </mat-label>\n        <mat-chip-grid #chipGrid aria-label=\"value access options\">\n            @for (variable of valueAccessOptions(); track variable) {\n                <mat-chip-option\n                    [selected]=\"variableInEdit() === variable\"\n                    (click)=\"toggleVariableInEdit(variable)\"\n                    [aria-description]=\"'press enter to edit ' + variable\">\n                    {{ variable }}\n                </mat-chip-option>\n            }\n            <input placeholder=\"\" style=\"display: none;\" [matChipInputFor]=\"chipGrid\" />\n        </mat-chip-grid>\n        @if (variableInEdit(); as activeVariable) {\n            <lib-api-value-access-rules\n                [value]=\"getValueAccessRule(activeVariable)\"\n                [errors]=\"[]\"\n                [formInputs]=\"formInputs() || []\"\n                [mapToData]=\"data()\"\n                (valueChanged)=\"activeVariableChanged($event)\">\n            </lib-api-value-access-rules>\n        }\n        <mat-hint>\n            Click a field to define how to process its value. You can filter a list, count its items, or access specific\n            data within a complex object.\n        </mat-hint>\n    </mat-form-field>\n}\n", styles: [".lib-vec{display:flex;flex-direction:column;gap:.625rem}.lib-vec__head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.lib-vec__heading{display:flex;flex-direction:column;gap:.125rem;min-width:0}.lib-vec__f-label{font-size:.625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--lib-forms-on-surface-variant)}.lib-vec__sub-hint{margin:0;font-size:.75rem;line-height:1.4;color:var(--lib-forms-on-surface-variant)}.lib-vec__sub-hint--lead{display:flex;align-items:center;gap:.375rem;padding:.4375rem .625rem;background:var(--lib-forms-surface-container-lowest);border:1px dashed var(--lib-forms-outline-variant);border-radius:var(--lib-forms-radius-sm, 8px)}.lib-vec__lead-icon{flex:none;font-size:1rem;width:1rem;height:1rem;color:var(--sem-info, var(--lib-forms-primary))}.lib-vec__match{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.lib-vec__muted{font-size:.75rem;color:var(--lib-forms-on-surface-variant)}.lib-vec__seg{--mat-standard-button-toggle-height: 28px;height:28px}.lib-vec__connector{display:flex;justify-content:center;margin:-.1875rem 0}.lib-vec__connector span{padding:.0625rem .5rem;font-size:.5625rem;font-weight:600;letter-spacing:.1em;color:var(--lib-forms-on-surface-variant);background:var(--lib-forms-surface-container-high);border-radius:var(--lib-forms-radius-pill, 999px)}.lib-vec__cond{display:flex;flex-direction:column;gap:.375rem;padding:.5rem .5rem .5625rem;background:var(--lib-forms-surface-container-lowest);border:1px solid var(--lib-forms-outline-variant);border-radius:var(--lib-forms-radius-md, 12px);transition:border-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing, cubic-bezier(.16, 1, .3, 1))}.lib-vec__cond:hover{border-color:var(--lib-forms-outline)}.lib-vec__cond--incomplete{border-color:var(--sem-warning, var(--lib-forms-outline-variant))}.lib-vec__cond-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.375rem;min-width:0}.lib-vec__cond-row--ops{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.lib-vec__control{box-sizing:border-box;width:100%;min-width:0;height:2rem;padding:.3125rem .5rem;font-family:inherit;font-size:.8125rem;line-height:1.2;color:var(--lib-forms-on-surface);background:var(--lib-forms-surface-container-lowest);border:1px solid var(--lib-forms-outline-variant);border-radius:var(--lib-forms-radius-sm, 8px);transition:border-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing, cubic-bezier(.16, 1, .3, 1))}.lib-vec__control--field{font-weight:500}select.lib-vec__control{cursor:pointer}.lib-vec__control:hover{border-color:var(--lib-forms-outline)}.lib-vec__control:focus{outline:none;border-color:var(--lib-forms-primary);box-shadow:0 0 0 1px var(--lib-forms-primary)}.lib-vec__control--invalid:not(:focus){border-color:var(--sem-warning, var(--lib-forms-outline));background:var(--sem-warning-surface, var(--lib-forms-surface-container-lowest))}.lib-vec__icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.875rem;height:1.875rem;padding:0;color:var(--lib-forms-on-surface-variant);background:transparent;border:1px solid transparent;border-radius:var(--lib-forms-radius-sm, 8px);cursor:pointer;transition:color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing, cubic-bezier(.16, 1, .3, 1)),background-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing, cubic-bezier(.16, 1, .3, 1)),border-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing, cubic-bezier(.16, 1, .3, 1))}.lib-vec__icon-btn:hover{color:var(--lib-forms-primary);background:var(--lib-forms-primary-container)}.lib-vec__icon-btn--on{color:var(--lib-forms-primary);border-color:var(--lib-forms-primary)}.lib-vec__icon-btn mat-icon{font-size:1.0625rem;width:1.0625rem;height:1.0625rem}.lib-vec__link{display:inline-flex;align-items:center;gap:.25rem;height:1.75rem;padding:0 .5rem;font:inherit;font-size:.8125rem;font-weight:500;color:var(--lib-forms-primary);background:transparent;border:0;border-radius:var(--lib-forms-radius-sm, 8px);cursor:pointer;transition:background-color var(--lib-forms-duration-hover, .3s) var(--lib-forms-easing, cubic-bezier(.16, 1, .3, 1))}.lib-vec__head .lib-vec__link{flex:none}.lib-vec__link:hover:not(:disabled){background:var(--lib-forms-primary-container)}.lib-vec__link:disabled{color:var(--lib-forms-on-surface-variant);cursor:default;opacity:.6}.lib-vec__link mat-icon{flex:none;font-size:1.0625rem;width:1.0625rem;height:1.0625rem}.lib-vec__foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.lib-vec__valid{display:inline-flex;align-items:center;gap:.25rem;font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sem-success, var(--lib-forms-primary));cursor:default}.lib-vec__valid mat-icon{font-size:.9375rem;width:.9375rem;height:.9375rem}.lib-vec__mono{font-family:var(--lib-forms-font-mono, monospace)}:host ::ng-deep .mat-mdc-form-field-hint-wrapper{min-width:0}:host ::ng-deep .mat-mdc-form-field-hint{min-width:0;width:100%}.showSuggestionContainer{display:block;box-sizing:border-box;width:100%;max-width:100%;overflow:hidden}.suggestion-container{display:flex;flex-wrap:wrap;box-sizing:border-box;width:100%;gap:24px;max-height:220px;overflow-x:hidden;overflow-y:auto}.suggestion-column{flex:1 1 150px;min-width:0}.suggestion-heading{margin-bottom:12px;font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.7}.button-container{display:flex;flex-wrap:wrap;gap:4px}.suggestion-button{height:auto;min-width:0;max-width:100%;text-align:left;font-size:11px;line-height:normal;padding:4px 8px;border-radius:4px;overflow:hidden}.suggestion-button ::ng-deep .mdc-button__label{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [], propDecorators: { hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], formInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputs", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], expression: [{ type: i0.Input, args: [{ isSignal: true, alias: "expression", required: false }] }], valueAccessRules: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueAccessRules", required: false }] }], expressionChange: [{ type: i0.Output, args: ["expressionChange"] }], textareaElementRef: [{ type: i0.ViewChild, args: ['textarea', { isSignal: true }] }] } });
 
 /**
@@ -19457,5 +20306,5 @@ const getSignatureImage = async (inputConfig, value, secret) => {
  * Generated bundle index. Do not edit.
  */
 
-export { NgxTFormsComponent as $, ACCOUNTING_BASIS as A, BaseCustomInput as B, getToolbarBackground as C, DaysAgoPipe as D, EmptyStateComponent as E, FormsStoreService as F, getToolbarIconColor as G, FORM_ACTIONS_TOKEN as H, FORM_CONFIG_TOKEN as I, JsonEditorComponent as J, FORM_INPUTS_TOKEN as K, FORM_ROUTE_SOURCE as L, MscoaFormInputComponent as M, NGX_T_FORMS_CONFIG_TOKEN as N, FORM_SLIDES_TOKEN as O, PREDICATE_OPERATORS as P, FormTowerControllerService as Q, HttpPipelineRepository as R, SignatureInputElementComponent as S, TDynamicDataEditComponent as T, UserFormStepperComponent as U, ValidationExpressioCreatorComponent as V, IMPORT_TOWER_INSTANCE_ID as W, INPUT_SECRET_TOKEN as X, MSCOA_TREE_PROVIDER as Y, MULTIPLE_FORM_INPUT_TOKEN as Z, _isEqual as _, assignDeepPropertyToObject as a, NgxTFormsService as a0, PIPELINE_REPOSITORY as a1, PipelineRepository as a2, PropertyAccessError as a3, TFormImportController as a4, UTILS_OBJECT_TOKEN as a5, createFileFromBase64 as a6, formGenerator as a7, getPipedValueFromDataType as a8, getSampleValueForInput as a9, getSectionElements as aa, getUrl as ab, getValueFromValueAccessor as ac, initFormConfigToV2 as ad, provideNgxTForms as ae, returnDeepProperty as af, sheetConsolodation as ag, textIconsForUserHints as ah, validateExpressionSyntax as ai, validateObjectAgainstString as aj, withHttpPipeline as ak, withInputSecret as al, withRouterFormId as am, formatData_pipe as an, TDynamicDataViewComponent as b, TFormEngine as c, TourManagerService as d, getSubmissionStatusFn as e, evaluatePredicate as f, getAvatar as g, TreeComponent as h, convertPostmanFolderItemsToTree as i, ErrorListComponent as j, NESTED_EDITOR_COMPONENT as k, DataTreeComponent as l, getInputErrorMessage as m, TFormInputStatusComponent as n, DialogTemplateComponent as o, FormBuilderComponent as p, FormsComponent as q, TFormInputComponent as r, safeReturnDeepProperty as s, testAgainstItem as t, getSignatureImage as u, calculateListOveralFunctions as v, returnMappedPathValue as w, FormatDataPipe as x, fuzzySearch as y, getToolbarColor as z };
-//# sourceMappingURL=ngx-t-forms-ngx-t-forms-u_kigDid.mjs.map
+export { HttpPipelineRepository as $, calculateListOveralFunctions as A, BaseCustomInput as B, returnMappedPathValue as C, DaysAgoPipe as D, EmptyStateComponent as E, FormsStoreService as F, FormatDataPipe as G, fuzzySearch as H, ACCOUNTING_BASIS as I, JsonEditorComponent as J, getToolbarColor as K, getToolbarBackground as L, MscoaFormInputComponent as M, NGX_T_FORMS_CONFIG_TOKEN as N, getToolbarIconColor as O, PREDICATE_OPERATORS as P, FORM_ACTIONS_TOKEN as Q, FORM_CONFIG_TOKEN as R, SignatureInputElementComponent as S, TDynamicDataEditComponent as T, UserFormStepperComponent as U, ValidationExpressioCreatorComponent as V, FORM_INPUTS_TOKEN as W, FORM_ROUTE_SOURCE as X, FORM_SLIDES_TOKEN as Y, FormTowerControllerService as Z, _isEqual as _, assignDeepPropertyToObject as a, IMPORT_TOWER_INSTANCE_ID as a0, INPUT_SECRET_TOKEN as a1, MSCOA_TREE_PROVIDER as a2, MULTIPLE_FORM_INPUT_TOKEN as a3, NgxTFormsComponent as a4, NgxTFormsService as a5, PIPELINE_REPOSITORY as a6, PipelineRepository as a7, PropertyAccessError as a8, TFormImportController as a9, UTILS_OBJECT_TOKEN as aa, createFileFromBase64 as ab, formGenerator as ac, getPipedValueFromDataType as ad, getSampleValueForInput as ae, getSectionElements as af, getUrl as ag, getValueFromValueAccessor as ah, initFormConfigToV2 as ai, provideNgxTForms as aj, returnDeepProperty as ak, sheetConsolodation as al, textIconsForUserHints as am, validateExpressionSyntax as an, validateObjectAgainstString as ao, withHttpPipeline as ap, withInputSecret as aq, withRouterFormId as ar, formatData_pipe as as, TDynamicDataViewComponent as b, TFormEngine as c, TourManagerService as d, getSubmissionStatusFn as e, evaluatePredicate as f, getAvatar as g, emptyCondition as h, deriveObservedInputs as i, TreeComponent as j, convertPostmanFolderItemsToTree as k, ErrorListComponent as l, NESTED_EDITOR_COMPONENT as m, safeReturnDeepProperty as n, DataTreeComponent as o, parseConditions as p, getInputErrorMessage as q, referencedTokens as r, serializeConditions as s, testAgainstItem as t, TFormInputStatusComponent as u, DialogTemplateComponent as v, FormBuilderComponent as w, FormsComponent as x, TFormInputComponent as y, getSignatureImage as z };
+//# sourceMappingURL=ngx-t-forms-ngx-t-forms-C2G8_WQk.mjs.map