ngx-t-forms 2.0.29 → 2.0.30

package/fesm2022/{ngx-t-forms-ngx-t-forms-D9qmig6g.mjs → ngx-t-forms-ngx-t-forms-DP2koSL5.mjs}

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, InjectionToken, makeEnvironmentProviders, inject, Inject, Directive, NgModule, Input, Pipe, EventEmitter, ElementRef, ViewChild, Output, ViewEncapsulation, HostBinding, Optional, Self, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, Injector, forwardRef, DestroyRef } from '@angular/core';
-import { DataSources, formColumnInputsSchema, ElementTypes, validateCalculatedFieldRules, CalculationFunctions, MinInputTypes, InputDataTypes, FormSubmissionStatus, InputTypes, AdjudicationSteps, InputPipeTypes, getElementEditorConfig, ElementEditorTypes, AllFormInputPrimaryKeys, DefaultInputConfig, SpecialElementKeys, validateFormColumnInputsWithRequired, validateForm, FormListSection, FormStateErrors, validateFormSlide, BlurHandleTypes, OptionSelectTypes, AllDocumentFileExtensions, AllImageFileExtensions, InputFileType, UploadTypes, DocumentLitsLabelConfigInterfaceValueType } from 'ngx-t-forms-types';
+import { Injectable, Component, InjectionToken, makeEnvironmentProviders, inject, Inject, Directive, Injector, NgModule, Input, Pipe, EventEmitter, ElementRef, ViewChild, Output, ViewEncapsulation, HostBinding, Optional, Self, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, forwardRef, DestroyRef } from '@angular/core';
+import { DataSources, formColumnInputsSchema, ElementTypes, validateCalculatedFieldRules, CalculationFunctions, MinInputTypes, InputDataTypes, FormSubmissionStatus, InputTypes, AdjudicationSteps, InputPipeTypes, getElementEditorConfig, ElementEditorTypes, AllFormInputPrimaryKeys, DefaultInputConfig, SpecialElementKeys, validateFormColumnInputsWithRequired, validateForm, FormListSection, FormStateErrors, validateFormSlide, BlurHandleTypes, OptionSelectTypes, AllDocumentFileExtensions, AllImageFileExtensions, InputFileType, UploadTypes, DocumentLitsLabelConfigInterfaceValueType, MultipleInputAvailableOperations } from 'ngx-t-forms-types';
 import * as i1$3 from '@angular/forms';
 import { Validators, FormControl, FormGroup, FormsModule, ReactiveFormsModule, ɵInternalFormsSharedModule as _InternalFormsSharedModule } from '@angular/forms';
-import { takeUntil, debounceTime, distinctUntilChanged, startWith, map, pairwise, switchMap, catchError, EMPTY, throwError, of, tap, take, forkJoin, filter, from, concatMap, last, Subject, Observable, concat, finalize, Subscription, BehaviorSubject, combineLatest, withLatestFrom, shareReplay, timer, firstValueFrom } from 'rxjs';
+import { takeUntil, debounceTime, distinctUntilChanged, startWith, map, pairwise, switchMap, catchError, EMPTY, throwError, of, tap, take, forkJoin, filter, firstValueFrom, from, concatMap, last, Subject, BehaviorSubject, timer, timeout, defaultIfEmpty, Observable, shareReplay, concat, finalize, Subscription, combineLatest, withLatestFrom } from 'rxjs';
 import { create, all } from 'mathjs';
 import * as i1 from '@angular/common/http';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
@@ -16,7 +16,7 @@ import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angu
 import { CdkAccordionModule } from '@angular/cdk/accordion';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import * as i1$2 from '@angular/cdk/drag-drop';
-import { DragDropModule } from '@angular/cdk/drag-drop';
+import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
 import * as i9$1 from '@angular/cdk/portal';
 import { PortalModule, ComponentPortal } from '@angular/cdk/portal';
 import { ScrollingModule } from '@angular/cdk/scrolling';
@@ -2250,7 +2250,7 @@ const returnAnyFormInputFromForm = (form, id) => {
 };
 
 const updateValue = (self, inputId, value) => {
-    const input = returnAnyFormInputFromForm(self.form, inputId);
+    const input = returnAnyFormInputFromForm(self.form, inputId) || self.systemInputs.find(inp => inp.id === inputId);
     if (!input) {
         throw new Error(`Input cant be found.Failed to set value`);
     }
@@ -3008,6 +3008,7 @@ const prepPopulateForm = (form, initValue) => {
                         if (column.element === ElementTypes.MultipleInput) {
                             const newM = {
                                 ...column,
+                                formIsOpen: column.formIsOpen ?? false,
                                 value: (deepValue || initValue[column.formControlName || ''] || column.value || []).map((item) => {
                                     return Object.entries(item).reduce((acc, [key, value]) => {
                                         const inputId = column.formInputs?.find(input => input.formControlName === key)?.id;
@@ -3645,11 +3646,14 @@ function getInputSourcedValue(inputConfig, formValue, utils) {
         if (!inheritValueFromInputId) {
             throw new Error('Input source ID not specified for Input Sourced Value function.');
         }
+        utils.setInputStatus(inputConfig.id, 'a3f7c821-5e14-4d92-b836-8e2d1a0f6c45', 'Loading sourced value...');
         const sourcedValue = formVal[inheritValueFromInputId];
         utils.updateValue(inputConfig.id, sourcedValue);
+        utils.removeInputStatus(inputConfig.id, 'a3f7c821-5e14-4d92-b836-8e2d1a0f6c45');
         return of(void 0);
     }
     catch (error) {
+        utils.removeInputStatus(inputConfig.id, 'a3f7c821-5e14-4d92-b836-8e2d1a0f6c45');
         utils.setTemporaryHint(inputConfig.id, error instanceof Error ? error.message : `Failed to prepopulate value`, HintType.ERROR);
         return throwError(() => error instanceof Error ? error.message : `Failed to prepopulate value`);
     }
@@ -3677,10 +3681,35 @@ function createDateInput(config) {
         validators: [],
     };
 }
+function createTextInput(config) {
+    return {
+        element: ElementTypes.Input,
+        inputType: InputTypes.Text,
+        formControlName: config.controlName,
+        id: config.id,
+        label: config.label,
+        placeholder: config.label,
+        value: config.value ?? null,
+        sectionId: config.sectionId,
+        dataType: InputDataTypes.String,
+        appearance: "fill",
+        required: false,
+        colSize: 0,
+        onlySetTempErrorOnTouch: false,
+        isCalculatedField: false,
+        validators: [],
+    };
+}
 function generateSystemInputs(globals, sectionId) {
     if (!globals)
         return [];
     const inputConfigs = [
+        {
+            condition: Boolean(globals.CURRENT_FINANCIAL_CYCLE),
+            items: [
+                { id: SystemInputIDs.CURRENT_FINANCIAL_CYCLE, name: 'CURRENT_FINANCIAL_CYCLE', label: 'Current Financial Cycle', inputType: 'text' }
+            ]
+        },
         {
             condition: Boolean(globals.CURRENT_FINANCIAL_CYCLE_START_DATE && globals.CURRENT_FINANCIAL_CYCLE_END_DATE),
             items: [
@@ -3694,36 +3723,79 @@ function generateSystemInputs(globals, sectionId) {
                 { id: SystemInputIDs.CURRENT_SPRINT_START_DATE, name: 'CURRENT_SPRINT_START_DATE', label: 'Current Sprint Start Date' },
                 { id: SystemInputIDs.CURRENT_SPRINT_END_DATE, name: 'CURRENT_SPRINT_END_DATE', label: 'Current Sprint End Date' }
             ]
+        },
+        {
+            condition: Boolean(globals.NEXT_FINANCIAL_CYCLE),
+            items: [
+                { id: SystemInputIDs.NEXT_FINANCIAL_CYCLE, name: 'NEXT_FINANCIAL_CYCLE', label: 'Next Financial Cycle', inputType: 'text' }
+            ]
+        },
+        {
+            condition: Boolean(globals.NEXT_FINANCIAL_CYCLE_START_DATE && globals.NEXT_FINANCIAL_CYCLE_END_DATE),
+            items: [
+                { id: SystemInputIDs.NEXT_FINANCIAL_CYCLE_START_DATE, name: 'NEXT_FINANCIAL_CYCLE_START_DATE', label: 'Next Financial Cycle Start Date' },
+                { id: SystemInputIDs.NEXT_FINANCIAL_CYCLE_END_DATE, name: 'NEXT_FINANCIAL_CYCLE_END_DATE', label: 'Next Financial Cycle End Date' }
+            ]
+        },
+        {
+            condition: Boolean(globals.PREVIOUS_FINANCIAL_CYCLE),
+            items: [
+                { id: SystemInputIDs.PREVIOUS_FINANCIAL_CYCLE, name: 'PREVIOUS_FINANCIAL_CYCLE', label: 'Previous Financial Cycle', inputType: 'text' }
+            ]
+        },
+        {
+            condition: Boolean(globals.PREVIOUS_FINANCIAL_CYCLE_START_DATE && globals.PREVIOUS_FINANCIAL_CYCLE_END_DATE),
+            items: [
+                { id: SystemInputIDs.PREVIOUS_FINANCIAL_CYCLE_START_DATE, name: 'PREVIOUS_FINANCIAL_CYCLE_START_DATE', label: 'Previous Financial Cycle Start Date' },
+                { id: SystemInputIDs.PREVIOUS_FINANCIAL_CYCLE_END_DATE, name: 'PREVIOUS_FINANCIAL_CYCLE_END_DATE', label: 'Previous Financial Cycle End Date' }
+            ]
         }
     ];
     return inputConfigs
         .filter(group => group.condition)
-        .flatMap(group => group.items.map(item => createDateInput({
-        id: item.id,
-        controlName: item.name,
-        label: `🏢 System: ${item.label}`,
-        value: globals[item.name],
-        sectionId
-    })));
+        .flatMap(group => group.items.map(item => item.inputType === 'text'
+        ? createTextInput({ id: item.id, controlName: item.name, label: `🏢 System: ${item.label}`, value: globals[item.name], sectionId })
+        : createDateInput({ id: item.id, controlName: item.name, label: `🏢 System: ${item.label}`, value: globals[item.name], sectionId })));
 }
 var SystemInputIDs;
 (function (SystemInputIDs) {
+    SystemInputIDs["CURRENT_FINANCIAL_CYCLE"] = "3f7a1c2d-8e4b-4f9a-b6c5-1d2e3f4a5b6c";
     SystemInputIDs["CURRENT_FINANCIAL_CYCLE_START_DATE"] = "aabe9916-efbe-4aee-8ca4-2500832786b1";
     SystemInputIDs["CURRENT_FINANCIAL_CYCLE_END_DATE"] = "a9b41b41-6370-4dce-b2b3-cc8bbb7f6b5f";
     SystemInputIDs["CURRENT_SPRINT_START_DATE"] = "956d6333-b5a5-4790-ba80-4276dd53ee90";
     SystemInputIDs["CURRENT_SPRINT_END_DATE"] = "1e2468d2-4ae3-4778-a007-754d2fa694af";
+    SystemInputIDs["NEXT_FINANCIAL_CYCLE"] = "7d8e9f0a-1b2c-3d4e-5f6a-7b8c9d0e1f2a";
+    SystemInputIDs["NEXT_FINANCIAL_CYCLE_START_DATE"] = "b2c3d4e5-f6a7-8b9c-0d1e-2f3a4b5c6d7e";
+    SystemInputIDs["NEXT_FINANCIAL_CYCLE_END_DATE"] = "c3d4e5f6-a7b8-9c0d-1e2f-3a4b5c6d7e8f";
+    SystemInputIDs["PREVIOUS_FINANCIAL_CYCLE"] = "d4e5f6a7-b8c9-0d1e-2f3a-4b5c6d7e8f9a";
+    SystemInputIDs["PREVIOUS_FINANCIAL_CYCLE_START_DATE"] = "e5f6a7b8-c9d0-1e2f-3a4b-5c6d7e8f9a0b";
+    SystemInputIDs["PREVIOUS_FINANCIAL_CYCLE_END_DATE"] = "f6a7b8c9-d0e1-2f3a-4b5c-6d7e8f9a0b1c";
 })(SystemInputIDs || (SystemInputIDs = {}));
 
-const loadSystemInputs = (self) => {
+/**
+ * Fetches global financial-cycle variables and populates the tower's system inputs.
+ *
+ * Must be `await`ed inside `initialize` **before** `formGenerator` is called so that
+ * system-input controls are included in the `FormGroup` from the start.
+ * Previously this fired a fire-and-forget `.subscribe()` which created a race condition:
+ * `formGenerator` ran before the observable resolved, so system inputs had no
+ * corresponding `FormControl`s and every later `updateValue` call for them threw.
+ *
+ * Errors are swallowed because system inputs are optional — if `getFinacialCycles`
+ * fails the tower still functions, just without system-input controls.
+ *
+ * @param self - The tower instance whose `systemInputs` will be populated.
+ */
+const loadSystemInputs = async (self) => {
     try {
-        self.NGX_T_FORMS_CONFIG.formBuilder.getFinacialCycles().pipe(take(1), tap((globalVariables => {
-            const firstSectionId = self.form?.slides[0]?.columns[0]?.sectionId;
-            if (!firstSectionId)
-                return;
-            self.systemInputs = generateSystemInputs(globalVariables, firstSectionId);
-        }))).subscribe();
+        const globalVariables = await firstValueFrom(self.NGX_T_FORMS_CONFIG.formBuilder.getFinacialCycles());
+        const firstSectionId = self.form?.slides[0]?.columns[0]?.sectionId;
+        if (!firstSectionId)
+            return;
+        self.systemInputs = generateSystemInputs(globalVariables, firstSectionId);
     }
-    catch (error) {
+    catch {
+        // system inputs are optional — swallow errors silently
     }
 };
 
@@ -3866,6 +3938,9 @@ class FormTowerControllerService {
         this.NGX_T_FORMS_CONFIG = inject(NGX_T_FORMS_CONFIG_TOKEN);
         this.getFinacialCycles = this.NGX_T_FORMS_CONFIG.formBuilder.getFinacialCycles;
         this._destroyed$ = new Subject();
+        // Reactive busy state — tracks all in-flight status keys (inputId:statusId)
+        this._activeStatusKeys = new Set();
+        this._busyState$ = new BehaviorSubject(false);
         // Keep form record for non-FormControl based operation, like calculations and API calls
         this._formValue = {};
         this._initialFormValue = {};
@@ -3878,17 +3953,22 @@ class FormTowerControllerService {
         // This tells us: "When input X changes, these inputs depend on it and need their functions run"
         this._reverseDependencyMap = {};
         this._changeHistory = [];
-        this.submittingForm = false;
+        this._submittingForm = false;
         this.initialize = async (form) => {
             // .1 Clean up for State 
             this.clearFormState();
             // .2 Initialize the form. Create an empty form if none is provided.
             this._form = { ...(prepPopulateForm(form, this._initialFormValue)) };
-            loadSystemInputs(this);
+            await loadSystemInputs(this);
             this.setFirstStepAsActive();
             // .3 Create the main form Group
             const allFormInputs = this.allFormInputs() || [];
             this._mainForm = formGenerator(allFormInputs, this.getFormValue.bind(this));
+            // Re-add sub-form controls for any multiple inputs that had their form open before re-initialization
+            // (e.g. triggered by drag-and-drop or any other form config change that calls initialize)
+            allFormInputs
+                .filter(input => input.element === ElementTypes.MultipleInput && input.formIsOpen === true)
+                .forEach(input => toggleMultipleInput(this, this._mainForm, input.id, true));
             // .4 crete change reaction functions
             this.createAllInputDependencies();
             this.createInputFunctionsCollection();
@@ -3964,8 +4044,16 @@ class FormTowerControllerService {
                 this._inputChangeDependencyRecords[input.id] = createInputChangeDependency(input);
             }
         };
-        this.setInputStatus = (inputId, statusId, status) => setInputStatus(this, inputId, statusId, status);
-        this.removeInputStatus = (inputId, statusId) => removeInputStatus(this, inputId, statusId);
+        this.setInputStatus = (inputId, statusId, status) => {
+            this._activeStatusKeys.add(`${inputId}:${statusId}`);
+            this._syncBusyState();
+            setInputStatus(this, inputId, statusId, status);
+        };
+        this.removeInputStatus = (inputId, statusId) => {
+            this._activeStatusKeys.delete(`${inputId}:${statusId}`);
+            this._syncBusyState();
+            removeInputStatus(this, inputId, statusId);
+        };
         this.updateValue = (inputId, value) => updateValue(this, inputId, value);
         this.getFormValue = () => this._formValue;
         this.clearFormState = () => {
@@ -3974,6 +4062,8 @@ class FormTowerControllerService {
             this._inputFunctionsCollection = {};
             this._inputChangeDependencyRecords = {};
             this._reverseDependencyMap = {};
+            this._activeStatusKeys.clear();
+            this._busyState$.next(false);
             this._destroyed$.next();
         };
         this.executeInputFunctionsWithoutDependencies = () => {
@@ -4011,15 +4101,37 @@ class FormTowerControllerService {
             const allInputs = this.allFormInputs();
             if (!allInputs)
                 return;
+            const main = this._mainForm;
+            const hasBoundControl = (input) => {
+                if (!main || !input.sectionId)
+                    return false;
+                return !!getSectionControl(main, input.sectionId, input.id);
+            };
+            const applyValue = (inputId, v) => {
+                try {
+                    this.updateValue(inputId, v);
+                }
+                catch {
+                    /* skip fields that cannot be bound (schema drift, nested edge cases) */
+                }
+            };
             for (const input of allInputs || []) {
-                const value = safeReturnDeepProperty(initialValues, input.formControlName.split('.')).value || initialValues[input.formControlName];
+                if (input.element === ElementTypes.SectionTitle || input.multipleInputInEditId) {
+                    continue;
+                }
+                const fromPath = safeReturnDeepProperty(initialValues, input.formControlName.split('.')).value;
+                const value = fromPath ?? initialValues[input.formControlName];
                 const isMultipleInput = input.element === ElementTypes.MultipleInput;
                 if (value !== undefined && !isMultipleInput) {
-                    this.updateValue(input.id, value);
+                    if (!hasBoundControl(input))
+                        continue;
+                    applyValue(input.id, value);
                     continue;
                 }
                 if (isMultipleInput) {
-                    const v = (value || []).map((item) => {
+                    if (!hasBoundControl(input))
+                        continue;
+                    const v = (value ?? []).map((item) => {
                         return Object.entries(item).reduce((acc, [key, val]) => {
                             const inp = allInputs.find((i) => i.formControlName === key);
                             if (key === 'id') {
@@ -4033,10 +4145,12 @@ class FormTowerControllerService {
                     });
                     v[`${input.id}.id`] = initialValues[input.id];
                     console.error(`Setting multiple input value`, v);
-                    this.updateValue(input.id, v);
+                    applyValue(input.id, v);
                     continue;
                 }
-                this.updateValue(input.id, '');
+                if (!hasBoundControl(input))
+                    continue;
+                applyValue(input.id, '');
             }
         };
         this.revertBackHistory = () => {
@@ -4122,6 +4236,14 @@ class FormTowerControllerService {
         this.canRefreshFn = (inputId) => canRefresh(this, inputId);
         this.canRefreshSection = (sectionId) => canRefreshSectionFn(this, sectionId);
     }
+    _syncBusyState() {
+        this._busyState$.next(this._submittingForm || this._activeStatusKeys.size > 0);
+    }
+    get submittingForm() { return this._submittingForm; }
+    set submittingForm(value) {
+        this._submittingForm = value;
+        this._syncBusyState();
+    }
     get form() {
         return this._form;
     }
@@ -4146,6 +4268,35 @@ class FormTowerControllerService {
     get inputFunctionsCollection() {
         return this._inputFunctionsCollection;
     }
+    get isBusy() {
+        return this._busyState$.value;
+    }
+    /**
+     * Reactive stream of the tower's busy state.
+     * Emits `true` whenever any calculation, API fetch, or validation is in flight,
+     * or while the form is submitting. Emits `false` when all operations have settled.
+     */
+    get isBusy$() {
+        return this._busyState$.asObservable();
+    }
+    /**
+     * Resolves once the tower has finished all in-flight computations (calculations,
+     * API fetches, input-sourced values, validations).
+     *
+     * Safe to use in import workflows:
+     * ```ts
+     * await tower.initialize(form);
+     * tower.initializeFormValues(rowData);
+     * await tower.waitUntilSettled();  // changeMonitor debounce + all ops complete
+     * const value = tower.getFormValueNames();
+     * ```
+     *
+     * @param debounceMs  Extra lead time matching the changeMonitor debounce (default 600ms).
+     * @param timeoutMs   Hard timeout before the promise rejects (default 30s).
+     */
+    waitUntilSettled(debounceMs = 600, timeoutMs = 30_000) {
+        return firstValueFrom(timer(debounceMs).pipe(switchMap(() => this._busyState$.pipe(filter(busy => !busy), take(1))), timeout(timeoutMs), defaultIfEmpty(undefined), map(() => undefined)));
+    }
     ngOnDestroy() {
         this._destroyed$.next();
         this._destroyed$.complete();
@@ -4169,7 +4320,7 @@ class FormTowerControllerService {
                         this._reverseDependencyMap[dependencyId] = [];
                     }
                     // Add this input as dependent on the dependencyId
-                    this._reverseDependencyMap[dependencyId].push({
+                    this._reverseDependencyMap[dependencyId]?.push({
                         inputId,
                         functionType: functionType
                     });
@@ -4410,6 +4561,269 @@ function computedErrors(element, allErrors) {
     return [...[], ...errors];
 }
 
+// ---------------------------------------------------------------------------
+// Concrete tower
+//
+// Decorated with @Injectable() so Angular's DI can resolve its dependencies
+// (HttpClient, NGX_T_FORMS_CONFIG_TOKEN, etc.) from a child injector without
+// us having to manually thread those deps through TFormImportController.
+// ---------------------------------------------------------------------------
+class ImportTowerInstance extends FormTowerControllerService {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ImportTowerInstance, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ImportTowerInstance }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ImportTowerInstance, decorators: [{
+            type: Injectable
+        }] });
+// ---------------------------------------------------------------------------
+// Service
+// ---------------------------------------------------------------------------
+class TFormImportController {
+    constructor() {
+        this._injector = inject(Injector);
+        this._rows$ = new BehaviorSubject([]);
+        /**
+         * Per-session HTTP caches.
+         * Key: serialized request identity → shared Observable (shareReplay).
+         * Populated at the start of runImport and cleared when it finishes,
+         * so every import session starts cold but identical in-flight requests
+         * across concurrent rows reuse a single HTTP call.
+         */
+        this._getCache = new Map();
+        this._postCache = new Map();
+        /**
+         * Shared financial-cycles observable for the current import session.
+         * loadSystemInputs calls getFinacialCycles() directly via NGX_T_FORMS_CONFIG
+         * (not through utils), so HTTP-function patching alone cannot deduplicate it.
+         * We intercept it at the config level by providing a wrapped token in each
+         * tower's child injector that returns this shared observable instead.
+         */
+        this._financialCycles$ = null;
+        /**
+         * Reactive progress stream — subscribe to track each row in real time.
+         */
+        this.progress$ = this._rows$.pipe(map(rows => this._toProgress(rows)));
+    }
+    /**
+     * Snapshot of the current progress (non-reactive).
+     */
+    get currentProgress() {
+        return this._toProgress(this._rows$.value);
+    }
+    // -------------------------------------------------------------------------
+    // Public API
+    // -------------------------------------------------------------------------
+    /**
+     * Runs an import session.
+     *
+     * For each row a fresh tower instance is spun up via a child injector,
+     * prepopulated, and left to settle (calculations + API fetches) before
+     * recording the final value and validation status.
+     * All rows are processed concurrently.
+     *
+     * Usage:
+     * ```ts
+     * const results = await importController.runImport(form, rows);
+     * const valid   = results.filter(r => r.isValid);
+     * ```
+     *
+     * @param form  The form definition every row is validated against.
+     * @param rows  Raw data objects — one per import row.
+     */
+    async runImport(form, rows) {
+        // Fresh cache per session — previous responses must not bleed into a new run.
+        this._getCache.clear();
+        this._postCache.clear();
+        this._financialCycles$ = null;
+        this._rows$.next(rows.map((originalData, rowIndex) => ({ rowIndex, originalData, status: 'pending' })));
+        await Promise.all(rows.map((row, i) => this._processRow(form, row, i)));
+        // Session is over — release cached Observables.
+        this._getCache.clear();
+        this._postCache.clear();
+        this._financialCycles$ = null;
+        return this._rows$.value;
+    }
+    /** Clears all row state. */
+    reset() {
+        this._getCache.clear();
+        this._postCache.clear();
+        this._financialCycles$ = null;
+        this._rows$.next([]);
+    }
+    // -------------------------------------------------------------------------
+    // Private
+    // -------------------------------------------------------------------------
+    /**
+     * Creates an isolated tower instance through a short-lived child injector.
+     *
+     * The child injector delegates all token resolution to the parent, so
+     * HttpClient, NGX_T_FORMS_CONFIG_TOKEN, and any other deps the tower needs
+     * are found automatically — no manual wiring required here.
+     *
+     * After creation the tower's HTTP functions are replaced with cache-aware
+     * wrappers so that identical requests fired by different rows share one
+     * in-flight Observable instead of each issuing their own HTTP call.
+     */
+    _createTower() {
+        // Build a wrapped config that routes getFinacialCycles through the shared
+        // session observable so all 10 towers share one HTTP call instead of each
+        // firing their own.  loadSystemInputs calls this directly via the injected
+        // config token, so HTTP-function patching alone cannot deduplicate it.
+        const parentConfig = this._injector.get(NGX_T_FORMS_CONFIG_TOKEN);
+        const wrappedConfig = {
+            ...parentConfig,
+            formBuilder: {
+                ...parentConfig.formBuilder,
+                getFinacialCycles: () => {
+                    if (!this._financialCycles$) {
+                        this._financialCycles$ = parentConfig.formBuilder.getFinacialCycles()
+                            .pipe(shareReplay({ bufferSize: 1, refCount: false }));
+                    }
+                    return this._financialCycles$;
+                },
+            },
+        };
+        const tower = Injector.create({
+            providers: [
+                { provide: ImportTowerInstance },
+                { provide: NGX_T_FORMS_CONFIG_TOKEN, useValue: wrappedConfig },
+            ],
+            parent: this._injector,
+        }).get(ImportTowerInstance);
+        const originalGet = tower.httpGetDataFunction.bind(tower);
+        const originalPost = tower.httpPostDataFunction.bind(tower);
+        tower.httpGetDataFunction = (url, options) => this._cachedGet(url, options, originalGet);
+        tower.httpPostDataFunction = (url, data, options) => this._cachedPost(url, data, options, originalPost);
+        return tower;
+    }
+    /**
+     * Returns a shared Observable for a GET request.
+     * On cache miss the original function is called once and its result is
+     * multicasted via shareReplay(1) so every concurrent subscriber (row) that
+     * asks for the same URL+options receives the same response without an
+     * additional HTTP call.
+     */
+    _cachedGet(url, options, original) {
+        const key = `GET::${url}::${JSON.stringify(options ?? null)}`;
+        if (!this._getCache.has(key)) {
+            this._getCache.set(key, original(url, options).pipe(shareReplay({ bufferSize: 1, refCount: false })));
+        }
+        return this._getCache.get(key);
+    }
+    /**
+     * Returns a shared Observable for a POST request.
+     * Keyed by URL + serialised body + serialised options so only truly
+     * identical requests are deduplicated.
+     */
+    _cachedPost(url, data, options, original) {
+        const key = `POST::${url}::${JSON.stringify(data ?? null)}::${JSON.stringify(options ?? null)}`;
+        if (!this._postCache.has(key)) {
+            this._postCache.set(key, original(url, data, options).pipe(shareReplay({ bufferSize: 1, refCount: false })));
+        }
+        return this._postCache.get(key);
+    }
+    async _processRow(form, rowData, rowIndex) {
+        this._patchRow(rowIndex, { status: 'processing' });
+        const tower = this._createTower();
+        try {
+            await tower.initialize(form);
+            tower.initializeFormValues(rowData);
+            // Waits for the changeMonitor debounce + all async ops (API, calculations)
+            await tower.waitUntilSettled();
+            // Ensures required-field validators surface on untouched controls
+            tower.mainForm?.markAllAsTouched();
+            const settledValue = tower.getFormValueNames();
+            const validationErrors = this._collectValidationErrors(tower);
+            const colErrors = this._collectColErrors(tower);
+            const isValid = (tower.mainForm?.valid ?? false) && Object.keys(validationErrors).length === 0;
+            this._patchRow(rowIndex, {
+                status: isValid ? 'valid' : 'invalid',
+                settledValue,
+                isValid,
+                validationErrors,
+                colErrors,
+            });
+        }
+        catch (err) {
+            this._patchRow(rowIndex, {
+                status: 'error',
+                errorMessage: err instanceof Error ? err.message : String(err),
+            });
+        }
+        finally {
+            tower.ngOnDestroy();
+        }
+    }
+    /**
+     * Walks `{ [sectionId]: FormGroup { [inputId]: FormControl } }` and
+     * collects every control that carries validation errors.
+     */
+    _collectValidationErrors(tower) {
+        const errors = {};
+        if (!tower.mainForm)
+            return errors;
+        Object.values(tower.mainForm.controls).forEach(section => {
+            if (!(section instanceof FormGroup))
+                return;
+            Object.entries(section.controls).forEach(([inputId, control]) => {
+                if (control.errors)
+                    errors[inputId] = Object.keys(control.errors);
+            });
+        });
+        return errors;
+    }
+    /**
+     * Builds a formControlName-keyed error map from the settled form.
+     * Multiple error keys on one control are joined with '.'.
+     */
+    _collectColErrors(tower) {
+        const colErrors = {};
+        if (!tower.mainForm)
+            return colErrors;
+        // Flatten sectionId → inputId → control into a single inputId → control map
+        const controlMap = {};
+        Object.values(tower.mainForm.controls).forEach(section => {
+            if (section instanceof FormGroup) {
+                Object.assign(controlMap, section.controls);
+            }
+        });
+        // Map inputId back to formControlName via allFormInputs()
+        (tower.allFormInputs() ?? []).forEach(input => {
+            if (!input.formControlName || !input.id)
+                return;
+            const control = controlMap[input.id];
+            if (control?.errors) {
+                colErrors[input.formControlName] = Object.keys(control.errors).join('.');
+            }
+        });
+        return colErrors;
+    }
+    _patchRow(index, patch) {
+        const rows = [...this._rows$.value];
+        rows[index] = { ...rows[index], ...patch };
+        this._rows$.next(rows);
+    }
+    _toProgress(rows) {
+        const count = (status) => rows.filter(r => r.status === status).length;
+        return {
+            total: rows.length,
+            pending: count('pending'),
+            processing: count('processing'),
+            complete: count('valid') + count('invalid'),
+            valid: count('valid'),
+            invalid: count('invalid'),
+            error: count('error'),
+            rows,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TFormImportController, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TFormImportController, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TFormImportController, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class MatModulesModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MatModulesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.5", ngImport: i0, type: MatModulesModule, exports: [CdkAccordionModule,
@@ -5163,12 +5577,7 @@ function moveFormInput(event, sectionId, form) {
         let columns = [...[], ...slide.columns];
         if (!columns)
             return;
-        const prevItem = columns[event.previousIndex];
-        const currItem = columns[event.currentIndex];
-        if (prevItem && currItem) {
-            columns[event.previousIndex] = currItem;
-            columns[event.currentIndex] = prevItem;
-        }
+        moveItemInArray(columns, event.previousIndex, event.currentIndex);
         const newForm = {
             ...form,
             slides: form.slides.map((slide) => {
@@ -5196,12 +5605,7 @@ function moveMultipleInputInput(parentId, event, form) {
         if (!parentInput)
             return;
         const columns = [...(parentInput.formInputs || [])];
-        const prevItem = columns[event.previousIndex];
-        const currItem = columns[event.currentIndex];
-        if (prevItem && currItem) {
-            columns[event.previousIndex] = currItem;
-            columns[event.currentIndex] = prevItem;
-        }
+        moveItemInArray(columns, event.previousIndex, event.currentIndex);
         return {
             ...form,
             slides: form.slides.map((slide) => {
@@ -5558,6 +5962,93 @@ const clearInputInEditFn = (form, inputId) => {
     }
 };
 
+// ── 1. Top-level runtime keys ──────────────────────────────────────────────────
+/** Keys that live only in builder UI / runtime state and must never be persisted. */
+const RUNTIME_KEYS = [
+    'formIsOpen', // IMultiple — whether nested form is expanded in builder
+    'temporaryHint', // transient hint shown during editing
+    'valueUpdatedAt', // runtime timestamp
+    'status', // runtime status record
+];
+const cleanRuntimeKeys = (input) => {
+    const cleaned = { ...input };
+    for (const key of RUNTIME_KEYS) {
+        delete cleaned[key];
+    }
+    return cleaned;
+};
+// ── 2. matOptions — strip runtime-fetched options data ─────────────────────────
+function hasFetchedOptionsData(options) {
+    if (Array.isArray(options))
+        return options.length > 1;
+    return !!options && typeof options === 'object' && Object.keys(options).length > 1;
+}
+/**
+ * If matOptions.options was loaded from a datasource (API / MongoDB),
+ * strip the resolved options array. Only the fetch config should persist —
+ * not the data that was fetched into it at builder interaction time.
+ * Custom options (user-typed) are left untouched.
+ */
+const cleanMatOptions = (input) => {
+    const matOptions = input[AllFormInputPrimaryKeys.MatOptions];
+    if (!matOptions)
+        return input;
+    const source = matOptions.fetch?.options?.source;
+    const isLoadedFromDatasource = !!source && source !== 'customOptions';
+    if (!isLoadedFromDatasource || !hasFetchedOptionsData(matOptions.options))
+        return input;
+    return {
+        ...input,
+        [AllFormInputPrimaryKeys.MatOptions]: { ...matOptions, options: undefined },
+    };
+};
+// ── 3. workflowPickerConfig — strip runtime sampleDocument ────────────────────
+/**
+ * sampleDocument is assembled at runtime by merging fetched workflow documents
+ * (see elementConfigurationChanged — workflowPickerConfig.workflowId change path).
+ * Only workflowId and column config should persist; the fetched document snapshot must not.
+ */
+const cleanWorkflowPickerConfig = (input) => {
+    if (!input.workflowPickerConfig?.sampleDocument)
+        return input;
+    return {
+        ...input,
+        workflowPickerConfig: {
+            ...input.workflowPickerConfig,
+            sampleDocument: undefined,
+        },
+    };
+};
+// ── Composition ────────────────────────────────────────────────────────────────
+/**
+ * Ordered list of cleaners applied to every input.
+ * To add a new cleanup rule: implement an InputCleaner and push it here.
+ */
+const INPUT_CLEANERS = [
+    cleanRuntimeKeys,
+    cleanMatOptions,
+    cleanWorkflowPickerConfig,
+];
+function applyCleaners(input) {
+    return INPUT_CLEANERS.reduce((cleaned, cleaner) => cleaner(cleaned), input);
+}
+function cleanInput(input) {
+    const cleaned = applyCleaners(input);
+    // Recursively clean nested inputs (multipleInput children)
+    if (!cleaned.formInputs?.length)
+        return cleaned;
+    return { ...cleaned, formInputs: cleaned.formInputs.map(cleanInput) };
+}
+function cleanFormForSave(form) {
+    return {
+        ...form,
+        slides: form.slides.map(slide => ({
+            ...slide,
+            columns: slide.columns.map(cleanInput),
+        })),
+    };
+}
+
 /**
  * Adds a form input to the form.
  *
@@ -5908,11 +6399,11 @@ function formBuilderStoreActions(store) {
                 return;
             const _id = form?._id;
             if (_id) {
-                store.effects.updateForm$(of({ form: { ...form.form, formId: _id }, versionNumber: form.__v || 0 }));
+                store.effects.updateForm$(of({ form: cleanFormForSave({ ...form.form, formId: _id }), versionNumber: form.__v || 0 }));
                 store.showMessage('Form updated successfully', HintType.SUCCESS);
             }
             else {
-                store.effects.createForm$(of(form.form));
+                store.effects.createForm$(of(cleanFormForSave(form.form)));
                 store.showMessage('Form saved successfully', HintType.SUCCESS);
             }
         })).subscribe();
@@ -6453,9 +6944,9 @@ class FormBuilderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FormBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FormBuilderComponent, isStandalone: true, selector: "app-form-builder", inputs: { formId: "formId" }, 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\" 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        <app-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        <!-- Save/Update button with optimized reactive state -->\r\n        <button mat-raised-button color=\"accent\" class=\"save-button\" [disabled]=\"!(canSaveForm())\" (click)=\"saveForm()\">\r\n\r\n            <mat-icon>\r\n                {{(isNewForm()) ? 'save' : 'update'}}\r\n            </mat-icon>\r\n\r\n            @if (selectFormBuilderIsBusy()) {\r\n            {{(isNewForm()) ? '..Saving new form' : '..Updating Form'}}\r\n            } @else {\r\n            {{(isNewForm()) ? 'Save' : 'Update'}}\r\n            }\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        <app-form-section-stepper />\r\n        }\r\n        <br>\r\n        @if ((hasMissingConfigs()) && !(selectLoadingForm())) {\r\n        <app-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    <app-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:#f8d7da}.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:#fff;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 #ffffff}.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}.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: MatModulesModule }, { kind: "component", type: i2.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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], deferBlockDependencies: [() => [import('./ngx-t-forms-forms-builder-menu.component-Wamzf_sq.mjs').then(m => m.FormsBuilderMenuComponent)], () => [i1$2.CdkDrag, i3.MatIcon, i7.MatProgressSpinner, import('./ngx-t-forms-input-editor.component-D4xHO76K.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-BTkcSjg7.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-BRmnwAK6.mjs').then(m => m.MissingFormConfigsComponent)]] }); }
+        ], 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\" 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        <app-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        <!-- Save/Update button with optimized reactive state -->\r\n        <button mat-raised-button color=\"accent\" class=\"save-button\" [disabled]=\"!(canSaveForm())\" (click)=\"saveForm()\">\r\n\r\n            <mat-icon>\r\n                {{(isNewForm()) ? 'save' : 'update'}}\r\n            </mat-icon>\r\n\r\n            @if (selectFormBuilderIsBusy()) {\r\n            {{(isNewForm()) ? '..Saving new form' : '..Updating Form'}}\r\n            } @else {\r\n            {{(isNewForm()) ? 'Save' : 'Update'}}\r\n            }\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        <app-form-section-stepper />\r\n        }\r\n        <br>\r\n        @if ((hasMissingConfigs()) && !(selectLoadingForm())) {\r\n        <app-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    <app-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:#f8d7da}.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:#fff;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 #ffffff}.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}.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: MatModulesModule }, { kind: "component", type: i2.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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], deferBlockDependencies: [() => [import('./ngx-t-forms-forms-builder-menu.component-UWo_dyVt.mjs').then(m => m.FormsBuilderMenuComponent)], () => [i1$2.CdkDrag, i3.MatIcon, i7.MatProgressSpinner, import('./ngx-t-forms-input-editor.component-B_kkOoEO.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-x_83iAWA.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-DPNNyKkt.mjs').then(m => m.MissingFormConfigsComponent)]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.1.5", ngImport: i0, type: FormBuilderComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-forms-builder-menu.component-Wamzf_sq.mjs').then(m => m.FormsBuilderMenuComponent), import('./ngx-t-forms-input-editor.component-D4xHO76K.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-BTkcSjg7.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-BRmnwAK6.mjs').then(m => m.MissingFormConfigsComponent)], resolveMetadata: (FormsBuilderMenuComponent, InputEditorComponent, FormSectionStepperComponent, MissingFormConfigsComponent) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.1.5", ngImport: i0, type: FormBuilderComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-forms-builder-menu.component-UWo_dyVt.mjs').then(m => m.FormsBuilderMenuComponent), import('./ngx-t-forms-input-editor.component-B_kkOoEO.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-x_83iAWA.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-DPNNyKkt.mjs').then(m => m.MissingFormConfigsComponent)], resolveMetadata: (FormsBuilderMenuComponent, InputEditorComponent, FormSectionStepperComponent, MissingFormConfigsComponent) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'app-form-builder', standalone: true, imports: [CommonModule,
                             MatModulesModule,
@@ -6561,8 +7052,11 @@ function createFuzzyRegExp(query) {
 }
 /**
  * Performs the fuzzy search against a target string.
+ * Returns false for blank queries instead of matching everything.
  */
 function fuzzySearch(query, text) {
+    if (!query?.trim())
+        return false;
     const regex = createFuzzyRegExp(query);
     return regex.test(text);
 }
@@ -8308,9 +8802,9 @@ class TDynamicDataEditComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TDynamicDataEditComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TDynamicDataEditComponent, isStandalone: true, selector: "lib-t-dynamic-data-edit", inputs: { editorConfig: "editorConfig", formInputs: "formInputs", data: "data", validationErrors: "validationErrors" }, outputs: { valueChange: "valueChange", blur: "blur" }, ngImport: i0, template: "@defer {\r\n<ng-container *ngIf=\"( vm$ |async) as vm\">\r\n\r\n    <mat-form-field appearance=\"outline\" [color]=\"((validationErrors)||[]||[]).length>0 ? 'warn' : 'primary'\"\r\n        [floatLabel]=\"'always'\" [subscriptSizing]=\"'dynamic'\" [hintLabel]=\"vm.editorConfigValue?.hint||''\">\r\n        <mat-label> {{ (vm. editorConfigValue)?.label }} </mat-label>\r\n        @switch ((vm. editorConfigValue)?.editType) {\r\n        @default {\r\n            <lib-input-custom \r\n             [id]=\"((vm.editorConfigValue)?.id)\"\r\n             [inputConfig]=\"vm.inputConfig\"\r\n            [placeholder]=\"(vm.  editorConfigValue)?.placeholder ||'Enter value'\"\r\n            [required]=\"!!(vm.  editorConfigValue)?.required\"\r\n            [disabled]=\"!!(vm.disabled)\"\r\n             [ngModel]=\"(vm.value)\"\r\n             (blur)=\"elementBlur($event)\"\r\n            (input)=\"inputChange($event)\" ></lib-input-custom>\r\n     \r\n\r\n        }\r\n        @case ( elementEditorTypes.Toggle) {\r\n        <lib-mat-slider-toggle-editor\r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [name]=\"((vm.  editorConfigValue)?.name||'') \"\r\n            [label]=\"((vm.  editorConfigValue)?.label||'')\" [disabled]=\"(vm.disabled)||false\"\r\n            (valueChange)=\"valueChanged(!!$event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n        </lib-mat-slider-toggle-editor>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.Range) {\r\n\r\n\r\n        <lib-mat-slider-editor \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [format]=\"(  vm.editorConfigValue)?.format \" [formatLabel]=\" formatLabel\"\r\n            [disabled]=\"(vm.disabled)||false\" [max]=\"(  vm.editorConfigValue)?.max || 100\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [min]=\"(  vm.editorConfigValue)?.min || 0\"\r\n            (valueChange)=\"inputChange($event)\" [step]=\"(  vm.editorConfigValue)?.step || 1\"\r\n            tickInterval=\"(  vm.editorConfigValue)?.step || 1\">\r\n\r\n\r\n        </lib-mat-slider-editor>\r\n\r\n\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.ChipSelect) {\r\n        <lib-mat-chip-list-editor \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [disabled]=\"(vm.disabled)||false\"\r\n            [options]=\"(vm.editorConfigValue)?.options || vm.dataOptions\"\r\n            [required]=\"!!( vm.editorConfigValue)?.required\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n            (valueChange)=\"  valueChanged($event)\"></lib-mat-chip-list-editor>\r\n\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.OptionSelect) {\r\n\r\n        <mat-select \r\n        \r\n        [value]=\"(vm.value)\" (selectionChange)=\"valueChanged($event.value)\"\r\n            [disabled]=\"(vm.disabled)||false\">\r\n            @for(option of ( vm.editorConfigValue)?.options || vm.dataOptions;track option.value){\r\n            <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n            }\r\n        </mat-select>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.RichTextEditor) {\r\n        <lib-editor-js-input \r\n        \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [value]=\"(vm.value)\" (valueChanged)=\"valueChanged($event)\"\r\n            [disabled]=\"(vm.disabled)||false\" [inputConfig]=\"data\">\r\n        </lib-editor-js-input>\r\n        }\r\n\r\n\r\n        @case (elementEditorTypes.SelectionOptions) {\r\n\r\n        <app-selection-options-editor \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [errors]=\"(validationErrors)||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n            [options]=\"(vm.value) || []\" (valueChanged)=\"valueChanged($event)\"></app-selection-options-editor>\r\n        }\r\n\r\n        @case (\r\n        elementEditorTypes.ApiCall) {\r\n\r\n        <lib-rest-api-call-setup \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\r\n            [httpGetDataFunction]=\"(vm.editorConfigValue)?.httpGetDataFunction\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n\r\n        </lib-rest-api-call-setup>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.MongoPipelineBuilder) {\r\n\r\n        <app-pipeline-generator [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n            (valueChanged)=\"valueChanged($event)\"></app-pipeline-generator>\r\n\r\n        }\r\n        @case (elementEditorTypes.MapMatOptionsKeys) {\r\n        <lib-map-mat-options-keys [disabled]=\"(vm.disabled)||false\"\r\n            [value]=\"(vm.value)\"\r\n            [formInputs]=\"formInputs || []\"\r\n            [mapToData]=\"vm.dataOptions\"\r\n            [errors]=\"(validationErrors)||[]\"\r\n            (valueChanged)=\"valueChanged($event)\">\r\n        </lib-map-mat-options-keys>\r\n        <pre>\r\n            {{vm.inputConfig.matOptions|json}}\r\n        </pre>\r\n        \r\n        }\r\n        @case (elementEditorTypes.ApiValueAccessRules) {\r\n\r\n\r\n\r\n        <app-api-value-access-rules [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" \r\n            [formInputs]=\"formInputs ||[]\"\r\n            \r\n            [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\" [mapToData]=\"vm.dataOptions\"\r\n            (valueChanged)=\"valueChanged($event)\">\r\n        </app-api-value-access-rules>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.FormInputSelector)\r\n        {\r\n\r\n        <lib-form-input-selector  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [formInputs]=\"formInputs ||[]\"\r\n            [errors]=\"(validationErrors)||[]\" [value]=\"(vm.value) || []\" (change)=\"valueChanged($event)\">\r\n        </lib-form-input-selector>\r\n        }\r\n\r\n        @case (\r\n        elementEditorTypes.RequiredInputs\r\n        ){\r\n\r\n        <app-required-inputs  [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n        </app-required-inputs>\r\n        }\r\n\r\n        @case(elementEditorTypes.CalculatedFieldRules){\r\n\r\n        <app-calculated-field-rules [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\"\r\n            [mapToData]=\"vm.dataOptions\"></app-calculated-field-rules>\r\n        }\r\n\r\n        @case(elementEditorTypes.Validators){\r\n\r\n        <app-validators-config [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\"\r\n            [mapToData]=\"vm.dataOptions\">\r\n        </app-validators-config>\r\n\r\n        }\r\n        @case(elementEditorTypes.ConfigMscoaSegments){\r\n\r\n        <app-mscoa-segment-config [disabled]=\"(vm.disabled)||false\"   [id]=\"((vm.editorConfigValue)?.id)\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [dataValue]=\"vm.dataValue\"\r\n            [isCashSegmentConfig]=\"vm.editorConfigValue?.deepBind?.at(-1) === 'cashSegments'\"\r\n            [showAllSegments]=\"vm.dataOptions\" (valueChanged)=\"valueChanged($event)\"></app-mscoa-segment-config>\r\n        }\r\n        @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\r\n\r\n        <app-config-mscoa-additional-inputs [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [mapToData]=\"vm.dataOptions\">\r\n            (valueChanged)=\"valueChanged($event)\">\r\n        </app-config-mscoa-additional-inputs>\r\n\r\n        }\r\n        @case (elementEditorTypes.ChipOptionsCreator) {\r\n        <lib-chip-options-creator-editor   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" (valueChange)=\"valueChanged($event)\"\r\n            [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n\r\n        </lib-chip-options-creator-editor>\r\n\r\n        }\r\n        @case (elementEditorTypes.DataSourcePicker) {\r\n        <lib-data-source-picker   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm.  editorConfigValue\"\r\n            (valueChange)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\">\r\n        </lib-data-source-picker>\r\n        }\r\n        @case (elementEditorTypes.ListLabelConfigEditor) {\r\n        <lib-document-list-label-config-editor  \r\n        [id]=\"((vm.editorConfigValue)?.id)\"\r\n         [formInputs]=\"formInputs ||[]\"\r\n         [disabled]=\"(vm.disabled)||false\" \r\n         [editorConfig]=\"vm.  editorConfigValue\"\r\n            (valueChange)=\"valueChanged($event)\" \r\n            [value]=\"(vm.value)\" [mapToData]=\"vm.dataOptions\"\r\n            [errors]=\"(validationErrors)||[]\">\r\n\r\n        </lib-document-list-label-config-editor>\r\n        }\r\n        @case(\r\n        elementEditorTypes.WorkflowPicker\r\n        ){\r\n        <lib-t-workflow-picker  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n            (valueChanged)=\"valueChanged($event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n            [value]=\"(vm.value)\"></lib-t-workflow-picker>\r\n        }\r\n        @case (\r\n        elementEditorTypes.RecordListManager\r\n        ) {\r\n        <lib-record-list-manager \r\n        [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [editorConfig]=\"vm.editorConfigValue\" [disabled]=\"(vm.disabled)||false\"\r\n            [formInputs]=\"formInputs ||[]\" [mapToData]=\"vm.dataOptions\" (valueChange)=\"valueChanged($event)\"\r\n            \r\n            [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"></lib-record-list-manager>\r\n        }\r\n        }\r\n\r\n        <button [matTooltip]=\"blurFunctionTooltip((vm.editorConfigValue)?.blurHandle)\" *ngIf=\"(vm.inputHasBlurFunction)\"\r\n            [disabled]=\"(vm.disabled)\" [color]=\"blurOff?'':'primary'\" (click)=\"blurOff=!blurOff\" matSuffix\r\n            mat-icon-button>\r\n            <mat-icon>{{\r\n                blurOff?'blur_off':'blur_on'\r\n                }}\r\n\r\n\r\n            </mat-icon>\r\n        </button>\r\n    </mat-form-field>\r\n\r\n    @if (!(vm.value) && (vm. editorConfigValue)?.required ) {\r\n    <mat-error>\r\n        {{ (vm. editorConfigValue)?.label }}'s  is required\r\n    </mat-error>}\r\n\r\n    <mat-error style=\"    font-size: 0.75em;\r\n        margin-left: 14px;\r\n    \" *ngFor=\"let error of (validationErrors)||[]\">\r\n\r\n        {{error.message}}</mat-error>\r\n\r\n</ng-container>\r\n\r\n}@error {\r\n<mat-card>\r\n    <mat-card-content>\r\n\r\n        <span>\r\n            Failed to load form inputs\r\n        </span>\r\n    </mat-card-content>\r\n</mat-card>\r\n}\r\n\r\n\r\n\r\n<!-- - \r\n `TableConfigSetup`\r\n- `ConditionalInputConfig`\r\n- `MatrixTable`-->", styles: [".showItemValue{opacity:.6}mat-form-field{width:100%}mat-slider{width:100%}.range{display:flex;align-items:center}label{line-height:normal;margin-top:12px;font-weight:500;font-size:.75em;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary));display:flex;justify-content:space-between;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: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { 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 }], deferBlockDependencies: [() => [i2$1.NgForOf, i2$1.NgIf, import('./ngx-t-forms-selection-options-editor.component-Be3QAG_L.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-B2QEnvkq.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-CY-JSkGs.mjs').then(m => m.RestApiCallSetupComponent), Promise.resolve().then(function () { return apiValueAccessRules_component; }).then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-CSIJvSHq.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-DBJEyCbd.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-D-SBMdYg.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-B3j9Dmgu.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-DFdAVWTg.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-DZ4TenrI.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-B6IF8kGg.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-DPyBYE4p.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-DmTyO9Wi.mjs').then(m => m.MatChipListEditorComponent), i2$2.MatOption, i2.MatIconButton, i3.MatIcon, i3$1.MatFormField, i3$1.MatLabel, i3$1.MatError, i3$1.MatSuffix, i3$1.MatSelect, i4.MatTooltip, import('./ngx-t-forms-chip-options-creator-editor.component-1cpszpPN.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-DxORinAD.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-DcWS1txl.mjs').then(m => m.DocumentListLabelConfigEditorComponent), import('./ngx-t-forms-t-workflow-picker.component-a4f1r8gH.mjs').then(m => m.TWorkflowPickerComponent), Promise.resolve().then(function () { return editorJsInput_component; }).then(m => m.EditorJsInputComponent), import('./ngx-t-forms-record-list-manager.component-Dgs9lNSr.mjs').then(m => m.RecordListManagerComponent), Promise.resolve().then(function () { return inputCustom_component; }).then(m => m.InputCustomComponent), i1$3.NgControlStatus, i1$3.RequiredValidator, i1$3.NgModel, import('./ngx-t-forms-map-mat-options-keys-CbdW82su.mjs').then(m => m.MapMatOptionsKeys), i2$1.AsyncPipe, i2$1.JsonPipe]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TDynamicDataEditComponent, isStandalone: true, selector: "lib-t-dynamic-data-edit", inputs: { editorConfig: "editorConfig", formInputs: "formInputs", data: "data", validationErrors: "validationErrors" }, outputs: { valueChange: "valueChange", blur: "blur" }, ngImport: i0, template: "@defer {\r\n<ng-container *ngIf=\"( vm$ |async) as vm\">\r\n\r\n    <mat-form-field appearance=\"outline\" [color]=\"((validationErrors)||[]||[]).length>0 ? 'warn' : 'primary'\"\r\n        [floatLabel]=\"'always'\" [subscriptSizing]=\"'dynamic'\" [hintLabel]=\"vm.editorConfigValue?.hint||''\">\r\n        <mat-label> {{ (vm. editorConfigValue)?.label }} </mat-label>\r\n        @switch ((vm. editorConfigValue)?.editType) {\r\n        @default {\r\n            <lib-input-custom \r\n             [id]=\"((vm.editorConfigValue)?.id)\"\r\n             [inputConfig]=\"vm.inputConfig\"\r\n            [placeholder]=\"(vm.  editorConfigValue)?.placeholder ||'Enter value'\"\r\n            [required]=\"!!(vm.  editorConfigValue)?.required\"\r\n            [disabled]=\"!!(vm.disabled)\"\r\n             [ngModel]=\"(vm.value)\"\r\n             (blur)=\"elementBlur($event)\"\r\n            (input)=\"inputChange($event)\" ></lib-input-custom>\r\n     \r\n\r\n        }\r\n        @case ( elementEditorTypes.Toggle) {\r\n        <lib-mat-slider-toggle-editor\r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [name]=\"((vm.  editorConfigValue)?.name||'') \"\r\n            [label]=\"((vm.  editorConfigValue)?.label||'')\" [disabled]=\"(vm.disabled)||false\"\r\n            (valueChange)=\"valueChanged(!!$event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n        </lib-mat-slider-toggle-editor>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.Range) {\r\n\r\n\r\n        <lib-mat-slider-editor \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [format]=\"(  vm.editorConfigValue)?.format \" [formatLabel]=\" formatLabel\"\r\n            [disabled]=\"(vm.disabled)||false\" [max]=\"(  vm.editorConfigValue)?.max || 100\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [min]=\"(  vm.editorConfigValue)?.min || 0\"\r\n            (valueChange)=\"inputChange($event)\" [step]=\"(  vm.editorConfigValue)?.step || 1\"\r\n            tickInterval=\"(  vm.editorConfigValue)?.step || 1\">\r\n\r\n\r\n        </lib-mat-slider-editor>\r\n\r\n\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.ChipSelect) {\r\n          \r\n        <lib-mat-chip-list-editor \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n         [multiple]=\"!!vm.editorConfigValue?.multipleSelection\"\r\n        [disabled]=\"(vm.disabled)||false\"\r\n            [options]=\"(vm.editorConfigValue)?.options || vm.dataOptions\"\r\n            [required]=\"!!( vm.editorConfigValue)?.required\" [value]=\"(vm.value)\" \r\n            [errors]=\"(validationErrors)||[]\"\r\n            (valueChange)=\"  valueChanged($event)\"></lib-mat-chip-list-editor>\r\n\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.OptionSelect) {\r\n\r\n        <mat-select \r\n        \r\n        [value]=\"(vm.value)\" (selectionChange)=\"valueChanged($event.value)\"\r\n            [disabled]=\"(vm.disabled)||false\">\r\n            @for(option of ( vm.editorConfigValue)?.options || vm.dataOptions;track option.value){\r\n            <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n            }\r\n        </mat-select>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.RichTextEditor) {\r\n        <lib-editor-js-input \r\n        \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [value]=\"(vm.value)\" (valueChanged)=\"valueChanged($event)\"\r\n            [disabled]=\"(vm.disabled)||false\" [inputConfig]=\"data\">\r\n        </lib-editor-js-input>\r\n        }\r\n\r\n\r\n        @case (elementEditorTypes.SelectionOptions) {\r\n\r\n        <app-selection-options-editor \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [errors]=\"(validationErrors)||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n            [options]=\"(vm.value) || []\" (valueChanged)=\"valueChanged($event)\"></app-selection-options-editor>\r\n        }\r\n\r\n        @case (\r\n        elementEditorTypes.ApiCall) {\r\n\r\n        <lib-rest-api-call-setup \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\r\n            [httpGetDataFunction]=\"(vm.editorConfigValue)?.httpGetDataFunction\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n\r\n        </lib-rest-api-call-setup>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.MongoPipelineBuilder) {\r\n\r\n        <app-pipeline-generator [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n            (valueChanged)=\"valueChanged($event)\"></app-pipeline-generator>\r\n\r\n        }\r\n        @case (elementEditorTypes.MapMatOptionsKeys) {\r\n        <lib-map-mat-options-keys [disabled]=\"(vm.disabled)||false\"\r\n            [value]=\"(vm.value)\"\r\n            [formInputs]=\"formInputs || []\"\r\n            [mapToData]=\"vm.dataOptions\"\r\n            [errors]=\"(validationErrors)||[]\"\r\n            (valueChanged)=\"valueChanged($event)\">\r\n        </lib-map-mat-options-keys>\r\n        <pre>\r\n            {{vm.inputConfig.matOptions|json}}\r\n        </pre>\r\n        \r\n        }\r\n        @case (elementEditorTypes.ApiValueAccessRules) {\r\n\r\n\r\n\r\n        <app-api-value-access-rules [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" \r\n            [formInputs]=\"formInputs ||[]\"\r\n            \r\n            [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\" [mapToData]=\"vm.dataOptions\"\r\n            (valueChanged)=\"valueChanged($event)\">\r\n        </app-api-value-access-rules>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.FormInputSelector)\r\n        {\r\n\r\n        <lib-form-input-selector  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [formInputs]=\"formInputs ||[]\"\r\n            [errors]=\"(validationErrors)||[]\" [value]=\"(vm.value) || []\" (change)=\"valueChanged($event)\">\r\n        </lib-form-input-selector>\r\n        }\r\n\r\n        @case (\r\n        elementEditorTypes.RequiredInputs\r\n        ){\r\n\r\n        <app-required-inputs  [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n        </app-required-inputs>\r\n        }\r\n\r\n        @case(elementEditorTypes.CalculatedFieldRules){\r\n\r\n        <app-calculated-field-rules [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\"\r\n            [mapToData]=\"vm.dataOptions\"></app-calculated-field-rules>\r\n        }\r\n\r\n        @case(elementEditorTypes.Validators){\r\n\r\n        <app-validators-config [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\"\r\n            [mapToData]=\"vm.dataOptions\">\r\n        </app-validators-config>\r\n\r\n        }\r\n        @case(elementEditorTypes.ConfigMscoaSegments){\r\n\r\n        <app-mscoa-segment-config [disabled]=\"(vm.disabled)||false\"   [id]=\"((vm.editorConfigValue)?.id)\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [dataValue]=\"vm.dataValue\"\r\n            [isCashSegmentConfig]=\"vm.editorConfigValue?.deepBind?.at(-1) === 'cashSegments'\"\r\n            [showAllSegments]=\"vm.dataOptions\" (valueChanged)=\"valueChanged($event)\"></app-mscoa-segment-config>\r\n        }\r\n        @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\r\n\r\n        <app-config-mscoa-additional-inputs [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [mapToData]=\"vm.dataOptions\">\r\n            (valueChanged)=\"valueChanged($event)\">\r\n        </app-config-mscoa-additional-inputs>\r\n\r\n        }\r\n        @case (elementEditorTypes.ChipOptionsCreator) {\r\n        <lib-chip-options-creator-editor   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" (valueChange)=\"valueChanged($event)\"\r\n            [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n\r\n        </lib-chip-options-creator-editor>\r\n\r\n        }\r\n        @case (elementEditorTypes.DataSourcePicker) {\r\n        <lib-data-source-picker   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm.  editorConfigValue\"\r\n            (valueChange)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\">\r\n        </lib-data-source-picker>\r\n        }\r\n        @case (elementEditorTypes.ListLabelConfigEditor) {\r\n        <lib-document-list-label-config-editor  \r\n        [id]=\"((vm.editorConfigValue)?.id)\"\r\n         [formInputs]=\"formInputs ||[]\"\r\n         [disabled]=\"(vm.disabled)||false\" \r\n         [editorConfig]=\"vm.  editorConfigValue\"\r\n            (valueChange)=\"valueChanged($event)\" \r\n            [value]=\"(vm.value)\" [mapToData]=\"vm.dataOptions\"\r\n            [errors]=\"(validationErrors)||[]\">\r\n\r\n        </lib-document-list-label-config-editor>\r\n        }\r\n        @case(\r\n        elementEditorTypes.WorkflowPicker\r\n        ){\r\n        <lib-t-workflow-picker  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n            (valueChanged)=\"valueChanged($event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n            [value]=\"(vm.value)\"></lib-t-workflow-picker>\r\n        }\r\n        @case (\r\n        elementEditorTypes.RecordListManager\r\n        ) {\r\n        <lib-record-list-manager \r\n        [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [editorConfig]=\"vm.editorConfigValue\" [disabled]=\"(vm.disabled)||false\"\r\n            [formInputs]=\"formInputs ||[]\" [mapToData]=\"vm.dataOptions\" (valueChange)=\"valueChanged($event)\"\r\n            \r\n            [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"></lib-record-list-manager>\r\n        }\r\n        }\r\n\r\n        <button [matTooltip]=\"blurFunctionTooltip((vm.editorConfigValue)?.blurHandle)\" *ngIf=\"(vm.inputHasBlurFunction)\"\r\n            [disabled]=\"(vm.disabled)\" [color]=\"blurOff?'':'primary'\" (click)=\"blurOff=!blurOff\" matSuffix\r\n            mat-icon-button>\r\n            <mat-icon>{{\r\n                blurOff?'blur_off':'blur_on'\r\n                }}\r\n\r\n\r\n            </mat-icon>\r\n        </button>\r\n    </mat-form-field>\r\n\r\n    @if (!(vm.value) && (vm. editorConfigValue)?.required ) {\r\n    <mat-error>\r\n        {{ (vm. editorConfigValue)?.label }}'s  is required\r\n    </mat-error>}\r\n\r\n    <mat-error style=\"    font-size: 0.75em;\r\n        margin-left: 14px;\r\n    \" *ngFor=\"let error of (validationErrors)||[]\">\r\n\r\n        {{error.message}}</mat-error>\r\n\r\n</ng-container>\r\n\r\n}@error {\r\n<mat-card>\r\n    <mat-card-content>\r\n\r\n        <span>\r\n            Failed to load form inputs\r\n        </span>\r\n    </mat-card-content>\r\n</mat-card>\r\n}\r\n\r\n\r\n\r\n<!-- - \r\n `TableConfigSetup`\r\n- `ConditionalInputConfig`\r\n- `MatrixTable`-->", styles: [".showItemValue{opacity:.6}mat-form-field{width:100%}mat-slider{width:100%}.range{display:flex;align-items:center}label{line-height:normal;margin-top:12px;font-weight:500;font-size:.75em;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary));display:flex;justify-content:space-between;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: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { 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 }], deferBlockDependencies: [() => [i2$1.NgForOf, i2$1.NgIf, import('./ngx-t-forms-selection-options-editor.component-B4cEGWrK.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-DV4Sts9F.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-CWeIUKLz.mjs').then(m => m.RestApiCallSetupComponent), Promise.resolve().then(function () { return apiValueAccessRules_component; }).then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-CLyq9dIR.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-BxHetD_Q.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-Ct6_c_Lj.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-Cq07Er-G.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-BptpYSe-.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-BWe8U-sI.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-Ckr_nuZF.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-B_XlkHuK.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-C41AL9Et.mjs').then(m => m.MatChipListEditorComponent), i2$2.MatOption, i2.MatIconButton, i3.MatIcon, i3$1.MatFormField, i3$1.MatLabel, i3$1.MatError, i3$1.MatSuffix, i3$1.MatSelect, i4.MatTooltip, import('./ngx-t-forms-chip-options-creator-editor.component-yuM1KHho.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-Badna1Rl.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-2_8XzUgD.mjs').then(m => m.DocumentListLabelConfigEditorComponent), import('./ngx-t-forms-t-workflow-picker.component-BkVN4Wdk.mjs').then(m => m.TWorkflowPickerComponent), Promise.resolve().then(function () { return editorJsInput_component; }).then(m => m.EditorJsInputComponent), import('./ngx-t-forms-record-list-manager.component-BQuMkoXo.mjs').then(m => m.RecordListManagerComponent), Promise.resolve().then(function () { return inputCustom_component; }).then(m => m.InputCustomComponent), i1$3.NgControlStatus, i1$3.RequiredValidator, i1$3.NgModel, import('./ngx-t-forms-map-mat-options-keys-SM5XM9uy.mjs').then(m => m.MapMatOptionsKeys), i2$1.AsyncPipe, i2$1.JsonPipe]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.1.5", ngImport: i0, type: TDynamicDataEditComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-selection-options-editor.component-Be3QAG_L.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-B2QEnvkq.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-CY-JSkGs.mjs').then(m => m.RestApiCallSetupComponent), Promise.resolve().then(function () { return apiValueAccessRules_component; }).then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-CSIJvSHq.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-DBJEyCbd.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-D-SBMdYg.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-B3j9Dmgu.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-DFdAVWTg.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-DZ4TenrI.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-B6IF8kGg.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-DPyBYE4p.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-DmTyO9Wi.mjs').then(m => m.MatChipListEditorComponent), import('./ngx-t-forms-chip-options-creator-editor.component-1cpszpPN.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-DxORinAD.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-DcWS1txl.mjs').then(m => m.DocumentListLabelConfigEditorComponent), import('./ngx-t-forms-t-workflow-picker.component-a4f1r8gH.mjs').then(m => m.TWorkflowPickerComponent), Promise.resolve().then(function () { return editorJsInput_component; }).then(m => m.EditorJsInputComponent), import('./ngx-t-forms-record-list-manager.component-Dgs9lNSr.mjs').then(m => m.RecordListManagerComponent), Promise.resolve().then(function () { return inputCustom_component; }).then(m => m.InputCustomComponent), import('./ngx-t-forms-map-mat-options-keys-CbdW82su.mjs').then(m => m.MapMatOptionsKeys)], resolveMetadata: (SelectionOptionsEditorComponent, FormInputSelectorComponent, RestApiCallSetupComponent, ApiValueAccessRulesComponent, RequiredInputsComponent, PipelineGeneratorComponent, CalculatedFieldRulesComponent, ValidatorsConfigComponent, ConfigMscoaAdditionalInputsComponent, MatSliderEditorComponent, MscoaSegmentConfigComponent, MatSliderToggleEditorComponent, MatChipListEditorComponent, ChipOptionsCreatorEditorComponent, DataSourcePickerComponent, DocumentListLabelConfigEditorComponent, TWorkflowPickerComponent, EditorJsInputComponent, RecordListManagerComponent, InputCustomComponent, MapMatOptionsKeys) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.1.5", ngImport: i0, type: TDynamicDataEditComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-selection-options-editor.component-B4cEGWrK.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-DV4Sts9F.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-CWeIUKLz.mjs').then(m => m.RestApiCallSetupComponent), Promise.resolve().then(function () { return apiValueAccessRules_component; }).then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-CLyq9dIR.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-BxHetD_Q.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-Ct6_c_Lj.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-Cq07Er-G.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-BptpYSe-.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-BWe8U-sI.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-Ckr_nuZF.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-B_XlkHuK.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-C41AL9Et.mjs').then(m => m.MatChipListEditorComponent), import('./ngx-t-forms-chip-options-creator-editor.component-yuM1KHho.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-Badna1Rl.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-2_8XzUgD.mjs').then(m => m.DocumentListLabelConfigEditorComponent), import('./ngx-t-forms-t-workflow-picker.component-BkVN4Wdk.mjs').then(m => m.TWorkflowPickerComponent), Promise.resolve().then(function () { return editorJsInput_component; }).then(m => m.EditorJsInputComponent), import('./ngx-t-forms-record-list-manager.component-BQuMkoXo.mjs').then(m => m.RecordListManagerComponent), Promise.resolve().then(function () { return inputCustom_component; }).then(m => m.InputCustomComponent), import('./ngx-t-forms-map-mat-options-keys-SM5XM9uy.mjs').then(m => m.MapMatOptionsKeys)], resolveMetadata: (SelectionOptionsEditorComponent, FormInputSelectorComponent, RestApiCallSetupComponent, ApiValueAccessRulesComponent, RequiredInputsComponent, PipelineGeneratorComponent, CalculatedFieldRulesComponent, ValidatorsConfigComponent, ConfigMscoaAdditionalInputsComponent, MatSliderEditorComponent, MscoaSegmentConfigComponent, MatSliderToggleEditorComponent, MatChipListEditorComponent, ChipOptionsCreatorEditorComponent, DataSourcePickerComponent, DocumentListLabelConfigEditorComponent, TWorkflowPickerComponent, EditorJsInputComponent, RecordListManagerComponent, InputCustomComponent, MapMatOptionsKeys) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'lib-t-dynamic-data-edit', standalone: true, imports: [CommonModule,
                             SelectionOptionsEditorComponent,
@@ -8336,7 +8830,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.1.5", ng
                             InputCustomComponent,
                             FormsModule,
                             MapMatOptionsKeys
-                        ], template: "@defer {\r\n<ng-container *ngIf=\"( vm$ |async) as vm\">\r\n\r\n    <mat-form-field appearance=\"outline\" [color]=\"((validationErrors)||[]||[]).length>0 ? 'warn' : 'primary'\"\r\n        [floatLabel]=\"'always'\" [subscriptSizing]=\"'dynamic'\" [hintLabel]=\"vm.editorConfigValue?.hint||''\">\r\n        <mat-label> {{ (vm. editorConfigValue)?.label }} </mat-label>\r\n        @switch ((vm. editorConfigValue)?.editType) {\r\n        @default {\r\n            <lib-input-custom \r\n             [id]=\"((vm.editorConfigValue)?.id)\"\r\n             [inputConfig]=\"vm.inputConfig\"\r\n            [placeholder]=\"(vm.  editorConfigValue)?.placeholder ||'Enter value'\"\r\n            [required]=\"!!(vm.  editorConfigValue)?.required\"\r\n            [disabled]=\"!!(vm.disabled)\"\r\n             [ngModel]=\"(vm.value)\"\r\n             (blur)=\"elementBlur($event)\"\r\n            (input)=\"inputChange($event)\" ></lib-input-custom>\r\n     \r\n\r\n        }\r\n        @case ( elementEditorTypes.Toggle) {\r\n        <lib-mat-slider-toggle-editor\r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [name]=\"((vm.  editorConfigValue)?.name||'') \"\r\n            [label]=\"((vm.  editorConfigValue)?.label||'')\" [disabled]=\"(vm.disabled)||false\"\r\n            (valueChange)=\"valueChanged(!!$event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n        </lib-mat-slider-toggle-editor>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.Range) {\r\n\r\n\r\n        <lib-mat-slider-editor \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [format]=\"(  vm.editorConfigValue)?.format \" [formatLabel]=\" formatLabel\"\r\n            [disabled]=\"(vm.disabled)||false\" [max]=\"(  vm.editorConfigValue)?.max || 100\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [min]=\"(  vm.editorConfigValue)?.min || 0\"\r\n            (valueChange)=\"inputChange($event)\" [step]=\"(  vm.editorConfigValue)?.step || 1\"\r\n            tickInterval=\"(  vm.editorConfigValue)?.step || 1\">\r\n\r\n\r\n        </lib-mat-slider-editor>\r\n\r\n\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.ChipSelect) {\r\n        <lib-mat-chip-list-editor \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [disabled]=\"(vm.disabled)||false\"\r\n            [options]=\"(vm.editorConfigValue)?.options || vm.dataOptions\"\r\n            [required]=\"!!( vm.editorConfigValue)?.required\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n            (valueChange)=\"  valueChanged($event)\"></lib-mat-chip-list-editor>\r\n\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.OptionSelect) {\r\n\r\n        <mat-select \r\n        \r\n        [value]=\"(vm.value)\" (selectionChange)=\"valueChanged($event.value)\"\r\n            [disabled]=\"(vm.disabled)||false\">\r\n            @for(option of ( vm.editorConfigValue)?.options || vm.dataOptions;track option.value){\r\n            <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n            }\r\n        </mat-select>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.RichTextEditor) {\r\n        <lib-editor-js-input \r\n        \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [value]=\"(vm.value)\" (valueChanged)=\"valueChanged($event)\"\r\n            [disabled]=\"(vm.disabled)||false\" [inputConfig]=\"data\">\r\n        </lib-editor-js-input>\r\n        }\r\n\r\n\r\n        @case (elementEditorTypes.SelectionOptions) {\r\n\r\n        <app-selection-options-editor \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [errors]=\"(validationErrors)||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n            [options]=\"(vm.value) || []\" (valueChanged)=\"valueChanged($event)\"></app-selection-options-editor>\r\n        }\r\n\r\n        @case (\r\n        elementEditorTypes.ApiCall) {\r\n\r\n        <lib-rest-api-call-setup \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\r\n            [httpGetDataFunction]=\"(vm.editorConfigValue)?.httpGetDataFunction\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n\r\n        </lib-rest-api-call-setup>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.MongoPipelineBuilder) {\r\n\r\n        <app-pipeline-generator [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n            (valueChanged)=\"valueChanged($event)\"></app-pipeline-generator>\r\n\r\n        }\r\n        @case (elementEditorTypes.MapMatOptionsKeys) {\r\n        <lib-map-mat-options-keys [disabled]=\"(vm.disabled)||false\"\r\n            [value]=\"(vm.value)\"\r\n            [formInputs]=\"formInputs || []\"\r\n            [mapToData]=\"vm.dataOptions\"\r\n            [errors]=\"(validationErrors)||[]\"\r\n            (valueChanged)=\"valueChanged($event)\">\r\n        </lib-map-mat-options-keys>\r\n        <pre>\r\n            {{vm.inputConfig.matOptions|json}}\r\n        </pre>\r\n        \r\n        }\r\n        @case (elementEditorTypes.ApiValueAccessRules) {\r\n\r\n\r\n\r\n        <app-api-value-access-rules [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" \r\n            [formInputs]=\"formInputs ||[]\"\r\n            \r\n            [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\" [mapToData]=\"vm.dataOptions\"\r\n            (valueChanged)=\"valueChanged($event)\">\r\n        </app-api-value-access-rules>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.FormInputSelector)\r\n        {\r\n\r\n        <lib-form-input-selector  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [formInputs]=\"formInputs ||[]\"\r\n            [errors]=\"(validationErrors)||[]\" [value]=\"(vm.value) || []\" (change)=\"valueChanged($event)\">\r\n        </lib-form-input-selector>\r\n        }\r\n\r\n        @case (\r\n        elementEditorTypes.RequiredInputs\r\n        ){\r\n\r\n        <app-required-inputs  [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n        </app-required-inputs>\r\n        }\r\n\r\n        @case(elementEditorTypes.CalculatedFieldRules){\r\n\r\n        <app-calculated-field-rules [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\"\r\n            [mapToData]=\"vm.dataOptions\"></app-calculated-field-rules>\r\n        }\r\n\r\n        @case(elementEditorTypes.Validators){\r\n\r\n        <app-validators-config [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\"\r\n            [mapToData]=\"vm.dataOptions\">\r\n        </app-validators-config>\r\n\r\n        }\r\n        @case(elementEditorTypes.ConfigMscoaSegments){\r\n\r\n        <app-mscoa-segment-config [disabled]=\"(vm.disabled)||false\"   [id]=\"((vm.editorConfigValue)?.id)\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [dataValue]=\"vm.dataValue\"\r\n            [isCashSegmentConfig]=\"vm.editorConfigValue?.deepBind?.at(-1) === 'cashSegments'\"\r\n            [showAllSegments]=\"vm.dataOptions\" (valueChanged)=\"valueChanged($event)\"></app-mscoa-segment-config>\r\n        }\r\n        @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\r\n\r\n        <app-config-mscoa-additional-inputs [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [mapToData]=\"vm.dataOptions\">\r\n            (valueChanged)=\"valueChanged($event)\">\r\n        </app-config-mscoa-additional-inputs>\r\n\r\n        }\r\n        @case (elementEditorTypes.ChipOptionsCreator) {\r\n        <lib-chip-options-creator-editor   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" (valueChange)=\"valueChanged($event)\"\r\n            [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n\r\n        </lib-chip-options-creator-editor>\r\n\r\n        }\r\n        @case (elementEditorTypes.DataSourcePicker) {\r\n        <lib-data-source-picker   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm.  editorConfigValue\"\r\n            (valueChange)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\">\r\n        </lib-data-source-picker>\r\n        }\r\n        @case (elementEditorTypes.ListLabelConfigEditor) {\r\n        <lib-document-list-label-config-editor  \r\n        [id]=\"((vm.editorConfigValue)?.id)\"\r\n         [formInputs]=\"formInputs ||[]\"\r\n         [disabled]=\"(vm.disabled)||false\" \r\n         [editorConfig]=\"vm.  editorConfigValue\"\r\n            (valueChange)=\"valueChanged($event)\" \r\n            [value]=\"(vm.value)\" [mapToData]=\"vm.dataOptions\"\r\n            [errors]=\"(validationErrors)||[]\">\r\n\r\n        </lib-document-list-label-config-editor>\r\n        }\r\n        @case(\r\n        elementEditorTypes.WorkflowPicker\r\n        ){\r\n        <lib-t-workflow-picker  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n            (valueChanged)=\"valueChanged($event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n            [value]=\"(vm.value)\"></lib-t-workflow-picker>\r\n        }\r\n        @case (\r\n        elementEditorTypes.RecordListManager\r\n        ) {\r\n        <lib-record-list-manager \r\n        [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [editorConfig]=\"vm.editorConfigValue\" [disabled]=\"(vm.disabled)||false\"\r\n            [formInputs]=\"formInputs ||[]\" [mapToData]=\"vm.dataOptions\" (valueChange)=\"valueChanged($event)\"\r\n            \r\n            [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"></lib-record-list-manager>\r\n        }\r\n        }\r\n\r\n        <button [matTooltip]=\"blurFunctionTooltip((vm.editorConfigValue)?.blurHandle)\" *ngIf=\"(vm.inputHasBlurFunction)\"\r\n            [disabled]=\"(vm.disabled)\" [color]=\"blurOff?'':'primary'\" (click)=\"blurOff=!blurOff\" matSuffix\r\n            mat-icon-button>\r\n            <mat-icon>{{\r\n                blurOff?'blur_off':'blur_on'\r\n                }}\r\n\r\n\r\n            </mat-icon>\r\n        </button>\r\n    </mat-form-field>\r\n\r\n    @if (!(vm.value) && (vm. editorConfigValue)?.required ) {\r\n    <mat-error>\r\n        {{ (vm. editorConfigValue)?.label }}'s  is required\r\n    </mat-error>}\r\n\r\n    <mat-error style=\"    font-size: 0.75em;\r\n        margin-left: 14px;\r\n    \" *ngFor=\"let error of (validationErrors)||[]\">\r\n\r\n        {{error.message}}</mat-error>\r\n\r\n</ng-container>\r\n\r\n}@error {\r\n<mat-card>\r\n    <mat-card-content>\r\n\r\n        <span>\r\n            Failed to load form inputs\r\n        </span>\r\n    </mat-card-content>\r\n</mat-card>\r\n}\r\n\r\n\r\n\r\n<!-- - \r\n `TableConfigSetup`\r\n- `ConditionalInputConfig`\r\n- `MatrixTable`-->", styles: [".showItemValue{opacity:.6}mat-form-field{width:100%}mat-slider{width:100%}.range{display:flex;align-items:center}label{line-height:normal;margin-top:12px;font-weight:500;font-size:.75em;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary));display:flex;justify-content:space-between;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"] }]
+                        ], template: "@defer {\r\n<ng-container *ngIf=\"( vm$ |async) as vm\">\r\n\r\n    <mat-form-field appearance=\"outline\" [color]=\"((validationErrors)||[]||[]).length>0 ? 'warn' : 'primary'\"\r\n        [floatLabel]=\"'always'\" [subscriptSizing]=\"'dynamic'\" [hintLabel]=\"vm.editorConfigValue?.hint||''\">\r\n        <mat-label> {{ (vm. editorConfigValue)?.label }} </mat-label>\r\n        @switch ((vm. editorConfigValue)?.editType) {\r\n        @default {\r\n            <lib-input-custom \r\n             [id]=\"((vm.editorConfigValue)?.id)\"\r\n             [inputConfig]=\"vm.inputConfig\"\r\n            [placeholder]=\"(vm.  editorConfigValue)?.placeholder ||'Enter value'\"\r\n            [required]=\"!!(vm.  editorConfigValue)?.required\"\r\n            [disabled]=\"!!(vm.disabled)\"\r\n             [ngModel]=\"(vm.value)\"\r\n             (blur)=\"elementBlur($event)\"\r\n            (input)=\"inputChange($event)\" ></lib-input-custom>\r\n     \r\n\r\n        }\r\n        @case ( elementEditorTypes.Toggle) {\r\n        <lib-mat-slider-toggle-editor\r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [name]=\"((vm.  editorConfigValue)?.name||'') \"\r\n            [label]=\"((vm.  editorConfigValue)?.label||'')\" [disabled]=\"(vm.disabled)||false\"\r\n            (valueChange)=\"valueChanged(!!$event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n        </lib-mat-slider-toggle-editor>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.Range) {\r\n\r\n\r\n        <lib-mat-slider-editor \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [format]=\"(  vm.editorConfigValue)?.format \" [formatLabel]=\" formatLabel\"\r\n            [disabled]=\"(vm.disabled)||false\" [max]=\"(  vm.editorConfigValue)?.max || 100\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [min]=\"(  vm.editorConfigValue)?.min || 0\"\r\n            (valueChange)=\"inputChange($event)\" [step]=\"(  vm.editorConfigValue)?.step || 1\"\r\n            tickInterval=\"(  vm.editorConfigValue)?.step || 1\">\r\n\r\n\r\n        </lib-mat-slider-editor>\r\n\r\n\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.ChipSelect) {\r\n          \r\n        <lib-mat-chip-list-editor \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n         [multiple]=\"!!vm.editorConfigValue?.multipleSelection\"\r\n        [disabled]=\"(vm.disabled)||false\"\r\n            [options]=\"(vm.editorConfigValue)?.options || vm.dataOptions\"\r\n            [required]=\"!!( vm.editorConfigValue)?.required\" [value]=\"(vm.value)\" \r\n            [errors]=\"(validationErrors)||[]\"\r\n            (valueChange)=\"  valueChanged($event)\"></lib-mat-chip-list-editor>\r\n\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.OptionSelect) {\r\n\r\n        <mat-select \r\n        \r\n        [value]=\"(vm.value)\" (selectionChange)=\"valueChanged($event.value)\"\r\n            [disabled]=\"(vm.disabled)||false\">\r\n            @for(option of ( vm.editorConfigValue)?.options || vm.dataOptions;track option.value){\r\n            <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n            }\r\n        </mat-select>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.RichTextEditor) {\r\n        <lib-editor-js-input \r\n        \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [value]=\"(vm.value)\" (valueChanged)=\"valueChanged($event)\"\r\n            [disabled]=\"(vm.disabled)||false\" [inputConfig]=\"data\">\r\n        </lib-editor-js-input>\r\n        }\r\n\r\n\r\n        @case (elementEditorTypes.SelectionOptions) {\r\n\r\n        <app-selection-options-editor \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [errors]=\"(validationErrors)||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n            [options]=\"(vm.value) || []\" (valueChanged)=\"valueChanged($event)\"></app-selection-options-editor>\r\n        }\r\n\r\n        @case (\r\n        elementEditorTypes.ApiCall) {\r\n\r\n        <lib-rest-api-call-setup \r\n         [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\r\n            [httpGetDataFunction]=\"(vm.editorConfigValue)?.httpGetDataFunction\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n\r\n        </lib-rest-api-call-setup>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.MongoPipelineBuilder) {\r\n\r\n        <app-pipeline-generator [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n            (valueChanged)=\"valueChanged($event)\"></app-pipeline-generator>\r\n\r\n        }\r\n        @case (elementEditorTypes.MapMatOptionsKeys) {\r\n        <lib-map-mat-options-keys [disabled]=\"(vm.disabled)||false\"\r\n            [value]=\"(vm.value)\"\r\n            [formInputs]=\"formInputs || []\"\r\n            [mapToData]=\"vm.dataOptions\"\r\n            [errors]=\"(validationErrors)||[]\"\r\n            (valueChanged)=\"valueChanged($event)\">\r\n        </lib-map-mat-options-keys>\r\n        <pre>\r\n            {{vm.inputConfig.matOptions|json}}\r\n        </pre>\r\n        \r\n        }\r\n        @case (elementEditorTypes.ApiValueAccessRules) {\r\n\r\n\r\n\r\n        <app-api-value-access-rules [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" \r\n            [formInputs]=\"formInputs ||[]\"\r\n            \r\n            [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\" [mapToData]=\"vm.dataOptions\"\r\n            (valueChanged)=\"valueChanged($event)\">\r\n        </app-api-value-access-rules>\r\n\r\n        }\r\n\r\n        @case (elementEditorTypes.FormInputSelector)\r\n        {\r\n\r\n        <lib-form-input-selector  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [formInputs]=\"formInputs ||[]\"\r\n            [errors]=\"(validationErrors)||[]\" [value]=\"(vm.value) || []\" (change)=\"valueChanged($event)\">\r\n        </lib-form-input-selector>\r\n        }\r\n\r\n        @case (\r\n        elementEditorTypes.RequiredInputs\r\n        ){\r\n\r\n        <app-required-inputs  [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n        </app-required-inputs>\r\n        }\r\n\r\n        @case(elementEditorTypes.CalculatedFieldRules){\r\n\r\n        <app-calculated-field-rules [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\"\r\n            [mapToData]=\"vm.dataOptions\"></app-calculated-field-rules>\r\n        }\r\n\r\n        @case(elementEditorTypes.Validators){\r\n\r\n        <app-validators-config [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\"\r\n            [mapToData]=\"vm.dataOptions\">\r\n        </app-validators-config>\r\n\r\n        }\r\n        @case(elementEditorTypes.ConfigMscoaSegments){\r\n\r\n        <app-mscoa-segment-config [disabled]=\"(vm.disabled)||false\"   [id]=\"((vm.editorConfigValue)?.id)\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [dataValue]=\"vm.dataValue\"\r\n            [isCashSegmentConfig]=\"vm.editorConfigValue?.deepBind?.at(-1) === 'cashSegments'\"\r\n            [showAllSegments]=\"vm.dataOptions\" (valueChanged)=\"valueChanged($event)\"></app-mscoa-segment-config>\r\n        }\r\n        @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\r\n\r\n        <app-config-mscoa-additional-inputs [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [mapToData]=\"vm.dataOptions\">\r\n            (valueChanged)=\"valueChanged($event)\">\r\n        </app-config-mscoa-additional-inputs>\r\n\r\n        }\r\n        @case (elementEditorTypes.ChipOptionsCreator) {\r\n        <lib-chip-options-creator-editor   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" (valueChange)=\"valueChanged($event)\"\r\n            [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n\r\n        </lib-chip-options-creator-editor>\r\n\r\n        }\r\n        @case (elementEditorTypes.DataSourcePicker) {\r\n        <lib-data-source-picker   [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm.  editorConfigValue\"\r\n            (valueChange)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\">\r\n        </lib-data-source-picker>\r\n        }\r\n        @case (elementEditorTypes.ListLabelConfigEditor) {\r\n        <lib-document-list-label-config-editor  \r\n        [id]=\"((vm.editorConfigValue)?.id)\"\r\n         [formInputs]=\"formInputs ||[]\"\r\n         [disabled]=\"(vm.disabled)||false\" \r\n         [editorConfig]=\"vm.  editorConfigValue\"\r\n            (valueChange)=\"valueChanged($event)\" \r\n            [value]=\"(vm.value)\" [mapToData]=\"vm.dataOptions\"\r\n            [errors]=\"(validationErrors)||[]\">\r\n\r\n        </lib-document-list-label-config-editor>\r\n        }\r\n        @case(\r\n        elementEditorTypes.WorkflowPicker\r\n        ){\r\n        <lib-t-workflow-picker  [id]=\"((vm.editorConfigValue)?.id)\" [disabled]=\"(vm.disabled)||false\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n            (valueChanged)=\"valueChanged($event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n            [value]=\"(vm.value)\"></lib-t-workflow-picker>\r\n        }\r\n        @case (\r\n        elementEditorTypes.RecordListManager\r\n        ) {\r\n        <lib-record-list-manager \r\n        [id]=\"((vm.editorConfigValue)?.id)\"\r\n        [editorConfig]=\"vm.editorConfigValue\" [disabled]=\"(vm.disabled)||false\"\r\n            [formInputs]=\"formInputs ||[]\" [mapToData]=\"vm.dataOptions\" (valueChange)=\"valueChanged($event)\"\r\n            \r\n            [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"></lib-record-list-manager>\r\n        }\r\n        }\r\n\r\n        <button [matTooltip]=\"blurFunctionTooltip((vm.editorConfigValue)?.blurHandle)\" *ngIf=\"(vm.inputHasBlurFunction)\"\r\n            [disabled]=\"(vm.disabled)\" [color]=\"blurOff?'':'primary'\" (click)=\"blurOff=!blurOff\" matSuffix\r\n            mat-icon-button>\r\n            <mat-icon>{{\r\n                blurOff?'blur_off':'blur_on'\r\n                }}\r\n\r\n\r\n            </mat-icon>\r\n        </button>\r\n    </mat-form-field>\r\n\r\n    @if (!(vm.value) && (vm. editorConfigValue)?.required ) {\r\n    <mat-error>\r\n        {{ (vm. editorConfigValue)?.label }}'s  is required\r\n    </mat-error>}\r\n\r\n    <mat-error style=\"    font-size: 0.75em;\r\n        margin-left: 14px;\r\n    \" *ngFor=\"let error of (validationErrors)||[]\">\r\n\r\n        {{error.message}}</mat-error>\r\n\r\n</ng-container>\r\n\r\n}@error {\r\n<mat-card>\r\n    <mat-card-content>\r\n\r\n        <span>\r\n            Failed to load form inputs\r\n        </span>\r\n    </mat-card-content>\r\n</mat-card>\r\n}\r\n\r\n\r\n\r\n<!-- - \r\n `TableConfigSetup`\r\n- `ConditionalInputConfig`\r\n- `MatrixTable`-->", styles: [".showItemValue{opacity:.6}mat-form-field{width:100%}mat-slider{width:100%}.range{display:flex;align-items:center}label{line-height:normal;margin-top:12px;font-weight:500;font-size:.75em;color:var(--mdc-filled-text-field-focus-label-text-color, var(--mat-app-primary));display:flex;justify-content:space-between;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: () => [{ type: i0.NgZone }], propDecorators: { editorConfig: [{
                     type: Input
                 }], formInputs: [{
@@ -8861,39 +9355,64 @@ class MscoaComputationComponent {
         this.destroy$.complete();
     }
     /**
-     * Searches the tree for nodes matching the search text using fuzzy search
-     * @param searchText - The text to search for
-     * @returns Array of matching paths
+     * Searches the tree for nodes matching the search text using fuzzy search.
+     * Returns empty when no term is provided. Scores and caps results to avoid
+     * flooding the UI with low-relevance matches on large datasets.
      */
     searchTree(searchText) {
-        // 1. fast exit if no data
         if (!this.dataSource?.data)
             return [];
-        // 2. Normalize search text once (optimization)
-        const term = (searchText || '').toLowerCase();
-        const results = [];
-        // 3. Define recursive visitor
+        const term = (searchText || '').trim().toLowerCase();
+        // No term → show nothing, not everything
+        if (!term)
+            return [];
+        const MAX_RESULTS = 50;
+        const scored = [];
         const traverse = (nodes) => {
             for (const node of nodes) {
-                // Safety check
                 if (!node)
                     continue;
                 const path = node.path;
                 const nodeName = path?.at(-1)?.toLowerCase() || '';
-                // Check match
-                const isMatch = fuzzySearch(term, nodeName);
-                if (path && isMatch) {
-                    results.push(path);
+                if (path && fuzzySearch(term, nodeName)) {
+                    scored.push({ path, score: this.scoreMatch(term, nodeName) });
                 }
-                // Recurse if children exist
                 if (Array.isArray(node.children) && node.children.length > 0) {
                     traverse(node.children);
                 }
             }
         };
-        // 4. Start traversal
         traverse(this.dataSource.data);
-        return results;
+        return scored
+            .sort((a, b) => b.score - a.score)
+            .slice(0, MAX_RESULTS)
+            .map(r => r.path);
+    }
+    /**
+     * Scores how well a term matches a text string.
+     * Higher score = more relevant. Priorities: exact > prefix > substring > fuzzy-tight > fuzzy-loose.
+     */
+    scoreMatch(term, text) {
+        if (text === term)
+            return 100;
+        if (text.startsWith(term))
+            return 80;
+        if (text.includes(term))
+            return 60;
+        // Fuzzy: score inversely by the character span (tighter = better)
+        let pos = 0;
+        let first = -1, last = -1;
+        for (let i = 0; i < text.length && pos < term.length; i++) {
+            if (text[i] === term[pos]) {
+                if (first === -1)
+                    first = i;
+                last = i;
+                pos++;
+            }
+        }
+        if (pos < term.length)
+            return 0;
+        return Math.max(1, 40 - (last - first));
     }
     /**
      * Checks if a path is the currently selected path or a parent of it
@@ -9215,7 +9734,7 @@ class MscoaComputationComponent {
         return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MscoaComputationComponent, deps: [{ token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MscoaComputationComponent, isStandalone: true, selector: "app-mscoa-computation", host: { listeners: { "keydown": "handleKeyboardNavigation($event)" } }, ngImport: i0, template: "<!-- Header Toolbar -->\r\n<mat-toolbar class=\"main-toolbar header-toolbar\" role=\"banner\">\r\n    <span class=\"toolbar-title\">\r\n        {{ (segment || 'No segment') | uppercase }} : {{ activeColumn | uppercase }} ACCOUNT\r\n    </span>\r\n    <span class=\"spacer\"></span>\r\n    @if (selectedAccount) {\r\n        <button \r\n            mat-flat-button \r\n            (click)=\"clearSelectedAccount(); cancel()\"\r\n            [attr.aria-label]=\"'Change account'\">\r\n            <mat-icon>arrow_back</mat-icon>\r\n            Change Account\r\n        </button>\r\n    }\r\n</mat-toolbar>\r\n\r\n<!-- Search Bar - Hidden when account selected -->\r\n@if (!selectedAccount) {\r\n    <mat-toolbar class=\"main-toolbar header-toolbar search-toolbar\" role=\"search\">\r\n        <mat-form-field [subscriptSizing]=\"'dynamic'\" class=\"search-field\">\r\n            <mat-label position=\"floating\">Search {{ segment || 'account' }} : {{ activeColumn || '' }} Account</mat-label>\r\n            <input \r\n                matInput \r\n                [formControl]=\"accountSearchTextControl\"\r\n                [placeholder]=\"('Search ' + segment + ' : ' + activeColumn + ' Account').toUpperCase()\"\r\n                [attr.aria-label]=\"'Search for account'\"\r\n                autocomplete=\"off\">\r\n            <button \r\n                mat-icon-button \r\n                matSuffix \r\n                (click)=\"clearSearch()\"\r\n                [attr.aria-label]=\"'Clear search'\"\r\n                type=\"button\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </mat-form-field>\r\n    </mat-toolbar>\r\n}\r\n\r\n<mat-divider></mat-divider>\r\n\r\n<!-- Account Details View -->\r\n@if (selectedAccount) {\r\n    <div class=\"account-details-container\" role=\"region\" [attr.aria-label]=\"'Account details'\">\r\n        <app-account-value \r\n            [accountInputs]=\"accountInputs\" \r\n            [userCanClearAccount]=\"userCanClearAccount\"\r\n            [mscoaAccount]=\"selectedAccount\" \r\n            (updateAccount)=\"updateAccount($event)\"\r\n            (clearSelectedAccount)=\"clearSelectedAccount()\">\r\n        </app-account-value>\r\n    </div>\r\n} @else {\r\n    <!-- Main Content Area with Drawer -->\r\n    <mat-drawer-container \r\n        class=\"drawer-container\"\r\n        [attr.aria-label]=\"'Account selection interface'\">\r\n        <!-- Account Table Drawer -->\r\n        <mat-drawer \r\n            #drawer \r\n            class=\"account-drawer\"\r\n            mode=\"side\" \r\n            position=\"end\"\r\n        [opened]=\"!searchingAccounts && !!selectedTreeNode && !accountSearchTextControl.value\">\r\n\r\n\r\n\r\n\r\n            @if (searchingAccounts) {\r\n                <div class=\"loading-container skeleton-table\" role=\"status\" [attr.aria-live]=\"'polite'\">\r\n                    @for (item of [1,2,3,4,5]; track item) {\r\n                        <div class=\"skeleton-row\">\r\n                            <div class=\"skeleton-checkbox\"></div>\r\n                            <div class=\"skeleton-text short\"></div>\r\n                            <div class=\"skeleton-text medium\"></div>\r\n                            <div class=\"skeleton-text\"></div>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            } @else if (hasError) {\r\n                <div class=\"error-container\" role=\"alert\" [attr.aria-live]=\"'assertive'\">\r\n                    <mat-icon class=\"error-icon\" aria-hidden=\"true\">error</mat-icon>\r\n                    <p class=\"error-message\">{{ errorMessage }}</p>\r\n                    <button \r\n                        mat-flat-button \r\n                        color=\"primary\"\r\n                        (click)=\"retryLoadAccounts()\"\r\n                        [attr.aria-label]=\"'Retry loading accounts'\">\r\n                        <mat-icon aria-hidden=\"true\">refresh</mat-icon>\r\n                        Retry\r\n                    </button>\r\n                </div>\r\n            } @else if (searchAccounts.length === 0 && selectedTreeNode) {\r\n                <div class=\"empty-state\" role=\"status\" [attr.aria-live]=\"'polite'\">\r\n                    <mat-icon class=\"empty-icon\" aria-hidden=\"true\">info</mat-icon>\r\n                    <p class=\"empty-message\">No accounts found for this category.</p>\r\n                </div>\r\n            } @else {\r\n                <app-scoa-account-table \r\n                    [selectedAccount]=\"selectedAccount\" \r\n                    [segment]=\"segment\"\r\n                    (accountSelected)=\"selectAccount($event)\" \r\n                    [data]=\"{\r\n                        accounts: searchAccounts,\r\n                        account: currentAccountPath || ''\r\n                    }\">\r\n                </app-scoa-account-table>\r\n            }\r\n        </mat-drawer>\r\n        <!-- Tree Content Area -->\r\n        <div class=\"tree-content\" role=\"main\">\r\n\r\n            <!-- Search Results View -->\r\n            @if (accountSearchTextControl.value) {\r\n                <mat-nav-list class=\"search-results-list\" role=\"list\">\r\n                    <div mat-subheader class=\"search-results-header\">\r\n                        <mat-icon class=\"search-icon\">search</mat-icon>\r\n                        Search Results\r\n                        <span class=\"count-badge\" [attr.aria-label]=\"'Number of results'\">\r\n                            ({{ (searchedPaths$ | async)?.length || 0 }})\r\n                        </span>\r\n                    </div>\r\n                    \r\n                    @if ((searchedPaths$ | async)?.length === 0) {\r\n                        <!-- Empty Search Results -->\r\n                        <div class=\"empty-state\" role=\"status\" [attr.aria-live]=\"'polite'\">\r\n                            <mat-icon class=\"empty-icon\" aria-hidden=\"true\">search_off</mat-icon>\r\n                            <p class=\"empty-message\">\r\n                                No account found for the search\r\n                                <strong>{{ accountSearchTextControl.value }}</strong>.\r\n                            </p>\r\n                            <button \r\n                                mat-flat-button \r\n                                (click)=\"clearSearch()\"\r\n                                [attr.aria-label]=\"'Clear search and show all accounts'\">\r\n                                Clear Search\r\n                            </button>\r\n                        </div>\r\n                    } @else {\r\n                        <p class=\"search-results-hint\">Click a result to load accounts for that category.</p>\r\n                        <div class=\"search-results-grid\" role=\"list\">\r\n                            @for (searchedItem of (searchedPaths$ | async); track searchedItem.join(':')) {\r\n                                <div \r\n                                    class=\"path-result-item\"\r\n                                    role=\"listitem\"\r\n                                    (click)=\"selectPath(searchedItem)\" \r\n                                    [attr.aria-label]=\"'Load accounts for: ' + searchedItem.join(' > ') + '. Click to select.'\"\r\n                                    tabindex=\"0\"\r\n                                    (keydown.enter)=\"selectPath(searchedItem)\"\r\n                                    (keydown.space)=\"selectPath(searchedItem); $event.preventDefault()\">\r\n                                    <div class=\"breadcrumb-container\">\r\n                                        @for (part of searchedItem; track part; let last = $last) {\r\n                                            <div class=\"crumb-segment\" [class.is-target]=\"last\">\r\n                                                <span \r\n                                                    class=\"text-content\" \r\n                                                    [innerHTML]=\"accountSearchTextControl.value ? highlightSearchText(part, accountSearchTextControl.value) : part\">\r\n                                                </span>\r\n                                                @if (!last) {\r\n                                                    <mat-icon class=\"separator\" aria-hidden=\"true\">chevron_right</mat-icon>\r\n                                                }\r\n                                            </div>\r\n                                        }\r\n                                    </div>\r\n                                    <span class=\"path-result-meta\">Load accounts</span>\r\n                                    <mat-icon class=\"path-result-arrow\" aria-hidden=\"true\">arrow_forward</mat-icon>\r\n                                </div>\r\n                            }\r\n                        </div>\r\n                    }\r\n                </mat-nav-list>\r\n            }\r\n\r\n            <!-- Tree View -->\r\n            @else {\r\n                <!-- Breadcrumb: show current path when category selected (like file explorers) -->\r\n                @if (selectedTreeNode?.path?.length) {\r\n                    <div class=\"tree-breadcrumb\" role=\"navigation\" [attr.aria-label]=\"'Current category: ' + (selectedTreeNode?.path ?? []).join(' > ')\">\r\n                        <span class=\"breadcrumb-label\">Category:</span>\r\n                        @for (part of (selectedTreeNode?.path ?? []); track $index; let last = $last) {\r\n                            <span class=\"breadcrumb-part\" [class.is-current]=\"last\">{{ part }}</span>\r\n                            @if (!last) {\r\n                                <mat-icon class=\"breadcrumb-sep\" aria-hidden=\"true\">chevron_right</mat-icon>\r\n                            }\r\n                        }\r\n                    </div>\r\n                }\r\n                <!-- Compact Instructions - Collapsed by default -->\r\n                @if (noneIsExpanded) {\r\n                    <mat-expansion-panel \r\n                        [expanded]=\"false\"\r\n                        class=\"instructions-panel compact-instructions\"\r\n                        [attr.aria-label]=\"'How to use the account selector'\">\r\n                        <mat-expansion-panel-header>\r\n                            <mat-panel-title>\r\n                                <mat-icon class=\"instruction-icon\" aria-hidden=\"true\">info</mat-icon>\r\n                                <span>Quick tips</span>\r\n                            </mat-panel-title>\r\n                        </mat-expansion-panel-header>\r\n                        <div class=\"instructions-content\">\r\n                            <div class=\"instruction-item\">\r\n                                <mat-icon class=\"instruction-bullet\" aria-hidden=\"true\">folder_open</mat-icon>\r\n                                <span>Expand folders to browse</span>\r\n                            </div>\r\n                            <div class=\"instruction-item\">\r\n                                <mat-icon class=\"instruction-bullet\" aria-hidden=\"true\">check_box</mat-icon>\r\n                                <span>Check category to load accounts</span>\r\n                            </div>\r\n                            <div class=\"instruction-item\">\r\n                                <mat-icon class=\"instruction-bullet\" aria-hidden=\"true\">search</mat-icon>\r\n                                <span>Use search bar to find accounts</span>\r\n                            </div>\r\n                        </div>\r\n                    </mat-expansion-panel>\r\n                }\r\n\r\n                <!-- Account Tree -->\r\n                <mat-tree \r\n                \r\n                    [dataSource]=\"dataSource\" \r\n                    [treeControl]=\"treeControl\"\r\n                    role=\"tree\"\r\n                    [attr.aria-label]=\"'Account category tree'\">\r\n                    \r\n                    <!-- Leaf Node (no children) -->\r\n                    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding role=\"treeitem\" \r\n                    [attr.data-tree-path]=\"node.path?.join(':')\">\r\n                        <button \r\n                            class=\"toggle-button\" \r\n                            mat-icon-button \r\n                            disabled\r\n                            aria-hidden=\"true\">\r\n                        </button>\r\n                        <mat-checkbox \r\n                            (change)=\"selectNode(node)\"\r\n                            [disabled]=\"isActivePathOrParent(node.path) && searchingAccounts\"\r\n                            [checked]=\"isActivePathOrParent(node.path)\"\r\n                            [attr.aria-label]=\"'Select ' + node.name + ' account category'\">\r\n                            @if (isActivePathOrParent(node.path) && searchingAccounts) {\r\n                                <mat-spinner \r\n                                    color=\"primary\" \r\n                                    class=\"loading\"\r\n                                    [attr.aria-label]=\"'Loading accounts for ' + node.name\">\r\n                                </mat-spinner>\r\n                                <span class=\"label selected\" [attr.aria-live]=\"'polite'\">\r\n                                    Loading <strong>{{ node.name }}</strong> accounts...\r\n                                </span>\r\n                            } @else {\r\n                                <span \r\n                                    class=\"label\" \r\n                                    [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                                    {{ node.name }}\r\n                                </span>\r\n                            }\r\n                        </mat-checkbox>\r\n                    </mat-tree-node>\r\n\r\n                    <!-- Branch Node (has children) -->\r\n                    <mat-tree-node \r\n                        *matTreeNodeDef=\"let node; when: hasChild\" \r\n                        matTreeNodePadding \r\n                        role=\"treeitem\"\r\n                        [attr.data-tree-path]=\"node.path?.join(':')\"\r\n                        [attr.aria-expanded]=\"treeControl.isExpanded(node)\">\r\n                        <button \r\n                            class=\"toggle-button\" \r\n                            mat-icon-button \r\n                            [attr.aria-label]=\"(treeControl.isExpanded(node) ? 'Collapse' : 'Expand') + ' ' + node.name\"\r\n                            (click)=\"toggleNode(node)\"\r\n                            type=\"button\">\r\n                            <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                                {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n                            </mat-icon>\r\n                        </button>\r\n                        \r\n                        @if (isActivePathOrParent(node.path)) {\r\n                            <mat-checkbox \r\n                                (change)=\"selectNode(node)\" \r\n                                [disabled]=\"true\" \r\n                                [checked]=\"true\"\r\n                                [attr.aria-label]=\"'Selected: ' + node.name\">\r\n                                <span class=\"label selected\">\r\n                                    {{ node.name }}\r\n                                </span>\r\n                            </mat-checkbox>\r\n                        } @else {\r\n                            <mat-checkbox \r\n                                (change)=\"selectNode(node)\"\r\n                                [checked]=\"false\"\r\n                                [attr.aria-label]=\"'Select ' + node.name + ' account category'\">\r\n                                <span class=\"label\">\r\n                                    {{ node.name }}\r\n                                </span>\r\n                            </mat-checkbox>\r\n                        }\r\n                    </mat-tree-node>\r\n                </mat-tree>\r\n            }\r\n\r\n        </div>\r\n    </mat-drawer-container>\r\n}\r\n\r\n<mat-divider></mat-divider>\r\n\r\n<!-- Footer Actions -->\r\n<mat-dialog-actions\r\nstyle=\"    background: var(--mscoa-surface-container) !important;\"\r\nalign=\"end\">\r\n<button \r\nclass=\"action-button close-button\"\r\nmat-button \r\n(click)=\"closeAndPassData(undefined)\"\r\n[attr.aria-label]=\"'Close dialog without saving'\"\r\ntype=\"button\">\r\n\r\nClose\r\n</button>\r\n    @if (userCanClearAccount ) {\r\n        <button \r\n            class=\"action-button save-button\"\r\n            mat-flat-button \r\n            [disabled]=\"!saveSelection\" \r\n            (click)=\"saveAccount()\"\r\n            [attr.aria-label]=\"saveSelection ? 'Save account selection' : 'Save disabled - account unchanged or invalid'\"\r\n            type=\"button\">\r\n            <mat-icon aria-hidden=\"true\">save</mat-icon>\r\n            Save\r\n        </button>\r\n    }\r\n \r\n    </mat-dialog-actions>\r\n", styles: [":host{display:flex;flex-direction:column;max-height:98vh;overflow:hidden;min-height:0;--mscoa-primary: var(--mat-sys-primary, #243D91);--mscoa-primary-light: var(--mat-sys-primary-container, #E3F2FD);--mscoa-primary-dark: var(--mat-sys-primary, #1A2E6B);--mscoa-success: var(--mat-sys-success, #4CAF50);--mscoa-error: var(--mat-sys-error, #F44336);--mscoa-warning: var(--mat-sys-warning, #FF9800);--mscoa-info: var(--mat-sys-primary, #2196F3);--mscoa-surface: var(--mat-sys-surface, #FFFFFF);--mscoa-surface-container: var(--mat-sys-surface-container, #F5F5F5);--mscoa-text-primary: var(--mat-sys-on-surface, #212121);--mscoa-text-secondary: var(--mat-sys-on-surface-variant, #757575);--mscoa-divider: var(--mat-sys-outline-variant, #E0E0E0);--mscoa-spacing-xs: 4px;--mscoa-spacing-sm: 8px;--mscoa-spacing-md: 16px;--mscoa-spacing-lg: 24px;--mscoa-spacing-xl: 32px;--mscoa-elevation-1: 0 1px 3px rgba(0,0,0,.12);--mscoa-elevation-2: 0 2px 6px rgba(0,0,0,.12);--mscoa-elevation-4: 0 4px 12px rgba(0,0,0,.12);--mscoa-computation-spacing-xs: var(--mscoa-spacing-xs);--mscoa-computation-spacing-sm: var(--mscoa-spacing-sm);--mscoa-computation-spacing-md: var(--mscoa-spacing-md);--mscoa-computation-spacing-lg: var(--mscoa-spacing-lg);--mscoa-computation-toolbar-height: 56px;--mscoa-header-height: 56px;--mscoa-search-height: 56px;--mscoa-footer-height: 58px;--mscoa-divider-height: 1px;--mscoa-computation-selected-color: var(--mscoa-primary);--mscoa-computation-border-radius: 16px;--mscoa-computation-transition: .2s ease}mat-divider{flex-shrink:0}h4{margin-top:0;margin-bottom:0;padding-left:var(--mscoa-computation-spacing-md)}.label{font-size:.875em}.selected{color:var(--mscoa-primary)!important;font-weight:600;background-color:transparent}.mat-tree-node.tree-node-selected,.mat-tree-node[aria-selected=true]{background:linear-gradient(90deg,var(--mat-sys-primary-container, var(--mscoa-primary-light)) 0%,transparent 100%)!important;box-shadow:inset 3px 0 0 var(--mat-sys-primary, var(--mscoa-primary));border-radius:0 4px 4px 0}.mat-tree-node:hover:not(.tree-node-selected):not(:has(.selected)){background-color:#00000008;transition:background-color var(--mscoa-computation-transition)}mat-tree-node{transition:all var(--mscoa-computation-transition)}mat-tree-node:has(.selected){background:linear-gradient(90deg,var(--mat-sys-primary-container, var(--mscoa-primary-light)) 0%,transparent 100%)!important;box-shadow:inset 3px 0 0 var(--mat-sys-primary, var(--mscoa-primary));border-radius:0 4px 4px 0}mat-tree-node:hover:not(:has(.selected)){background-color:#00000008}mat-tree-node mat-checkbox[checked=true] ::ng-deep .mdc-checkbox{background-color:var(--mscoa-primary, #243D91)!important;border-color:var(--mscoa-primary, #243D91)!important}.accountSeperator{margin-left:var(--mscoa-computation-spacing-xs);margin-right:var(--mscoa-computation-spacing-xs)}.loading{width:24px!important;height:24px!important;--mdc-circular-progress-size: 28px !important;--mdc-circular-progress-active-indicator-width: 24px !important;position:absolute;left:var(--mscoa-computation-spacing-sm);bottom:var(--mscoa-computation-spacing-sm)}.info{font-size:.875rem;opacity:.8;padding-left:var(--mscoa-computation-spacing-md);border-radius:4px;margin-top:10px;line-height:1.6;max-width:500px}.info strong{opacity:1}.toggle-button{height:28px;width:28px;padding:0;margin-right:var(--mscoa-computation-spacing-xs);margin-left:var(--mscoa-computation-spacing-xs)}.toggle-button:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:2px;border-radius:4px}mat-tree{flex:1;min-height:280px;min-width:0;overflow:auto;padding:var(--mscoa-computation-spacing-md)!important;background:none}mat-tree::-webkit-scrollbar{width:8px;height:8px}mat-tree::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:4px}mat-tree::-webkit-scrollbar-thumb{background:var(--mscoa-text-secondary, #757575);border-radius:4px;opacity:.5}mat-tree::-webkit-scrollbar-thumb:hover{opacity:.8;background:var(--mscoa-primary, #243D91)}mat-tree{scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}mat-tree-node{display:flex;align-items:flex-start;min-height:28px;padding-right:var(--mscoa-computation-spacing-md)!important;padding-top:2px!important;padding-bottom:2px!important;box-sizing:border-box;width:100%;transition:background-color var(--mscoa-computation-transition)}mat-tree-node:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:-2px;border-radius:4px}mat-tree-node:hover:not(:has(.selected)){background-color:#0000000a}.mat-tree-node{display:flex;align-items:center;flex-wrap:nowrap;min-height:28px;padding:var(--mscoa-computation-spacing-xs) 0;box-sizing:border-box;transition:background-color var(--mscoa-computation-transition),border-color var(--mscoa-computation-transition);border-radius:4px;margin:1px 0}.mat-tree-node:hover:not(.tree-node-selected):not(:has(.selected)){background-color:#0000000a}.mat-tree-node button,.mat-tree-node mat-checkbox{flex-shrink:0;height:28px}.mat-tree-node mat-checkbox{display:flex;align-items:center;height:28px;min-height:fit-content;flex:1;min-width:0}.mat-tree-node .label{flex:1;min-width:0;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;overflow:visible}.header-toolbar{flex-shrink:0;background:var(--mscoa-surface-container)!important;box-shadow:var(--mscoa-elevation-2);border-bottom:1px solid var(--mscoa-divider)}.glass{background:#ffffff26;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2)}@media(prefers-reduced-motion:reduce){.glass{backdrop-filter:none;-webkit-backdrop-filter:none}}.main-toolbar{min-width:0;padding-top:var(--mscoa-computation-spacing-md);min-height:var(--mscoa-computation-toolbar-height);overflow:hidden}.main-toolbar .toolbar-title{font-size:18px;font-weight:500;color:var(--mscoa-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-toolbar{flex-shrink:0;height:var(--mscoa-computation-toolbar-height);min-width:0;overflow:hidden}.search-toolbar .search-field{flex:1;width:100%;max-width:100%;min-width:0;border-radius:var(--mscoa-computation-border-radius);overflow:clip}.search-toolbar .search-field.search-disabled ::ng-deep .mat-mdc-text-field-wrapper{background-color:var(--mscoa-surface-container)!important;border:1px dashed var(--mscoa-divider)}.search-toolbar .search-field.search-disabled ::ng-deep .mat-mdc-form-field-label{color:var(--mscoa-text-secondary)!important}.search-toolbar .search-field.search-disabled ::ng-deep input{cursor:not-allowed;color:var(--mscoa-text-secondary)!important}.search-toolbar .search-field.search-disabled ::ng-deep button{opacity:.5;cursor:not-allowed}.search-toolbar .search-field.search-disabled ::ng-deep .mat-mdc-form-field-hint{color:var(--mscoa-text-secondary);font-size:.75rem}.tree-breadcrumb{flex-shrink:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--mscoa-spacing-xs, 4px);padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);margin:0 var(--mscoa-spacing-md, 16px) var(--mscoa-spacing-sm, 8px);background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:6px;border-left:3px solid var(--mat-sys-primary, var(--mscoa-primary, #243D91));font-size:.8125rem;line-height:1.4;max-width:500px}.tree-breadcrumb .breadcrumb-label{color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));font-weight:500;margin-right:var(--mscoa-spacing-xs, 4px)}.tree-breadcrumb .breadcrumb-part{color:var(--mat-sys-on-surface, var(--mscoa-text-primary, #212121))}.tree-breadcrumb .breadcrumb-part.is-current{font-weight:600;color:var(--mat-sys-primary, var(--mscoa-primary, #243D91))}.tree-breadcrumb .breadcrumb-sep{font-size:16px;width:16px;height:16px;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));margin:0 var(--mscoa-spacing-xs, 4px)}.search-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--mscoa-spacing-sm, 8px);overflow-y:auto;flex:1;min-height:0;padding:var(--mscoa-spacing-xs, 4px) 0}.search-results-grid::-webkit-scrollbar{width:6px}.search-results-grid::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, var(--mscoa-surface-container));border-radius:3px}.search-results-grid::-webkit-scrollbar-thumb{background:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary));border-radius:3px;opacity:.5}.search-results-grid::-webkit-scrollbar-thumb:hover{opacity:.8;background:var(--mat-sys-primary, var(--mscoa-primary))}.search-results-grid{scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}.path-result-item{cursor:pointer;transition:background-color var(--mscoa-computation-transition);min-height:56px;padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);padding-right:40px;border-radius:8px;border:1px solid var(--mat-sys-outline-variant, var(--mscoa-divider));background:var(--mat-sys-surface, var(--mscoa-surface));display:flex;flex-direction:column;gap:4px;align-items:flex-start;position:relative}.path-result-item:hover,.path-result-item:focus-visible{background-color:var(--mat-sys-surface-container, rgba(0, 0, 0, .04));outline:none}.path-result-item:hover .breadcrumb-container,.path-result-item:focus-visible .breadcrumb-container{flex-wrap:wrap}.path-result-item:hover .breadcrumb-container .text-content,.path-result-item:focus-visible .breadcrumb-container .text-content{white-space:normal;max-width:none}.path-result-item:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:-2px}.path-result-arrow{position:absolute;right:var(--mscoa-spacing-sm);top:50%;transform:translateY(-50%);font-size:18px;width:18px;height:18px;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary))}.breadcrumb-container{display:flex;align-items:center;flex-wrap:wrap;overflow:hidden;width:100%}.crumb-segment{display:flex;align-items:center;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #6c757d));white-space:nowrap;overflow:hidden;max-width:100%}.crumb-segment .text-content{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:150px;vertical-align:middle}.crumb-segment .separator{font-size:1em;height:16px;width:16px;margin:0 var(--mscoa-computation-spacing-xs);color:var(--mat-sys-outline-variant, var(--mscoa-divider, #bdbdbd));flex-shrink:0}.crumb-segment.is-target{color:var(--mat-sys-on-surface, var(--mscoa-text-primary, #000));font-weight:500;flex-shrink:0}.crumb-segment.is-target .text-content{color:var(--mat-sys-on-surface, var(--mscoa-text-primary, #000));max-width:none}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mscoa-computation-spacing-lg);text-align:center;gap:var(--mscoa-computation-spacing-md)}.empty-state .empty-icon{font-size:48px;width:48px;height:48px;opacity:.5}.empty-state .empty-message{margin:0;font-size:14px}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mscoa-computation-spacing-lg);text-align:center;gap:var(--mscoa-computation-spacing-md)}.error-container .error-icon{font-size:48px;width:48px;height:48px;color:var(--mat-sys-error)}.error-container .error-message{margin:0;font-size:14px;color:var(--mat-sys-error)}mark{background-color:#ffeb3b;color:inherit;padding:0;font-weight:500}.instructions-panel{flex-shrink:0;margin:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);margin-bottom:var(--mscoa-spacing-xs, 4px);box-shadow:var(--mscoa-elevation-1);border-radius:6px;overflow:hidden;background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));transition:box-shadow var(--mscoa-computation-transition)}.instructions-panel.compact-instructions ::ng-deep .mat-expansion-panel-header{padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px)!important;min-height:40px!important;height:auto!important}.instructions-panel.compact-instructions ::ng-deep .mat-expansion-panel-body{padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px)!important}.instructions-panel:hover{box-shadow:var(--mscoa-elevation-2)}.instructions-panel ::ng-deep .mat-expansion-panel-header{padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);background:var(--mscoa-surface-container, #F5F5F5)!important}.instructions-panel ::ng-deep .mat-expansion-panel-header:hover{background:var(--mat-sys-surface, var(--mscoa-surface, #FFFFFF))!important}.instructions-panel ::ng-deep .mat-expansion-panel-body{padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px)!important;background:var(--mat-sys-surface, var(--mscoa-surface, #FFFFFF))}.instructions-panel .instruction-icon{margin-right:var(--mscoa-spacing-xs, 4px);color:var(--mscoa-info, #2196F3);font-size:18px;width:18px;height:18px}.instructions-panel .instructions-content{padding:var(--mscoa-spacing-xs, 4px) 0;display:flex;flex-direction:column;gap:var(--mscoa-spacing-xs, 4px)}.instructions-panel .instruction-item{display:flex;align-items:center;gap:var(--mscoa-spacing-xs, 4px);font-size:.75rem;line-height:1.4;padding:var(--mscoa-spacing-xs, 4px);border-radius:4px;transition:background-color var(--mscoa-computation-transition)}.instructions-panel .instruction-item:hover{background-color:var(--mscoa-primary-light, #E3F2FD)}.instructions-panel .instruction-item .instruction-bullet{font-size:16px;width:16px;height:16px;color:var(--mscoa-primary, #243D91);flex-shrink:0}.instructions-panel .instruction-item span{flex:1}.instructions-panel .instruction-item span strong{font-weight:600}.search-results-header{display:flex;align-items:center;gap:var(--mscoa-computation-spacing-sm)}.search-results-header .search-icon{margin-right:var(--mscoa-computation-spacing-sm)}.search-results-list{padding:var(--mscoa-computation-spacing-md);display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.search-results-hint{font-size:.75rem;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));margin:0 var(--mscoa-spacing-md, 16px) var(--mscoa-spacing-sm, 8px);padding:var(--mscoa-spacing-xs, 4px) 0}.path-result-meta{font-size:.6875rem;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));text-transform:uppercase;letter-spacing:.3px}.mat-mdc-subheader{position:sticky;top:0;z-index:10;background:var(--mat-sys-surface-container)}.count-badge{margin-left:auto;font-weight:400;opacity:.7;font-size:.9em}.drawer-container{flex:1;min-height:0;overflow:hidden;max-width:100%;background:var(--mat-sys-surface-container)!important;display:flex}.drawer-container ::ng-deep .mat-drawer-content{min-height:0;overflow:auto;height:calc(100vh - 220px);flex:1 1 30%;min-width:260px}.account-drawer{min-width:420px;max-width:min(700px,65vw)!important;width:520px!important;overflow:hidden;display:flex;flex-direction:column;background:var(--mat-sys-surface-container)!important;padding:var(--mscoa-computation-spacing-md)}.account-drawer app-scoa-account-table{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}.account-drawer .loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mscoa-computation-spacing-lg);gap:var(--mscoa-computation-spacing-md)}.account-drawer .loading-container p{margin:0;font-size:.875rem}.skeleton-row{display:flex;align-items:center;padding:var(--mscoa-spacing-sm) var(--mscoa-spacing-md);gap:var(--mscoa-spacing-md);animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-row .skeleton-checkbox{width:20px;height:20px;border-radius:4px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%}.skeleton-row .skeleton-text{flex:1;height:16px;border-radius:4px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%}.skeleton-row .skeleton-text.short{width:60%}.skeleton-row .skeleton-text.medium{width:80%}@keyframes skeleton-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-table .skeleton-row{border-bottom:1px solid var(--mscoa-divider)}.skeleton-table .skeleton-row:last-child{border-bottom:none}.account-details-container{flex:1;min-height:0;max-width:520px;margin:0 auto;width:100%;background:#ffffff1c;-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);padding:var(--mscoa-spacing-xs, 4px);border:1px solid rgba(255,255,255,.3);border:1px solid var(--mat-sys-outline-variant, var(--mscoa-divider, #E0E0E0));border-radius:8px;overflow-y:auto}.account-details-container::-webkit-scrollbar{width:6px}.account-details-container::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:3px}.account-details-container::-webkit-scrollbar-thumb{background:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));border-radius:3px;opacity:.5}.account-details-container::-webkit-scrollbar-thumb:hover{opacity:.8;background:var(--mat-sys-primary, var(--mscoa-primary, #243D91))}.account-details-container{scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}.account-details-container ::ng-deep app-account-value{max-width:100%}.account-details-container ::ng-deep app-account-value mat-toolbar{background:var(--mat-sys-surface-container, var(--mscoa-surface-container))!important;box-shadow:var(--mscoa-elevation-1);margin-bottom:0;border-radius:8px 8px 0 0}.account-details-container ::ng-deep app-account-value .account-grid{gap:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px);padding:var(--mscoa-spacing-sm, 8px);background:var(--mat-sys-surface, var(--mscoa-surface));border-radius:0 0 8px 8px;box-shadow:var(--mscoa-elevation-1)}.tree-content{min-height:280px;flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;padding-right:var(--mscoa-computation-spacing-sm)}.footer-toolbar{flex-shrink:0;height:fit-content;padding-top:var(--mscoa-computation-spacing-md)!important;padding-bottom:var(--mscoa-computation-spacing-md)!important;min-height:58px;box-shadow:0 -2px 8px #0000000d}.footer-toolbar .footer-actions{display:flex;width:100%;gap:var(--mscoa-computation-spacing-sm);flex-direction:column;min-height:58px}.footer-toolbar .footer-actions .action-button{width:100%;font-weight:500;transition:all .2s ease}.footer-toolbar .footer-actions .action-button:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:2px}.footer-toolbar .footer-actions .action-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--mscoa-elevation-2)}.footer-toolbar .footer-actions .action-button:active:not(:disabled){transform:translateY(0)}.footer-toolbar .footer-actions .action-button[disabled]{opacity:.5;cursor:not-allowed}.footer-toolbar .footer-actions .save-button{background-color:var(--mscoa-primary, #243D91)!important;color:#fff!important}@media(min-width:768px){.footer-actions{flex-direction:row}.footer-actions .action-button{width:auto;min-width:120px}.drawer-container{display:flex}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.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: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: i7$1.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i10$2.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i10$2.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i12.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i12.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: i12.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i12.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i13.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: "component", type: AccountValueComponent, selector: "app-account-value", inputs: ["mscoaAccount", "accountInputs", "userCanClearAccount"], outputs: ["clearSelectedAccount", "updateAccount"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ScoaAccountTableComponent, selector: "app-scoa-account-table", inputs: ["data", "selectedAccount", "segment"], outputs: ["accountSelected"] }, { kind: "ngmodule", type: _InternalFormsSharedModule }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MscoaComputationComponent, isStandalone: true, selector: "app-mscoa-computation", host: { listeners: { "keydown": "handleKeyboardNavigation($event)" } }, ngImport: i0, template: "<!-- Header Toolbar -->\r\n<mat-toolbar class=\"main-toolbar header-toolbar\" role=\"banner\">\r\n    <span class=\"toolbar-title\">\r\n        {{ (segment || 'No segment') | uppercase }} : {{ activeColumn | uppercase }} ACCOUNT\r\n    </span>\r\n    <span class=\"spacer\"></span>\r\n    @if (selectedAccount) {\r\n    <button mat-flat-button (click)=\"clearSelectedAccount(); cancel()\" [attr.aria-label]=\"'Change account'\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n        Change Account\r\n    </button>\r\n    }\r\n</mat-toolbar>\r\n\r\n<!-- Search Bar - Hidden when account selected -->\r\n@if (!selectedAccount) {\r\n<mat-toolbar class=\"main-toolbar header-toolbar search-toolbar\" role=\"search\">\r\n    <mat-form-field [subscriptSizing]=\"'dynamic'\" class=\"search-field\">\r\n        <mat-label position=\"floating\">Search {{ segment || 'account' }} : {{ activeColumn || '' }} Account</mat-label>\r\n        <input matInput [formControl]=\"accountSearchTextControl\"\r\n            [placeholder]=\"('Search ' + segment + ' : ' + activeColumn + ' Account').toUpperCase()\"\r\n            [attr.aria-label]=\"'Search for account'\" autocomplete=\"off\">\r\n        <button mat-icon-button matSuffix (click)=\"clearSearch()\" [attr.aria-label]=\"'Clear search'\" type=\"button\">\r\n            <mat-icon>close</mat-icon>\r\n        </button>\r\n    </mat-form-field>\r\n</mat-toolbar>\r\n}\r\n\r\n<mat-divider></mat-divider>\r\n\r\n<!-- Account Details View -->\r\n@if (selectedAccount) {\r\n<div class=\"account-details-container\" role=\"region\" [attr.aria-label]=\"'Account details'\">\r\n    <app-account-value [accountInputs]=\"accountInputs\" [userCanClearAccount]=\"userCanClearAccount\"\r\n        [mscoaAccount]=\"selectedAccount\" (updateAccount)=\"updateAccount($event)\"\r\n        (clearSelectedAccount)=\"clearSelectedAccount()\">\r\n    </app-account-value>\r\n</div>\r\n} @else {\r\n<!-- Main Content Area with Drawer -->\r\n<mat-drawer-container class=\"drawer-container\" [attr.aria-label]=\"'Account selection interface'\">\r\n    <!-- Account Table Drawer -->\r\n    <mat-drawer #drawer class=\"account-drawer\" mode=\"side\" position=\"end\"\r\n        [opened]=\"!searchingAccounts && !!selectedTreeNode && !accountSearchTextControl.value\">\r\n\r\n\r\n\r\n\r\n        @if (searchingAccounts) {\r\n        <div class=\"loading-container skeleton-table\" role=\"status\" [attr.aria-live]=\"'polite'\">\r\n            @for (item of [1,2,3,4,5]; track item) {\r\n            <div class=\"skeleton-row\">\r\n                <div class=\"skeleton-checkbox\"></div>\r\n                <div class=\"skeleton-text short\"></div>\r\n                <div class=\"skeleton-text medium\"></div>\r\n                <div class=\"skeleton-text\"></div>\r\n            </div>\r\n            }\r\n        </div>\r\n        } @else if (hasError) {\r\n        <div class=\"error-container\" role=\"alert\" [attr.aria-live]=\"'assertive'\">\r\n            <mat-icon class=\"error-icon\" aria-hidden=\"true\">error</mat-icon>\r\n            <p class=\"error-message\">{{ errorMessage }}</p>\r\n            <button mat-flat-button color=\"primary\" (click)=\"retryLoadAccounts()\"\r\n                [attr.aria-label]=\"'Retry loading accounts'\">\r\n                <mat-icon aria-hidden=\"true\">refresh</mat-icon>\r\n                Retry\r\n            </button>\r\n        </div>\r\n        } @else if (searchAccounts.length === 0 && selectedTreeNode) {\r\n        <div class=\"empty-state\" role=\"status\" [attr.aria-live]=\"'polite'\">\r\n            <mat-icon class=\"empty-icon\" aria-hidden=\"true\">info</mat-icon>\r\n            <p class=\"empty-message\">No accounts found for this category.</p>\r\n        </div>\r\n        } @else {\r\n        <app-scoa-account-table [selectedAccount]=\"selectedAccount\" [segment]=\"segment\"\r\n            (accountSelected)=\"selectAccount($event)\" [data]=\"{\r\n                        accounts: searchAccounts,\r\n                        account: currentAccountPath || ''\r\n                    }\">\r\n        </app-scoa-account-table>\r\n        }\r\n    </mat-drawer>\r\n    <!-- Tree Content Area -->\r\n    <div class=\"tree-content\" role=\"main\">\r\n\r\n        <!-- Search Results View -->\r\n        @if (accountSearchTextControl.value) {\r\n        <mat-nav-list class=\"search-results-list\" role=\"list\">\r\n            <div mat-subheader class=\"search-results-header\">\r\n                <mat-icon class=\"search-icon\">search</mat-icon>\r\n                Search Results\r\n                <span class=\"count-badge\" [attr.aria-label]=\"'Number of results'\">\r\n                    ({{ (searchedPaths$ | async)?.length || 0 }})\r\n                </span>\r\n            </div>\r\n\r\n            @if ((searchedPaths$ | async)?.length === 0) {\r\n            <!-- Empty Search Results -->\r\n            <div class=\"empty-state\" role=\"status\" [attr.aria-live]=\"'polite'\">\r\n                <mat-icon class=\"empty-icon\" aria-hidden=\"true\">search_off</mat-icon>\r\n                <p class=\"empty-message\">\r\n                    No account found for the search\r\n                    <strong>{{ accountSearchTextControl.value }}</strong>.\r\n                </p>\r\n                <button mat-flat-button (click)=\"clearSearch()\"\r\n                    [attr.aria-label]=\"'Clear search and show all accounts'\">\r\n                    Clear Search\r\n                </button>\r\n            </div>\r\n            } @else {\r\n            <p class=\"search-results-hint\">Click a result to load accounts for that category.</p>\r\n            <div class=\"search-results-grid\" role=\"list\">\r\n                @for (searchedItem of (searchedPaths$ | async); track searchedItem.join(':')) {\r\n\r\n                @defer (on viewport) {\r\n                <div class=\"path-result-item\" role=\"listitem\" (click)=\"selectPath(searchedItem)\"\r\n                    [attr.aria-label]=\"'Load accounts for: ' + searchedItem.join(' > ') + '. Click to select.'\"\r\n                    tabindex=\"0\" (keydown.enter)=\"selectPath(searchedItem)\"\r\n                    (keydown.space)=\"selectPath(searchedItem); $event.preventDefault()\">\r\n                    <div class=\"breadcrumb-container\">\r\n                        @for (part of searchedItem; track part; let last = $last) {\r\n                        <div class=\"crumb-segment\" [class.is-target]=\"last\">\r\n                            <span class=\"text-content\"\r\n                                [innerHTML]=\"accountSearchTextControl.value ? highlightSearchText(part, accountSearchTextControl.value) : part\">\r\n                            </span>\r\n                            @if (!last) {\r\n                            <mat-icon class=\"separator\" aria-hidden=\"true\">chevron_right</mat-icon>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <span class=\"path-result-meta\">Load accounts</span>\r\n                    <mat-icon class=\"path-result-arrow\" aria-hidden=\"true\">arrow_forward</mat-icon>\r\n                </div>\r\n                }@placeholder {\r\n                <div class=\"mat-spinner-container\">\r\n                    <mat-spinner diameter=\"16\" color=\"primary\" aria-label=\"Loading search result\"></mat-spinner>\r\n                </div>\r\n\r\n                }\r\n\r\n                }\r\n            </div>\r\n            }\r\n        </mat-nav-list>\r\n        }\r\n\r\n        <!-- Tree View -->\r\n        @else {\r\n        <!-- Breadcrumb: show current path when category selected (like file explorers) -->\r\n        @if (selectedTreeNode?.path?.length) {\r\n        <div class=\"tree-breadcrumb\" role=\"navigation\"\r\n            [attr.aria-label]=\"'Current category: ' + (selectedTreeNode?.path ?? []).join(' > ')\">\r\n            <span class=\"breadcrumb-label\">Category:</span>\r\n            @for (part of (selectedTreeNode?.path ?? []); track $index; let last = $last) {\r\n            <span class=\"breadcrumb-part\" [class.is-current]=\"last\">{{ part }}</span>\r\n            @if (!last) {\r\n            <mat-icon class=\"breadcrumb-sep\" aria-hidden=\"true\">chevron_right</mat-icon>\r\n            }\r\n            }\r\n        </div>\r\n        }\r\n        <!-- Compact Instructions - Collapsed by default -->\r\n        @if (noneIsExpanded) {\r\n        <mat-expansion-panel [expanded]=\"false\" class=\"instructions-panel compact-instructions\"\r\n            [attr.aria-label]=\"'How to use the account selector'\">\r\n            <mat-expansion-panel-header>\r\n                <mat-panel-title>\r\n                    <mat-icon class=\"instruction-icon\" aria-hidden=\"true\">info</mat-icon>\r\n                    <span>Quick tips</span>\r\n                </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <div class=\"instructions-content\">\r\n                <div class=\"instruction-item\">\r\n                    <mat-icon class=\"instruction-bullet\" aria-hidden=\"true\">folder_open</mat-icon>\r\n                    <span>Expand folders to browse</span>\r\n                </div>\r\n                <div class=\"instruction-item\">\r\n                    <mat-icon class=\"instruction-bullet\" aria-hidden=\"true\">check_box</mat-icon>\r\n                    <span>Check category to load accounts</span>\r\n                </div>\r\n                <div class=\"instruction-item\">\r\n                    <mat-icon class=\"instruction-bullet\" aria-hidden=\"true\">search</mat-icon>\r\n                    <span>Use search bar to find accounts</span>\r\n                </div>\r\n            </div>\r\n        </mat-expansion-panel>\r\n        }\r\n\r\n        <!-- Account Tree -->\r\n        <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" role=\"tree\"\r\n            [attr.aria-label]=\"'Account category tree'\">\r\n\r\n            <!-- Leaf Node (no children) -->\r\n            <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding role=\"treeitem\"\r\n                [attr.data-tree-path]=\"node.path?.join(':')\">\r\n                <button class=\"toggle-button\" mat-icon-button disabled aria-hidden=\"true\">\r\n                </button>\r\n                <mat-checkbox (change)=\"selectNode(node)\"\r\n                    [disabled]=\"isActivePathOrParent(node.path) && searchingAccounts\"\r\n                    [checked]=\"isActivePathOrParent(node.path)\"\r\n                    [attr.aria-label]=\"'Select ' + node.name + ' account category'\">\r\n                    @if (isActivePathOrParent(node.path) && searchingAccounts) {\r\n                    <mat-spinner color=\"primary\" class=\"loading\"\r\n                        [attr.aria-label]=\"'Loading accounts for ' + node.name\">\r\n                    </mat-spinner>\r\n                    <span class=\"label selected\" [attr.aria-live]=\"'polite'\">\r\n                        Loading <strong>{{ node.name }}</strong> accounts...\r\n                    </span>\r\n                    } @else {\r\n                    <span class=\"label\" [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                        {{ node.name }}\r\n                    </span>\r\n                    }\r\n                </mat-checkbox>\r\n            </mat-tree-node>\r\n\r\n            <!-- Branch Node (has children) -->\r\n            <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding role=\"treeitem\"\r\n                [attr.data-tree-path]=\"node.path?.join(':')\" [attr.aria-expanded]=\"treeControl.isExpanded(node)\">\r\n                <button class=\"toggle-button\" mat-icon-button\r\n                    [attr.aria-label]=\"(treeControl.isExpanded(node) ? 'Collapse' : 'Expand') + ' ' + node.name\"\r\n                    (click)=\"toggleNode(node)\" type=\"button\">\r\n                    <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                        {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n                    </mat-icon>\r\n                </button>\r\n\r\n                @if (isActivePathOrParent(node.path)) {\r\n                <mat-checkbox (change)=\"selectNode(node)\" [disabled]=\"true\" [checked]=\"true\"\r\n                    [attr.aria-label]=\"'Selected: ' + node.name\">\r\n                    <span class=\"label selected\">\r\n                        {{ node.name }}\r\n                    </span>\r\n                </mat-checkbox>\r\n                } @else {\r\n                <mat-checkbox (change)=\"selectNode(node)\" [checked]=\"false\"\r\n                    [attr.aria-label]=\"'Select ' + node.name + ' account category'\">\r\n                    <span class=\"label\">\r\n                        {{ node.name }}\r\n                    </span>\r\n                </mat-checkbox>\r\n                }\r\n            </mat-tree-node>\r\n        </mat-tree>\r\n        }\r\n\r\n    </div>\r\n</mat-drawer-container>\r\n}\r\n\r\n<mat-divider></mat-divider>\r\n\r\n<!-- Footer Actions -->\r\n<mat-dialog-actions style=\"    background: var(--mscoa-surface-container) !important;\" align=\"end\">\r\n    <button class=\"action-button close-button\" mat-button (click)=\"closeAndPassData(undefined)\"\r\n        [attr.aria-label]=\"'Close dialog without saving'\" type=\"button\">\r\n\r\n        Close\r\n    </button>\r\n    @if (userCanClearAccount ) {\r\n    <button class=\"action-button save-button\" mat-flat-button [disabled]=\"!saveSelection\" (click)=\"saveAccount()\"\r\n        [attr.aria-label]=\"saveSelection ? 'Save account selection' : 'Save disabled - account unchanged or invalid'\"\r\n        type=\"button\">\r\n        <mat-icon aria-hidden=\"true\">save</mat-icon>\r\n        Save\r\n    </button>\r\n    }\r\n\r\n</mat-dialog-actions>", styles: [":host{display:flex;flex-direction:column;max-height:98vh;overflow:hidden;min-height:0;--mscoa-primary: var(--mat-sys-primary, #243D91);--mscoa-primary-light: var(--mat-sys-primary-container, #E3F2FD);--mscoa-primary-dark: var(--mat-sys-primary, #1A2E6B);--mscoa-success: var(--mat-sys-success, #4CAF50);--mscoa-error: var(--mat-sys-error, #F44336);--mscoa-warning: var(--mat-sys-warning, #FF9800);--mscoa-info: var(--mat-sys-primary, #2196F3);--mscoa-surface: var(--mat-sys-surface, #FFFFFF);--mscoa-surface-container: var(--mat-sys-surface-container, #F5F5F5);--mscoa-text-primary: var(--mat-sys-on-surface, #212121);--mscoa-text-secondary: var(--mat-sys-on-surface-variant, #757575);--mscoa-divider: var(--mat-sys-outline-variant, #E0E0E0);--mscoa-spacing-xs: 4px;--mscoa-spacing-sm: 8px;--mscoa-spacing-md: 16px;--mscoa-spacing-lg: 24px;--mscoa-spacing-xl: 32px;--mscoa-elevation-1: 0 1px 3px rgba(0,0,0,.12);--mscoa-elevation-2: 0 2px 6px rgba(0,0,0,.12);--mscoa-elevation-4: 0 4px 12px rgba(0,0,0,.12);--mscoa-computation-spacing-xs: var(--mscoa-spacing-xs);--mscoa-computation-spacing-sm: var(--mscoa-spacing-sm);--mscoa-computation-spacing-md: var(--mscoa-spacing-md);--mscoa-computation-spacing-lg: var(--mscoa-spacing-lg);--mscoa-computation-toolbar-height: 56px;--mscoa-header-height: 56px;--mscoa-search-height: 56px;--mscoa-footer-height: 58px;--mscoa-divider-height: 1px;--mscoa-computation-selected-color: var(--mscoa-primary);--mscoa-computation-border-radius: 16px;--mscoa-computation-transition: .2s ease}mat-divider{flex-shrink:0}h4{margin-top:0;margin-bottom:0;padding-left:var(--mscoa-computation-spacing-md)}.label{font-size:.875em}.selected{color:var(--mscoa-primary)!important;font-weight:600;background-color:transparent}.mat-tree-node.tree-node-selected,.mat-tree-node[aria-selected=true]{background:linear-gradient(90deg,var(--mat-sys-primary-container, var(--mscoa-primary-light)) 0%,transparent 100%)!important;box-shadow:inset 3px 0 0 var(--mat-sys-primary, var(--mscoa-primary));border-radius:0 4px 4px 0}.mat-tree-node:hover:not(.tree-node-selected):not(:has(.selected)){background-color:#00000008;transition:background-color var(--mscoa-computation-transition)}mat-tree-node{transition:all var(--mscoa-computation-transition)}mat-tree-node:has(.selected){background:linear-gradient(90deg,var(--mat-sys-primary-container, var(--mscoa-primary-light)) 0%,transparent 100%)!important;box-shadow:inset 3px 0 0 var(--mat-sys-primary, var(--mscoa-primary));border-radius:0 4px 4px 0}mat-tree-node:hover:not(:has(.selected)){background-color:#00000008}mat-tree-node mat-checkbox[checked=true] ::ng-deep .mdc-checkbox{background-color:var(--mscoa-primary, #243D91)!important;border-color:var(--mscoa-primary, #243D91)!important}.accountSeperator{margin-left:var(--mscoa-computation-spacing-xs);margin-right:var(--mscoa-computation-spacing-xs)}.loading{width:24px!important;height:24px!important;--mdc-circular-progress-size: 28px !important;--mdc-circular-progress-active-indicator-width: 24px !important;position:absolute;left:var(--mscoa-computation-spacing-sm);bottom:var(--mscoa-computation-spacing-sm)}.info{font-size:.875rem;opacity:.8;padding-left:var(--mscoa-computation-spacing-md);border-radius:4px;margin-top:10px;line-height:1.6;max-width:500px}.info strong{opacity:1}.toggle-button{height:28px;width:28px;padding:0;margin-right:var(--mscoa-computation-spacing-xs);margin-left:var(--mscoa-computation-spacing-xs)}.toggle-button:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:2px;border-radius:4px}mat-tree{flex:1;min-height:280px;min-width:0;overflow:auto;padding:var(--mscoa-computation-spacing-md)!important;background:none}mat-tree::-webkit-scrollbar{width:8px;height:8px}mat-tree::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:4px}mat-tree::-webkit-scrollbar-thumb{background:var(--mscoa-text-secondary, #757575);border-radius:4px;opacity:.5}mat-tree::-webkit-scrollbar-thumb:hover{opacity:.8;background:var(--mscoa-primary, #243D91)}mat-tree{scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}mat-tree-node{display:flex;align-items:flex-start;min-height:28px;padding-right:var(--mscoa-computation-spacing-md)!important;padding-top:2px!important;padding-bottom:2px!important;box-sizing:border-box;width:100%;transition:background-color var(--mscoa-computation-transition)}mat-tree-node:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:-2px;border-radius:4px}mat-tree-node:hover:not(:has(.selected)){background-color:#0000000a}.mat-tree-node{display:flex;align-items:center;flex-wrap:nowrap;min-height:28px;padding:var(--mscoa-computation-spacing-xs) 0;box-sizing:border-box;transition:background-color var(--mscoa-computation-transition),border-color var(--mscoa-computation-transition);border-radius:4px;margin:1px 0}.mat-tree-node:hover:not(.tree-node-selected):not(:has(.selected)){background-color:#0000000a}.mat-tree-node button,.mat-tree-node mat-checkbox{flex-shrink:0;height:28px}.mat-tree-node mat-checkbox{display:flex;align-items:center;height:28px;min-height:fit-content;flex:1;min-width:0}.mat-tree-node .label{flex:1;min-width:0;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;overflow:visible}.header-toolbar{flex-shrink:0;background:var(--mscoa-surface-container)!important;box-shadow:var(--mscoa-elevation-2);border-bottom:1px solid var(--mscoa-divider)}.glass{background:#ffffff26;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2)}@media(prefers-reduced-motion:reduce){.glass{backdrop-filter:none;-webkit-backdrop-filter:none}}.main-toolbar{min-width:0;padding-top:var(--mscoa-computation-spacing-md);min-height:var(--mscoa-computation-toolbar-height);overflow:hidden}.main-toolbar .toolbar-title{font-size:18px;font-weight:500;color:var(--mscoa-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-toolbar{flex-shrink:0;height:var(--mscoa-computation-toolbar-height);min-width:0;overflow:hidden}.search-toolbar .search-field{flex:1;width:100%;max-width:100%;min-width:0;border-radius:var(--mscoa-computation-border-radius);overflow:clip}.search-toolbar .search-field.search-disabled ::ng-deep .mat-mdc-text-field-wrapper{background-color:var(--mscoa-surface-container)!important;border:1px dashed var(--mscoa-divider)}.search-toolbar .search-field.search-disabled ::ng-deep .mat-mdc-form-field-label{color:var(--mscoa-text-secondary)!important}.search-toolbar .search-field.search-disabled ::ng-deep input{cursor:not-allowed;color:var(--mscoa-text-secondary)!important}.search-toolbar .search-field.search-disabled ::ng-deep button{opacity:.5;cursor:not-allowed}.search-toolbar .search-field.search-disabled ::ng-deep .mat-mdc-form-field-hint{color:var(--mscoa-text-secondary);font-size:.75rem}.tree-breadcrumb{flex-shrink:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--mscoa-spacing-xs, 4px);padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);margin:0 var(--mscoa-spacing-md, 16px) var(--mscoa-spacing-sm, 8px);background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:6px;border-left:3px solid var(--mat-sys-primary, var(--mscoa-primary, #243D91));font-size:.8125rem;line-height:1.4;max-width:500px}.tree-breadcrumb .breadcrumb-label{color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));font-weight:500;margin-right:var(--mscoa-spacing-xs, 4px)}.tree-breadcrumb .breadcrumb-part{color:var(--mat-sys-on-surface, var(--mscoa-text-primary, #212121))}.tree-breadcrumb .breadcrumb-part.is-current{font-weight:600;color:var(--mat-sys-primary, var(--mscoa-primary, #243D91))}.tree-breadcrumb .breadcrumb-sep{font-size:16px;width:16px;height:16px;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));margin:0 var(--mscoa-spacing-xs, 4px)}.search-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--mscoa-spacing-sm, 8px);overflow-y:auto;flex:1;min-height:0;padding:var(--mscoa-spacing-xs, 4px) 0}.search-results-grid::-webkit-scrollbar{width:6px}.search-results-grid::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, var(--mscoa-surface-container));border-radius:3px}.search-results-grid::-webkit-scrollbar-thumb{background:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary));border-radius:3px;opacity:.5}.search-results-grid::-webkit-scrollbar-thumb:hover{opacity:.8;background:var(--mat-sys-primary, var(--mscoa-primary))}.search-results-grid{scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}.path-result-item{cursor:pointer;transition:background-color var(--mscoa-computation-transition);min-height:56px;padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);padding-right:40px;border-radius:8px;border:1px solid var(--mat-sys-outline-variant, var(--mscoa-divider));background:var(--mat-sys-surface, var(--mscoa-surface));display:flex;flex-direction:column;gap:4px;align-items:flex-start;position:relative}.path-result-item:hover,.path-result-item:focus-visible{background-color:var(--mat-sys-surface-container, rgba(0, 0, 0, .04));outline:none}.path-result-item:hover .breadcrumb-container,.path-result-item:focus-visible .breadcrumb-container{flex-wrap:wrap}.path-result-item:hover .breadcrumb-container .text-content,.path-result-item:focus-visible .breadcrumb-container .text-content{white-space:normal;max-width:none}.path-result-item:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:-2px}.path-result-arrow{position:absolute;right:var(--mscoa-spacing-sm);top:50%;transform:translateY(-50%);font-size:18px;width:18px;height:18px;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary))}.breadcrumb-container{display:flex;align-items:center;flex-wrap:wrap;overflow:hidden;width:100%}.crumb-segment{display:flex;align-items:center;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #6c757d));white-space:nowrap;overflow:hidden;max-width:100%}.crumb-segment .text-content{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:150px;vertical-align:middle}.crumb-segment .separator{font-size:1em;height:16px;width:16px;margin:0 var(--mscoa-computation-spacing-xs);color:var(--mat-sys-outline-variant, var(--mscoa-divider, #bdbdbd));flex-shrink:0}.crumb-segment.is-target{color:var(--mat-sys-on-surface, var(--mscoa-text-primary, #000));font-weight:500;flex-shrink:0}.crumb-segment.is-target .text-content{color:var(--mat-sys-on-surface, var(--mscoa-text-primary, #000));max-width:none}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mscoa-computation-spacing-lg);text-align:center;gap:var(--mscoa-computation-spacing-md)}.empty-state .empty-icon{font-size:48px;width:48px;height:48px;opacity:.5}.empty-state .empty-message{margin:0;font-size:14px}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mscoa-computation-spacing-lg);text-align:center;gap:var(--mscoa-computation-spacing-md)}.error-container .error-icon{font-size:48px;width:48px;height:48px;color:var(--mat-sys-error)}.error-container .error-message{margin:0;font-size:14px;color:var(--mat-sys-error)}mark{background-color:#ffeb3b;color:inherit;padding:0;font-weight:500}.instructions-panel{flex-shrink:0;margin:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);margin-bottom:var(--mscoa-spacing-xs, 4px);box-shadow:var(--mscoa-elevation-1);border-radius:6px;overflow:hidden;background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));transition:box-shadow var(--mscoa-computation-transition)}.instructions-panel.compact-instructions ::ng-deep .mat-expansion-panel-header{padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px)!important;min-height:40px!important;height:auto!important}.instructions-panel.compact-instructions ::ng-deep .mat-expansion-panel-body{padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px)!important}.instructions-panel:hover{box-shadow:var(--mscoa-elevation-2)}.instructions-panel ::ng-deep .mat-expansion-panel-header{padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);background:var(--mscoa-surface-container, #F5F5F5)!important}.instructions-panel ::ng-deep .mat-expansion-panel-header:hover{background:var(--mat-sys-surface, var(--mscoa-surface, #FFFFFF))!important}.instructions-panel ::ng-deep .mat-expansion-panel-body{padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px)!important;background:var(--mat-sys-surface, var(--mscoa-surface, #FFFFFF))}.instructions-panel .instruction-icon{margin-right:var(--mscoa-spacing-xs, 4px);color:var(--mscoa-info, #2196F3);font-size:18px;width:18px;height:18px}.instructions-panel .instructions-content{padding:var(--mscoa-spacing-xs, 4px) 0;display:flex;flex-direction:column;gap:var(--mscoa-spacing-xs, 4px)}.instructions-panel .instruction-item{display:flex;align-items:center;gap:var(--mscoa-spacing-xs, 4px);font-size:.75rem;line-height:1.4;padding:var(--mscoa-spacing-xs, 4px);border-radius:4px;transition:background-color var(--mscoa-computation-transition)}.instructions-panel .instruction-item:hover{background-color:var(--mscoa-primary-light, #E3F2FD)}.instructions-panel .instruction-item .instruction-bullet{font-size:16px;width:16px;height:16px;color:var(--mscoa-primary, #243D91);flex-shrink:0}.instructions-panel .instruction-item span{flex:1}.instructions-panel .instruction-item span strong{font-weight:600}.search-results-header{display:flex;align-items:center;gap:var(--mscoa-computation-spacing-sm)}.search-results-header .search-icon{margin-right:var(--mscoa-computation-spacing-sm)}.search-results-list{padding:var(--mscoa-computation-spacing-md);display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.search-results-hint{font-size:.75rem;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));margin:0 var(--mscoa-spacing-md, 16px) var(--mscoa-spacing-sm, 8px);padding:var(--mscoa-spacing-xs, 4px) 0}.path-result-meta{font-size:.6875rem;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));text-transform:uppercase;letter-spacing:.3px}.mat-mdc-subheader{position:sticky;top:0;z-index:10;background:var(--mat-sys-surface-container)}.count-badge{margin-left:auto;font-weight:400;opacity:.7;font-size:.9em}.drawer-container{flex:1;min-height:0;overflow:hidden;max-width:100%;background:var(--mat-sys-surface-container)!important;display:flex}.drawer-container ::ng-deep .mat-drawer-content{min-height:0;overflow:auto;height:calc(100vh - 220px);flex:1 1 30%;min-width:260px}.account-drawer{min-width:420px;max-width:min(700px,65vw)!important;width:520px!important;overflow:hidden;display:flex;flex-direction:column;background:var(--mat-sys-surface-container)!important;padding:var(--mscoa-computation-spacing-md)}.account-drawer app-scoa-account-table{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}.account-drawer .loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mscoa-computation-spacing-lg);gap:var(--mscoa-computation-spacing-md)}.account-drawer .loading-container p{margin:0;font-size:.875rem}.skeleton-row{display:flex;align-items:center;padding:var(--mscoa-spacing-sm) var(--mscoa-spacing-md);gap:var(--mscoa-spacing-md);animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-row .skeleton-checkbox{width:20px;height:20px;border-radius:4px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%}.skeleton-row .skeleton-text{flex:1;height:16px;border-radius:4px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%}.skeleton-row .skeleton-text.short{width:60%}.skeleton-row .skeleton-text.medium{width:80%}@keyframes skeleton-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-table .skeleton-row{border-bottom:1px solid var(--mscoa-divider)}.skeleton-table .skeleton-row:last-child{border-bottom:none}.account-details-container{flex:1;min-height:0;max-width:520px;margin:0 auto;width:100%;background:#ffffff1c;-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);padding:var(--mscoa-spacing-xs, 4px);border:1px solid rgba(255,255,255,.3);border:1px solid var(--mat-sys-outline-variant, var(--mscoa-divider, #E0E0E0));border-radius:8px;overflow-y:auto}.account-details-container::-webkit-scrollbar{width:6px}.account-details-container::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:3px}.account-details-container::-webkit-scrollbar-thumb{background:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));border-radius:3px;opacity:.5}.account-details-container::-webkit-scrollbar-thumb:hover{opacity:.8;background:var(--mat-sys-primary, var(--mscoa-primary, #243D91))}.account-details-container{scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}.account-details-container ::ng-deep app-account-value{max-width:100%}.account-details-container ::ng-deep app-account-value mat-toolbar{background:var(--mat-sys-surface-container, var(--mscoa-surface-container))!important;box-shadow:var(--mscoa-elevation-1);margin-bottom:0;border-radius:8px 8px 0 0}.account-details-container ::ng-deep app-account-value .account-grid{gap:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px);padding:var(--mscoa-spacing-sm, 8px);background:var(--mat-sys-surface, var(--mscoa-surface));border-radius:0 0 8px 8px;box-shadow:var(--mscoa-elevation-1)}.tree-content{min-height:280px;flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;padding-right:var(--mscoa-computation-spacing-sm)}.footer-toolbar{flex-shrink:0;height:fit-content;padding-top:var(--mscoa-computation-spacing-md)!important;padding-bottom:var(--mscoa-computation-spacing-md)!important;min-height:58px;box-shadow:0 -2px 8px #0000000d}.footer-toolbar .footer-actions{display:flex;width:100%;gap:var(--mscoa-computation-spacing-sm);flex-direction:column;min-height:58px}.footer-toolbar .footer-actions .action-button{width:100%;font-weight:500;transition:all .2s ease}.footer-toolbar .footer-actions .action-button:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:2px}.footer-toolbar .footer-actions .action-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--mscoa-elevation-2)}.footer-toolbar .footer-actions .action-button:active:not(:disabled){transform:translateY(0)}.footer-toolbar .footer-actions .action-button[disabled]{opacity:.5;cursor:not-allowed}.footer-toolbar .footer-actions .save-button{background-color:var(--mscoa-primary, #243D91)!important;color:#fff!important}@media(min-width:768px){.footer-actions{flex-direction:row}.footer-actions .action-button{width:auto;min-width:120px}.drawer-container{display:flex}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$2.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: "directive", type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: i7$1.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i10$2.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i10$2.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i12.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i12.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: i12.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i12.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i13.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: "component", type: AccountValueComponent, selector: "app-account-value", inputs: ["mscoaAccount", "accountInputs", "userCanClearAccount"], outputs: ["clearSelectedAccount", "updateAccount"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ScoaAccountTableComponent, selector: "app-scoa-account-table", inputs: ["data", "selectedAccount", "segment"], outputs: ["accountSelected"] }, { kind: "ngmodule", type: _InternalFormsSharedModule }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.UpperCasePipe, name: "uppercase" }], deferBlockDependencies: [() => [i3.MatIcon]] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MscoaComputationComponent, decorators: [{
             type: Component,
@@ -9223,7 +9742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         MatModulesModule,
                         AccountValueComponent,
                         ReactiveFormsModule,
-                        ScoaAccountTableComponent, _InternalFormsSharedModule], template: "<!-- Header Toolbar -->\r\n<mat-toolbar class=\"main-toolbar header-toolbar\" role=\"banner\">\r\n    <span class=\"toolbar-title\">\r\n        {{ (segment || 'No segment') | uppercase }} : {{ activeColumn | uppercase }} ACCOUNT\r\n    </span>\r\n    <span class=\"spacer\"></span>\r\n    @if (selectedAccount) {\r\n        <button \r\n            mat-flat-button \r\n            (click)=\"clearSelectedAccount(); cancel()\"\r\n            [attr.aria-label]=\"'Change account'\">\r\n            <mat-icon>arrow_back</mat-icon>\r\n            Change Account\r\n        </button>\r\n    }\r\n</mat-toolbar>\r\n\r\n<!-- Search Bar - Hidden when account selected -->\r\n@if (!selectedAccount) {\r\n    <mat-toolbar class=\"main-toolbar header-toolbar search-toolbar\" role=\"search\">\r\n        <mat-form-field [subscriptSizing]=\"'dynamic'\" class=\"search-field\">\r\n            <mat-label position=\"floating\">Search {{ segment || 'account' }} : {{ activeColumn || '' }} Account</mat-label>\r\n            <input \r\n                matInput \r\n                [formControl]=\"accountSearchTextControl\"\r\n                [placeholder]=\"('Search ' + segment + ' : ' + activeColumn + ' Account').toUpperCase()\"\r\n                [attr.aria-label]=\"'Search for account'\"\r\n                autocomplete=\"off\">\r\n            <button \r\n                mat-icon-button \r\n                matSuffix \r\n                (click)=\"clearSearch()\"\r\n                [attr.aria-label]=\"'Clear search'\"\r\n                type=\"button\">\r\n                <mat-icon>close</mat-icon>\r\n            </button>\r\n        </mat-form-field>\r\n    </mat-toolbar>\r\n}\r\n\r\n<mat-divider></mat-divider>\r\n\r\n<!-- Account Details View -->\r\n@if (selectedAccount) {\r\n    <div class=\"account-details-container\" role=\"region\" [attr.aria-label]=\"'Account details'\">\r\n        <app-account-value \r\n            [accountInputs]=\"accountInputs\" \r\n            [userCanClearAccount]=\"userCanClearAccount\"\r\n            [mscoaAccount]=\"selectedAccount\" \r\n            (updateAccount)=\"updateAccount($event)\"\r\n            (clearSelectedAccount)=\"clearSelectedAccount()\">\r\n        </app-account-value>\r\n    </div>\r\n} @else {\r\n    <!-- Main Content Area with Drawer -->\r\n    <mat-drawer-container \r\n        class=\"drawer-container\"\r\n        [attr.aria-label]=\"'Account selection interface'\">\r\n        <!-- Account Table Drawer -->\r\n        <mat-drawer \r\n            #drawer \r\n            class=\"account-drawer\"\r\n            mode=\"side\" \r\n            position=\"end\"\r\n        [opened]=\"!searchingAccounts && !!selectedTreeNode && !accountSearchTextControl.value\">\r\n\r\n\r\n\r\n\r\n            @if (searchingAccounts) {\r\n                <div class=\"loading-container skeleton-table\" role=\"status\" [attr.aria-live]=\"'polite'\">\r\n                    @for (item of [1,2,3,4,5]; track item) {\r\n                        <div class=\"skeleton-row\">\r\n                            <div class=\"skeleton-checkbox\"></div>\r\n                            <div class=\"skeleton-text short\"></div>\r\n                            <div class=\"skeleton-text medium\"></div>\r\n                            <div class=\"skeleton-text\"></div>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            } @else if (hasError) {\r\n                <div class=\"error-container\" role=\"alert\" [attr.aria-live]=\"'assertive'\">\r\n                    <mat-icon class=\"error-icon\" aria-hidden=\"true\">error</mat-icon>\r\n                    <p class=\"error-message\">{{ errorMessage }}</p>\r\n                    <button \r\n                        mat-flat-button \r\n                        color=\"primary\"\r\n                        (click)=\"retryLoadAccounts()\"\r\n                        [attr.aria-label]=\"'Retry loading accounts'\">\r\n                        <mat-icon aria-hidden=\"true\">refresh</mat-icon>\r\n                        Retry\r\n                    </button>\r\n                </div>\r\n            } @else if (searchAccounts.length === 0 && selectedTreeNode) {\r\n                <div class=\"empty-state\" role=\"status\" [attr.aria-live]=\"'polite'\">\r\n                    <mat-icon class=\"empty-icon\" aria-hidden=\"true\">info</mat-icon>\r\n                    <p class=\"empty-message\">No accounts found for this category.</p>\r\n                </div>\r\n            } @else {\r\n                <app-scoa-account-table \r\n                    [selectedAccount]=\"selectedAccount\" \r\n                    [segment]=\"segment\"\r\n                    (accountSelected)=\"selectAccount($event)\" \r\n                    [data]=\"{\r\n                        accounts: searchAccounts,\r\n                        account: currentAccountPath || ''\r\n                    }\">\r\n                </app-scoa-account-table>\r\n            }\r\n        </mat-drawer>\r\n        <!-- Tree Content Area -->\r\n        <div class=\"tree-content\" role=\"main\">\r\n\r\n            <!-- Search Results View -->\r\n            @if (accountSearchTextControl.value) {\r\n                <mat-nav-list class=\"search-results-list\" role=\"list\">\r\n                    <div mat-subheader class=\"search-results-header\">\r\n                        <mat-icon class=\"search-icon\">search</mat-icon>\r\n                        Search Results\r\n                        <span class=\"count-badge\" [attr.aria-label]=\"'Number of results'\">\r\n                            ({{ (searchedPaths$ | async)?.length || 0 }})\r\n                        </span>\r\n                    </div>\r\n                    \r\n                    @if ((searchedPaths$ | async)?.length === 0) {\r\n                        <!-- Empty Search Results -->\r\n                        <div class=\"empty-state\" role=\"status\" [attr.aria-live]=\"'polite'\">\r\n                            <mat-icon class=\"empty-icon\" aria-hidden=\"true\">search_off</mat-icon>\r\n                            <p class=\"empty-message\">\r\n                                No account found for the search\r\n                                <strong>{{ accountSearchTextControl.value }}</strong>.\r\n                            </p>\r\n                            <button \r\n                                mat-flat-button \r\n                                (click)=\"clearSearch()\"\r\n                                [attr.aria-label]=\"'Clear search and show all accounts'\">\r\n                                Clear Search\r\n                            </button>\r\n                        </div>\r\n                    } @else {\r\n                        <p class=\"search-results-hint\">Click a result to load accounts for that category.</p>\r\n                        <div class=\"search-results-grid\" role=\"list\">\r\n                            @for (searchedItem of (searchedPaths$ | async); track searchedItem.join(':')) {\r\n                                <div \r\n                                    class=\"path-result-item\"\r\n                                    role=\"listitem\"\r\n                                    (click)=\"selectPath(searchedItem)\" \r\n                                    [attr.aria-label]=\"'Load accounts for: ' + searchedItem.join(' > ') + '. Click to select.'\"\r\n                                    tabindex=\"0\"\r\n                                    (keydown.enter)=\"selectPath(searchedItem)\"\r\n                                    (keydown.space)=\"selectPath(searchedItem); $event.preventDefault()\">\r\n                                    <div class=\"breadcrumb-container\">\r\n                                        @for (part of searchedItem; track part; let last = $last) {\r\n                                            <div class=\"crumb-segment\" [class.is-target]=\"last\">\r\n                                                <span \r\n                                                    class=\"text-content\" \r\n                                                    [innerHTML]=\"accountSearchTextControl.value ? highlightSearchText(part, accountSearchTextControl.value) : part\">\r\n                                                </span>\r\n                                                @if (!last) {\r\n                                                    <mat-icon class=\"separator\" aria-hidden=\"true\">chevron_right</mat-icon>\r\n                                                }\r\n                                            </div>\r\n                                        }\r\n                                    </div>\r\n                                    <span class=\"path-result-meta\">Load accounts</span>\r\n                                    <mat-icon class=\"path-result-arrow\" aria-hidden=\"true\">arrow_forward</mat-icon>\r\n                                </div>\r\n                            }\r\n                        </div>\r\n                    }\r\n                </mat-nav-list>\r\n            }\r\n\r\n            <!-- Tree View -->\r\n            @else {\r\n                <!-- Breadcrumb: show current path when category selected (like file explorers) -->\r\n                @if (selectedTreeNode?.path?.length) {\r\n                    <div class=\"tree-breadcrumb\" role=\"navigation\" [attr.aria-label]=\"'Current category: ' + (selectedTreeNode?.path ?? []).join(' > ')\">\r\n                        <span class=\"breadcrumb-label\">Category:</span>\r\n                        @for (part of (selectedTreeNode?.path ?? []); track $index; let last = $last) {\r\n                            <span class=\"breadcrumb-part\" [class.is-current]=\"last\">{{ part }}</span>\r\n                            @if (!last) {\r\n                                <mat-icon class=\"breadcrumb-sep\" aria-hidden=\"true\">chevron_right</mat-icon>\r\n                            }\r\n                        }\r\n                    </div>\r\n                }\r\n                <!-- Compact Instructions - Collapsed by default -->\r\n                @if (noneIsExpanded) {\r\n                    <mat-expansion-panel \r\n                        [expanded]=\"false\"\r\n                        class=\"instructions-panel compact-instructions\"\r\n                        [attr.aria-label]=\"'How to use the account selector'\">\r\n                        <mat-expansion-panel-header>\r\n                            <mat-panel-title>\r\n                                <mat-icon class=\"instruction-icon\" aria-hidden=\"true\">info</mat-icon>\r\n                                <span>Quick tips</span>\r\n                            </mat-panel-title>\r\n                        </mat-expansion-panel-header>\r\n                        <div class=\"instructions-content\">\r\n                            <div class=\"instruction-item\">\r\n                                <mat-icon class=\"instruction-bullet\" aria-hidden=\"true\">folder_open</mat-icon>\r\n                                <span>Expand folders to browse</span>\r\n                            </div>\r\n                            <div class=\"instruction-item\">\r\n                                <mat-icon class=\"instruction-bullet\" aria-hidden=\"true\">check_box</mat-icon>\r\n                                <span>Check category to load accounts</span>\r\n                            </div>\r\n                            <div class=\"instruction-item\">\r\n                                <mat-icon class=\"instruction-bullet\" aria-hidden=\"true\">search</mat-icon>\r\n                                <span>Use search bar to find accounts</span>\r\n                            </div>\r\n                        </div>\r\n                    </mat-expansion-panel>\r\n                }\r\n\r\n                <!-- Account Tree -->\r\n                <mat-tree \r\n                \r\n                    [dataSource]=\"dataSource\" \r\n                    [treeControl]=\"treeControl\"\r\n                    role=\"tree\"\r\n                    [attr.aria-label]=\"'Account category tree'\">\r\n                    \r\n                    <!-- Leaf Node (no children) -->\r\n                    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding role=\"treeitem\" \r\n                    [attr.data-tree-path]=\"node.path?.join(':')\">\r\n                        <button \r\n                            class=\"toggle-button\" \r\n                            mat-icon-button \r\n                            disabled\r\n                            aria-hidden=\"true\">\r\n                        </button>\r\n                        <mat-checkbox \r\n                            (change)=\"selectNode(node)\"\r\n                            [disabled]=\"isActivePathOrParent(node.path) && searchingAccounts\"\r\n                            [checked]=\"isActivePathOrParent(node.path)\"\r\n                            [attr.aria-label]=\"'Select ' + node.name + ' account category'\">\r\n                            @if (isActivePathOrParent(node.path) && searchingAccounts) {\r\n                                <mat-spinner \r\n                                    color=\"primary\" \r\n                                    class=\"loading\"\r\n                                    [attr.aria-label]=\"'Loading accounts for ' + node.name\">\r\n                                </mat-spinner>\r\n                                <span class=\"label selected\" [attr.aria-live]=\"'polite'\">\r\n                                    Loading <strong>{{ node.name }}</strong> accounts...\r\n                                </span>\r\n                            } @else {\r\n                                <span \r\n                                    class=\"label\" \r\n                                    [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                                    {{ node.name }}\r\n                                </span>\r\n                            }\r\n                        </mat-checkbox>\r\n                    </mat-tree-node>\r\n\r\n                    <!-- Branch Node (has children) -->\r\n                    <mat-tree-node \r\n                        *matTreeNodeDef=\"let node; when: hasChild\" \r\n                        matTreeNodePadding \r\n                        role=\"treeitem\"\r\n                        [attr.data-tree-path]=\"node.path?.join(':')\"\r\n                        [attr.aria-expanded]=\"treeControl.isExpanded(node)\">\r\n                        <button \r\n                            class=\"toggle-button\" \r\n                            mat-icon-button \r\n                            [attr.aria-label]=\"(treeControl.isExpanded(node) ? 'Collapse' : 'Expand') + ' ' + node.name\"\r\n                            (click)=\"toggleNode(node)\"\r\n                            type=\"button\">\r\n                            <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                                {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n                            </mat-icon>\r\n                        </button>\r\n                        \r\n                        @if (isActivePathOrParent(node.path)) {\r\n                            <mat-checkbox \r\n                                (change)=\"selectNode(node)\" \r\n                                [disabled]=\"true\" \r\n                                [checked]=\"true\"\r\n                                [attr.aria-label]=\"'Selected: ' + node.name\">\r\n                                <span class=\"label selected\">\r\n                                    {{ node.name }}\r\n                                </span>\r\n                            </mat-checkbox>\r\n                        } @else {\r\n                            <mat-checkbox \r\n                                (change)=\"selectNode(node)\"\r\n                                [checked]=\"false\"\r\n                                [attr.aria-label]=\"'Select ' + node.name + ' account category'\">\r\n                                <span class=\"label\">\r\n                                    {{ node.name }}\r\n                                </span>\r\n                            </mat-checkbox>\r\n                        }\r\n                    </mat-tree-node>\r\n                </mat-tree>\r\n            }\r\n\r\n        </div>\r\n    </mat-drawer-container>\r\n}\r\n\r\n<mat-divider></mat-divider>\r\n\r\n<!-- Footer Actions -->\r\n<mat-dialog-actions\r\nstyle=\"    background: var(--mscoa-surface-container) !important;\"\r\nalign=\"end\">\r\n<button \r\nclass=\"action-button close-button\"\r\nmat-button \r\n(click)=\"closeAndPassData(undefined)\"\r\n[attr.aria-label]=\"'Close dialog without saving'\"\r\ntype=\"button\">\r\n\r\nClose\r\n</button>\r\n    @if (userCanClearAccount ) {\r\n        <button \r\n            class=\"action-button save-button\"\r\n            mat-flat-button \r\n            [disabled]=\"!saveSelection\" \r\n            (click)=\"saveAccount()\"\r\n            [attr.aria-label]=\"saveSelection ? 'Save account selection' : 'Save disabled - account unchanged or invalid'\"\r\n            type=\"button\">\r\n            <mat-icon aria-hidden=\"true\">save</mat-icon>\r\n            Save\r\n        </button>\r\n    }\r\n \r\n    </mat-dialog-actions>\r\n", styles: [":host{display:flex;flex-direction:column;max-height:98vh;overflow:hidden;min-height:0;--mscoa-primary: var(--mat-sys-primary, #243D91);--mscoa-primary-light: var(--mat-sys-primary-container, #E3F2FD);--mscoa-primary-dark: var(--mat-sys-primary, #1A2E6B);--mscoa-success: var(--mat-sys-success, #4CAF50);--mscoa-error: var(--mat-sys-error, #F44336);--mscoa-warning: var(--mat-sys-warning, #FF9800);--mscoa-info: var(--mat-sys-primary, #2196F3);--mscoa-surface: var(--mat-sys-surface, #FFFFFF);--mscoa-surface-container: var(--mat-sys-surface-container, #F5F5F5);--mscoa-text-primary: var(--mat-sys-on-surface, #212121);--mscoa-text-secondary: var(--mat-sys-on-surface-variant, #757575);--mscoa-divider: var(--mat-sys-outline-variant, #E0E0E0);--mscoa-spacing-xs: 4px;--mscoa-spacing-sm: 8px;--mscoa-spacing-md: 16px;--mscoa-spacing-lg: 24px;--mscoa-spacing-xl: 32px;--mscoa-elevation-1: 0 1px 3px rgba(0,0,0,.12);--mscoa-elevation-2: 0 2px 6px rgba(0,0,0,.12);--mscoa-elevation-4: 0 4px 12px rgba(0,0,0,.12);--mscoa-computation-spacing-xs: var(--mscoa-spacing-xs);--mscoa-computation-spacing-sm: var(--mscoa-spacing-sm);--mscoa-computation-spacing-md: var(--mscoa-spacing-md);--mscoa-computation-spacing-lg: var(--mscoa-spacing-lg);--mscoa-computation-toolbar-height: 56px;--mscoa-header-height: 56px;--mscoa-search-height: 56px;--mscoa-footer-height: 58px;--mscoa-divider-height: 1px;--mscoa-computation-selected-color: var(--mscoa-primary);--mscoa-computation-border-radius: 16px;--mscoa-computation-transition: .2s ease}mat-divider{flex-shrink:0}h4{margin-top:0;margin-bottom:0;padding-left:var(--mscoa-computation-spacing-md)}.label{font-size:.875em}.selected{color:var(--mscoa-primary)!important;font-weight:600;background-color:transparent}.mat-tree-node.tree-node-selected,.mat-tree-node[aria-selected=true]{background:linear-gradient(90deg,var(--mat-sys-primary-container, var(--mscoa-primary-light)) 0%,transparent 100%)!important;box-shadow:inset 3px 0 0 var(--mat-sys-primary, var(--mscoa-primary));border-radius:0 4px 4px 0}.mat-tree-node:hover:not(.tree-node-selected):not(:has(.selected)){background-color:#00000008;transition:background-color var(--mscoa-computation-transition)}mat-tree-node{transition:all var(--mscoa-computation-transition)}mat-tree-node:has(.selected){background:linear-gradient(90deg,var(--mat-sys-primary-container, var(--mscoa-primary-light)) 0%,transparent 100%)!important;box-shadow:inset 3px 0 0 var(--mat-sys-primary, var(--mscoa-primary));border-radius:0 4px 4px 0}mat-tree-node:hover:not(:has(.selected)){background-color:#00000008}mat-tree-node mat-checkbox[checked=true] ::ng-deep .mdc-checkbox{background-color:var(--mscoa-primary, #243D91)!important;border-color:var(--mscoa-primary, #243D91)!important}.accountSeperator{margin-left:var(--mscoa-computation-spacing-xs);margin-right:var(--mscoa-computation-spacing-xs)}.loading{width:24px!important;height:24px!important;--mdc-circular-progress-size: 28px !important;--mdc-circular-progress-active-indicator-width: 24px !important;position:absolute;left:var(--mscoa-computation-spacing-sm);bottom:var(--mscoa-computation-spacing-sm)}.info{font-size:.875rem;opacity:.8;padding-left:var(--mscoa-computation-spacing-md);border-radius:4px;margin-top:10px;line-height:1.6;max-width:500px}.info strong{opacity:1}.toggle-button{height:28px;width:28px;padding:0;margin-right:var(--mscoa-computation-spacing-xs);margin-left:var(--mscoa-computation-spacing-xs)}.toggle-button:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:2px;border-radius:4px}mat-tree{flex:1;min-height:280px;min-width:0;overflow:auto;padding:var(--mscoa-computation-spacing-md)!important;background:none}mat-tree::-webkit-scrollbar{width:8px;height:8px}mat-tree::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:4px}mat-tree::-webkit-scrollbar-thumb{background:var(--mscoa-text-secondary, #757575);border-radius:4px;opacity:.5}mat-tree::-webkit-scrollbar-thumb:hover{opacity:.8;background:var(--mscoa-primary, #243D91)}mat-tree{scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}mat-tree-node{display:flex;align-items:flex-start;min-height:28px;padding-right:var(--mscoa-computation-spacing-md)!important;padding-top:2px!important;padding-bottom:2px!important;box-sizing:border-box;width:100%;transition:background-color var(--mscoa-computation-transition)}mat-tree-node:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:-2px;border-radius:4px}mat-tree-node:hover:not(:has(.selected)){background-color:#0000000a}.mat-tree-node{display:flex;align-items:center;flex-wrap:nowrap;min-height:28px;padding:var(--mscoa-computation-spacing-xs) 0;box-sizing:border-box;transition:background-color var(--mscoa-computation-transition),border-color var(--mscoa-computation-transition);border-radius:4px;margin:1px 0}.mat-tree-node:hover:not(.tree-node-selected):not(:has(.selected)){background-color:#0000000a}.mat-tree-node button,.mat-tree-node mat-checkbox{flex-shrink:0;height:28px}.mat-tree-node mat-checkbox{display:flex;align-items:center;height:28px;min-height:fit-content;flex:1;min-width:0}.mat-tree-node .label{flex:1;min-width:0;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;overflow:visible}.header-toolbar{flex-shrink:0;background:var(--mscoa-surface-container)!important;box-shadow:var(--mscoa-elevation-2);border-bottom:1px solid var(--mscoa-divider)}.glass{background:#ffffff26;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2)}@media(prefers-reduced-motion:reduce){.glass{backdrop-filter:none;-webkit-backdrop-filter:none}}.main-toolbar{min-width:0;padding-top:var(--mscoa-computation-spacing-md);min-height:var(--mscoa-computation-toolbar-height);overflow:hidden}.main-toolbar .toolbar-title{font-size:18px;font-weight:500;color:var(--mscoa-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-toolbar{flex-shrink:0;height:var(--mscoa-computation-toolbar-height);min-width:0;overflow:hidden}.search-toolbar .search-field{flex:1;width:100%;max-width:100%;min-width:0;border-radius:var(--mscoa-computation-border-radius);overflow:clip}.search-toolbar .search-field.search-disabled ::ng-deep .mat-mdc-text-field-wrapper{background-color:var(--mscoa-surface-container)!important;border:1px dashed var(--mscoa-divider)}.search-toolbar .search-field.search-disabled ::ng-deep .mat-mdc-form-field-label{color:var(--mscoa-text-secondary)!important}.search-toolbar .search-field.search-disabled ::ng-deep input{cursor:not-allowed;color:var(--mscoa-text-secondary)!important}.search-toolbar .search-field.search-disabled ::ng-deep button{opacity:.5;cursor:not-allowed}.search-toolbar .search-field.search-disabled ::ng-deep .mat-mdc-form-field-hint{color:var(--mscoa-text-secondary);font-size:.75rem}.tree-breadcrumb{flex-shrink:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--mscoa-spacing-xs, 4px);padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);margin:0 var(--mscoa-spacing-md, 16px) var(--mscoa-spacing-sm, 8px);background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:6px;border-left:3px solid var(--mat-sys-primary, var(--mscoa-primary, #243D91));font-size:.8125rem;line-height:1.4;max-width:500px}.tree-breadcrumb .breadcrumb-label{color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));font-weight:500;margin-right:var(--mscoa-spacing-xs, 4px)}.tree-breadcrumb .breadcrumb-part{color:var(--mat-sys-on-surface, var(--mscoa-text-primary, #212121))}.tree-breadcrumb .breadcrumb-part.is-current{font-weight:600;color:var(--mat-sys-primary, var(--mscoa-primary, #243D91))}.tree-breadcrumb .breadcrumb-sep{font-size:16px;width:16px;height:16px;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));margin:0 var(--mscoa-spacing-xs, 4px)}.search-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--mscoa-spacing-sm, 8px);overflow-y:auto;flex:1;min-height:0;padding:var(--mscoa-spacing-xs, 4px) 0}.search-results-grid::-webkit-scrollbar{width:6px}.search-results-grid::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, var(--mscoa-surface-container));border-radius:3px}.search-results-grid::-webkit-scrollbar-thumb{background:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary));border-radius:3px;opacity:.5}.search-results-grid::-webkit-scrollbar-thumb:hover{opacity:.8;background:var(--mat-sys-primary, var(--mscoa-primary))}.search-results-grid{scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}.path-result-item{cursor:pointer;transition:background-color var(--mscoa-computation-transition);min-height:56px;padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);padding-right:40px;border-radius:8px;border:1px solid var(--mat-sys-outline-variant, var(--mscoa-divider));background:var(--mat-sys-surface, var(--mscoa-surface));display:flex;flex-direction:column;gap:4px;align-items:flex-start;position:relative}.path-result-item:hover,.path-result-item:focus-visible{background-color:var(--mat-sys-surface-container, rgba(0, 0, 0, .04));outline:none}.path-result-item:hover .breadcrumb-container,.path-result-item:focus-visible .breadcrumb-container{flex-wrap:wrap}.path-result-item:hover .breadcrumb-container .text-content,.path-result-item:focus-visible .breadcrumb-container .text-content{white-space:normal;max-width:none}.path-result-item:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:-2px}.path-result-arrow{position:absolute;right:var(--mscoa-spacing-sm);top:50%;transform:translateY(-50%);font-size:18px;width:18px;height:18px;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary))}.breadcrumb-container{display:flex;align-items:center;flex-wrap:wrap;overflow:hidden;width:100%}.crumb-segment{display:flex;align-items:center;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #6c757d));white-space:nowrap;overflow:hidden;max-width:100%}.crumb-segment .text-content{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:150px;vertical-align:middle}.crumb-segment .separator{font-size:1em;height:16px;width:16px;margin:0 var(--mscoa-computation-spacing-xs);color:var(--mat-sys-outline-variant, var(--mscoa-divider, #bdbdbd));flex-shrink:0}.crumb-segment.is-target{color:var(--mat-sys-on-surface, var(--mscoa-text-primary, #000));font-weight:500;flex-shrink:0}.crumb-segment.is-target .text-content{color:var(--mat-sys-on-surface, var(--mscoa-text-primary, #000));max-width:none}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mscoa-computation-spacing-lg);text-align:center;gap:var(--mscoa-computation-spacing-md)}.empty-state .empty-icon{font-size:48px;width:48px;height:48px;opacity:.5}.empty-state .empty-message{margin:0;font-size:14px}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mscoa-computation-spacing-lg);text-align:center;gap:var(--mscoa-computation-spacing-md)}.error-container .error-icon{font-size:48px;width:48px;height:48px;color:var(--mat-sys-error)}.error-container .error-message{margin:0;font-size:14px;color:var(--mat-sys-error)}mark{background-color:#ffeb3b;color:inherit;padding:0;font-weight:500}.instructions-panel{flex-shrink:0;margin:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);margin-bottom:var(--mscoa-spacing-xs, 4px);box-shadow:var(--mscoa-elevation-1);border-radius:6px;overflow:hidden;background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));transition:box-shadow var(--mscoa-computation-transition)}.instructions-panel.compact-instructions ::ng-deep .mat-expansion-panel-header{padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px)!important;min-height:40px!important;height:auto!important}.instructions-panel.compact-instructions ::ng-deep .mat-expansion-panel-body{padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px)!important}.instructions-panel:hover{box-shadow:var(--mscoa-elevation-2)}.instructions-panel ::ng-deep .mat-expansion-panel-header{padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);background:var(--mscoa-surface-container, #F5F5F5)!important}.instructions-panel ::ng-deep .mat-expansion-panel-header:hover{background:var(--mat-sys-surface, var(--mscoa-surface, #FFFFFF))!important}.instructions-panel ::ng-deep .mat-expansion-panel-body{padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px)!important;background:var(--mat-sys-surface, var(--mscoa-surface, #FFFFFF))}.instructions-panel .instruction-icon{margin-right:var(--mscoa-spacing-xs, 4px);color:var(--mscoa-info, #2196F3);font-size:18px;width:18px;height:18px}.instructions-panel .instructions-content{padding:var(--mscoa-spacing-xs, 4px) 0;display:flex;flex-direction:column;gap:var(--mscoa-spacing-xs, 4px)}.instructions-panel .instruction-item{display:flex;align-items:center;gap:var(--mscoa-spacing-xs, 4px);font-size:.75rem;line-height:1.4;padding:var(--mscoa-spacing-xs, 4px);border-radius:4px;transition:background-color var(--mscoa-computation-transition)}.instructions-panel .instruction-item:hover{background-color:var(--mscoa-primary-light, #E3F2FD)}.instructions-panel .instruction-item .instruction-bullet{font-size:16px;width:16px;height:16px;color:var(--mscoa-primary, #243D91);flex-shrink:0}.instructions-panel .instruction-item span{flex:1}.instructions-panel .instruction-item span strong{font-weight:600}.search-results-header{display:flex;align-items:center;gap:var(--mscoa-computation-spacing-sm)}.search-results-header .search-icon{margin-right:var(--mscoa-computation-spacing-sm)}.search-results-list{padding:var(--mscoa-computation-spacing-md);display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.search-results-hint{font-size:.75rem;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));margin:0 var(--mscoa-spacing-md, 16px) var(--mscoa-spacing-sm, 8px);padding:var(--mscoa-spacing-xs, 4px) 0}.path-result-meta{font-size:.6875rem;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));text-transform:uppercase;letter-spacing:.3px}.mat-mdc-subheader{position:sticky;top:0;z-index:10;background:var(--mat-sys-surface-container)}.count-badge{margin-left:auto;font-weight:400;opacity:.7;font-size:.9em}.drawer-container{flex:1;min-height:0;overflow:hidden;max-width:100%;background:var(--mat-sys-surface-container)!important;display:flex}.drawer-container ::ng-deep .mat-drawer-content{min-height:0;overflow:auto;height:calc(100vh - 220px);flex:1 1 30%;min-width:260px}.account-drawer{min-width:420px;max-width:min(700px,65vw)!important;width:520px!important;overflow:hidden;display:flex;flex-direction:column;background:var(--mat-sys-surface-container)!important;padding:var(--mscoa-computation-spacing-md)}.account-drawer app-scoa-account-table{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}.account-drawer .loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mscoa-computation-spacing-lg);gap:var(--mscoa-computation-spacing-md)}.account-drawer .loading-container p{margin:0;font-size:.875rem}.skeleton-row{display:flex;align-items:center;padding:var(--mscoa-spacing-sm) var(--mscoa-spacing-md);gap:var(--mscoa-spacing-md);animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-row .skeleton-checkbox{width:20px;height:20px;border-radius:4px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%}.skeleton-row .skeleton-text{flex:1;height:16px;border-radius:4px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%}.skeleton-row .skeleton-text.short{width:60%}.skeleton-row .skeleton-text.medium{width:80%}@keyframes skeleton-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-table .skeleton-row{border-bottom:1px solid var(--mscoa-divider)}.skeleton-table .skeleton-row:last-child{border-bottom:none}.account-details-container{flex:1;min-height:0;max-width:520px;margin:0 auto;width:100%;background:#ffffff1c;-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);padding:var(--mscoa-spacing-xs, 4px);border:1px solid rgba(255,255,255,.3);border:1px solid var(--mat-sys-outline-variant, var(--mscoa-divider, #E0E0E0));border-radius:8px;overflow-y:auto}.account-details-container::-webkit-scrollbar{width:6px}.account-details-container::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:3px}.account-details-container::-webkit-scrollbar-thumb{background:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));border-radius:3px;opacity:.5}.account-details-container::-webkit-scrollbar-thumb:hover{opacity:.8;background:var(--mat-sys-primary, var(--mscoa-primary, #243D91))}.account-details-container{scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}.account-details-container ::ng-deep app-account-value{max-width:100%}.account-details-container ::ng-deep app-account-value mat-toolbar{background:var(--mat-sys-surface-container, var(--mscoa-surface-container))!important;box-shadow:var(--mscoa-elevation-1);margin-bottom:0;border-radius:8px 8px 0 0}.account-details-container ::ng-deep app-account-value .account-grid{gap:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px);padding:var(--mscoa-spacing-sm, 8px);background:var(--mat-sys-surface, var(--mscoa-surface));border-radius:0 0 8px 8px;box-shadow:var(--mscoa-elevation-1)}.tree-content{min-height:280px;flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;padding-right:var(--mscoa-computation-spacing-sm)}.footer-toolbar{flex-shrink:0;height:fit-content;padding-top:var(--mscoa-computation-spacing-md)!important;padding-bottom:var(--mscoa-computation-spacing-md)!important;min-height:58px;box-shadow:0 -2px 8px #0000000d}.footer-toolbar .footer-actions{display:flex;width:100%;gap:var(--mscoa-computation-spacing-sm);flex-direction:column;min-height:58px}.footer-toolbar .footer-actions .action-button{width:100%;font-weight:500;transition:all .2s ease}.footer-toolbar .footer-actions .action-button:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:2px}.footer-toolbar .footer-actions .action-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--mscoa-elevation-2)}.footer-toolbar .footer-actions .action-button:active:not(:disabled){transform:translateY(0)}.footer-toolbar .footer-actions .action-button[disabled]{opacity:.5;cursor:not-allowed}.footer-toolbar .footer-actions .save-button{background-color:var(--mscoa-primary, #243D91)!important;color:#fff!important}@media(min-width:768px){.footer-actions{flex-direction:row}.footer-actions .action-button{width:auto;min-width:120px}.drawer-container{display:flex}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}\n"] }]
+                        ScoaAccountTableComponent, _InternalFormsSharedModule], template: "<!-- Header Toolbar -->\r\n<mat-toolbar class=\"main-toolbar header-toolbar\" role=\"banner\">\r\n    <span class=\"toolbar-title\">\r\n        {{ (segment || 'No segment') | uppercase }} : {{ activeColumn | uppercase }} ACCOUNT\r\n    </span>\r\n    <span class=\"spacer\"></span>\r\n    @if (selectedAccount) {\r\n    <button mat-flat-button (click)=\"clearSelectedAccount(); cancel()\" [attr.aria-label]=\"'Change account'\">\r\n        <mat-icon>arrow_back</mat-icon>\r\n        Change Account\r\n    </button>\r\n    }\r\n</mat-toolbar>\r\n\r\n<!-- Search Bar - Hidden when account selected -->\r\n@if (!selectedAccount) {\r\n<mat-toolbar class=\"main-toolbar header-toolbar search-toolbar\" role=\"search\">\r\n    <mat-form-field [subscriptSizing]=\"'dynamic'\" class=\"search-field\">\r\n        <mat-label position=\"floating\">Search {{ segment || 'account' }} : {{ activeColumn || '' }} Account</mat-label>\r\n        <input matInput [formControl]=\"accountSearchTextControl\"\r\n            [placeholder]=\"('Search ' + segment + ' : ' + activeColumn + ' Account').toUpperCase()\"\r\n            [attr.aria-label]=\"'Search for account'\" autocomplete=\"off\">\r\n        <button mat-icon-button matSuffix (click)=\"clearSearch()\" [attr.aria-label]=\"'Clear search'\" type=\"button\">\r\n            <mat-icon>close</mat-icon>\r\n        </button>\r\n    </mat-form-field>\r\n</mat-toolbar>\r\n}\r\n\r\n<mat-divider></mat-divider>\r\n\r\n<!-- Account Details View -->\r\n@if (selectedAccount) {\r\n<div class=\"account-details-container\" role=\"region\" [attr.aria-label]=\"'Account details'\">\r\n    <app-account-value [accountInputs]=\"accountInputs\" [userCanClearAccount]=\"userCanClearAccount\"\r\n        [mscoaAccount]=\"selectedAccount\" (updateAccount)=\"updateAccount($event)\"\r\n        (clearSelectedAccount)=\"clearSelectedAccount()\">\r\n    </app-account-value>\r\n</div>\r\n} @else {\r\n<!-- Main Content Area with Drawer -->\r\n<mat-drawer-container class=\"drawer-container\" [attr.aria-label]=\"'Account selection interface'\">\r\n    <!-- Account Table Drawer -->\r\n    <mat-drawer #drawer class=\"account-drawer\" mode=\"side\" position=\"end\"\r\n        [opened]=\"!searchingAccounts && !!selectedTreeNode && !accountSearchTextControl.value\">\r\n\r\n\r\n\r\n\r\n        @if (searchingAccounts) {\r\n        <div class=\"loading-container skeleton-table\" role=\"status\" [attr.aria-live]=\"'polite'\">\r\n            @for (item of [1,2,3,4,5]; track item) {\r\n            <div class=\"skeleton-row\">\r\n                <div class=\"skeleton-checkbox\"></div>\r\n                <div class=\"skeleton-text short\"></div>\r\n                <div class=\"skeleton-text medium\"></div>\r\n                <div class=\"skeleton-text\"></div>\r\n            </div>\r\n            }\r\n        </div>\r\n        } @else if (hasError) {\r\n        <div class=\"error-container\" role=\"alert\" [attr.aria-live]=\"'assertive'\">\r\n            <mat-icon class=\"error-icon\" aria-hidden=\"true\">error</mat-icon>\r\n            <p class=\"error-message\">{{ errorMessage }}</p>\r\n            <button mat-flat-button color=\"primary\" (click)=\"retryLoadAccounts()\"\r\n                [attr.aria-label]=\"'Retry loading accounts'\">\r\n                <mat-icon aria-hidden=\"true\">refresh</mat-icon>\r\n                Retry\r\n            </button>\r\n        </div>\r\n        } @else if (searchAccounts.length === 0 && selectedTreeNode) {\r\n        <div class=\"empty-state\" role=\"status\" [attr.aria-live]=\"'polite'\">\r\n            <mat-icon class=\"empty-icon\" aria-hidden=\"true\">info</mat-icon>\r\n            <p class=\"empty-message\">No accounts found for this category.</p>\r\n        </div>\r\n        } @else {\r\n        <app-scoa-account-table [selectedAccount]=\"selectedAccount\" [segment]=\"segment\"\r\n            (accountSelected)=\"selectAccount($event)\" [data]=\"{\r\n                        accounts: searchAccounts,\r\n                        account: currentAccountPath || ''\r\n                    }\">\r\n        </app-scoa-account-table>\r\n        }\r\n    </mat-drawer>\r\n    <!-- Tree Content Area -->\r\n    <div class=\"tree-content\" role=\"main\">\r\n\r\n        <!-- Search Results View -->\r\n        @if (accountSearchTextControl.value) {\r\n        <mat-nav-list class=\"search-results-list\" role=\"list\">\r\n            <div mat-subheader class=\"search-results-header\">\r\n                <mat-icon class=\"search-icon\">search</mat-icon>\r\n                Search Results\r\n                <span class=\"count-badge\" [attr.aria-label]=\"'Number of results'\">\r\n                    ({{ (searchedPaths$ | async)?.length || 0 }})\r\n                </span>\r\n            </div>\r\n\r\n            @if ((searchedPaths$ | async)?.length === 0) {\r\n            <!-- Empty Search Results -->\r\n            <div class=\"empty-state\" role=\"status\" [attr.aria-live]=\"'polite'\">\r\n                <mat-icon class=\"empty-icon\" aria-hidden=\"true\">search_off</mat-icon>\r\n                <p class=\"empty-message\">\r\n                    No account found for the search\r\n                    <strong>{{ accountSearchTextControl.value }}</strong>.\r\n                </p>\r\n                <button mat-flat-button (click)=\"clearSearch()\"\r\n                    [attr.aria-label]=\"'Clear search and show all accounts'\">\r\n                    Clear Search\r\n                </button>\r\n            </div>\r\n            } @else {\r\n            <p class=\"search-results-hint\">Click a result to load accounts for that category.</p>\r\n            <div class=\"search-results-grid\" role=\"list\">\r\n                @for (searchedItem of (searchedPaths$ | async); track searchedItem.join(':')) {\r\n\r\n                @defer (on viewport) {\r\n                <div class=\"path-result-item\" role=\"listitem\" (click)=\"selectPath(searchedItem)\"\r\n                    [attr.aria-label]=\"'Load accounts for: ' + searchedItem.join(' > ') + '. Click to select.'\"\r\n                    tabindex=\"0\" (keydown.enter)=\"selectPath(searchedItem)\"\r\n                    (keydown.space)=\"selectPath(searchedItem); $event.preventDefault()\">\r\n                    <div class=\"breadcrumb-container\">\r\n                        @for (part of searchedItem; track part; let last = $last) {\r\n                        <div class=\"crumb-segment\" [class.is-target]=\"last\">\r\n                            <span class=\"text-content\"\r\n                                [innerHTML]=\"accountSearchTextControl.value ? highlightSearchText(part, accountSearchTextControl.value) : part\">\r\n                            </span>\r\n                            @if (!last) {\r\n                            <mat-icon class=\"separator\" aria-hidden=\"true\">chevron_right</mat-icon>\r\n                            }\r\n                        </div>\r\n                        }\r\n                    </div>\r\n                    <span class=\"path-result-meta\">Load accounts</span>\r\n                    <mat-icon class=\"path-result-arrow\" aria-hidden=\"true\">arrow_forward</mat-icon>\r\n                </div>\r\n                }@placeholder {\r\n                <div class=\"mat-spinner-container\">\r\n                    <mat-spinner diameter=\"16\" color=\"primary\" aria-label=\"Loading search result\"></mat-spinner>\r\n                </div>\r\n\r\n                }\r\n\r\n                }\r\n            </div>\r\n            }\r\n        </mat-nav-list>\r\n        }\r\n\r\n        <!-- Tree View -->\r\n        @else {\r\n        <!-- Breadcrumb: show current path when category selected (like file explorers) -->\r\n        @if (selectedTreeNode?.path?.length) {\r\n        <div class=\"tree-breadcrumb\" role=\"navigation\"\r\n            [attr.aria-label]=\"'Current category: ' + (selectedTreeNode?.path ?? []).join(' > ')\">\r\n            <span class=\"breadcrumb-label\">Category:</span>\r\n            @for (part of (selectedTreeNode?.path ?? []); track $index; let last = $last) {\r\n            <span class=\"breadcrumb-part\" [class.is-current]=\"last\">{{ part }}</span>\r\n            @if (!last) {\r\n            <mat-icon class=\"breadcrumb-sep\" aria-hidden=\"true\">chevron_right</mat-icon>\r\n            }\r\n            }\r\n        </div>\r\n        }\r\n        <!-- Compact Instructions - Collapsed by default -->\r\n        @if (noneIsExpanded) {\r\n        <mat-expansion-panel [expanded]=\"false\" class=\"instructions-panel compact-instructions\"\r\n            [attr.aria-label]=\"'How to use the account selector'\">\r\n            <mat-expansion-panel-header>\r\n                <mat-panel-title>\r\n                    <mat-icon class=\"instruction-icon\" aria-hidden=\"true\">info</mat-icon>\r\n                    <span>Quick tips</span>\r\n                </mat-panel-title>\r\n            </mat-expansion-panel-header>\r\n            <div class=\"instructions-content\">\r\n                <div class=\"instruction-item\">\r\n                    <mat-icon class=\"instruction-bullet\" aria-hidden=\"true\">folder_open</mat-icon>\r\n                    <span>Expand folders to browse</span>\r\n                </div>\r\n                <div class=\"instruction-item\">\r\n                    <mat-icon class=\"instruction-bullet\" aria-hidden=\"true\">check_box</mat-icon>\r\n                    <span>Check category to load accounts</span>\r\n                </div>\r\n                <div class=\"instruction-item\">\r\n                    <mat-icon class=\"instruction-bullet\" aria-hidden=\"true\">search</mat-icon>\r\n                    <span>Use search bar to find accounts</span>\r\n                </div>\r\n            </div>\r\n        </mat-expansion-panel>\r\n        }\r\n\r\n        <!-- Account Tree -->\r\n        <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" role=\"tree\"\r\n            [attr.aria-label]=\"'Account category tree'\">\r\n\r\n            <!-- Leaf Node (no children) -->\r\n            <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding role=\"treeitem\"\r\n                [attr.data-tree-path]=\"node.path?.join(':')\">\r\n                <button class=\"toggle-button\" mat-icon-button disabled aria-hidden=\"true\">\r\n                </button>\r\n                <mat-checkbox (change)=\"selectNode(node)\"\r\n                    [disabled]=\"isActivePathOrParent(node.path) && searchingAccounts\"\r\n                    [checked]=\"isActivePathOrParent(node.path)\"\r\n                    [attr.aria-label]=\"'Select ' + node.name + ' account category'\">\r\n                    @if (isActivePathOrParent(node.path) && searchingAccounts) {\r\n                    <mat-spinner color=\"primary\" class=\"loading\"\r\n                        [attr.aria-label]=\"'Loading accounts for ' + node.name\">\r\n                    </mat-spinner>\r\n                    <span class=\"label selected\" [attr.aria-live]=\"'polite'\">\r\n                        Loading <strong>{{ node.name }}</strong> accounts...\r\n                    </span>\r\n                    } @else {\r\n                    <span class=\"label\" [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                        {{ node.name }}\r\n                    </span>\r\n                    }\r\n                </mat-checkbox>\r\n            </mat-tree-node>\r\n\r\n            <!-- Branch Node (has children) -->\r\n            <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding role=\"treeitem\"\r\n                [attr.data-tree-path]=\"node.path?.join(':')\" [attr.aria-expanded]=\"treeControl.isExpanded(node)\">\r\n                <button class=\"toggle-button\" mat-icon-button\r\n                    [attr.aria-label]=\"(treeControl.isExpanded(node) ? 'Collapse' : 'Expand') + ' ' + node.name\"\r\n                    (click)=\"toggleNode(node)\" type=\"button\">\r\n                    <mat-icon class=\"mat-icon-rtl-mirror\">\r\n                        {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n                    </mat-icon>\r\n                </button>\r\n\r\n                @if (isActivePathOrParent(node.path)) {\r\n                <mat-checkbox (change)=\"selectNode(node)\" [disabled]=\"true\" [checked]=\"true\"\r\n                    [attr.aria-label]=\"'Selected: ' + node.name\">\r\n                    <span class=\"label selected\">\r\n                        {{ node.name }}\r\n                    </span>\r\n                </mat-checkbox>\r\n                } @else {\r\n                <mat-checkbox (change)=\"selectNode(node)\" [checked]=\"false\"\r\n                    [attr.aria-label]=\"'Select ' + node.name + ' account category'\">\r\n                    <span class=\"label\">\r\n                        {{ node.name }}\r\n                    </span>\r\n                </mat-checkbox>\r\n                }\r\n            </mat-tree-node>\r\n        </mat-tree>\r\n        }\r\n\r\n    </div>\r\n</mat-drawer-container>\r\n}\r\n\r\n<mat-divider></mat-divider>\r\n\r\n<!-- Footer Actions -->\r\n<mat-dialog-actions style=\"    background: var(--mscoa-surface-container) !important;\" align=\"end\">\r\n    <button class=\"action-button close-button\" mat-button (click)=\"closeAndPassData(undefined)\"\r\n        [attr.aria-label]=\"'Close dialog without saving'\" type=\"button\">\r\n\r\n        Close\r\n    </button>\r\n    @if (userCanClearAccount ) {\r\n    <button class=\"action-button save-button\" mat-flat-button [disabled]=\"!saveSelection\" (click)=\"saveAccount()\"\r\n        [attr.aria-label]=\"saveSelection ? 'Save account selection' : 'Save disabled - account unchanged or invalid'\"\r\n        type=\"button\">\r\n        <mat-icon aria-hidden=\"true\">save</mat-icon>\r\n        Save\r\n    </button>\r\n    }\r\n\r\n</mat-dialog-actions>", styles: [":host{display:flex;flex-direction:column;max-height:98vh;overflow:hidden;min-height:0;--mscoa-primary: var(--mat-sys-primary, #243D91);--mscoa-primary-light: var(--mat-sys-primary-container, #E3F2FD);--mscoa-primary-dark: var(--mat-sys-primary, #1A2E6B);--mscoa-success: var(--mat-sys-success, #4CAF50);--mscoa-error: var(--mat-sys-error, #F44336);--mscoa-warning: var(--mat-sys-warning, #FF9800);--mscoa-info: var(--mat-sys-primary, #2196F3);--mscoa-surface: var(--mat-sys-surface, #FFFFFF);--mscoa-surface-container: var(--mat-sys-surface-container, #F5F5F5);--mscoa-text-primary: var(--mat-sys-on-surface, #212121);--mscoa-text-secondary: var(--mat-sys-on-surface-variant, #757575);--mscoa-divider: var(--mat-sys-outline-variant, #E0E0E0);--mscoa-spacing-xs: 4px;--mscoa-spacing-sm: 8px;--mscoa-spacing-md: 16px;--mscoa-spacing-lg: 24px;--mscoa-spacing-xl: 32px;--mscoa-elevation-1: 0 1px 3px rgba(0,0,0,.12);--mscoa-elevation-2: 0 2px 6px rgba(0,0,0,.12);--mscoa-elevation-4: 0 4px 12px rgba(0,0,0,.12);--mscoa-computation-spacing-xs: var(--mscoa-spacing-xs);--mscoa-computation-spacing-sm: var(--mscoa-spacing-sm);--mscoa-computation-spacing-md: var(--mscoa-spacing-md);--mscoa-computation-spacing-lg: var(--mscoa-spacing-lg);--mscoa-computation-toolbar-height: 56px;--mscoa-header-height: 56px;--mscoa-search-height: 56px;--mscoa-footer-height: 58px;--mscoa-divider-height: 1px;--mscoa-computation-selected-color: var(--mscoa-primary);--mscoa-computation-border-radius: 16px;--mscoa-computation-transition: .2s ease}mat-divider{flex-shrink:0}h4{margin-top:0;margin-bottom:0;padding-left:var(--mscoa-computation-spacing-md)}.label{font-size:.875em}.selected{color:var(--mscoa-primary)!important;font-weight:600;background-color:transparent}.mat-tree-node.tree-node-selected,.mat-tree-node[aria-selected=true]{background:linear-gradient(90deg,var(--mat-sys-primary-container, var(--mscoa-primary-light)) 0%,transparent 100%)!important;box-shadow:inset 3px 0 0 var(--mat-sys-primary, var(--mscoa-primary));border-radius:0 4px 4px 0}.mat-tree-node:hover:not(.tree-node-selected):not(:has(.selected)){background-color:#00000008;transition:background-color var(--mscoa-computation-transition)}mat-tree-node{transition:all var(--mscoa-computation-transition)}mat-tree-node:has(.selected){background:linear-gradient(90deg,var(--mat-sys-primary-container, var(--mscoa-primary-light)) 0%,transparent 100%)!important;box-shadow:inset 3px 0 0 var(--mat-sys-primary, var(--mscoa-primary));border-radius:0 4px 4px 0}mat-tree-node:hover:not(:has(.selected)){background-color:#00000008}mat-tree-node mat-checkbox[checked=true] ::ng-deep .mdc-checkbox{background-color:var(--mscoa-primary, #243D91)!important;border-color:var(--mscoa-primary, #243D91)!important}.accountSeperator{margin-left:var(--mscoa-computation-spacing-xs);margin-right:var(--mscoa-computation-spacing-xs)}.loading{width:24px!important;height:24px!important;--mdc-circular-progress-size: 28px !important;--mdc-circular-progress-active-indicator-width: 24px !important;position:absolute;left:var(--mscoa-computation-spacing-sm);bottom:var(--mscoa-computation-spacing-sm)}.info{font-size:.875rem;opacity:.8;padding-left:var(--mscoa-computation-spacing-md);border-radius:4px;margin-top:10px;line-height:1.6;max-width:500px}.info strong{opacity:1}.toggle-button{height:28px;width:28px;padding:0;margin-right:var(--mscoa-computation-spacing-xs);margin-left:var(--mscoa-computation-spacing-xs)}.toggle-button:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:2px;border-radius:4px}mat-tree{flex:1;min-height:280px;min-width:0;overflow:auto;padding:var(--mscoa-computation-spacing-md)!important;background:none}mat-tree::-webkit-scrollbar{width:8px;height:8px}mat-tree::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:4px}mat-tree::-webkit-scrollbar-thumb{background:var(--mscoa-text-secondary, #757575);border-radius:4px;opacity:.5}mat-tree::-webkit-scrollbar-thumb:hover{opacity:.8;background:var(--mscoa-primary, #243D91)}mat-tree{scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}mat-tree-node{display:flex;align-items:flex-start;min-height:28px;padding-right:var(--mscoa-computation-spacing-md)!important;padding-top:2px!important;padding-bottom:2px!important;box-sizing:border-box;width:100%;transition:background-color var(--mscoa-computation-transition)}mat-tree-node:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:-2px;border-radius:4px}mat-tree-node:hover:not(:has(.selected)){background-color:#0000000a}.mat-tree-node{display:flex;align-items:center;flex-wrap:nowrap;min-height:28px;padding:var(--mscoa-computation-spacing-xs) 0;box-sizing:border-box;transition:background-color var(--mscoa-computation-transition),border-color var(--mscoa-computation-transition);border-radius:4px;margin:1px 0}.mat-tree-node:hover:not(.tree-node-selected):not(:has(.selected)){background-color:#0000000a}.mat-tree-node button,.mat-tree-node mat-checkbox{flex-shrink:0;height:28px}.mat-tree-node mat-checkbox{display:flex;align-items:center;height:28px;min-height:fit-content;flex:1;min-width:0}.mat-tree-node .label{flex:1;min-width:0;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;overflow:visible}.header-toolbar{flex-shrink:0;background:var(--mscoa-surface-container)!important;box-shadow:var(--mscoa-elevation-2);border-bottom:1px solid var(--mscoa-divider)}.glass{background:#ffffff26;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2)}@media(prefers-reduced-motion:reduce){.glass{backdrop-filter:none;-webkit-backdrop-filter:none}}.main-toolbar{min-width:0;padding-top:var(--mscoa-computation-spacing-md);min-height:var(--mscoa-computation-toolbar-height);overflow:hidden}.main-toolbar .toolbar-title{font-size:18px;font-weight:500;color:var(--mscoa-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-toolbar{flex-shrink:0;height:var(--mscoa-computation-toolbar-height);min-width:0;overflow:hidden}.search-toolbar .search-field{flex:1;width:100%;max-width:100%;min-width:0;border-radius:var(--mscoa-computation-border-radius);overflow:clip}.search-toolbar .search-field.search-disabled ::ng-deep .mat-mdc-text-field-wrapper{background-color:var(--mscoa-surface-container)!important;border:1px dashed var(--mscoa-divider)}.search-toolbar .search-field.search-disabled ::ng-deep .mat-mdc-form-field-label{color:var(--mscoa-text-secondary)!important}.search-toolbar .search-field.search-disabled ::ng-deep input{cursor:not-allowed;color:var(--mscoa-text-secondary)!important}.search-toolbar .search-field.search-disabled ::ng-deep button{opacity:.5;cursor:not-allowed}.search-toolbar .search-field.search-disabled ::ng-deep .mat-mdc-form-field-hint{color:var(--mscoa-text-secondary);font-size:.75rem}.tree-breadcrumb{flex-shrink:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--mscoa-spacing-xs, 4px);padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);margin:0 var(--mscoa-spacing-md, 16px) var(--mscoa-spacing-sm, 8px);background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:6px;border-left:3px solid var(--mat-sys-primary, var(--mscoa-primary, #243D91));font-size:.8125rem;line-height:1.4;max-width:500px}.tree-breadcrumb .breadcrumb-label{color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));font-weight:500;margin-right:var(--mscoa-spacing-xs, 4px)}.tree-breadcrumb .breadcrumb-part{color:var(--mat-sys-on-surface, var(--mscoa-text-primary, #212121))}.tree-breadcrumb .breadcrumb-part.is-current{font-weight:600;color:var(--mat-sys-primary, var(--mscoa-primary, #243D91))}.tree-breadcrumb .breadcrumb-sep{font-size:16px;width:16px;height:16px;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));margin:0 var(--mscoa-spacing-xs, 4px)}.search-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--mscoa-spacing-sm, 8px);overflow-y:auto;flex:1;min-height:0;padding:var(--mscoa-spacing-xs, 4px) 0}.search-results-grid::-webkit-scrollbar{width:6px}.search-results-grid::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, var(--mscoa-surface-container));border-radius:3px}.search-results-grid::-webkit-scrollbar-thumb{background:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary));border-radius:3px;opacity:.5}.search-results-grid::-webkit-scrollbar-thumb:hover{opacity:.8;background:var(--mat-sys-primary, var(--mscoa-primary))}.search-results-grid{scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}.path-result-item{cursor:pointer;transition:background-color var(--mscoa-computation-transition);min-height:56px;padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);padding-right:40px;border-radius:8px;border:1px solid var(--mat-sys-outline-variant, var(--mscoa-divider));background:var(--mat-sys-surface, var(--mscoa-surface));display:flex;flex-direction:column;gap:4px;align-items:flex-start;position:relative}.path-result-item:hover,.path-result-item:focus-visible{background-color:var(--mat-sys-surface-container, rgba(0, 0, 0, .04));outline:none}.path-result-item:hover .breadcrumb-container,.path-result-item:focus-visible .breadcrumb-container{flex-wrap:wrap}.path-result-item:hover .breadcrumb-container .text-content,.path-result-item:focus-visible .breadcrumb-container .text-content{white-space:normal;max-width:none}.path-result-item:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:-2px}.path-result-arrow{position:absolute;right:var(--mscoa-spacing-sm);top:50%;transform:translateY(-50%);font-size:18px;width:18px;height:18px;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary))}.breadcrumb-container{display:flex;align-items:center;flex-wrap:wrap;overflow:hidden;width:100%}.crumb-segment{display:flex;align-items:center;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #6c757d));white-space:nowrap;overflow:hidden;max-width:100%}.crumb-segment .text-content{display:inline-block;overflow:hidden;text-overflow:ellipsis;max-width:150px;vertical-align:middle}.crumb-segment .separator{font-size:1em;height:16px;width:16px;margin:0 var(--mscoa-computation-spacing-xs);color:var(--mat-sys-outline-variant, var(--mscoa-divider, #bdbdbd));flex-shrink:0}.crumb-segment.is-target{color:var(--mat-sys-on-surface, var(--mscoa-text-primary, #000));font-weight:500;flex-shrink:0}.crumb-segment.is-target .text-content{color:var(--mat-sys-on-surface, var(--mscoa-text-primary, #000));max-width:none}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mscoa-computation-spacing-lg);text-align:center;gap:var(--mscoa-computation-spacing-md)}.empty-state .empty-icon{font-size:48px;width:48px;height:48px;opacity:.5}.empty-state .empty-message{margin:0;font-size:14px}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mscoa-computation-spacing-lg);text-align:center;gap:var(--mscoa-computation-spacing-md)}.error-container .error-icon{font-size:48px;width:48px;height:48px;color:var(--mat-sys-error)}.error-container .error-message{margin:0;font-size:14px;color:var(--mat-sys-error)}mark{background-color:#ffeb3b;color:inherit;padding:0;font-weight:500}.instructions-panel{flex-shrink:0;margin:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);margin-bottom:var(--mscoa-spacing-xs, 4px);box-shadow:var(--mscoa-elevation-1);border-radius:6px;overflow:hidden;background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));transition:box-shadow var(--mscoa-computation-transition)}.instructions-panel.compact-instructions ::ng-deep .mat-expansion-panel-header{padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px)!important;min-height:40px!important;height:auto!important}.instructions-panel.compact-instructions ::ng-deep .mat-expansion-panel-body{padding:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px)!important}.instructions-panel:hover{box-shadow:var(--mscoa-elevation-2)}.instructions-panel ::ng-deep .mat-expansion-panel-header{padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px);background:var(--mscoa-surface-container, #F5F5F5)!important}.instructions-panel ::ng-deep .mat-expansion-panel-header:hover{background:var(--mat-sys-surface, var(--mscoa-surface, #FFFFFF))!important}.instructions-panel ::ng-deep .mat-expansion-panel-body{padding:var(--mscoa-spacing-sm, 8px) var(--mscoa-spacing-md, 16px)!important;background:var(--mat-sys-surface, var(--mscoa-surface, #FFFFFF))}.instructions-panel .instruction-icon{margin-right:var(--mscoa-spacing-xs, 4px);color:var(--mscoa-info, #2196F3);font-size:18px;width:18px;height:18px}.instructions-panel .instructions-content{padding:var(--mscoa-spacing-xs, 4px) 0;display:flex;flex-direction:column;gap:var(--mscoa-spacing-xs, 4px)}.instructions-panel .instruction-item{display:flex;align-items:center;gap:var(--mscoa-spacing-xs, 4px);font-size:.75rem;line-height:1.4;padding:var(--mscoa-spacing-xs, 4px);border-radius:4px;transition:background-color var(--mscoa-computation-transition)}.instructions-panel .instruction-item:hover{background-color:var(--mscoa-primary-light, #E3F2FD)}.instructions-panel .instruction-item .instruction-bullet{font-size:16px;width:16px;height:16px;color:var(--mscoa-primary, #243D91);flex-shrink:0}.instructions-panel .instruction-item span{flex:1}.instructions-panel .instruction-item span strong{font-weight:600}.search-results-header{display:flex;align-items:center;gap:var(--mscoa-computation-spacing-sm)}.search-results-header .search-icon{margin-right:var(--mscoa-computation-spacing-sm)}.search-results-list{padding:var(--mscoa-computation-spacing-md);display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.search-results-hint{font-size:.75rem;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));margin:0 var(--mscoa-spacing-md, 16px) var(--mscoa-spacing-sm, 8px);padding:var(--mscoa-spacing-xs, 4px) 0}.path-result-meta{font-size:.6875rem;color:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));text-transform:uppercase;letter-spacing:.3px}.mat-mdc-subheader{position:sticky;top:0;z-index:10;background:var(--mat-sys-surface-container)}.count-badge{margin-left:auto;font-weight:400;opacity:.7;font-size:.9em}.drawer-container{flex:1;min-height:0;overflow:hidden;max-width:100%;background:var(--mat-sys-surface-container)!important;display:flex}.drawer-container ::ng-deep .mat-drawer-content{min-height:0;overflow:auto;height:calc(100vh - 220px);flex:1 1 30%;min-width:260px}.account-drawer{min-width:420px;max-width:min(700px,65vw)!important;width:520px!important;overflow:hidden;display:flex;flex-direction:column;background:var(--mat-sys-surface-container)!important;padding:var(--mscoa-computation-spacing-md)}.account-drawer app-scoa-account-table{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}.account-drawer .loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--mscoa-computation-spacing-lg);gap:var(--mscoa-computation-spacing-md)}.account-drawer .loading-container p{margin:0;font-size:.875rem}.skeleton-row{display:flex;align-items:center;padding:var(--mscoa-spacing-sm) var(--mscoa-spacing-md);gap:var(--mscoa-spacing-md);animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-row .skeleton-checkbox{width:20px;height:20px;border-radius:4px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%}.skeleton-row .skeleton-text{flex:1;height:16px;border-radius:4px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%}.skeleton-row .skeleton-text.short{width:60%}.skeleton-row .skeleton-text.medium{width:80%}@keyframes skeleton-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-table .skeleton-row{border-bottom:1px solid var(--mscoa-divider)}.skeleton-table .skeleton-row:last-child{border-bottom:none}.account-details-container{flex:1;min-height:0;max-width:520px;margin:0 auto;width:100%;background:#ffffff1c;-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);padding:var(--mscoa-spacing-xs, 4px);border:1px solid rgba(255,255,255,.3);border:1px solid var(--mat-sys-outline-variant, var(--mscoa-divider, #E0E0E0));border-radius:8px;overflow-y:auto}.account-details-container::-webkit-scrollbar{width:6px}.account-details-container::-webkit-scrollbar-track{background:var(--mat-sys-surface-container, var(--mscoa-surface-container, #F5F5F5));border-radius:3px}.account-details-container::-webkit-scrollbar-thumb{background:var(--mat-sys-on-surface-variant, var(--mscoa-text-secondary, #757575));border-radius:3px;opacity:.5}.account-details-container::-webkit-scrollbar-thumb:hover{opacity:.8;background:var(--mat-sys-primary, var(--mscoa-primary, #243D91))}.account-details-container{scrollbar-width:thin;scrollbar-color:var(--mat-sys-on-surface-variant, #757575) var(--mat-sys-surface-container, #F5F5F5)}.account-details-container ::ng-deep app-account-value{max-width:100%}.account-details-container ::ng-deep app-account-value mat-toolbar{background:var(--mat-sys-surface-container, var(--mscoa-surface-container))!important;box-shadow:var(--mscoa-elevation-1);margin-bottom:0;border-radius:8px 8px 0 0}.account-details-container ::ng-deep app-account-value .account-grid{gap:var(--mscoa-spacing-xs, 4px) var(--mscoa-spacing-sm, 8px);padding:var(--mscoa-spacing-sm, 8px);background:var(--mat-sys-surface, var(--mscoa-surface));border-radius:0 0 8px 8px;box-shadow:var(--mscoa-elevation-1)}.tree-content{min-height:280px;flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;padding-right:var(--mscoa-computation-spacing-sm)}.footer-toolbar{flex-shrink:0;height:fit-content;padding-top:var(--mscoa-computation-spacing-md)!important;padding-bottom:var(--mscoa-computation-spacing-md)!important;min-height:58px;box-shadow:0 -2px 8px #0000000d}.footer-toolbar .footer-actions{display:flex;width:100%;gap:var(--mscoa-computation-spacing-sm);flex-direction:column;min-height:58px}.footer-toolbar .footer-actions .action-button{width:100%;font-weight:500;transition:all .2s ease}.footer-toolbar .footer-actions .action-button:focus-visible{outline:2px solid var(--mscoa-computation-selected-color);outline-offset:2px}.footer-toolbar .footer-actions .action-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--mscoa-elevation-2)}.footer-toolbar .footer-actions .action-button:active:not(:disabled){transform:translateY(0)}.footer-toolbar .footer-actions .action-button[disabled]{opacity:.5;cursor:not-allowed}.footer-toolbar .footer-actions .save-button{background-color:var(--mscoa-primary, #243D91)!important;color:#fff!important}@media(min-width:768px){.footer-actions{flex-direction:row}.footer-actions .action-button{width:auto;min-width:120px}.drawer-container{display:flex}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialogRef }], propDecorators: { handleKeyboardNavigation: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
@@ -11018,9 +11537,9 @@ class MscoaChartComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MscoaChartComponent, deps: [{ token: MscoaComponentStore }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MscoaChartComponent, isStandalone: true, selector: "app-mscoa-chart", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", readonly: "readonly", touched: "touched", formGroup: "formGroup", formBuilderFunctions: "formBuilderFunctions", segmentValues: "segmentValues", config: "config" }, outputs: { onContainerClick: "onContainerClick", segmentValuesChanged: "segmentValuesChanged", interaction: "interaction" }, ngImport: i0, template: "<section \n  (click)=\"setAsTouched($event)\" \n  class=\"mscoa-chart__container\"\n  [class.mscoa-chart__container--touched]=\"touched\"\n  *ngIf=\"(viewData$ | async) as viewData\"\n  role=\"region\"\n  [attr.aria-label]=\"'MSCOA Account Chart'\"\n  [attr.aria-busy]=\"viewData.loading || viewData.validatingValue\">\n\n  @if (viewData.loading) {\n    <div class=\"mscoa-chart__loading-container\" role=\"status\" aria-live=\"polite\">\n      <mat-spinner [diameter]=\"40\"></mat-spinner>\n      <span class=\"sr-only\">Loading account chart data...</span>\n    </div>\n  } @else {\n    @defer (on viewport) {\n      <ng-container *ngIf=\"viewData.accountTreeKeys || viewData.cashAccountTreeKeys\">\n        <div class=\"mscoa-chart__table-container\">\n          @if (isDualAccountBasis) {\n            <div class=\"dual-basis-container\" role=\"group\" aria-label=\"Dual accounting basis tables\">\n              <div class=\"dual-basis-container__item\">\n                <ng-container \n                  *ngTemplateOutlet=\"selectionTable; \n                  context: {\n                    accountingBasis: ACCOUNTING_BASIS.ACCRUAL,\n                    canCollapse: true,\n                    viewData: viewData\n                  }\">\n                </ng-container>\n              </div>\n              \n              <div class=\"dual-basis-container__item\">\n                <ng-container \n                  *ngTemplateOutlet=\"selectionTable; \n                  context: {\n                    accountingBasis: ACCOUNTING_BASIS.CASH,\n                    canCollapse: true,\n                    viewData: viewData\n                  }\">\n                </ng-container>\n              </div>\n            </div>\n          } @else {\n            <ng-container \n              *ngTemplateOutlet=\"selectionTable; \n              context: {\n                accountingBasis: config?.accountingBasis,\n                canCollapse: false,\n                viewData: viewData\n              }\">\n            </ng-container>\n          }\n        </div>\n      </ng-container>\n\n      <ng-template \n        #selectionTable \n        let-accountingBasis=\"accountingBasis\" \n        let-canCollapse=\"canCollapse\"\n        let-viewData=\"viewData\">\n        \n        <div class=\"mscoa-chart-table\" role=\"group\" [attr.aria-label]=\"'Accounting basis: ' + (accountingBasis || 'Accrual')\">\n          <!-- Toolbar -->\n          <app-mscoa-chart-toolbar\n            [accountingBasis]=\"accountingBasis\"\n            [canCollapse]=\"canCollapse\"\n            [isExpanded]=\"getExpansionState(accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\"\n            (toggleExpansion)=\"toggleDualBasisExpansion(accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\">\n          </app-mscoa-chart-toolbar>\n\n          @if (shouldShowTable(isDualAccountBasis, getExpansionState(accountingBasis || ACCOUNTING_BASIS.ACCRUAL), accountingBasis)) {\n            <div class=\"account-selection-table-wrapper\">\n              <div\n                class=\"account-selection-table-container\"\n                [class.account-selection-table-container--accrual]=\"!accountingBasis || accountingBasis === ACCOUNTING_BASIS.ACCRUAL\"\n                [class.account-selection-table-container--cash]=\"accountingBasis === ACCOUNTING_BASIS.CASH\"\n                role=\"table\"\n                [attr.aria-label]=\"'Account selection table for ' + (accountingBasis || 'Accrual') + ' basis'\">\n\n              <table \n                mat-table \n                [dataSource]=\"accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashTableData : viewData.tableData\" \n                [trackBy]=\"trackByRow\"\n                class=\"table\"\n                [attr.aria-label]=\"'Account selection table for ' + (accountingBasis || 'Accrual') + ' basis'\"\n                [attr.aria-describedby]=\"'table-description-' + (accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\"\n                role=\"table\">\n                <span [id]=\"'table-description-' + (accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\" class=\"sr-only\">\n                  Use arrow keys to navigate between cells. Press Enter or Space to select an account.\n                </span>\n                \n                @for (\n                  col of (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols); \n                  track trackByColumn($index, col); \n                  let i = $index\n                ) {\n                  <ng-container [matColumnDef]=\"col\" [sticky]=\"i === 0\">\n                    <!-- Header Cell -->\n                    <th \n                      mat-header-cell \n                      *matHeaderCellDef\n                      [class.table__header-cell--segment]=\"isSegmentColumn(i)\"\n                      [class.table__header-cell--regular]=\"!isSegmentColumn(i)\"\n                      [style.width.%]=\"getColumnWidthPercent(isSegmentColumn(i), (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols).length)\"\n                      [style.min-width.px]=\"isSegmentColumn(i) ? 150 : 200\"\n                      [attr.aria-sort]=\"i === 0 ? 'none' : null\"\n                      [attr.scope]=\"'col'\"\n                      [attr.aria-label]=\"getHeaderText(col, i, accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashHasMultiSelect : viewData.hasMultiSelect) + ' column'\">\n                      {{ getHeaderText(col, i, accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashHasMultiSelect : viewData.hasMultiSelect) | titlecase | unCamelCase }}\n                    </th>\n\n                    <!-- Data Cell -->\n                    <td \n                      mat-cell\n                      *matCellDef=\"let row\"\n                      [class.table__cell--segment]=\"isSegmentColumn(i)\"\n                      [class.table__cell--regular]=\"!isSegmentColumn(i)\"\n                      [class.table__cell--active]=\"editSelection?.segment === row['segment'] && activeColumn === col\"\n                      [class.table__cell--business-error]=\"!isSegmentColumn(i) && getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                      [attr.aria-label]=\"'Cell for ' + row['segment'] + ' segment, ' + col + ' column'\"\n                      [attr.aria-selected]=\"!!row[col]\"\n                      [attr.aria-invalid]=\"!isSegmentColumn(i) && !!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                      [attr.role]=\"'gridcell'\"\n                      [attr.tabindex]=\"isSegmentColumn(i) ? -1 : (row[col] ? 0 : -1)\">\n                      \n                      @if (isSegmentColumn(i)) {\n                        <!-- Segment Column -->\n                        <div class=\"segment-cell-content\">\n                          @if (editorMode && row.innerInput?.id) {\n                            <button \n                              mat-icon-button \n                              [matMenuTriggerData]=\"{innerInput: row.innerInput}\"\n                              [matMenuTriggerFor]=\"inputMenu\" \n                              [matTooltip]=\"'Options for: ' + row.innerInput.label\"\n                              [attr.aria-label]=\"'Options menu for ' + row.innerInput.label\"\n                              (click)=\"$event.stopPropagation()\">\n                              <mat-icon>more_vert</mat-icon>\n                            </button>\n                          }\n                          <span class=\"segment-cell-content__label\">{{ row['label'] }}</span>\n                        </div>\n                      } @else {\n                        <!-- Regular Column -->\n                        @if (row.innerInput?.id && formGroup && inputPortals[getPortalKey(row.innerInput.id)]) {\n                          <div class=\"portal-container\">\n                            <ng-template [cdkPortalOutlet]=\"inputPortals[getPortalKey(row.innerInput.id)]\"></ng-template>\n                          </div>\n                          } @else {\n                            @if (row[col]) {\n                            <!-- Account Selected -->\n                            @if (getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment']); as cellError) {\n                              <div class=\"account-cell-wrapper\" \n                                   [class.account-cell-wrapper--expandable]=\"isTextTruncated(row[col] | unCamelCase)\">\n                                <button \n                                  [disabled]=\"row['singleSelect'] === true && col === COLUMNS.CREDIT\"\n                                  (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); setAsTouched($event)\"\n                                  (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\n                                  color=\"primary\" \n                                  mat-button \n                                  class=\"cell-button cell-button--selected cell-button--business-error\"\n                                  [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase) + ' for ' + row['segment'] + ' segment, ' + col + ' column. Business error: ' + cellError.message\"\n                                  [attr.aria-invalid]=\"true\"\n                                  [attr.aria-pressed]=\"true\"\n                                  [matTooltip]=\"cellError.message\">\n                                  <div class=\"content\">\n                                    <span \n                                      class=\"selected-acount-label selected-acount-label--tag selected-acount-label--business-error\"\n                                      [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase)\">\n                                      {{ row[col] | unCamelCase }}\n                                      @if (shouldShowVatChip(row, col)) {\n                                        <span \n                                          class=\"vat-badge\"\n                                          [attr.aria-label]=\"'VAT applicable to ' + col + ' column'\"\n                                          [matTooltip]=\"'VAT is applicable to this ' + col + ' account selection'\">\n                                          VAT\n                                        </span>\n                                      }\n                                    </span>\n                                    <mat-icon class=\"business-error-indicator\" aria-hidden=\"true\">error</mat-icon>\n                                  </div>\n                                </button>\n                              </div>\n                            } @else {\n                              <div class=\"account-cell-wrapper\" \n                                   [class.account-cell-wrapper--expandable]=\"isTextTruncated(row[col] | unCamelCase)\">\n                                <button \n                                  [disabled]=\"(row['singleSelect'] === true && col === COLUMNS.CREDIT) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                  (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); setAsTouched($event)\"\n                                  (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\n                                  color=\"primary\" \n                                  mat-button \n                                  class=\"cell-button cell-button--selected\"\n                                  [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase) + ' for ' + row['segment'] + ' segment, ' + col + ' column. Press Enter or Space to change'\"\n                                  [attr.aria-invalid]=\"false\"\n                                  [attr.aria-disabled]=\"(row['singleSelect'] === true && col === COLUMNS.CREDIT) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                  [attr.aria-pressed]=\"true\">\n                                  <div class=\"content\">\n                                    <span \n                                      class=\"selected-acount-label selected-acount-label--tag\"\n                                      [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase)\">\n                                      {{ row[col] | unCamelCase }}\n                                      @if (shouldShowVatChip(row, col)) {\n                                        <span \n                                          class=\"vat-badge\"\n                                          [attr.aria-label]=\"'VAT applicable to ' + col + ' column'\"\n                                          [matTooltip]=\"'VAT is applicable to this ' + col + ' account selection'\">\n                                          VAT\n                                        </span>\n                                      }\n                                    </span>\n                                    @if (showValidationSuccessIndicators) {\n                                      <mat-icon class=\"validated-indicator\" aria-hidden=\"true\" [matTooltip]=\"'Validated'\">shield</mat-icon>\n                                    } @else {\n                                      <mat-icon class=\"success-indicator\" aria-hidden=\"true\">check_circle</mat-icon>\n                                    }\n                                  </div>\n                                </button>\n                              </div>\n                            }\n                          } @else {\n                            <!-- No Account Selected -->\n                            <div class=\"cell-button-wrapper\">\n                              <button \n                                [disabled]=\"selectionDisabled(row, col) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                [color]=\"\"\n                                (click)=\"selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); $event.stopPropagation(); setAsTouched($event)\"\n                                (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\n                                mat-button\n                                class=\"cell-button\"\n                                [class.cell-button--business-error]=\"!!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                [attr.aria-label]=\"shouldShowAutoSelectedLabel(row, col) ? 'Auto selected for ' + row['segment'] + ' segment, ' + col + ' column' : 'Select account for ' + row['segment'] + ' segment, ' + col + ' column'\"\n                                [attr.aria-disabled]=\"selectionDisabled(row, col) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                [attr.aria-describedby]=\"getValidationHint(row, col, accountingBasis || ACCOUNTING_BASIS.ACCRUAL) ? 'hint-' + row['segment'] + '-' + col : null\"\n                                [attr.aria-invalid]=\"hasError(touched, inputConfig?.required || false, !!row[col]) || !!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                [attr.aria-required]=\"inputConfig?.required && !row[col]\"\n                                [matTooltip]=\"getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])?.message\">\n                                <div class=\"content\">\n                                  <span \n                                    class=\"selected-acount-label\"\n                                    [class.selected-acount-label--error]=\"hasError(touched, inputConfig?.required || false, !!row[col])\"\n                                    [class.selected-acount-label--business-error]=\"!!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\">\n                                    {{ (shouldShowAutoSelectedLabel(row, col) ? 'auto selected' : 'Select account') | unCamelCase }}\n                                    @if (inputConfig?.required && !row[col]) {\n                                      <span class=\"required-indicator\" aria-label=\"Required field\">*</span>\n                                    }\n                                  </span>\n                                  @if (getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])) {\n                                    <mat-icon class=\"business-error-indicator\" aria-hidden=\"true\">error</mat-icon>\n                                  } @else if (shouldShowDropdownIcon(row, col)) {\n                                    <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\n                                  }\n                                </div>\n                              </button>\n                              @if (getValidationHint(row, col, accountingBasis || ACCOUNTING_BASIS.ACCRUAL); as hint) {\n                                <span \n                                  class=\"inline-hint\"\n                                  [id]=\"'hint-' + row['segment'] + '-' + col\"\n                                  role=\"tooltip\"\n                                  aria-live=\"polite\">\n                                  {{ hint }}\n                                </span>\n                              }\n                            </div>\n                          }\n                        }\n                      }\n                    </td>\n                  </ng-container>\n                }\n\n                <tr mat-header-row *matHeaderRowDef=\"accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols)\"></tr>\n              </table>\n            </div>\n            </div>\n\n            <!-- Empty State -->\n            <ng-container *ngIf=\"(accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashAccountTreeKeys : viewData.accountTreeKeys).length === 0\">\n              <section class=\"empty-state\" role=\"status\" aria-live=\"polite\">\n                <mat-icon aria-hidden=\"true\">info</mat-icon>\n                <span>\n                  No account segments are currently configured.\n                  Please configure account segments to proceed.\n                </span>\n              </section>\n            </ng-container>\n\n            <!-- Success Messages (Temporary) -->\n            @if ((successMessage$ | async); as successMessages) {\n              @if (getSuccessMessage(successMessages, accountingBasis || ACCOUNTING_BASIS.ACCRUAL); as msg) {\n                <app-mscoa-temporary-hint\n                  [message]=\"getSuccessMessage(successMessages, accountingBasis || ACCOUNTING_BASIS.ACCRUAL) ?? ''\"\n                  [type]=\"'info'\"\n                  [duration]=\"6000\"\n                  [showDismiss]=\"true\">\n                </app-mscoa-temporary-hint>\n              }\n            }\n\n            <!-- Business Rule Errors (Temporary display, keeps error styling) -->\n            @if ((viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL] || []).length > 0) {\n              <app-mscoa-error-display\n                [errors]=\"viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL] || []\"\n                type=\"error\"\n                [context]=\"{ accountingBasis: accountingBasis || ACCOUNTING_BASIS.ACCRUAL }\"\n                [duration]=\"6000\"\n                [showDismiss]=\"true\">\n              </app-mscoa-error-display>\n            }\n\n            <!-- Temporary Contextual Hints -->\n            @if (temporaryHintMessage) {\n              <app-mscoa-temporary-hint\n                [message]=\"temporaryHintMessage\"\n                [type]=\"temporaryHintType\"\n                [duration]=\"6000\"\n                [showDismiss]=\"true\">\n              </app-mscoa-temporary-hint>\n            }\n\n            <!-- Validation Hints (Context-Aware) -->\n            @if (!touched && inputConfig?.required && !viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL]?.length && (!isDualAccountBasis || accountingBasis === ACCOUNTING_BASIS.ACCRUAL || !accountingBasis)) {\n              <div class=\"validation-hints\" role=\"region\" aria-label=\"Validation guidance\">\n                <p class=\"validation-hints__title\">Guidance:</p>\n                <ul class=\"validation-hints__list\">\n                  <li>Account combinations are validated automatically. Select accounts that belong to compatible reporting categories.</li>\n                  <li>Required fields are marked with an asterisk (*). Complete all required selections to proceed.</li>\n                  <li>Some fields may be automatically populated based on your selections to ensure consistency.</li>\n                </ul>\n              </div>\n            }\n          }\n        </div>\n      </ng-template>\n    } @placeholder {\n      <div class=\"loading-placeholder\" role=\"status\" aria-live=\"polite\">\n        <p>Loading data...</p>\n      </div>\n    } @loading (minimum 100ms) {\n      <div class=\"loading-spinner-container\" role=\"status\" aria-live=\"polite\">\n        <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"40\"></mat-progress-spinner>\n        <span class=\"sr-only\">Loading account chart...</span>\n      </div>\n    } @error {\n      <div class=\"error-state\" role=\"alert\" aria-live=\"assertive\">\n        <p>Error loading data. Please try again.</p>\n      </div>\n    }\n  }\n</section>\n\n<!-- Input Menu -->\n<mat-menu #inputMenu=\"matMenu\">\n  <ng-template matMenuContent let-innerInput=\"innerInput\">\n    <app-mscoa-chart-input-menu\n      [innerInput]=\"innerInput\"\n      [countdownSeconds]=\"inputWillBeRemovedIn(innerInput.id)\"\n      [hoveredId]=\"hoveredInputId\"\n      (edit)=\"onInputMenuEdit($event)\"\n      (delete)=\"onInputMenuDelete($event)\"\n      (cancelDelete)=\"onInputMenuCancelDelete($event)\"\n      (hoverStart)=\"onInputMenuHoverStart($event)\"\n      (hoverEnd)=\"onInputMenuHoverEnd()\">\n    </app-mscoa-chart-input-menu>\n  </ng-template>\n</mat-menu>\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: .2s ease;--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}.single-base{gap:var(--mscoa-chart-spacing-sm);height:48px;font-size:.875em;font-weight:500;transition:background-color var(--mscoa-chart-transition)}.single-base--cash{background:var(--mat-sys-inverse-primary)!important}.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(--mat-sys-surface-container-low, #f7f2fa);border-radius:4px}.account-selection-table-container::-webkit-scrollbar-thumb{background:var(--mat-sys-outline-variant, #cac4d0);border-radius:4px}.account-selection-table-container::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-outline, #79747e)}.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:all var(--mscoa-chart-transition);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(--mat-sys-surface-container-low, #f7f2fa);border-color:var(--mat-sys-primary, #1976d2)}.cell-button.cell-button--selected{animation:fadeInSuccess var(--mscoa-chart-transition)}.cell-button.cell-button--business-error{border-color:var(--mat-sys-error, #ba1a1a)}.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(--mat-sys-success, #4caf50);font-size:18px;width:18px;right:-8px;top:-4px;background:#fff;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(--mat-sys-primary, #1976d2);font-size:18px;width:18px;height:18px;right:-8px;top:-4px;background:#fff;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(--mat-sys-error, #ba1a1a);font-size:18px;width:18px;right:-8px;top:-4px;background:#fff;border-radius:16px;position:absolute;height:18px;margin-left:var(--mscoa-chart-spacing-xs);flex-shrink:0}.required-indicator{color:var(--mat-sys-error, #ba1a1a);font-weight:600;margin-left:2px}.inline-hint{display:block;font-size:12px;color:var(--mat-sys-on-surface-variant, #49454f);margin-top:var(--mscoa-chart-spacing-xs);padding:var(--mscoa-chart-spacing-xs) var(--mscoa-chart-spacing-sm);background-color:var(--mat-sys-surface-container-low, #f7f2fa);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(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #001d35);border-radius:16px;font-size:13px;font-weight:500;line-height:1.5;border:1px solid var(--mat-sys-primary, #1976d2);box-shadow:0 1px 2px #0000001a;transition:all var(--mscoa-chart-transition);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(--mat-sys-primary-container-high, #d0e4f7);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(--mat-sys-tertiary-container, #e0ffee);color:var(--mat-sys-on-tertiary-container, #7c5000);border:1px solid var(--mat-sys-outline-variant, #cac4d0);box-shadow:none;transition:all var(--mscoa-chart-transition);flex-shrink:0;align-self:flex-start;margin-top:2px;line-height:1}.vat-badge:hover{background-color:var(--mat-sys-tertiary-container-high, #ffe0b2);border-color:var(--mat-sys-tertiary, #f57c00)}.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:all var(--mscoa-chart-transition);box-shadow:0 1px 3px #0000001f}.vat-chip--applicable{background:linear-gradient(135deg,var(--mat-sys-tertiary, #f57c00) 0%,var(--mat-sys-tertiary-container, #ff9800) 100%);color:var(--mat-sys-on-tertiary, #ffffff);border:1px solid var(--mat-sys-tertiary, #f57c00)}.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;text-transform:uppercase}.info-box{display:flex;align-items:center;gap:var(--mscoa-chart-spacing-sm);padding:12px;background:azure;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(--mat-sys-surface-container-low, #f7f2fa);border-radius:var(--mscoa-chart-border-radius);border-left:4px solid var(--mat-sys-primary, #1976d2);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(--mat-sys-on-surface, #1c1b16);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(--mat-sys-on-surface-variant, #49454f);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(--mat-sys-primary, #1976d2)}.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}.main-expanse-content{background:var(--mat-sys-surface-container)!important}@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:700}}@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(--mat-sys-error-container, #ffdad6);border-left:3px solid var(--mat-sys-error, #ba1a1a)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInSuccess{0%{background-color:transparent}50%{background-color:var(--mat-sys-success-container, #e8f5e9)}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: MatModulesModule }, { 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: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PortalModule }, { kind: "component", type: MscoaChartInputMenuComponent, selector: "app-mscoa-chart-input-menu", inputs: ["innerInput", "countdownSeconds", "hoveredId"], outputs: ["edit", "delete", "cancelDelete", "hoverStart", "hoverEnd"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i2.MatButton, i2.MatIconButton, i3.MatIcon, i6.MatMenuTrigger, i9.MatTable, i9.MatHeaderCellDef, i9.MatHeaderRowDef, i9.MatColumnDef, i9.MatCellDef, i9.MatRowDef, i9.MatHeaderCell, i9.MatCell, i9.MatHeaderRow, i9.MatRow, i4.MatTooltip, i9$1.CdkPortalOutlet, i2$1.NgIf, i2$1.NgTemplateOutlet, import('./ngx-t-forms-mscoa-chart-toolbar.component-D_umeAPL.mjs').then(m => m.MscoaChartToolbarComponent), import('./ngx-t-forms-mscoa-error-display.component-CSX2NCNU.mjs').then(m => m.MscoaErrorDisplayComponent), import('./ngx-t-forms-mscoa-temporary-hint.component-BPkjsRmH.mjs').then(m => m.MscoaTemporaryHintComponent), i2$1.AsyncPipe, i2$1.TitleCasePipe, Promise.resolve().then(function () { return daysAgo_pipe; }).then(m => m.ConvertCamelCasePipe)]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MscoaChartComponent, isStandalone: true, selector: "app-mscoa-chart", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", readonly: "readonly", touched: "touched", formGroup: "formGroup", formBuilderFunctions: "formBuilderFunctions", segmentValues: "segmentValues", config: "config" }, outputs: { onContainerClick: "onContainerClick", segmentValuesChanged: "segmentValuesChanged", interaction: "interaction" }, ngImport: i0, template: "<section \n  (click)=\"setAsTouched($event)\" \n  class=\"mscoa-chart__container\"\n  [class.mscoa-chart__container--touched]=\"touched\"\n  *ngIf=\"(viewData$ | async) as viewData\"\n  role=\"region\"\n  [attr.aria-label]=\"'MSCOA Account Chart'\"\n  [attr.aria-busy]=\"viewData.loading || viewData.validatingValue\">\n\n  @if (viewData.loading) {\n    <div class=\"mscoa-chart__loading-container\" role=\"status\" aria-live=\"polite\">\n      <mat-spinner [diameter]=\"40\"></mat-spinner>\n      <span class=\"sr-only\">Loading account chart data...</span>\n    </div>\n  } @else {\n    @defer (on viewport) {\n      <ng-container *ngIf=\"viewData.accountTreeKeys || viewData.cashAccountTreeKeys\">\n        <div class=\"mscoa-chart__table-container\">\n          @if (isDualAccountBasis) {\n            <div class=\"dual-basis-container\" role=\"group\" aria-label=\"Dual accounting basis tables\">\n              <div class=\"dual-basis-container__item\">\n                <ng-container \n                  *ngTemplateOutlet=\"selectionTable; \n                  context: {\n                    accountingBasis: ACCOUNTING_BASIS.ACCRUAL,\n                    canCollapse: true,\n                    viewData: viewData\n                  }\">\n                </ng-container>\n              </div>\n              \n              <div class=\"dual-basis-container__item\">\n                <ng-container \n                  *ngTemplateOutlet=\"selectionTable; \n                  context: {\n                    accountingBasis: ACCOUNTING_BASIS.CASH,\n                    canCollapse: true,\n                    viewData: viewData\n                  }\">\n                </ng-container>\n              </div>\n            </div>\n          } @else {\n            <ng-container \n              *ngTemplateOutlet=\"selectionTable; \n              context: {\n                accountingBasis: config?.accountingBasis,\n                canCollapse: false,\n                viewData: viewData\n              }\">\n            </ng-container>\n          }\n        </div>\n      </ng-container>\n\n      <ng-template \n        #selectionTable \n        let-accountingBasis=\"accountingBasis\" \n        let-canCollapse=\"canCollapse\"\n        let-viewData=\"viewData\">\n        \n        <div class=\"mscoa-chart-table\" role=\"group\" [attr.aria-label]=\"'Accounting basis: ' + (accountingBasis || 'Accrual')\">\n          <!-- Toolbar -->\n          <app-mscoa-chart-toolbar\n            [accountingBasis]=\"accountingBasis\"\n            [canCollapse]=\"canCollapse\"\n            [isExpanded]=\"getExpansionState(accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\"\n            (toggleExpansion)=\"toggleDualBasisExpansion(accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\">\n          </app-mscoa-chart-toolbar>\n\n          @if (shouldShowTable(isDualAccountBasis, getExpansionState(accountingBasis || ACCOUNTING_BASIS.ACCRUAL), accountingBasis)) {\n            <div class=\"account-selection-table-wrapper\">\n              <div\n                class=\"account-selection-table-container\"\n                [class.account-selection-table-container--accrual]=\"!accountingBasis || accountingBasis === ACCOUNTING_BASIS.ACCRUAL\"\n                [class.account-selection-table-container--cash]=\"accountingBasis === ACCOUNTING_BASIS.CASH\"\n                role=\"table\"\n                [attr.aria-label]=\"'Account selection table for ' + (accountingBasis || 'Accrual') + ' basis'\">\n\n              <table \n                mat-table \n                [dataSource]=\"accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashTableData : viewData.tableData\" \n                [trackBy]=\"trackByRow\"\n                class=\"table\"\n                [attr.aria-label]=\"'Account selection table for ' + (accountingBasis || 'Accrual') + ' basis'\"\n                [attr.aria-describedby]=\"'table-description-' + (accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\"\n                role=\"table\">\n                <span [id]=\"'table-description-' + (accountingBasis || ACCOUNTING_BASIS.ACCRUAL)\" class=\"sr-only\">\n                  Use arrow keys to navigate between cells. Press Enter or Space to select an account.\n                </span>\n                \n                @for (\n                  col of (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols); \n                  track trackByColumn($index, col); \n                  let i = $index\n                ) {\n                  <ng-container [matColumnDef]=\"col\" [sticky]=\"i === 0\">\n                    <!-- Header Cell -->\n                    <th \n                      mat-header-cell \n                      *matHeaderCellDef\n                      [class.table__header-cell--segment]=\"isSegmentColumn(i)\"\n                      [class.table__header-cell--regular]=\"!isSegmentColumn(i)\"\n                      [style.width.%]=\"getColumnWidthPercent(isSegmentColumn(i), (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols).length)\"\n                      [style.min-width.px]=\"isSegmentColumn(i) ? 150 : 200\"\n                      [attr.aria-sort]=\"i === 0 ? 'none' : null\"\n                      [attr.scope]=\"'col'\"\n                      [attr.aria-label]=\"getHeaderText(col, i, accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashHasMultiSelect : viewData.hasMultiSelect) + ' column'\">\n                      {{ getHeaderText(col, i, accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashHasMultiSelect : viewData.hasMultiSelect) | titlecase | unCamelCase }}\n                    </th>\n\n                    <!-- Data Cell -->\n                    <td \n                      mat-cell\n                      *matCellDef=\"let row\"\n                      [class.table__cell--segment]=\"isSegmentColumn(i)\"\n                      [class.table__cell--regular]=\"!isSegmentColumn(i)\"\n                      [class.table__cell--active]=\"editSelection?.segment === row['segment'] && activeColumn === col\"\n                      [class.table__cell--business-error]=\"!isSegmentColumn(i) && getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                      [attr.aria-label]=\"'Cell for ' + row['segment'] + ' segment, ' + col + ' column'\"\n                      [attr.aria-selected]=\"!!row[col]\"\n                      [attr.aria-invalid]=\"!isSegmentColumn(i) && !!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                      [attr.role]=\"'gridcell'\"\n                      [attr.tabindex]=\"isSegmentColumn(i) ? -1 : (row[col] ? 0 : -1)\">\n                      \n                      @if (isSegmentColumn(i)) {\n                        <!-- Segment Column -->\n                        <div class=\"segment-cell-content\">\n                          @if (editorMode && row.innerInput?.id) {\n                            <button \n                              mat-icon-button \n                              [matMenuTriggerData]=\"{innerInput: row.innerInput}\"\n                              [matMenuTriggerFor]=\"inputMenu\" \n                              [matTooltip]=\"'Options for: ' + row.innerInput.label\"\n                              [attr.aria-label]=\"'Options menu for ' + row.innerInput.label\"\n                              (click)=\"$event.stopPropagation()\">\n                              <mat-icon>more_vert</mat-icon>\n                            </button>\n                          }\n                          <span class=\"segment-cell-content__label\">{{ row['label'] }}</span>\n                        </div>\n                      } @else {\n                        <!-- Regular Column -->\n                        @if (row.innerInput?.id && formGroup && inputPortals[getPortalKey(row.innerInput.id)]) {\n                          <div class=\"portal-container\">\n                            <ng-template [cdkPortalOutlet]=\"inputPortals[getPortalKey(row.innerInput.id)]\"></ng-template>\n                          </div>\n                          } @else {\n                            @if (row[col]) {\n                            <!-- Account Selected -->\n                            @if (getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment']); as cellError) {\n                              <div class=\"account-cell-wrapper\" \n                                   [class.account-cell-wrapper--expandable]=\"isTextTruncated(row[col] | unCamelCase)\">\n                                <button \n                                  [disabled]=\"row['singleSelect'] === true && col === COLUMNS.CREDIT\"\n                                  (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); setAsTouched($event)\"\n                                  (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\n                                  color=\"primary\" \n                                  mat-button \n                                  class=\"cell-button cell-button--selected cell-button--business-error\"\n                                  [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase) + ' for ' + row['segment'] + ' segment, ' + col + ' column. Business error: ' + cellError.message\"\n                                  [attr.aria-invalid]=\"true\"\n                                  [attr.aria-pressed]=\"true\"\n                                  [matTooltip]=\"cellError.message\">\n                                  <div class=\"content\">\n                                    <span \n                                      class=\"selected-acount-label selected-acount-label--tag selected-acount-label--business-error\"\n                                      [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase)\">\n                                      {{ row[col] | unCamelCase }}\n                                      @if (shouldShowVatChip(row, col)) {\n                                        <span \n                                          class=\"vat-badge\"\n                                          [attr.aria-label]=\"'VAT applicable to ' + col + ' column'\"\n                                          [matTooltip]=\"'VAT is applicable to this ' + col + ' account selection'\">\n                                          VAT\n                                        </span>\n                                      }\n                                    </span>\n                                    <mat-icon class=\"business-error-indicator\" aria-hidden=\"true\">error</mat-icon>\n                                  </div>\n                                </button>\n                              </div>\n                            } @else {\n                              <div class=\"account-cell-wrapper\" \n                                   [class.account-cell-wrapper--expandable]=\"isTextTruncated(row[col] | unCamelCase)\">\n                                <button \n                                  [disabled]=\"(row['singleSelect'] === true && col === COLUMNS.CREDIT) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                  (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); setAsTouched($event)\"\n                                  (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\n                                  color=\"primary\" \n                                  mat-button \n                                  class=\"cell-button cell-button--selected\"\n                                  [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase) + ' for ' + row['segment'] + ' segment, ' + col + ' column. Press Enter or Space to change'\"\n                                  [attr.aria-invalid]=\"false\"\n                                  [attr.aria-disabled]=\"(row['singleSelect'] === true && col === COLUMNS.CREDIT) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                  [attr.aria-pressed]=\"true\">\n                                  <div class=\"content\">\n                                    <span \n                                      class=\"selected-acount-label selected-acount-label--tag\"\n                                      [attr.aria-label]=\"'Selected account: ' + (row[col] | unCamelCase)\">\n                                      {{ row[col] | unCamelCase }}\n                                      @if (shouldShowVatChip(row, col)) {\n                                        <span \n                                          class=\"vat-badge\"\n                                          [attr.aria-label]=\"'VAT applicable to ' + col + ' column'\"\n                                          [matTooltip]=\"'VAT is applicable to this ' + col + ' account selection'\">\n                                          VAT\n                                        </span>\n                                      }\n                                    </span>\n                                    @if (showValidationSuccessIndicators) {\n                                      <mat-icon class=\"validated-indicator\" aria-hidden=\"true\" [matTooltip]=\"'Validated'\">shield</mat-icon>\n                                    } @else {\n                                      <mat-icon class=\"success-indicator\" aria-hidden=\"true\">check_circle</mat-icon>\n                                    }\n                                  </div>\n                                </button>\n                              </div>\n                            }\n                          } @else {\n                            <!-- No Account Selected -->\n                            <div class=\"cell-button-wrapper\">\n                              <button \n                                [disabled]=\"selectionDisabled(row, col) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                [color]=\"\"\n                                (click)=\"selectAccount(row, col, accountingBasis === ACCOUNTING_BASIS.CASH); $event.stopPropagation(); setAsTouched($event)\"\n                                (keydown)=\"handleCellKeyDown($event, row, col, accountingBasis === ACCOUNTING_BASIS.CASH)\"\n                                mat-button\n                                class=\"cell-button\"\n                                [class.cell-button--business-error]=\"!!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                [attr.aria-label]=\"shouldShowAutoSelectedLabel(row, col) ? 'Auto selected for ' + row['segment'] + ' segment, ' + col + ' column' : 'Select account for ' + row['segment'] + ' segment, ' + col + ' column'\"\n                                [attr.aria-disabled]=\"selectionDisabled(row, col) || isCellDisabledByBusinessErrors(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                [attr.aria-describedby]=\"getValidationHint(row, col, accountingBasis || ACCOUNTING_BASIS.ACCRUAL) ? 'hint-' + row['segment'] + '-' + col : null\"\n                                [attr.aria-invalid]=\"hasError(touched, inputConfig?.required || false, !!row[col]) || !!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\"\n                                [attr.aria-required]=\"inputConfig?.required && !row[col]\"\n                                [matTooltip]=\"getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])?.message\">\n                                <div class=\"content\">\n                                  <span \n                                    class=\"selected-acount-label\"\n                                    [class.selected-acount-label--error]=\"hasError(touched, inputConfig?.required || false, !!row[col])\"\n                                    [class.selected-acount-label--business-error]=\"!!getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])\">\n                                    {{ (shouldShowAutoSelectedLabel(row, col) ? 'auto selected' : 'Select account') | unCamelCase }}\n                                    @if (inputConfig?.required && !row[col]) {\n                                      <span class=\"required-indicator\" aria-label=\"Required field\">*</span>\n                                    }\n                                  </span>\n                                  @if (getCellBusinessError(viewData.validationErrors, accountingBasis || ACCOUNTING_BASIS.ACCRUAL, col, row['segment'])) {\n                                    <mat-icon class=\"business-error-indicator\" aria-hidden=\"true\">error</mat-icon>\n                                  } @else if (shouldShowDropdownIcon(row, col)) {\n                                    <mat-icon aria-hidden=\"true\">arrow_drop_down</mat-icon>\n                                  }\n                                </div>\n                              </button>\n                              @if (getValidationHint(row, col, accountingBasis || ACCOUNTING_BASIS.ACCRUAL); as hint) {\n                                <span \n                                  class=\"inline-hint\"\n                                  [id]=\"'hint-' + row['segment'] + '-' + col\"\n                                  role=\"tooltip\"\n                                  aria-live=\"polite\">\n                                  {{ hint }}\n                                </span>\n                              }\n                            </div>\n                          }\n                        }\n                      }\n                    </td>\n                  </ng-container>\n                }\n\n                <tr mat-header-row *matHeaderRowDef=\"accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: (accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashCols : viewData.cols)\"></tr>\n              </table>\n            </div>\n            </div>\n\n            <!-- Empty State -->\n            <ng-container *ngIf=\"(accountingBasis === ACCOUNTING_BASIS.CASH ? viewData.cashAccountTreeKeys : viewData.accountTreeKeys).length === 0\">\n              <section class=\"empty-state\" role=\"status\" aria-live=\"polite\">\n                <mat-icon aria-hidden=\"true\">info</mat-icon>\n                <span>\n                  No account segments are currently configured.\n                  Please configure account segments to proceed.\n                </span>\n              </section>\n            </ng-container>\n\n            <!-- Success Messages (Temporary) -->\n            @if ((successMessage$ | async); as successMessages) {\n              @if (getSuccessMessage(successMessages, accountingBasis || ACCOUNTING_BASIS.ACCRUAL); as msg) {\n                <app-mscoa-temporary-hint\n                  [message]=\"getSuccessMessage(successMessages, accountingBasis || ACCOUNTING_BASIS.ACCRUAL) ?? ''\"\n                  [type]=\"'info'\"\n                  [duration]=\"6000\"\n                  [showDismiss]=\"true\">\n                </app-mscoa-temporary-hint>\n              }\n            }\n\n            <!-- Business Rule Errors (Temporary display, keeps error styling) -->\n            @if ((viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL] || []).length > 0) {\n              <app-mscoa-error-display\n                [errors]=\"viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL] || []\"\n                type=\"error\"\n                [context]=\"{ accountingBasis: accountingBasis || ACCOUNTING_BASIS.ACCRUAL }\"\n                [duration]=\"6000\"\n                [showDismiss]=\"true\">\n              </app-mscoa-error-display>\n            }\n\n            <!-- Temporary Contextual Hints -->\n            @if (temporaryHintMessage) {\n              <app-mscoa-temporary-hint\n                [message]=\"temporaryHintMessage\"\n                [type]=\"temporaryHintType\"\n                [duration]=\"6000\"\n                [showDismiss]=\"true\">\n              </app-mscoa-temporary-hint>\n            }\n\n            <!-- Validation Hints (Context-Aware) -->\n            @if (!touched && inputConfig?.required && !viewData.busnessRuleErrors[accountingBasis || ACCOUNTING_BASIS.ACCRUAL]?.length && (!isDualAccountBasis || accountingBasis === ACCOUNTING_BASIS.ACCRUAL || !accountingBasis)) {\n              <div class=\"validation-hints\" role=\"region\" aria-label=\"Validation guidance\">\n                <p class=\"validation-hints__title\">Guidance:</p>\n                <ul class=\"validation-hints__list\">\n                  <li>Account combinations are validated automatically. Select accounts that belong to compatible reporting categories.</li>\n                  <li>Required fields are marked with an asterisk (*). Complete all required selections to proceed.</li>\n                  <li>Some fields may be automatically populated based on your selections to ensure consistency.</li>\n                </ul>\n              </div>\n            }\n          }\n        </div>\n      </ng-template>\n    } @placeholder {\n      <div class=\"loading-placeholder\" role=\"status\" aria-live=\"polite\">\n        <p>Loading data...</p>\n      </div>\n    } @loading (minimum 100ms) {\n      <div class=\"loading-spinner-container\" role=\"status\" aria-live=\"polite\">\n        <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"40\"></mat-progress-spinner>\n        <span class=\"sr-only\">Loading account chart...</span>\n      </div>\n    } @error {\n      <div class=\"error-state\" role=\"alert\" aria-live=\"assertive\">\n        <p>Error loading data. Please try again.</p>\n      </div>\n    }\n  }\n</section>\n\n<!-- Input Menu -->\n<mat-menu #inputMenu=\"matMenu\">\n  <ng-template matMenuContent let-innerInput=\"innerInput\">\n    <app-mscoa-chart-input-menu\n      [innerInput]=\"innerInput\"\n      [countdownSeconds]=\"inputWillBeRemovedIn(innerInput.id)\"\n      [hoveredId]=\"hoveredInputId\"\n      (edit)=\"onInputMenuEdit($event)\"\n      (delete)=\"onInputMenuDelete($event)\"\n      (cancelDelete)=\"onInputMenuCancelDelete($event)\"\n      (hoverStart)=\"onInputMenuHoverStart($event)\"\n      (hoverEnd)=\"onInputMenuHoverEnd()\">\n    </app-mscoa-chart-input-menu>\n  </ng-template>\n</mat-menu>\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: .2s ease;--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}.single-base{gap:var(--mscoa-chart-spacing-sm);height:48px;font-size:.875em;font-weight:500;transition:background-color var(--mscoa-chart-transition)}.single-base--cash{background:var(--mat-sys-inverse-primary)!important}.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(--mat-sys-surface-container-low, #f7f2fa);border-radius:4px}.account-selection-table-container::-webkit-scrollbar-thumb{background:var(--mat-sys-outline-variant, #cac4d0);border-radius:4px}.account-selection-table-container::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-outline, #79747e)}.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:all var(--mscoa-chart-transition);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(--mat-sys-surface-container-low, #f7f2fa);border-color:var(--mat-sys-primary, #1976d2)}.cell-button.cell-button--selected{animation:fadeInSuccess var(--mscoa-chart-transition)}.cell-button.cell-button--business-error{border-color:var(--mat-sys-error, #ba1a1a)}.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(--mat-sys-success, #4caf50);font-size:18px;width:18px;right:-8px;top:-4px;background:#fff;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(--mat-sys-primary, #1976d2);font-size:18px;width:18px;height:18px;right:-8px;top:-4px;background:#fff;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(--mat-sys-error, #ba1a1a);font-size:18px;width:18px;right:-8px;top:-4px;background:#fff;border-radius:16px;position:absolute;height:18px;margin-left:var(--mscoa-chart-spacing-xs);flex-shrink:0}.required-indicator{color:var(--mat-sys-error, #ba1a1a);font-weight:600;margin-left:2px}.inline-hint{display:block;font-size:12px;color:var(--mat-sys-on-surface-variant, #49454f);margin-top:var(--mscoa-chart-spacing-xs);padding:var(--mscoa-chart-spacing-xs) var(--mscoa-chart-spacing-sm);background-color:var(--mat-sys-surface-container-low, #f7f2fa);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(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #001d35);border-radius:16px;font-size:13px;font-weight:500;line-height:1.5;border:1px solid var(--mat-sys-primary, #1976d2);box-shadow:0 1px 2px #0000001a;transition:all var(--mscoa-chart-transition);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(--mat-sys-primary-container-high, #d0e4f7);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(--mat-sys-tertiary-container, #e0ffee);color:var(--mat-sys-on-tertiary-container, #7c5000);border:1px solid var(--mat-sys-outline-variant, #cac4d0);box-shadow:none;transition:all var(--mscoa-chart-transition);flex-shrink:0;align-self:flex-start;margin-top:2px;line-height:1}.vat-badge:hover{background-color:var(--mat-sys-tertiary-container-high, #ffe0b2);border-color:var(--mat-sys-tertiary, #f57c00)}.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:all var(--mscoa-chart-transition);box-shadow:0 1px 3px #0000001f}.vat-chip--applicable{background:linear-gradient(135deg,var(--mat-sys-tertiary, #f57c00) 0%,var(--mat-sys-tertiary-container, #ff9800) 100%);color:var(--mat-sys-on-tertiary, #ffffff);border:1px solid var(--mat-sys-tertiary, #f57c00)}.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;text-transform:uppercase}.info-box{display:flex;align-items:center;gap:var(--mscoa-chart-spacing-sm);padding:12px;background:azure;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(--mat-sys-surface-container-low, #f7f2fa);border-radius:var(--mscoa-chart-border-radius);border-left:4px solid var(--mat-sys-primary, #1976d2);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(--mat-sys-on-surface, #1c1b16);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(--mat-sys-on-surface-variant, #49454f);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(--mat-sys-primary, #1976d2)}.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}.main-expanse-content{background:var(--mat-sys-surface-container)!important}@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:700}}@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(--mat-sys-error-container, #ffdad6);border-left:3px solid var(--mat-sys-error, #ba1a1a)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInSuccess{0%{background-color:transparent}50%{background-color:var(--mat-sys-success-container, #e8f5e9)}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: MatModulesModule }, { 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: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: PortalModule }, { kind: "component", type: MscoaChartInputMenuComponent, selector: "app-mscoa-chart-input-menu", inputs: ["innerInput", "countdownSeconds", "hoveredId"], outputs: ["edit", "delete", "cancelDelete", "hoverStart", "hoverEnd"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i2.MatButton, i2.MatIconButton, i3.MatIcon, i6.MatMenuTrigger, i9.MatTable, i9.MatHeaderCellDef, i9.MatHeaderRowDef, i9.MatColumnDef, i9.MatCellDef, i9.MatRowDef, i9.MatHeaderCell, i9.MatCell, i9.MatHeaderRow, i9.MatRow, i4.MatTooltip, i9$1.CdkPortalOutlet, i2$1.NgIf, i2$1.NgTemplateOutlet, import('./ngx-t-forms-mscoa-chart-toolbar.component-DY1QnG08.mjs').then(m => m.MscoaChartToolbarComponent), import('./ngx-t-forms-mscoa-error-display.component-CRc_4l3l.mjs').then(m => m.MscoaErrorDisplayComponent), import('./ngx-t-forms-mscoa-temporary-hint.component-GYxT-56Y.mjs').then(m => m.MscoaTemporaryHintComponent), i2$1.AsyncPipe, i2$1.TitleCasePipe, Promise.resolve().then(function () { return daysAgo_pipe; }).then(m => m.ConvertCamelCasePipe)]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.1.5", ngImport: i0, type: MscoaChartComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-mscoa-chart-toolbar.component-D_umeAPL.mjs').then(m => m.MscoaChartToolbarComponent), import('./ngx-t-forms-mscoa-error-display.component-CSX2NCNU.mjs').then(m => m.MscoaErrorDisplayComponent), import('./ngx-t-forms-mscoa-temporary-hint.component-BPkjsRmH.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.1.5", ngImport: i0, type: MscoaChartComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-mscoa-chart-toolbar.component-DY1QnG08.mjs').then(m => m.MscoaChartToolbarComponent), import('./ngx-t-forms-mscoa-error-display.component-CRc_4l3l.mjs').then(m => m.MscoaErrorDisplayComponent), import('./ngx-t-forms-mscoa-temporary-hint.component-GYxT-56Y.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: 'app-mscoa-chart', standalone: true, imports: [
                             MatModulesModule,
@@ -13411,12 +13930,42 @@ class MultipleInputTableViewComponent {
     rowIsInEdit(row) {
         return !!this.inputConfig?.formIsOpen && this.formGroup?.controls[`${this.inputConfig?.id}.id`]?.value === row[`${this.inputConfig?.id}.id`];
     }
+    get userCanEdit() {
+        if (!this.inputConfig)
+            return false;
+        //NOTE: Temporary backward compatibility for older versions of the config that might not have the new property
+        if (!this.inputConfig.multipleInputAvailableOperations)
+            return true;
+        return this.inputConfig.multipleInputAvailableOperations?.includes(MultipleInputAvailableOperations.Update);
+    }
+    get userCanRemove() {
+        if (!this.inputConfig)
+            return false;
+        //NOTE: Temporary backward compatibility for older versions of the config that might not have the new property
+        if (!this.inputConfig.multipleInputAvailableOperations)
+            return true;
+        return this.inputConfig.multipleInputAvailableOperations?.includes(MultipleInputAvailableOperations.Remove);
+    }
+    get userCanAdd() {
+        if (!this.inputConfig)
+            return false;
+        //NOTE: Temporary backward compatibility for older versions of the config that might not have the new property
+        if (!this.inputConfig.multipleInputAvailableOperations)
+            return true;
+        return this.inputConfig.multipleInputAvailableOperations?.includes(MultipleInputAvailableOperations.Add);
+    }
+    get userCanApplyOptionsTo() {
+        const hasSomeOptionsToApply = this.userCanEdit || this.userCanRemove || this.userCanAdd;
+        if (hasSomeOptionsToApply)
+            return true;
+        return false;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MultipleInputTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MultipleInputTableViewComponent, isStandalone: true, selector: "lib-multiple-input-table-view", inputs: { inputConfig: "inputConfig", dataSource: "dataSource", applyOptionsTo: "applyOptionsTo", formGroup: "formGroup" }, outputs: { onEditItem: "onEditItem", onDeleteItem: "onDeleteItem", onCopy: "onCopy", onApplyOptionsTo: "onApplyOptionsTo" }, ngImport: i0, template: "@defer (on viewport) {\r\n\r\n@if (getColConfig.displayedColumnsInOrder.length===0) {\r\n<div style=\"\r\n      padding-left: 16px;\r\n      padding-right: 16px;\r\n      padding-top: 16px;\r\n      padding-bottom: 16px;\r\n\r\n      display: flex;\r\n      justify-content: center;\r\n      opacity: 0.6;\r\n      font-size: 0.8125em;\r\n    \">\r\n  No columns\r\n</div>\r\n}\r\n<div class=\"table-container\">\r\n\r\n  <table mat-table [dataSource]=\"(dataSource || [])\" class=\"example-table\" matSort matSortActive=\"created\"\r\n    matSortDisableClear matSortDirection=\"desc\">\r\n    @for (col of (displayedColumnsInOrder||[]); track col) {\r\n    <ng-container [matColumnDef]=\"col\">\r\n      <th mat-header-cell  *matHeaderCellDef>\r\n        <span style=\"text-align: start; line-height: normal; font-size: 0.8125em\">\r\n          {{ getColConfig.columnsConfig?.[col]?.[\"label\"] }}\r\n        </span>\r\n        @if($last){\r\n          <button  matTooltip=\"Show other values\"  [matMenuTriggerFor]=\"colOptions\" \r\n            [matMenuTriggerData]=\"{}\"  mat-icon-button>\r\n            <mat-icon>\r\n              label\r\n            </mat-icon>\r\n          </button>\r\n  \r\n        }\r\n      </th>\r\n      <td [class.functionClass]=\"row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION']\"\r\n     \r\n        [style.background]=\"\r\n          returnBackground(row,  getColConfig.columnsConfig?.[col])\r\n        \" mat-cell *matCellDef=\"let row\">\r\n        <div *ngIf=\" getColConfig.columnsConfig?.[col]?.['type'] === 'removal'\" class=\"cellClass\">\r\n          \r\n          <div style=\"width: 100%; text-align: right;\" *ngIf=\"!!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&!row['id'] &&  !inputConfig?.multipleInputInEditId   || \r\n          !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&  inputConfig?.multipleInputInEditId &&\r\n          inputConfig?.multipleInputInEditId !== row['id']\">\r\n            <strong>\r\n\r\n              {{getCalculationFunction(row)}}\r\n            </strong>\r\n\r\n          </div>\r\n          <button mat-icon-button\r\n          [color]=\"t.menuOpen ? 'primary' : 'basic'\"\r\n          *ngIf=\"\r\n            !row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n            row['' ] !== 'true' && !inputConfig?.readonly  \r\n               \r\n            \" \r\n            [matMenuTriggerFor]=\"rowOptions\" \r\n            [matMenuTriggerData]=\"{row:row}\" \r\n            #t=\"matMenuTrigger\" (click)=\"applyOptionsToFn(row)\"\r\n            expand=\"block\" fill=\"clear\" style=\"margin-left: auto;margin-right:0px;display:block\">\r\n          @if (rowIsInEdit(row)) {\r\n            <mat-icon color=\"primary\">\r\n              edit\r\n            </mat-icon>   \r\n\r\n          }@else {\r\n            <mat-icon >\r\n              {{\r\n                t.menuOpen  ? 'close' : 'more_horiz'\r\n              }}\r\n            \r\n            </mat-icon>\r\n          }\r\n        \r\n\r\n          </button>\r\n\r\n\r\n          <mat-chip *ngIf=\"\r\n       row['SYSTEM_KEY_IN_EDIT']\r\n            \r\n        \">\r\n            In {{ inputConfig?.readonly ? 'View' : 'Edit' }}\r\n\r\n          </mat-chip>\r\n\r\n        </div>\r\n        <div *ngIf=\"getColConfig.columnsConfig && getColConfig.columnsConfig?.[col]?.type !== 'removal'\"\r\n          class=\"cellClass\">\r\n          <span >\r\n            {{ row[col] |formatData: getColConfig.columnsConfig?.[col].dataType }}\r\n\r\n          </span>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n    }\r\n\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"getColConfig.displayedColumnsInOrder \"></tr>\r\n    <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n      \r\n      *matRowDef=\"let row; columns: getColConfig.displayedColumnsInOrder\"></tr>\r\n  </table>\r\n  \r\n  <div *ngIf=\"!(dataSource?.data)||(dataSource?.data)?.length === 0\">\r\n    <div style=\"\r\n          padding-left: 16px;\r\n          padding-right: 16px;\r\n          padding-top: 16px;\r\n          padding-bottom: 16px;\r\n\r\n          display: flex;\r\n          justify-content: center;\r\n          opacity: 0.6;\r\n          font-size: 0.8125em;\r\n        \">\r\n        <div style=\"\r\n        padding-left: 16px;\r\n        padding-right: 16px;\r\n        padding-top: 16px;\r\n        padding-bottom: 16px;\r\n\r\n        display: flex;\r\n        justify-content: center;\r\n        opacity: 0.6;\r\n        font-size: 0.8125em;\r\n      \">\r\n   \r\n    <div style=\"margin-top: 8px; text-align: center;\">\r\n      <mat-icon style=\"font-size: 1.25em; vertical-align: middle; margin-right: 8px;\">list</mat-icon>\r\n      <div style=\"margin-top: 8px;\">\r\n        <strong>No items yet</strong>\r\n        <p style=\"margin-top: 4px; font-size: 0.8125em;\">\r\n          <strong>Click the add button</strong> to create a new row. You'll be able to fill in details using a form.\r\n          Each saved entry will appear as a row in this table.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n    </div>\r\n  </div>\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}\r\n<mat-menu #colOptions=\"matMenu\">\r\n  <ng-template matMenuContent >\r\n        @for (label of allPossibleLabels; track label.label) {\r\n        <button mat-menu-item  (click)=\"toggleTepLabel($event,label.formControlName);\">\r\n          <mat-icon>\r\n             {{ label.selected?'check_circle':'radio_button_unchecked'}}\r\n          </mat-icon>\r\n           {{label.label}}\r\n           \r\n        </button>\r\n      \r\n        }\r\n\r\n  </ng-template>\r\n</mat-menu>\r\n<mat-menu #rowOptions=\"matMenu\">\r\n  <ng-template matMenuContent let-row=\"row\">\r\n    @if(!inputConfig?.readonly){\r\n    <button mat-menu-item (click)=\"editItem(row)\">\r\n      <mat-icon>\r\n        {{'edit'}}\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          {{ 'Edit'}}\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          {{inputConfig?.readonly ? 'View item properties' : 'Modify item properties'}}\r\n        </div>\r\n      </div>\r\n    </button>\r\n\r\n    <button mat-menu-item (click)=\"copy(row)\">\r\n      <mat-icon>\r\n        content_copy\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          Duplicate\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          Create a copy with same values\r\n        </div>\r\n      </div>\r\n    </button>\r\n    @if(isAboutToDeleteRow(row)){\r\n      <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n        <mat-icon color=\"accent\">\r\n          cancel\r\n        </mat-icon>\r\n        <div class=\"option-text\">\r\n          <div class=\"option-main-text\" style=\"color: #2196F3;\">\r\n            Cancel Deletion\r\n          </div>\r\n          <div class=\"option-sub-text\">\r\n            Auto-deleting in {{ secondsCountDown()}} seconds...\r\n          </div>\r\n        </div>\r\n      </button>\r\n      <div class=\"deletion-progress-container\">\r\n        <mat-progress-bar color=\"warn\" mode=\"determinate\" [value]=\"getCountdownSeconds()\"></mat-progress-bar>\r\n        <div class=\"deletion-message\" *ngIf=\"getCountdownSeconds() > 75\">\r\n          Deleting soon...\r\n        </div>\r\n      </div>\r\n    }@else {\r\n      <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n        <mat-icon color=\"warn\">\r\n          delete_outline\r\n        </mat-icon>\r\n        <div class=\"option-text\">\r\n          <div class=\"option-main-text\">\r\n            Delete \r\n          </div>\r\n          <div class=\"option-sub-text\">\r\n            Will delete after 3 seconds (click to cancel)\r\n          </div>\r\n        </div>\r\n      </button>\r\n    }\r\n    }\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".functionClass{background:var(--mat-sys-surface-container, var(--mat-app-surface));font-weight:500}.option-text{display:flex;flex-direction:column;margin-left:8px}.option-main-text{font-size:.875em;font-weight:500;margin-bottom:2px;line-height:normal}.option-sub-text{line-height:normal;font-size:.75em;color:#0000008a;font-weight:400;line-height:1.2}.deletion-progress-container{position:relative;padding:0 16px 8px}.deletion-message{position:absolute;right:16px;top:2px;font-size:.6875em;color:#f44336;font-weight:500;line-height:1.6;animation:pulse 1s infinite}button:has(+.deletion-progress-container){border-bottom:none!important;padding-bottom:4px!important}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@media(max-width:600px){.option-sub-text{max-width:180px;white-space:normal}}.table-container{max-width:100%!important;overflow:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: i4$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTableModule }], deferBlockDependencies: [() => [i2.MatIconButton, i4$3.MatChip, i3.MatIcon, i6.MatMenuTrigger, i10$1.MatSort, i9.MatTable, i9.MatHeaderCellDef, i9.MatHeaderRowDef, i9.MatColumnDef, i9.MatCellDef, i9.MatRowDef, i9.MatHeaderCell, i9.MatCell, i9.MatHeaderRow, i9.MatRow, i4.MatTooltip, i2$1.NgIf, Promise.resolve().then(function () { return formatData_pipe; }).then(m => m.FormatDataPipe)]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MultipleInputTableViewComponent, isStandalone: true, selector: "lib-multiple-input-table-view", inputs: { inputConfig: "inputConfig", dataSource: "dataSource", applyOptionsTo: "applyOptionsTo", formGroup: "formGroup" }, outputs: { onEditItem: "onEditItem", onDeleteItem: "onDeleteItem", onCopy: "onCopy", onApplyOptionsTo: "onApplyOptionsTo" }, ngImport: i0, template: "@defer (on viewport) {\r\n\r\n@if (getColConfig.displayedColumnsInOrder.length===0) {\r\n<div style=\"\r\n      padding-left: 16px;\r\n      padding-right: 16px;\r\n      padding-top: 16px;\r\n      padding-bottom: 16px;\r\n\r\n      display: flex;\r\n      justify-content: center;\r\n      opacity: 0.6;\r\n      font-size: 0.8125em;\r\n    \">\r\n  No columns\r\n</div>\r\n}\r\n<div class=\"table-container\">\r\n\r\n  <table mat-table [dataSource]=\"(dataSource || [])\" class=\"example-table\" matSort matSortActive=\"created\"\r\n    matSortDisableClear matSortDirection=\"desc\">\r\n    @for (col of (displayedColumnsInOrder||[]); track col) {\r\n    <ng-container [matColumnDef]=\"col\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        <span style=\"text-align: start; line-height: normal; font-size: 0.8125em\">\r\n          {{ getColConfig.columnsConfig?.[col]?.[\"label\"] }}\r\n        </span>\r\n        @if($last){\r\n        <button matTooltip=\"Show other values\" [matMenuTriggerFor]=\"colOptions\" [matMenuTriggerData]=\"{}\"\r\n          mat-icon-button>\r\n          <mat-icon>\r\n            label\r\n          </mat-icon>\r\n        </button>\r\n\r\n        }\r\n      </th>\r\n      <td [class.functionClass]=\"row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION']\"\r\n        [style.background]=\"\r\n          returnBackground(row,  getColConfig.columnsConfig?.[col])\r\n        \" mat-cell *matCellDef=\"let row\">\r\n        <div *ngIf=\" getColConfig.columnsConfig?.[col]?.['type'] === 'removal'\" class=\"cellClass\">\r\n\r\n          <div style=\"width: 100%; text-align: right;\" *ngIf=\"!!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&!row['id'] &&  !inputConfig?.multipleInputInEditId   || \r\n          !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&  inputConfig?.multipleInputInEditId &&\r\n          inputConfig?.multipleInputInEditId !== row['id']\">\r\n            <strong>\r\n\r\n              {{getCalculationFunction(row)}}\r\n            </strong>\r\n\r\n          </div>\r\n          <button mat-icon-button [color]=\"t.menuOpen ? 'primary' : 'basic'\" *ngIf=\"\r\n          userCanApplyOptionsTo &&\r\n            !row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n            row['' ] !== 'true' && !inputConfig?.readonly  \r\n               \r\n            \" [matMenuTriggerFor]=\"rowOptions\" [matMenuTriggerData]=\"{row:row}\" #t=\"matMenuTrigger\"\r\n            (click)=\"applyOptionsToFn(row)\" expand=\"block\" fill=\"clear\"\r\n            style=\"margin-left: auto;margin-right:0px;display:block\">\r\n            @if (rowIsInEdit(row)) {\r\n            <mat-icon color=\"primary\">\r\n              edit\r\n            </mat-icon>\r\n\r\n            }@else {\r\n            <mat-icon>\r\n              {{\r\n              t.menuOpen ? 'close' : 'more_horiz'\r\n              }}\r\n\r\n            </mat-icon>\r\n            }\r\n\r\n\r\n          </button>\r\n\r\n\r\n          <mat-chip *ngIf=\"\r\n       row['SYSTEM_KEY_IN_EDIT']\r\n            \r\n        \">\r\n            In {{ inputConfig?.readonly ? 'View' : 'Edit' }}\r\n\r\n          </mat-chip>\r\n\r\n        </div>\r\n        <div *ngIf=\"getColConfig.columnsConfig && getColConfig.columnsConfig?.[col]?.type !== 'removal'\"\r\n          class=\"cellClass\">\r\n          <span>\r\n            {{ row[col] |formatData: getColConfig.columnsConfig?.[col].dataType }}\r\n\r\n          </span>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n    }\r\n\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"getColConfig.displayedColumnsInOrder \"></tr>\r\n    <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n      *matRowDef=\"let row; columns: getColConfig.displayedColumnsInOrder\"></tr>\r\n  </table>\r\n\r\n  <div *ngIf=\"!(dataSource?.data)||(dataSource?.data)?.length === 0\">\r\n    <div style=\"\r\n          padding-left: 16px;\r\n          padding-right: 16px;\r\n          padding-top: 16px;\r\n          padding-bottom: 16px;\r\n\r\n          display: flex;\r\n          justify-content: center;\r\n          opacity: 0.6;\r\n          font-size: 0.8125em;\r\n        \">\r\n      <div style=\"\r\n        padding-left: 16px;\r\n        padding-right: 16px;\r\n        padding-top: 16px;\r\n        padding-bottom: 16px;\r\n\r\n        display: flex;\r\n        justify-content: center;\r\n        opacity: 0.6;\r\n        font-size: 0.8125em;\r\n      \">\r\n\r\n        <div style=\"margin-top: 8px; text-align: center;\">\r\n          <mat-icon style=\"font-size: 1.25em; vertical-align: middle; margin-right: 8px;\">list</mat-icon>\r\n          <div style=\"margin-top: 8px;\">\r\n            <strong>No items yet</strong>\r\n            <p style=\"margin-top: 4px; font-size: 0.8125em;\">\r\n              <strong>Click the add button</strong> to create a new row. You'll be able to fill in details using a form.\r\n              Each saved entry will appear as a row in this table.\r\n            </p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\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}\r\n<mat-menu #colOptions=\"matMenu\">\r\n  <ng-template matMenuContent>\r\n    @for (label of allPossibleLabels; track label.label) {\r\n    <button mat-menu-item (click)=\"toggleTepLabel($event,label.formControlName);\">\r\n      <mat-icon>\r\n        {{ label.selected?'check_circle':'radio_button_unchecked'}}\r\n      </mat-icon>\r\n      {{label.label}}\r\n\r\n    </button>\r\n\r\n    }\r\n\r\n  </ng-template>\r\n</mat-menu>\r\n<mat-menu #rowOptions=\"matMenu\">\r\n  <ng-template matMenuContent let-row=\"row\">\r\n    @if(!inputConfig?.readonly ){\r\n    @if(userCanEdit){\r\n    <button mat-menu-item (click)=\"editItem(row)\">\r\n      <mat-icon>\r\n        {{'edit'}}\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          {{ 'Edit'}}\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          {{inputConfig?.readonly ? 'View item properties' : 'Modify item properties'}}\r\n        </div>\r\n      </div>\r\n    </button>\r\n    }\r\n    @if(userCanAdd){\r\n         <button mat-menu-item (click)=\"copy(row)\">\r\n      <mat-icon>\r\n        content_copy\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          Duplicate\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          Create a copy with same values\r\n        </div>\r\n      </div>\r\n    </button>\r\n    }\r\n\r\n\r\n  @if(userCanRemove){\r\n    \r\n    @if(isAboutToDeleteRow(row)){\r\n    <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n      <mat-icon color=\"accent\">\r\n        cancel\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\" style=\"color: #2196F3;\">\r\n          Cancel Deletion\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          Auto-deleting in {{ secondsCountDown()}} seconds...\r\n        </div>\r\n      </div>\r\n    </button>\r\n    <div class=\"deletion-progress-container\">\r\n      <mat-progress-bar color=\"warn\" mode=\"determinate\" [value]=\"getCountdownSeconds()\"></mat-progress-bar>\r\n      <div class=\"deletion-message\" *ngIf=\"getCountdownSeconds() > 75\">\r\n        Deleting soon...\r\n      </div>\r\n    </div>\r\n    }@else {\r\n    <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n      <mat-icon color=\"warn\">\r\n        delete_outline\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          Delete\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          Will delete after 3 seconds (click to cancel)\r\n        </div>\r\n      </div>\r\n    </button>\r\n    }\r\n      }    }\r\n  </ng-template>\r\n</mat-menu>", styles: [".functionClass{background:var(--mat-sys-surface-container, var(--mat-app-surface));font-weight:500}.option-text{display:flex;flex-direction:column;margin-left:8px}.option-main-text{font-size:.875em;font-weight:500;margin-bottom:2px;line-height:normal}.option-sub-text{line-height:normal;font-size:.75em;color:#0000008a;font-weight:400;line-height:1.2}.deletion-progress-container{position:relative;padding:0 16px 8px}.deletion-message{position:absolute;right:16px;top:2px;font-size:.6875em;color:#f44336;font-weight:500;line-height:1.6;animation:pulse 1s infinite}button:has(+.deletion-progress-container){border-bottom:none!important;padding-bottom:4px!important}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@media(max-width:600px){.option-sub-text{max-width:180px;white-space:normal}}.table-container{max-width:100%!important;overflow:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: i4$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTableModule }], deferBlockDependencies: [() => [i2.MatIconButton, i4$3.MatChip, i3.MatIcon, i6.MatMenuTrigger, i10$1.MatSort, i9.MatTable, i9.MatHeaderCellDef, i9.MatHeaderRowDef, i9.MatColumnDef, i9.MatCellDef, i9.MatRowDef, i9.MatHeaderCell, i9.MatCell, i9.MatHeaderRow, i9.MatRow, i4.MatTooltip, i2$1.NgIf, Promise.resolve().then(function () { return formatData_pipe; }).then(m => m.FormatDataPipe)]] }); }
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.1.5", ngImport: i0, type: MultipleInputTableViewComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return formatData_pipe; }).then(m => m.FormatDataPipe)], resolveMetadata: FormatDataPipe => ({ decorators: [{
                 type: Component,
-                args: [{ selector: 'lib-multiple-input-table-view', standalone: true, imports: [MatModulesModule, CommonModule, MatTableModule, FormatDataPipe], template: "@defer (on viewport) {\r\n\r\n@if (getColConfig.displayedColumnsInOrder.length===0) {\r\n<div style=\"\r\n      padding-left: 16px;\r\n      padding-right: 16px;\r\n      padding-top: 16px;\r\n      padding-bottom: 16px;\r\n\r\n      display: flex;\r\n      justify-content: center;\r\n      opacity: 0.6;\r\n      font-size: 0.8125em;\r\n    \">\r\n  No columns\r\n</div>\r\n}\r\n<div class=\"table-container\">\r\n\r\n  <table mat-table [dataSource]=\"(dataSource || [])\" class=\"example-table\" matSort matSortActive=\"created\"\r\n    matSortDisableClear matSortDirection=\"desc\">\r\n    @for (col of (displayedColumnsInOrder||[]); track col) {\r\n    <ng-container [matColumnDef]=\"col\">\r\n      <th mat-header-cell  *matHeaderCellDef>\r\n        <span style=\"text-align: start; line-height: normal; font-size: 0.8125em\">\r\n          {{ getColConfig.columnsConfig?.[col]?.[\"label\"] }}\r\n        </span>\r\n        @if($last){\r\n          <button  matTooltip=\"Show other values\"  [matMenuTriggerFor]=\"colOptions\" \r\n            [matMenuTriggerData]=\"{}\"  mat-icon-button>\r\n            <mat-icon>\r\n              label\r\n            </mat-icon>\r\n          </button>\r\n  \r\n        }\r\n      </th>\r\n      <td [class.functionClass]=\"row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION']\"\r\n     \r\n        [style.background]=\"\r\n          returnBackground(row,  getColConfig.columnsConfig?.[col])\r\n        \" mat-cell *matCellDef=\"let row\">\r\n        <div *ngIf=\" getColConfig.columnsConfig?.[col]?.['type'] === 'removal'\" class=\"cellClass\">\r\n          \r\n          <div style=\"width: 100%; text-align: right;\" *ngIf=\"!!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&!row['id'] &&  !inputConfig?.multipleInputInEditId   || \r\n          !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&  inputConfig?.multipleInputInEditId &&\r\n          inputConfig?.multipleInputInEditId !== row['id']\">\r\n            <strong>\r\n\r\n              {{getCalculationFunction(row)}}\r\n            </strong>\r\n\r\n          </div>\r\n          <button mat-icon-button\r\n          [color]=\"t.menuOpen ? 'primary' : 'basic'\"\r\n          *ngIf=\"\r\n            !row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n            row['' ] !== 'true' && !inputConfig?.readonly  \r\n               \r\n            \" \r\n            [matMenuTriggerFor]=\"rowOptions\" \r\n            [matMenuTriggerData]=\"{row:row}\" \r\n            #t=\"matMenuTrigger\" (click)=\"applyOptionsToFn(row)\"\r\n            expand=\"block\" fill=\"clear\" style=\"margin-left: auto;margin-right:0px;display:block\">\r\n          @if (rowIsInEdit(row)) {\r\n            <mat-icon color=\"primary\">\r\n              edit\r\n            </mat-icon>   \r\n\r\n          }@else {\r\n            <mat-icon >\r\n              {{\r\n                t.menuOpen  ? 'close' : 'more_horiz'\r\n              }}\r\n            \r\n            </mat-icon>\r\n          }\r\n        \r\n\r\n          </button>\r\n\r\n\r\n          <mat-chip *ngIf=\"\r\n       row['SYSTEM_KEY_IN_EDIT']\r\n            \r\n        \">\r\n            In {{ inputConfig?.readonly ? 'View' : 'Edit' }}\r\n\r\n          </mat-chip>\r\n\r\n        </div>\r\n        <div *ngIf=\"getColConfig.columnsConfig && getColConfig.columnsConfig?.[col]?.type !== 'removal'\"\r\n          class=\"cellClass\">\r\n          <span >\r\n            {{ row[col] |formatData: getColConfig.columnsConfig?.[col].dataType }}\r\n\r\n          </span>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n    }\r\n\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"getColConfig.displayedColumnsInOrder \"></tr>\r\n    <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n      \r\n      *matRowDef=\"let row; columns: getColConfig.displayedColumnsInOrder\"></tr>\r\n  </table>\r\n  \r\n  <div *ngIf=\"!(dataSource?.data)||(dataSource?.data)?.length === 0\">\r\n    <div style=\"\r\n          padding-left: 16px;\r\n          padding-right: 16px;\r\n          padding-top: 16px;\r\n          padding-bottom: 16px;\r\n\r\n          display: flex;\r\n          justify-content: center;\r\n          opacity: 0.6;\r\n          font-size: 0.8125em;\r\n        \">\r\n        <div style=\"\r\n        padding-left: 16px;\r\n        padding-right: 16px;\r\n        padding-top: 16px;\r\n        padding-bottom: 16px;\r\n\r\n        display: flex;\r\n        justify-content: center;\r\n        opacity: 0.6;\r\n        font-size: 0.8125em;\r\n      \">\r\n   \r\n    <div style=\"margin-top: 8px; text-align: center;\">\r\n      <mat-icon style=\"font-size: 1.25em; vertical-align: middle; margin-right: 8px;\">list</mat-icon>\r\n      <div style=\"margin-top: 8px;\">\r\n        <strong>No items yet</strong>\r\n        <p style=\"margin-top: 4px; font-size: 0.8125em;\">\r\n          <strong>Click the add button</strong> to create a new row. You'll be able to fill in details using a form.\r\n          Each saved entry will appear as a row in this table.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n    </div>\r\n  </div>\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}\r\n<mat-menu #colOptions=\"matMenu\">\r\n  <ng-template matMenuContent >\r\n        @for (label of allPossibleLabels; track label.label) {\r\n        <button mat-menu-item  (click)=\"toggleTepLabel($event,label.formControlName);\">\r\n          <mat-icon>\r\n             {{ label.selected?'check_circle':'radio_button_unchecked'}}\r\n          </mat-icon>\r\n           {{label.label}}\r\n           \r\n        </button>\r\n      \r\n        }\r\n\r\n  </ng-template>\r\n</mat-menu>\r\n<mat-menu #rowOptions=\"matMenu\">\r\n  <ng-template matMenuContent let-row=\"row\">\r\n    @if(!inputConfig?.readonly){\r\n    <button mat-menu-item (click)=\"editItem(row)\">\r\n      <mat-icon>\r\n        {{'edit'}}\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          {{ 'Edit'}}\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          {{inputConfig?.readonly ? 'View item properties' : 'Modify item properties'}}\r\n        </div>\r\n      </div>\r\n    </button>\r\n\r\n    <button mat-menu-item (click)=\"copy(row)\">\r\n      <mat-icon>\r\n        content_copy\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          Duplicate\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          Create a copy with same values\r\n        </div>\r\n      </div>\r\n    </button>\r\n    @if(isAboutToDeleteRow(row)){\r\n      <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n        <mat-icon color=\"accent\">\r\n          cancel\r\n        </mat-icon>\r\n        <div class=\"option-text\">\r\n          <div class=\"option-main-text\" style=\"color: #2196F3;\">\r\n            Cancel Deletion\r\n          </div>\r\n          <div class=\"option-sub-text\">\r\n            Auto-deleting in {{ secondsCountDown()}} seconds...\r\n          </div>\r\n        </div>\r\n      </button>\r\n      <div class=\"deletion-progress-container\">\r\n        <mat-progress-bar color=\"warn\" mode=\"determinate\" [value]=\"getCountdownSeconds()\"></mat-progress-bar>\r\n        <div class=\"deletion-message\" *ngIf=\"getCountdownSeconds() > 75\">\r\n          Deleting soon...\r\n        </div>\r\n      </div>\r\n    }@else {\r\n      <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n        <mat-icon color=\"warn\">\r\n          delete_outline\r\n        </mat-icon>\r\n        <div class=\"option-text\">\r\n          <div class=\"option-main-text\">\r\n            Delete \r\n          </div>\r\n          <div class=\"option-sub-text\">\r\n            Will delete after 3 seconds (click to cancel)\r\n          </div>\r\n        </div>\r\n      </button>\r\n    }\r\n    }\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".functionClass{background:var(--mat-sys-surface-container, var(--mat-app-surface));font-weight:500}.option-text{display:flex;flex-direction:column;margin-left:8px}.option-main-text{font-size:.875em;font-weight:500;margin-bottom:2px;line-height:normal}.option-sub-text{line-height:normal;font-size:.75em;color:#0000008a;font-weight:400;line-height:1.2}.deletion-progress-container{position:relative;padding:0 16px 8px}.deletion-message{position:absolute;right:16px;top:2px;font-size:.6875em;color:#f44336;font-weight:500;line-height:1.6;animation:pulse 1s infinite}button:has(+.deletion-progress-container){border-bottom:none!important;padding-bottom:4px!important}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@media(max-width:600px){.option-sub-text{max-width:180px;white-space:normal}}.table-container{max-width:100%!important;overflow:auto!important}\n"] }]
+                args: [{ selector: 'lib-multiple-input-table-view', standalone: true, imports: [MatModulesModule, CommonModule, MatTableModule, FormatDataPipe], template: "@defer (on viewport) {\r\n\r\n@if (getColConfig.displayedColumnsInOrder.length===0) {\r\n<div style=\"\r\n      padding-left: 16px;\r\n      padding-right: 16px;\r\n      padding-top: 16px;\r\n      padding-bottom: 16px;\r\n\r\n      display: flex;\r\n      justify-content: center;\r\n      opacity: 0.6;\r\n      font-size: 0.8125em;\r\n    \">\r\n  No columns\r\n</div>\r\n}\r\n<div class=\"table-container\">\r\n\r\n  <table mat-table [dataSource]=\"(dataSource || [])\" class=\"example-table\" matSort matSortActive=\"created\"\r\n    matSortDisableClear matSortDirection=\"desc\">\r\n    @for (col of (displayedColumnsInOrder||[]); track col) {\r\n    <ng-container [matColumnDef]=\"col\">\r\n      <th mat-header-cell *matHeaderCellDef>\r\n        <span style=\"text-align: start; line-height: normal; font-size: 0.8125em\">\r\n          {{ getColConfig.columnsConfig?.[col]?.[\"label\"] }}\r\n        </span>\r\n        @if($last){\r\n        <button matTooltip=\"Show other values\" [matMenuTriggerFor]=\"colOptions\" [matMenuTriggerData]=\"{}\"\r\n          mat-icon-button>\r\n          <mat-icon>\r\n            label\r\n          </mat-icon>\r\n        </button>\r\n\r\n        }\r\n      </th>\r\n      <td [class.functionClass]=\"row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION']\"\r\n        [style.background]=\"\r\n          returnBackground(row,  getColConfig.columnsConfig?.[col])\r\n        \" mat-cell *matCellDef=\"let row\">\r\n        <div *ngIf=\" getColConfig.columnsConfig?.[col]?.['type'] === 'removal'\" class=\"cellClass\">\r\n\r\n          <div style=\"width: 100%; text-align: right;\" *ngIf=\"!!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&!row['id'] &&  !inputConfig?.multipleInputInEditId   || \r\n          !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&  inputConfig?.multipleInputInEditId &&\r\n          inputConfig?.multipleInputInEditId !== row['id']\">\r\n            <strong>\r\n\r\n              {{getCalculationFunction(row)}}\r\n            </strong>\r\n\r\n          </div>\r\n          <button mat-icon-button [color]=\"t.menuOpen ? 'primary' : 'basic'\" *ngIf=\"\r\n          userCanApplyOptionsTo &&\r\n            !row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n            row['' ] !== 'true' && !inputConfig?.readonly  \r\n               \r\n            \" [matMenuTriggerFor]=\"rowOptions\" [matMenuTriggerData]=\"{row:row}\" #t=\"matMenuTrigger\"\r\n            (click)=\"applyOptionsToFn(row)\" expand=\"block\" fill=\"clear\"\r\n            style=\"margin-left: auto;margin-right:0px;display:block\">\r\n            @if (rowIsInEdit(row)) {\r\n            <mat-icon color=\"primary\">\r\n              edit\r\n            </mat-icon>\r\n\r\n            }@else {\r\n            <mat-icon>\r\n              {{\r\n              t.menuOpen ? 'close' : 'more_horiz'\r\n              }}\r\n\r\n            </mat-icon>\r\n            }\r\n\r\n\r\n          </button>\r\n\r\n\r\n          <mat-chip *ngIf=\"\r\n       row['SYSTEM_KEY_IN_EDIT']\r\n            \r\n        \">\r\n            In {{ inputConfig?.readonly ? 'View' : 'Edit' }}\r\n\r\n          </mat-chip>\r\n\r\n        </div>\r\n        <div *ngIf=\"getColConfig.columnsConfig && getColConfig.columnsConfig?.[col]?.type !== 'removal'\"\r\n          class=\"cellClass\">\r\n          <span>\r\n            {{ row[col] |formatData: getColConfig.columnsConfig?.[col].dataType }}\r\n\r\n          </span>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n    }\r\n\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"getColConfig.displayedColumnsInOrder \"></tr>\r\n    <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n      *matRowDef=\"let row; columns: getColConfig.displayedColumnsInOrder\"></tr>\r\n  </table>\r\n\r\n  <div *ngIf=\"!(dataSource?.data)||(dataSource?.data)?.length === 0\">\r\n    <div style=\"\r\n          padding-left: 16px;\r\n          padding-right: 16px;\r\n          padding-top: 16px;\r\n          padding-bottom: 16px;\r\n\r\n          display: flex;\r\n          justify-content: center;\r\n          opacity: 0.6;\r\n          font-size: 0.8125em;\r\n        \">\r\n      <div style=\"\r\n        padding-left: 16px;\r\n        padding-right: 16px;\r\n        padding-top: 16px;\r\n        padding-bottom: 16px;\r\n\r\n        display: flex;\r\n        justify-content: center;\r\n        opacity: 0.6;\r\n        font-size: 0.8125em;\r\n      \">\r\n\r\n        <div style=\"margin-top: 8px; text-align: center;\">\r\n          <mat-icon style=\"font-size: 1.25em; vertical-align: middle; margin-right: 8px;\">list</mat-icon>\r\n          <div style=\"margin-top: 8px;\">\r\n            <strong>No items yet</strong>\r\n            <p style=\"margin-top: 4px; font-size: 0.8125em;\">\r\n              <strong>Click the add button</strong> to create a new row. You'll be able to fill in details using a form.\r\n              Each saved entry will appear as a row in this table.\r\n            </p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\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}\r\n<mat-menu #colOptions=\"matMenu\">\r\n  <ng-template matMenuContent>\r\n    @for (label of allPossibleLabels; track label.label) {\r\n    <button mat-menu-item (click)=\"toggleTepLabel($event,label.formControlName);\">\r\n      <mat-icon>\r\n        {{ label.selected?'check_circle':'radio_button_unchecked'}}\r\n      </mat-icon>\r\n      {{label.label}}\r\n\r\n    </button>\r\n\r\n    }\r\n\r\n  </ng-template>\r\n</mat-menu>\r\n<mat-menu #rowOptions=\"matMenu\">\r\n  <ng-template matMenuContent let-row=\"row\">\r\n    @if(!inputConfig?.readonly ){\r\n    @if(userCanEdit){\r\n    <button mat-menu-item (click)=\"editItem(row)\">\r\n      <mat-icon>\r\n        {{'edit'}}\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          {{ 'Edit'}}\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          {{inputConfig?.readonly ? 'View item properties' : 'Modify item properties'}}\r\n        </div>\r\n      </div>\r\n    </button>\r\n    }\r\n    @if(userCanAdd){\r\n         <button mat-menu-item (click)=\"copy(row)\">\r\n      <mat-icon>\r\n        content_copy\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          Duplicate\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          Create a copy with same values\r\n        </div>\r\n      </div>\r\n    </button>\r\n    }\r\n\r\n\r\n  @if(userCanRemove){\r\n    \r\n    @if(isAboutToDeleteRow(row)){\r\n    <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n      <mat-icon color=\"accent\">\r\n        cancel\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\" style=\"color: #2196F3;\">\r\n          Cancel Deletion\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          Auto-deleting in {{ secondsCountDown()}} seconds...\r\n        </div>\r\n      </div>\r\n    </button>\r\n    <div class=\"deletion-progress-container\">\r\n      <mat-progress-bar color=\"warn\" mode=\"determinate\" [value]=\"getCountdownSeconds()\"></mat-progress-bar>\r\n      <div class=\"deletion-message\" *ngIf=\"getCountdownSeconds() > 75\">\r\n        Deleting soon...\r\n      </div>\r\n    </div>\r\n    }@else {\r\n    <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n      <mat-icon color=\"warn\">\r\n        delete_outline\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          Delete\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          Will delete after 3 seconds (click to cancel)\r\n        </div>\r\n      </div>\r\n    </button>\r\n    }\r\n      }    }\r\n  </ng-template>\r\n</mat-menu>", styles: [".functionClass{background:var(--mat-sys-surface-container, var(--mat-app-surface));font-weight:500}.option-text{display:flex;flex-direction:column;margin-left:8px}.option-main-text{font-size:.875em;font-weight:500;margin-bottom:2px;line-height:normal}.option-sub-text{line-height:normal;font-size:.75em;color:#0000008a;font-weight:400;line-height:1.2}.deletion-progress-container{position:relative;padding:0 16px 8px}.deletion-message{position:absolute;right:16px;top:2px;font-size:.6875em;color:#f44336;font-weight:500;line-height:1.6;animation:pulse 1s infinite}button:has(+.deletion-progress-container){border-bottom:none!important;padding-bottom:4px!important}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@media(max-width:600px){.option-sub-text{max-width:180px;white-space:normal}}.table-container{max-width:100%!important;overflow:auto!important}\n"] }]
             }], ctorParameters: null, propDecorators: { inputConfig: [{
                     type: Input
                 }], dataSource: [{
@@ -13559,11 +14108,11 @@ class MultipleInputTableEditComponent {
         return !!this.inputConfig?.formIsOpen && !!this.formGroup?.controls[`${this.inputConfig?.id}.id`]?.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MultipleInputTableEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MultipleInputTableEditComponent, isStandalone: true, selector: "lib-multiple-input-table-edit", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formGroup: "formGroup", formBuilderFunctions: "formBuilderFunctions" }, outputs: { onSaveMultipleInputForm: "onSaveMultipleInputForm", editMultipleInput: "editMultipleInput", deleteInput: "deleteInput", showItemAsLabel: "showItemAsLabel", addFunction: "addFunction", reorderItems: "reorderItems" }, ngImport: i0, template: "\r\n<mat-card appearance=\"outlined\" style=\"    margin-top: 8px;background:var(--mat-sys-surface-container)\" class=\" mat-elevation-z4\">\r\n    <mat-card-content>\r\n        <div class=\"list\" (cdkDropListDropped)=\"dropItems($event)\"\r\n           \r\n            [cdkDropListData]=\"innerInputs\" cdkDropList\r\n          \r\n            #InputList=\"cdkDropList\" class=\"row\">\r\n            @for( innerInput of innerInputs|| [];track innerInput.id\r\n            ){\r\n            <ng-container>\r\n                @if(editorMode){\r\n                <mat-card (mouseover)=\"activeInput = innerInput.id\" *ngIf=\"!!formGroup\" cdkDrag\r\n                    (cdkDragStarted)=\"dragging =true\" (cdkDragReleased)=\"dragging =false\"\r\n                    [class.inputCardElevated]=\"activeInput ===innerInput.id\"\r\n                    [class.inputCard]=\"activeInput !==innerInput.id\"\r\n                    [class]=\"'col-md-'+(dragging?'12':innerInput.colSize)\" class=\"box\">\r\n                    <div class=\"custom-placeholder\" *cdkDragPlaceholder></div>\r\n                    <ng-container *ngComponentOutlet=\"InputComponent; \r\n                                                  inputs: {\r\n                                                    inputConfig: innerInput,\r\n                                                    formGroup: formGroup,\r\n                                                    formBuilderFunctions: formBuilderFunctions,\r\n                                                  }\">\r\n                    </ng-container>\r\n                    <mat-card-actions *ngIf=\"activeInput === innerInput.id\">\r\n                        <span class=\"spacer\"></span>\r\n                        <button [matTooltip]=\"'Edit Input: ' + innerInput.label \"\r\n                            (click)=\"editInput(innerInput)\" mat-icon-button>\r\n                            <mat-icon>\r\n                                edit\r\n                            </mat-icon>\r\n\r\n                        </button>\r\n                        @if(!!inputWillBeRemovedIn(innerInput.id) ){\r\n                        <button (mouseover)=\"overId = innerInput.id\" (mouseout)=\"overId = null\"\r\n                            (click)=\"removeInput(innerInput)\" color=\"warn\" mat-stroked-button>\r\n                            <div style=\"display: flex; align-items: center;\">\r\n                                <mat-progress-spinner style=\"margin-right: 5px;\" color=\"primary\" class=\"cancelProgress\"\r\n                                    [value]=\"((inputWillBeRemovedIn(innerInput.id)||0)/5)*100\">\r\n                                </mat-progress-spinner>\r\n\r\n                                {{overId === innerInput.id ? 'Click to cancel':'Deleting in'}}\r\n                                {{inputWillBeRemovedIn(innerInput.id)}}\r\n                            </div>\r\n\r\n                        </button>\r\n\r\n                        }@else if(inputConfig?.systemDefault !== true && innerInput.systemDefault !== true) {\r\n                        <button [matTooltip]=\"'Delete input ' +  innerInput.label \"\r\n                            (click)=\"removeInput(innerInput)\" mat-icon-button>\r\n\r\n                            <mat-icon>\r\n                                delete\r\n                            </mat-icon>\r\n                        </button>\r\n                        }\r\n                        |\r\n                        <button *ngIf=\"!!innerInput.showAsLabel && innerInput.dataType=== 'number' ||!!innerInput.showAsLabel && innerInput.type === 'number'\"\r\n                            [matMenuTriggerFor]=\"calculationMenu\" \r\n                              [matMenuTriggerData]=\"{inputId:innerInput.originalId || innerInput.id}\"\r\n                            [matTooltip]=\"'calculate sum,avg,min,max'\"\r\n                            mat-icon-button>\r\n\r\n                            <mat-icon>\r\n                                calculate\r\n                            </mat-icon>\r\n                        </button>\r\n                        <button [color]=\"innerInput.showAsLabel? 'primary' : ''\"\r\n                            (click)=\"toggleLabel(innerInput)\"\r\n                            [matTooltip]=\"innerInput.showAsLabel? 'Hide as label' : 'Show as label'\"\r\n                            mat-icon-button>\r\n\r\n                            <mat-icon>\r\n                                label\r\n                            </mat-icon>\r\n                        </button>\r\n                        <span class=\"spacer\"></span>\r\n                    </mat-card-actions>\r\n                </mat-card>\r\n                }@else {\r\n                   \r\n                    <div [class]=\"'col-md-'+(dragging?'12':innerInput.colSize)\" class=\"box\">\r\n                        <ng-container *ngComponentOutlet=\"InputComponent; \r\n                        inputs: {\r\n                          inputConfig: innerInput,\r\n                          formGroup: formGroup,\r\n                          formBuilderFunctions: formBuilderFunctions,\r\n                        }\">\r\n                    </ng-container>\r\n                    </div>\r\n             \r\n                }\r\n\r\n            </ng-container>\r\n            }\r\n            @if (!!editorMode && ( innerInputs|| []).length === 0) {\r\n\r\n            <div class=\"tree-instructions\">\r\n                <mat-icon style=\"margin-top: 4px;margin-bottom:auto\" class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n                <span>\r\n                    <strong>Add Form Input</strong>\r\n                    <br>\r\n                    Manage your list by adding, editing, or removing items. Each item is customizable through a form.\r\n                </span>\r\n            </div>\r\n\r\n            }\r\n\r\n        </div>\r\n    </mat-card-content>\r\n    @if ( ( innerInputs|| []).length !== 0) {\r\n        <br>\r\n        <mat-divider></mat-divider>\r\n    <mat-card-actions align=\"end\" class=\"ion-margin-top\">\r\n        <button [color]=\"areYouSure ? 'warn' : ''\" class=\"ion-margin-end\"\r\n            [style.text-decoration]=\"areYouSure ? 'underline' : ''\" mat-flat-button\r\n            (click)=\"closeMultipleInput()\">\r\n            {{ areYouSure  ? \"leave without saving\" : \"cancel\" }}\r\n        </button>\r\n        @if(!inputConfig?.readonly){\r\n        <button [disabled]=\"!!formInvalid\" style=\"min-width: 10em\" color=\"primary\" (click)=\"saveMultipleInputForm()\" class=\"ion-padding-horizontal\"\r\n            mat-raised-button>\r\n            {{\r\n                rowInUpdate\r\n            ? \"Update\"\r\n            : \"save\"\r\n            }}\r\n        </button>\r\n        }\r\n\r\n    </mat-card-actions>\r\n    }\r\n\r\n</mat-card>\r\n\r\n\r\n<mat-menu #calculationMenu=\"matMenu\">\r\n    <ng-template matMenuContent let-inputId=\"sectionId\">\r\n    <button (click)=\"toggleFunction(func,inputId)\" mat-menu-item *ngFor=\"let func of calculationFunctions\">\r\n        {{ func }}\r\n        <mat-icon color=\"primary\" *ngIf=\"selectedFunction(func)\">check_circle</mat-icon>\r\n    </button>\r\n    </ng-template>\r\n</mat-menu> ", styles: [".inputCardElevated{background:var(--mat-sys-surface-container, var(--mat-app-surface));box-shadow:var(--mdc-elevated-card-container-elevation)}.inputCard{box-shadow:none}.list{min-height:60px;display:block}.box{padding:4px;cursor:move}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.box:last-child{border:none}.list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.custom-placeholder{background:#ccc;border:dotted 3px #999;min-width:100%;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.cancelProgress{height:24px!important;width:24px!important}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px!important;display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i1$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$2.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i2.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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.MatMenuContent, selector: "ng-template[matMenuContent]" }, { 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: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DragDropModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MultipleInputTableEditComponent, isStandalone: true, selector: "lib-multiple-input-table-edit", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formGroup: "formGroup", formBuilderFunctions: "formBuilderFunctions" }, outputs: { onSaveMultipleInputForm: "onSaveMultipleInputForm", editMultipleInput: "editMultipleInput", deleteInput: "deleteInput", showItemAsLabel: "showItemAsLabel", addFunction: "addFunction", reorderItems: "reorderItems" }, ngImport: i0, template: "\r\n<mat-card appearance=\"outlined\" style=\"    margin-top: 8px;background:var(--mat-sys-surface-container)\" class=\" mat-elevation-z4\">\r\n    <mat-card-content>\r\n        <div class=\"list\" (cdkDropListDropped)=\"dropItems($event)\"\r\n           \r\n            [cdkDropListData]=\"innerInputs\" cdkDropList\r\n          \r\n            #InputList=\"cdkDropList\" class=\"row\">\r\n            @for( innerInput of innerInputs|| [];track innerInput.id\r\n            ){\r\n            <ng-container>\r\n                @if(editorMode){\r\n                <mat-card (mouseover)=\"activeInput = innerInput.id\" *ngIf=\"!!formGroup\" cdkDrag\r\n                    (cdkDragStarted)=\"dragging =true\" (cdkDragReleased)=\"dragging =false\"\r\n                    [class.inputCardElevated]=\"activeInput ===innerInput.id\"\r\n                    [class.inputCard]=\"activeInput !==innerInput.id\"\r\n                    [class]=\"'col-md-'+(dragging?'12':innerInput.colSize)\" class=\"box\">\r\n                    <ng-container *ngComponentOutlet=\"InputComponent; \r\n                                                  inputs: {\r\n                                                    inputConfig: innerInput,\r\n                                                    formGroup: formGroup,\r\n                                                    formBuilderFunctions: formBuilderFunctions,\r\n                                                  }\">\r\n                    </ng-container>\r\n                    <mat-card-actions *ngIf=\"activeInput === innerInput.id\">\r\n                        <span class=\"spacer\"></span>\r\n                        <button [matTooltip]=\"'Edit Input: ' + innerInput.label \"\r\n                            (click)=\"editInput(innerInput)\" mat-icon-button>\r\n                            <mat-icon>\r\n                                edit\r\n                            </mat-icon>\r\n\r\n                        </button>\r\n                        @if(!!inputWillBeRemovedIn(innerInput.id) ){\r\n                        <button (mouseover)=\"overId = innerInput.id\" (mouseout)=\"overId = null\"\r\n                            (click)=\"removeInput(innerInput)\" color=\"warn\" mat-stroked-button>\r\n                            <div style=\"display: flex; align-items: center;\">\r\n                                <mat-progress-spinner style=\"margin-right: 5px;\" color=\"primary\" class=\"cancelProgress\"\r\n                                    [value]=\"((inputWillBeRemovedIn(innerInput.id)||0)/5)*100\">\r\n                                </mat-progress-spinner>\r\n\r\n                                {{overId === innerInput.id ? 'Click to cancel':'Deleting in'}}\r\n                                {{inputWillBeRemovedIn(innerInput.id)}}\r\n                            </div>\r\n\r\n                        </button>\r\n\r\n                        }@else if(inputConfig?.systemDefault !== true && innerInput.systemDefault !== true) {\r\n                        <button [matTooltip]=\"'Delete input ' +  innerInput.label \"\r\n                            (click)=\"removeInput(innerInput)\" mat-icon-button>\r\n\r\n                            <mat-icon>\r\n                                delete\r\n                            </mat-icon>\r\n                        </button>\r\n                        }\r\n                        |\r\n                        <button *ngIf=\"!!innerInput.showAsLabel && innerInput.dataType=== 'number' ||!!innerInput.showAsLabel && innerInput.type === 'number'\"\r\n                            [matMenuTriggerFor]=\"calculationMenu\" \r\n                              [matMenuTriggerData]=\"{inputId:innerInput.originalId || innerInput.id}\"\r\n                            [matTooltip]=\"'calculate sum,avg,min,max'\"\r\n                            mat-icon-button>\r\n\r\n                            <mat-icon>\r\n                                calculate\r\n                            </mat-icon>\r\n                        </button>\r\n                        <button [color]=\"innerInput.showAsLabel? 'primary' : ''\"\r\n                            (click)=\"toggleLabel(innerInput)\"\r\n                            [matTooltip]=\"innerInput.showAsLabel? 'Hide as label' : 'Show as label'\"\r\n                            mat-icon-button>\r\n\r\n                            <mat-icon>\r\n                                label\r\n                            </mat-icon>\r\n                        </button>\r\n                        <span class=\"spacer\"></span>\r\n                    </mat-card-actions>\r\n                </mat-card>\r\n                }@else {\r\n                   \r\n                    <div [class]=\"'col-md-'+(dragging?'12':innerInput.colSize)\" class=\"box\">\r\n                        <ng-container *ngComponentOutlet=\"InputComponent; \r\n                        inputs: {\r\n                          inputConfig: innerInput,\r\n                          formGroup: formGroup,\r\n                          formBuilderFunctions: formBuilderFunctions,\r\n                        }\">\r\n                    </ng-container>\r\n                    </div>\r\n             \r\n                }\r\n\r\n            </ng-container>\r\n            }\r\n            @if (!!editorMode && ( innerInputs|| []).length === 0) {\r\n\r\n            <div class=\"tree-instructions\">\r\n                <mat-icon style=\"margin-top: 4px;margin-bottom:auto\" class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n                <span>\r\n                    <strong>Add Form Input</strong>\r\n                    <br>\r\n                    Manage your list by adding, editing, or removing items. Each item is customizable through a form.\r\n                </span>\r\n            </div>\r\n\r\n            }\r\n\r\n        </div>\r\n    </mat-card-content>\r\n    @if ( ( innerInputs|| []).length !== 0) {\r\n        <br>\r\n        <mat-divider></mat-divider>\r\n    <mat-card-actions align=\"end\" class=\"ion-margin-top\">\r\n        <button [color]=\"areYouSure ? 'warn' : ''\" class=\"ion-margin-end\"\r\n            [style.text-decoration]=\"areYouSure ? 'underline' : ''\" mat-flat-button\r\n            (click)=\"closeMultipleInput()\">\r\n            {{ areYouSure  ? \"leave without saving\" : \"cancel\" }}\r\n        </button>\r\n        @if(!inputConfig?.readonly){\r\n        <button [disabled]=\"!!formInvalid\" style=\"min-width: 10em\" color=\"primary\" (click)=\"saveMultipleInputForm()\" class=\"ion-padding-horizontal\"\r\n            mat-raised-button>\r\n            {{\r\n                rowInUpdate\r\n            ? \"Update\"\r\n            : \"save\"\r\n            }}\r\n        </button>\r\n        }\r\n\r\n    </mat-card-actions>\r\n    }\r\n\r\n</mat-card>\r\n\r\n\r\n<mat-menu #calculationMenu=\"matMenu\">\r\n    <ng-template matMenuContent let-inputId=\"sectionId\">\r\n    <button (click)=\"toggleFunction(func,inputId)\" mat-menu-item *ngFor=\"let func of calculationFunctions\">\r\n        {{ func }}\r\n        <mat-icon color=\"primary\" *ngIf=\"selectedFunction(func)\">check_circle</mat-icon>\r\n    </button>\r\n    </ng-template>\r\n</mat-menu> ", styles: [".inputCardElevated{background:var(--mat-sys-surface-container, var(--mat-app-surface));box-shadow:var(--mdc-elevated-card-container-elevation)}.inputCard{box-shadow:none}.list{min-height:60px;display:block}.box{padding:4px;cursor:move}.cdk-drag-preview{box-sizing:border-box;border:none;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.box:last-child{border:none}.list.cdk-drop-list-dragging .box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cancelProgress{height:24px!important;width:24px!important}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px!important;display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i1$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i2.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: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.MatMenuContent, selector: "ng-template[matMenuContent]" }, { 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: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DragDropModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MultipleInputTableEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-multiple-input-table-edit', standalone: true, imports: [MatModulesModule, CommonModule, DragDropModule,], template: "\r\n<mat-card appearance=\"outlined\" style=\"    margin-top: 8px;background:var(--mat-sys-surface-container)\" class=\" mat-elevation-z4\">\r\n    <mat-card-content>\r\n        <div class=\"list\" (cdkDropListDropped)=\"dropItems($event)\"\r\n           \r\n            [cdkDropListData]=\"innerInputs\" cdkDropList\r\n          \r\n            #InputList=\"cdkDropList\" class=\"row\">\r\n            @for( innerInput of innerInputs|| [];track innerInput.id\r\n            ){\r\n            <ng-container>\r\n                @if(editorMode){\r\n                <mat-card (mouseover)=\"activeInput = innerInput.id\" *ngIf=\"!!formGroup\" cdkDrag\r\n                    (cdkDragStarted)=\"dragging =true\" (cdkDragReleased)=\"dragging =false\"\r\n                    [class.inputCardElevated]=\"activeInput ===innerInput.id\"\r\n                    [class.inputCard]=\"activeInput !==innerInput.id\"\r\n                    [class]=\"'col-md-'+(dragging?'12':innerInput.colSize)\" class=\"box\">\r\n                    <div class=\"custom-placeholder\" *cdkDragPlaceholder></div>\r\n                    <ng-container *ngComponentOutlet=\"InputComponent; \r\n                                                  inputs: {\r\n                                                    inputConfig: innerInput,\r\n                                                    formGroup: formGroup,\r\n                                                    formBuilderFunctions: formBuilderFunctions,\r\n                                                  }\">\r\n                    </ng-container>\r\n                    <mat-card-actions *ngIf=\"activeInput === innerInput.id\">\r\n                        <span class=\"spacer\"></span>\r\n                        <button [matTooltip]=\"'Edit Input: ' + innerInput.label \"\r\n                            (click)=\"editInput(innerInput)\" mat-icon-button>\r\n                            <mat-icon>\r\n                                edit\r\n                            </mat-icon>\r\n\r\n                        </button>\r\n                        @if(!!inputWillBeRemovedIn(innerInput.id) ){\r\n                        <button (mouseover)=\"overId = innerInput.id\" (mouseout)=\"overId = null\"\r\n                            (click)=\"removeInput(innerInput)\" color=\"warn\" mat-stroked-button>\r\n                            <div style=\"display: flex; align-items: center;\">\r\n                                <mat-progress-spinner style=\"margin-right: 5px;\" color=\"primary\" class=\"cancelProgress\"\r\n                                    [value]=\"((inputWillBeRemovedIn(innerInput.id)||0)/5)*100\">\r\n                                </mat-progress-spinner>\r\n\r\n                                {{overId === innerInput.id ? 'Click to cancel':'Deleting in'}}\r\n                                {{inputWillBeRemovedIn(innerInput.id)}}\r\n                            </div>\r\n\r\n                        </button>\r\n\r\n                        }@else if(inputConfig?.systemDefault !== true && innerInput.systemDefault !== true) {\r\n                        <button [matTooltip]=\"'Delete input ' +  innerInput.label \"\r\n                            (click)=\"removeInput(innerInput)\" mat-icon-button>\r\n\r\n                            <mat-icon>\r\n                                delete\r\n                            </mat-icon>\r\n                        </button>\r\n                        }\r\n                        |\r\n                        <button *ngIf=\"!!innerInput.showAsLabel && innerInput.dataType=== 'number' ||!!innerInput.showAsLabel && innerInput.type === 'number'\"\r\n                            [matMenuTriggerFor]=\"calculationMenu\" \r\n                              [matMenuTriggerData]=\"{inputId:innerInput.originalId || innerInput.id}\"\r\n                            [matTooltip]=\"'calculate sum,avg,min,max'\"\r\n                            mat-icon-button>\r\n\r\n                            <mat-icon>\r\n                                calculate\r\n                            </mat-icon>\r\n                        </button>\r\n                        <button [color]=\"innerInput.showAsLabel? 'primary' : ''\"\r\n                            (click)=\"toggleLabel(innerInput)\"\r\n                            [matTooltip]=\"innerInput.showAsLabel? 'Hide as label' : 'Show as label'\"\r\n                            mat-icon-button>\r\n\r\n                            <mat-icon>\r\n                                label\r\n                            </mat-icon>\r\n                        </button>\r\n                        <span class=\"spacer\"></span>\r\n                    </mat-card-actions>\r\n                </mat-card>\r\n                }@else {\r\n                   \r\n                    <div [class]=\"'col-md-'+(dragging?'12':innerInput.colSize)\" class=\"box\">\r\n                        <ng-container *ngComponentOutlet=\"InputComponent; \r\n                        inputs: {\r\n                          inputConfig: innerInput,\r\n                          formGroup: formGroup,\r\n                          formBuilderFunctions: formBuilderFunctions,\r\n                        }\">\r\n                    </ng-container>\r\n                    </div>\r\n             \r\n                }\r\n\r\n            </ng-container>\r\n            }\r\n            @if (!!editorMode && ( innerInputs|| []).length === 0) {\r\n\r\n            <div class=\"tree-instructions\">\r\n                <mat-icon style=\"margin-top: 4px;margin-bottom:auto\" class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n                <span>\r\n                    <strong>Add Form Input</strong>\r\n                    <br>\r\n                    Manage your list by adding, editing, or removing items. Each item is customizable through a form.\r\n                </span>\r\n            </div>\r\n\r\n            }\r\n\r\n        </div>\r\n    </mat-card-content>\r\n    @if ( ( innerInputs|| []).length !== 0) {\r\n        <br>\r\n        <mat-divider></mat-divider>\r\n    <mat-card-actions align=\"end\" class=\"ion-margin-top\">\r\n        <button [color]=\"areYouSure ? 'warn' : ''\" class=\"ion-margin-end\"\r\n            [style.text-decoration]=\"areYouSure ? 'underline' : ''\" mat-flat-button\r\n            (click)=\"closeMultipleInput()\">\r\n            {{ areYouSure  ? \"leave without saving\" : \"cancel\" }}\r\n        </button>\r\n        @if(!inputConfig?.readonly){\r\n        <button [disabled]=\"!!formInvalid\" style=\"min-width: 10em\" color=\"primary\" (click)=\"saveMultipleInputForm()\" class=\"ion-padding-horizontal\"\r\n            mat-raised-button>\r\n            {{\r\n                rowInUpdate\r\n            ? \"Update\"\r\n            : \"save\"\r\n            }}\r\n        </button>\r\n        }\r\n\r\n    </mat-card-actions>\r\n    }\r\n\r\n</mat-card>\r\n\r\n\r\n<mat-menu #calculationMenu=\"matMenu\">\r\n    <ng-template matMenuContent let-inputId=\"sectionId\">\r\n    <button (click)=\"toggleFunction(func,inputId)\" mat-menu-item *ngFor=\"let func of calculationFunctions\">\r\n        {{ func }}\r\n        <mat-icon color=\"primary\" *ngIf=\"selectedFunction(func)\">check_circle</mat-icon>\r\n    </button>\r\n    </ng-template>\r\n</mat-menu> ", styles: [".inputCardElevated{background:var(--mat-sys-surface-container, var(--mat-app-surface));box-shadow:var(--mdc-elevated-card-container-elevation)}.inputCard{box-shadow:none}.list{min-height:60px;display:block}.box{padding:4px;cursor:move}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.box:last-child{border:none}.list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.custom-placeholder{background:#ccc;border:dotted 3px #999;min-width:100%;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.cancelProgress{height:24px!important;width:24px!important}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px!important;display:block}\n"] }]
+            args: [{ selector: 'lib-multiple-input-table-edit', standalone: true, imports: [MatModulesModule, CommonModule, DragDropModule,], template: "\r\n<mat-card appearance=\"outlined\" style=\"    margin-top: 8px;background:var(--mat-sys-surface-container)\" class=\" mat-elevation-z4\">\r\n    <mat-card-content>\r\n        <div class=\"list\" (cdkDropListDropped)=\"dropItems($event)\"\r\n           \r\n            [cdkDropListData]=\"innerInputs\" cdkDropList\r\n          \r\n            #InputList=\"cdkDropList\" class=\"row\">\r\n            @for( innerInput of innerInputs|| [];track innerInput.id\r\n            ){\r\n            <ng-container>\r\n                @if(editorMode){\r\n                <mat-card (mouseover)=\"activeInput = innerInput.id\" *ngIf=\"!!formGroup\" cdkDrag\r\n                    (cdkDragStarted)=\"dragging =true\" (cdkDragReleased)=\"dragging =false\"\r\n                    [class.inputCardElevated]=\"activeInput ===innerInput.id\"\r\n                    [class.inputCard]=\"activeInput !==innerInput.id\"\r\n                    [class]=\"'col-md-'+(dragging?'12':innerInput.colSize)\" class=\"box\">\r\n                    <ng-container *ngComponentOutlet=\"InputComponent; \r\n                                                  inputs: {\r\n                                                    inputConfig: innerInput,\r\n                                                    formGroup: formGroup,\r\n                                                    formBuilderFunctions: formBuilderFunctions,\r\n                                                  }\">\r\n                    </ng-container>\r\n                    <mat-card-actions *ngIf=\"activeInput === innerInput.id\">\r\n                        <span class=\"spacer\"></span>\r\n                        <button [matTooltip]=\"'Edit Input: ' + innerInput.label \"\r\n                            (click)=\"editInput(innerInput)\" mat-icon-button>\r\n                            <mat-icon>\r\n                                edit\r\n                            </mat-icon>\r\n\r\n                        </button>\r\n                        @if(!!inputWillBeRemovedIn(innerInput.id) ){\r\n                        <button (mouseover)=\"overId = innerInput.id\" (mouseout)=\"overId = null\"\r\n                            (click)=\"removeInput(innerInput)\" color=\"warn\" mat-stroked-button>\r\n                            <div style=\"display: flex; align-items: center;\">\r\n                                <mat-progress-spinner style=\"margin-right: 5px;\" color=\"primary\" class=\"cancelProgress\"\r\n                                    [value]=\"((inputWillBeRemovedIn(innerInput.id)||0)/5)*100\">\r\n                                </mat-progress-spinner>\r\n\r\n                                {{overId === innerInput.id ? 'Click to cancel':'Deleting in'}}\r\n                                {{inputWillBeRemovedIn(innerInput.id)}}\r\n                            </div>\r\n\r\n                        </button>\r\n\r\n                        }@else if(inputConfig?.systemDefault !== true && innerInput.systemDefault !== true) {\r\n                        <button [matTooltip]=\"'Delete input ' +  innerInput.label \"\r\n                            (click)=\"removeInput(innerInput)\" mat-icon-button>\r\n\r\n                            <mat-icon>\r\n                                delete\r\n                            </mat-icon>\r\n                        </button>\r\n                        }\r\n                        |\r\n                        <button *ngIf=\"!!innerInput.showAsLabel && innerInput.dataType=== 'number' ||!!innerInput.showAsLabel && innerInput.type === 'number'\"\r\n                            [matMenuTriggerFor]=\"calculationMenu\" \r\n                              [matMenuTriggerData]=\"{inputId:innerInput.originalId || innerInput.id}\"\r\n                            [matTooltip]=\"'calculate sum,avg,min,max'\"\r\n                            mat-icon-button>\r\n\r\n                            <mat-icon>\r\n                                calculate\r\n                            </mat-icon>\r\n                        </button>\r\n                        <button [color]=\"innerInput.showAsLabel? 'primary' : ''\"\r\n                            (click)=\"toggleLabel(innerInput)\"\r\n                            [matTooltip]=\"innerInput.showAsLabel? 'Hide as label' : 'Show as label'\"\r\n                            mat-icon-button>\r\n\r\n                            <mat-icon>\r\n                                label\r\n                            </mat-icon>\r\n                        </button>\r\n                        <span class=\"spacer\"></span>\r\n                    </mat-card-actions>\r\n                </mat-card>\r\n                }@else {\r\n                   \r\n                    <div [class]=\"'col-md-'+(dragging?'12':innerInput.colSize)\" class=\"box\">\r\n                        <ng-container *ngComponentOutlet=\"InputComponent; \r\n                        inputs: {\r\n                          inputConfig: innerInput,\r\n                          formGroup: formGroup,\r\n                          formBuilderFunctions: formBuilderFunctions,\r\n                        }\">\r\n                    </ng-container>\r\n                    </div>\r\n             \r\n                }\r\n\r\n            </ng-container>\r\n            }\r\n            @if (!!editorMode && ( innerInputs|| []).length === 0) {\r\n\r\n            <div class=\"tree-instructions\">\r\n                <mat-icon style=\"margin-top: 4px;margin-bottom:auto\" class=\"info-icon\" color=\"primary\">info</mat-icon>\r\n                <span>\r\n                    <strong>Add Form Input</strong>\r\n                    <br>\r\n                    Manage your list by adding, editing, or removing items. Each item is customizable through a form.\r\n                </span>\r\n            </div>\r\n\r\n            }\r\n\r\n        </div>\r\n    </mat-card-content>\r\n    @if ( ( innerInputs|| []).length !== 0) {\r\n        <br>\r\n        <mat-divider></mat-divider>\r\n    <mat-card-actions align=\"end\" class=\"ion-margin-top\">\r\n        <button [color]=\"areYouSure ? 'warn' : ''\" class=\"ion-margin-end\"\r\n            [style.text-decoration]=\"areYouSure ? 'underline' : ''\" mat-flat-button\r\n            (click)=\"closeMultipleInput()\">\r\n            {{ areYouSure  ? \"leave without saving\" : \"cancel\" }}\r\n        </button>\r\n        @if(!inputConfig?.readonly){\r\n        <button [disabled]=\"!!formInvalid\" style=\"min-width: 10em\" color=\"primary\" (click)=\"saveMultipleInputForm()\" class=\"ion-padding-horizontal\"\r\n            mat-raised-button>\r\n            {{\r\n                rowInUpdate\r\n            ? \"Update\"\r\n            : \"save\"\r\n            }}\r\n        </button>\r\n        }\r\n\r\n    </mat-card-actions>\r\n    }\r\n\r\n</mat-card>\r\n\r\n\r\n<mat-menu #calculationMenu=\"matMenu\">\r\n    <ng-template matMenuContent let-inputId=\"sectionId\">\r\n    <button (click)=\"toggleFunction(func,inputId)\" mat-menu-item *ngFor=\"let func of calculationFunctions\">\r\n        {{ func }}\r\n        <mat-icon color=\"primary\" *ngIf=\"selectedFunction(func)\">check_circle</mat-icon>\r\n    </button>\r\n    </ng-template>\r\n</mat-menu> ", styles: [".inputCardElevated{background:var(--mat-sys-surface-container, var(--mat-app-surface));box-shadow:var(--mdc-elevated-card-container-elevation)}.inputCard{box-shadow:none}.list{min-height:60px;display:block}.box{padding:4px;cursor:move}.cdk-drag-preview{box-sizing:border-box;border:none;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.box:last-child{border:none}.list.cdk-drop-list-dragging .box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cancelProgress{height:24px!important;width:24px!important}.tree-instructions{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px!important;display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputConfig: [{
                 type: Input
             }], editorMode: [{
@@ -13844,8 +14393,16 @@ class MultipleInputTableComponent extends BaseCustomInput {
     get parentFormGroup() {
         return this.ngControl?.control?.parent;
     }
+    get canAddRecords() {
+        if (!this.inputConfig)
+            return false;
+        //NOTE: Temporary backward compatibility for older versions of the config that might not have the new property
+        if (!this.inputConfig.multipleInputAvailableOperations)
+            return true;
+        return this.inputConfig.multipleInputAvailableOperations?.includes(MultipleInputAvailableOperations.Add);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MultipleInputTableComponent, deps: [{ token: i1$3.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MultipleInputTableComponent, isStandalone: true, selector: "app-multiple-input-table", inputs: { editorMode: "editorMode", formGroup: "formGroup", inputConfig: "inputConfig", formBuilderFunctions: "formBuilderFunctions" }, providers: [{ provide: MatFormFieldControl, useExisting: MultipleInputTableComponent }], usesInheritance: true, ngImport: i0, template: "\r\n<lib-multiple-input-table-view\r\n\r\n[inputConfig]=\"inputConfig\"\r\n[dataSource]=\"dataSource\"\r\n[applyOptionsTo]=\"applyOptionsTo\"\r\n[formGroup]=\"parentFormGroup\"\r\n(onEditItem)=\"editRow($event)\"\r\n\r\n(onDeleteItem)=\"multipleInputRemoveItem(applyOptionsTo)\"\r\n(onCopy)=\"copy($event)\"\r\n(onApplyOptionsTo)=\"applyOptionsTo = $event\"\r\n></lib-multiple-input-table-view>\r\n@if(!!inputConfig.formIsOpen || !!rowInViewOnly){\r\n<lib-multiple-input-table-edit \r\n[editorMode]=\"editorMode\"\r\n(editMultipleInput)=\"editInput($event)\"\r\n(deleteInput)=\"  deleteItemInput($event)\"\r\n(addFunction)=\"addFunction($event)\"\r\n(showItemAsLabel)=\"showItemAsLabel($event)\"\r\n(onSaveMultipleInputForm)=\"saveMultipleInputForm()\"\r\n(reorderItems)=\"reorderItems($event)\"\r\n[formBuilderFunctions]=\"formBuilderFunctions\"\r\n[formGroup]=\"parentFormGroup\"\r\n[inputConfig]=\"inputConfig\"\r\n></lib-multiple-input-table-edit>\r\n\r\n}\r\n\r\n@if (\r\n  !inputConfig.readonly &&\r\n  !inputConfig.formIsOpen\r\n) {\r\n  <section >\r\n    <button \r\n    color=\"primary\" \r\n    style=\"    display: block;\r\n    margin-top: 8px;\r\n    width: 100%;\"  (click)=\"generateMultipleInputForm()\"  mat-flat-button>\r\n  \r\n        {{handleLabel}}\r\n          <mat-icon  matPrefix>{{\r\n            handleIcon()\r\n          }}</mat-icon>\r\n  \r\n        \r\n        </button>\r\n  </section>\r\n  \r\n}\r\n", styles: [".table-container{position:relative;max-height:400px;overflow:auto}table{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MultipleInputTableEditComponent, selector: "lib-multiple-input-table-edit", inputs: ["inputConfig", "editorMode", "formGroup", "formBuilderFunctions"], outputs: ["onSaveMultipleInputForm", "editMultipleInput", "deleteInput", "showItemAsLabel", "addFunction", "reorderItems"] }, { kind: "component", type: MultipleInputTableViewComponent, selector: "lib-multiple-input-table-view", inputs: ["inputConfig", "dataSource", "applyOptionsTo", "formGroup"], outputs: ["onEditItem", "onDeleteItem", "onCopy", "onApplyOptionsTo"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MultipleInputTableComponent, isStandalone: true, selector: "app-multiple-input-table", inputs: { editorMode: "editorMode", formGroup: "formGroup", inputConfig: "inputConfig", formBuilderFunctions: "formBuilderFunctions" }, providers: [{ provide: MatFormFieldControl, useExisting: MultipleInputTableComponent }], usesInheritance: true, ngImport: i0, template: "\r\n<lib-multiple-input-table-view\r\n\r\n[inputConfig]=\"inputConfig\"\r\n[dataSource]=\"dataSource\"\r\n[applyOptionsTo]=\"applyOptionsTo\"\r\n[formGroup]=\"parentFormGroup\"\r\n(onEditItem)=\"editRow($event)\"\r\n\r\n(onDeleteItem)=\"multipleInputRemoveItem(applyOptionsTo)\"\r\n(onCopy)=\"copy($event)\"\r\n(onApplyOptionsTo)=\"applyOptionsTo = $event\"\r\n></lib-multiple-input-table-view>\r\n@if(!!inputConfig.formIsOpen || !!rowInViewOnly){\r\n<lib-multiple-input-table-edit \r\n[editorMode]=\"editorMode\"\r\n(editMultipleInput)=\"editInput($event)\"\r\n(deleteInput)=\"  deleteItemInput($event)\"\r\n(addFunction)=\"addFunction($event)\"\r\n(showItemAsLabel)=\"showItemAsLabel($event)\"\r\n(onSaveMultipleInputForm)=\"saveMultipleInputForm()\"\r\n(reorderItems)=\"reorderItems($event)\"\r\n[formBuilderFunctions]=\"formBuilderFunctions\"\r\n[formGroup]=\"parentFormGroup\"\r\n[inputConfig]=\"inputConfig\"\r\n></lib-multiple-input-table-edit>\r\n\r\n}\r\n\r\n@if (\r\n  !inputConfig.readonly &&\r\n  !inputConfig.formIsOpen && \r\n  canAddRecords\r\n) {\r\n  <section >\r\n    <button \r\n    color=\"primary\" \r\n    style=\"    display: block;\r\n    margin-top: 8px;\r\n    width: 100%;\"  (click)=\"generateMultipleInputForm()\"  mat-flat-button>\r\n  \r\n        {{handleLabel}}\r\n          <mat-icon  matPrefix>{{\r\n            handleIcon()\r\n          }}</mat-icon>\r\n  \r\n        \r\n        </button>\r\n  </section>\r\n  \r\n}\r\n", styles: [".table-container{position:relative;max-height:400px;overflow:auto}table{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MultipleInputTableEditComponent, selector: "lib-multiple-input-table-edit", inputs: ["inputConfig", "editorMode", "formGroup", "formBuilderFunctions"], outputs: ["onSaveMultipleInputForm", "editMultipleInput", "deleteInput", "showItemAsLabel", "addFunction", "reorderItems"] }, { kind: "component", type: MultipleInputTableViewComponent, selector: "lib-multiple-input-table-view", inputs: ["inputConfig", "dataSource", "applyOptionsTo", "formGroup"], outputs: ["onEditItem", "onDeleteItem", "onCopy", "onApplyOptionsTo"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MultipleInputTableComponent, decorators: [{
             type: Component,
@@ -13854,7 +14411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         MatModulesModule,
                         MultipleInputTableEditComponent,
                         MultipleInputTableViewComponent,
-                    ], providers: [{ provide: MatFormFieldControl, useExisting: MultipleInputTableComponent }], template: "\r\n<lib-multiple-input-table-view\r\n\r\n[inputConfig]=\"inputConfig\"\r\n[dataSource]=\"dataSource\"\r\n[applyOptionsTo]=\"applyOptionsTo\"\r\n[formGroup]=\"parentFormGroup\"\r\n(onEditItem)=\"editRow($event)\"\r\n\r\n(onDeleteItem)=\"multipleInputRemoveItem(applyOptionsTo)\"\r\n(onCopy)=\"copy($event)\"\r\n(onApplyOptionsTo)=\"applyOptionsTo = $event\"\r\n></lib-multiple-input-table-view>\r\n@if(!!inputConfig.formIsOpen || !!rowInViewOnly){\r\n<lib-multiple-input-table-edit \r\n[editorMode]=\"editorMode\"\r\n(editMultipleInput)=\"editInput($event)\"\r\n(deleteInput)=\"  deleteItemInput($event)\"\r\n(addFunction)=\"addFunction($event)\"\r\n(showItemAsLabel)=\"showItemAsLabel($event)\"\r\n(onSaveMultipleInputForm)=\"saveMultipleInputForm()\"\r\n(reorderItems)=\"reorderItems($event)\"\r\n[formBuilderFunctions]=\"formBuilderFunctions\"\r\n[formGroup]=\"parentFormGroup\"\r\n[inputConfig]=\"inputConfig\"\r\n></lib-multiple-input-table-edit>\r\n\r\n}\r\n\r\n@if (\r\n  !inputConfig.readonly &&\r\n  !inputConfig.formIsOpen\r\n) {\r\n  <section >\r\n    <button \r\n    color=\"primary\" \r\n    style=\"    display: block;\r\n    margin-top: 8px;\r\n    width: 100%;\"  (click)=\"generateMultipleInputForm()\"  mat-flat-button>\r\n  \r\n        {{handleLabel}}\r\n          <mat-icon  matPrefix>{{\r\n            handleIcon()\r\n          }}</mat-icon>\r\n  \r\n        \r\n        </button>\r\n  </section>\r\n  \r\n}\r\n", styles: [".table-container{position:relative;max-height:400px;overflow:auto}table{width:100%}\n"] }]
+                    ], providers: [{ provide: MatFormFieldControl, useExisting: MultipleInputTableComponent }], template: "\r\n<lib-multiple-input-table-view\r\n\r\n[inputConfig]=\"inputConfig\"\r\n[dataSource]=\"dataSource\"\r\n[applyOptionsTo]=\"applyOptionsTo\"\r\n[formGroup]=\"parentFormGroup\"\r\n(onEditItem)=\"editRow($event)\"\r\n\r\n(onDeleteItem)=\"multipleInputRemoveItem(applyOptionsTo)\"\r\n(onCopy)=\"copy($event)\"\r\n(onApplyOptionsTo)=\"applyOptionsTo = $event\"\r\n></lib-multiple-input-table-view>\r\n@if(!!inputConfig.formIsOpen || !!rowInViewOnly){\r\n<lib-multiple-input-table-edit \r\n[editorMode]=\"editorMode\"\r\n(editMultipleInput)=\"editInput($event)\"\r\n(deleteInput)=\"  deleteItemInput($event)\"\r\n(addFunction)=\"addFunction($event)\"\r\n(showItemAsLabel)=\"showItemAsLabel($event)\"\r\n(onSaveMultipleInputForm)=\"saveMultipleInputForm()\"\r\n(reorderItems)=\"reorderItems($event)\"\r\n[formBuilderFunctions]=\"formBuilderFunctions\"\r\n[formGroup]=\"parentFormGroup\"\r\n[inputConfig]=\"inputConfig\"\r\n></lib-multiple-input-table-edit>\r\n\r\n}\r\n\r\n@if (\r\n  !inputConfig.readonly &&\r\n  !inputConfig.formIsOpen && \r\n  canAddRecords\r\n) {\r\n  <section >\r\n    <button \r\n    color=\"primary\" \r\n    style=\"    display: block;\r\n    margin-top: 8px;\r\n    width: 100%;\"  (click)=\"generateMultipleInputForm()\"  mat-flat-button>\r\n  \r\n        {{handleLabel}}\r\n          <mat-icon  matPrefix>{{\r\n            handleIcon()\r\n          }}</mat-icon>\r\n  \r\n        \r\n        </button>\r\n  </section>\r\n  \r\n}\r\n", styles: [".table-container{position:relative;max-height:400px;overflow:auto}table{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -16444,7 +17001,7 @@ class PaginatedSelectionTable {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PaginatedSelectionTable, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PaginatedSelectionTable, isStandalone: true, selector: "lib-paginated-selection-table", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { reload: "reload" }, ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\r\n    <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\"\r\n      *ngIf=\"this.inputConfig as inputConfig\">\r\n      <mat-label>\r\n        {{this.inputConfig.label }}\r\n        <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n      </mat-label>\r\n  \r\n      <lib-paginated-selection-table-reactive-input [inputConfig]=\"this.inputConfig\"\r\n        [disabled]=\"!!this.inputConfig.disabled\"\r\n        [required]=\"this.inputConfig.required\"\r\n        [canReload]=\"!!this.inputConfig.canReload.canReload || false\"\r\n        (reloadData)=\"this.inputConfig.canReload.emit()\"\r\n        [formControlName]=\"this.inputConfig.id\">\r\n      </lib-paginated-selection-table-reactive-input>\r\n      @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n      <mat-hint class=\"inputHint\">\r\n        {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n      </mat-hint>\r\n      }\r\n  \r\n  \r\n      <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n  \r\n     \r\n      <!-- Prefix Icon -->\r\n      <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n  \r\n      <!-- Suffix Icon or Password Visibility Toggle -->\r\n      <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n        <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n          }}</mat-icon>\r\n        <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"inputConfig.togglePasswordVisibility()\"\r\n        mat-icon-button matSuffix>\r\n        <mat-icon>{{ inputConfig.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n      </button> -->\r\n      </ng-container>\r\n  \r\n      <!-- Prefix & Suffix Text -->\r\n      <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n      <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n        }}</span>\r\n  \r\n      <!-- Character Count Hint -->\r\n      <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n        {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n        }}\r\n      </mat-hint>\r\n  \r\n  \r\n  \r\n    </mat-form-field>\r\n  </ng-container>\r\n  ", styles: ["mat-form-field{width:100%}mat-form-field .input-sync-button{display:none}mat-form-field:hover .input-sync-button{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "component", type: PaginatedSelectionTableReactiveInput, selector: "lib-paginated-selection-table-reactive-input", inputs: ["formBuilderFunctions", "canReload", "loading", "searchPlaceholder", "emptyMessage", "inputConfig"], outputs: ["reloadData"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PaginatedSelectionTable, isStandalone: true, selector: "lib-paginated-selection-table", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { reload: "reload" }, ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\r\n    <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\"\r\n      *ngIf=\"this.inputConfig as inputConfig\">\r\n      <mat-label>\r\n        {{this.inputConfig.label }}\r\n        <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n      </mat-label>\r\n  \r\n      <lib-paginated-selection-table-reactive-input [inputConfig]=\"this.inputConfig\"\r\n        [disabled]=\"!!this.inputConfig.disabled\"\r\n        [required]=\"this.inputConfig.required\"\r\n        [canReload]=\"!!this.inputConfig.canReload?.canReload || false\"\r\n        (reloadData)=\"this.inputConfig.canReload.emit()\"\r\n        [formControlName]=\"this.inputConfig.id\">\r\n      </lib-paginated-selection-table-reactive-input>\r\n      @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n      <mat-hint class=\"inputHint\">\r\n        {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n      </mat-hint>\r\n      }\r\n  \r\n  \r\n      <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n  \r\n     \r\n      <!-- Prefix Icon -->\r\n      <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n  \r\n      <!-- Suffix Icon or Password Visibility Toggle -->\r\n      <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n        <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n          }}</mat-icon>\r\n        <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"inputConfig.togglePasswordVisibility()\"\r\n        mat-icon-button matSuffix>\r\n        <mat-icon>{{ inputConfig.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n      </button> -->\r\n      </ng-container>\r\n  \r\n      <!-- Prefix & Suffix Text -->\r\n      <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n      <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n        }}</span>\r\n  \r\n      <!-- Character Count Hint -->\r\n      <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n        {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n        }}\r\n      </mat-hint>\r\n  \r\n  \r\n  \r\n    </mat-form-field>\r\n  </ng-container>\r\n  ", styles: ["mat-form-field{width:100%}mat-form-field .input-sync-button{display:none}mat-form-field:hover .input-sync-button{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "component", type: PaginatedSelectionTableReactiveInput, selector: "lib-paginated-selection-table-reactive-input", inputs: ["formBuilderFunctions", "canReload", "loading", "searchPlaceholder", "emptyMessage", "inputConfig"], outputs: ["reloadData"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PaginatedSelectionTable, decorators: [{
             type: Component,
@@ -16454,7 +17011,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         ReactiveFormsModule,
                         TFormInputStatusComponent,
                         PaginatedSelectionTableReactiveInput,
-                    ], template: "<ng-container [formGroup]=\"formGroup\">\r\n    <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\"\r\n      *ngIf=\"this.inputConfig as inputConfig\">\r\n      <mat-label>\r\n        {{this.inputConfig.label }}\r\n        <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n      </mat-label>\r\n  \r\n      <lib-paginated-selection-table-reactive-input [inputConfig]=\"this.inputConfig\"\r\n        [disabled]=\"!!this.inputConfig.disabled\"\r\n        [required]=\"this.inputConfig.required\"\r\n        [canReload]=\"!!this.inputConfig.canReload.canReload || false\"\r\n        (reloadData)=\"this.inputConfig.canReload.emit()\"\r\n        [formControlName]=\"this.inputConfig.id\">\r\n      </lib-paginated-selection-table-reactive-input>\r\n      @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n      <mat-hint class=\"inputHint\">\r\n        {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n      </mat-hint>\r\n      }\r\n  \r\n  \r\n      <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n  \r\n     \r\n      <!-- Prefix Icon -->\r\n      <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n  \r\n      <!-- Suffix Icon or Password Visibility Toggle -->\r\n      <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n        <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n          }}</mat-icon>\r\n        <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"inputConfig.togglePasswordVisibility()\"\r\n        mat-icon-button matSuffix>\r\n        <mat-icon>{{ inputConfig.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n      </button> -->\r\n      </ng-container>\r\n  \r\n      <!-- Prefix & Suffix Text -->\r\n      <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n      <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n        }}</span>\r\n  \r\n      <!-- Character Count Hint -->\r\n      <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n        {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n        }}\r\n      </mat-hint>\r\n  \r\n  \r\n  \r\n    </mat-form-field>\r\n  </ng-container>\r\n  ", styles: ["mat-form-field{width:100%}mat-form-field .input-sync-button{display:none}mat-form-field:hover .input-sync-button{display:inline-block}\n"] }]
+                    ], template: "<ng-container [formGroup]=\"formGroup\">\r\n    <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\"\r\n      *ngIf=\"this.inputConfig as inputConfig\">\r\n      <mat-label>\r\n        {{this.inputConfig.label }}\r\n        <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n      </mat-label>\r\n  \r\n      <lib-paginated-selection-table-reactive-input [inputConfig]=\"this.inputConfig\"\r\n        [disabled]=\"!!this.inputConfig.disabled\"\r\n        [required]=\"this.inputConfig.required\"\r\n        [canReload]=\"!!this.inputConfig.canReload?.canReload || false\"\r\n        (reloadData)=\"this.inputConfig.canReload.emit()\"\r\n        [formControlName]=\"this.inputConfig.id\">\r\n      </lib-paginated-selection-table-reactive-input>\r\n      @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n      <mat-hint class=\"inputHint\">\r\n        {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n      </mat-hint>\r\n      }\r\n  \r\n  \r\n      <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n  \r\n     \r\n      <!-- Prefix Icon -->\r\n      <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n  \r\n      <!-- Suffix Icon or Password Visibility Toggle -->\r\n      <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n        <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n          }}</mat-icon>\r\n        <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"inputConfig.togglePasswordVisibility()\"\r\n        mat-icon-button matSuffix>\r\n        <mat-icon>{{ inputConfig.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n      </button> -->\r\n      </ng-container>\r\n  \r\n      <!-- Prefix & Suffix Text -->\r\n      <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n      <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n        }}</span>\r\n  \r\n      <!-- Character Count Hint -->\r\n      <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n        {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n        }}\r\n      </mat-hint>\r\n  \r\n  \r\n  \r\n    </mat-form-field>\r\n  </ng-container>\r\n  ", styles: ["mat-form-field{width:100%}mat-form-field .input-sync-button{display:none}mat-form-field:hover .input-sync-button{display:inline-block}\n"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
@@ -16840,5 +17397,5 @@ console.debug = () => { };
  * Generated bundle index. Do not edit.
  */
 
-export { returnDeepProperty as $, ACCOUNTING_BASIS as A, NgxTFormsComponent as B, NgxTFormsService as C, DaysAgoPipe as D, SignatureInputElementComponent as E, FormsStoreService as F, TFormInputComponent as G, UserFormStepperComponent as H, createFileFromBase64 as I, JsonEditorComponent as J, formGenerator as K, getPipedValueFromDataType as L, MatModulesModule as M, NGX_T_FORMS_CONFIG_TOKEN as N, getSampleValueForInput as O, PropertyAccessError as P, getSectionElements as Q, getSignatureImage as R, SearchListPipe as S, TDynamicDataEditComponent as T, UTILS_OBJECT_TOKEN as U, ValidationExpressioCreatorComponent as V, getUrl as W, getValueFromValueAccessor as X, initFormConfigToV2 as Y, provideNgxTForms as Z, _isEqual as _, assignDeepPropertyToObject as a, returnMappedPathValue as a0, textIconsForUserHints as a1, validateExpressionSyntax as a2, validateObjectAgainstString as a3, index as a4, TDynamicDataViewComponent as b, FormTowerControllerService as c, TourManagerService as d, getSubmissionStatusFn as e, getInputIllustration as f, getAvatar as g, TreeComponent as h, convertPostmanFolderItemsToTree as i, DataTreeComponent as j, getToolbarColor as k, getToolbarBackground as l, getToolbarIconColor as m, DialogTemplateComponent as n, FORM_ACTIONS_TOKEN as o, FORM_CONFIG_TOKEN as p, FORM_INPUTS_TOKEN as q, FORM_SLIDES_TOKEN as r, safeReturnDeepProperty as s, testAgainstItem as t, FormBuilderComponent as u, FormatDataPipe as v, FormsComponent as w, MSCOA_TREE_PROVIDER as x, MULTIPLE_FORM_INPUT_TOKEN as y, MscoaFormInputComponent as z };
-//# sourceMappingURL=ngx-t-forms-ngx-t-forms-D9qmig6g.mjs.map
+export { provideNgxTForms as $, ACCOUNTING_BASIS as A, NgxTFormsComponent as B, NgxTFormsService as C, DaysAgoPipe as D, SignatureInputElementComponent as E, FormsStoreService as F, TFormImportController as G, TFormInputComponent as H, UserFormStepperComponent as I, JsonEditorComponent as J, createFileFromBase64 as K, formGenerator as L, MatModulesModule as M, NGX_T_FORMS_CONFIG_TOKEN as N, getPipedValueFromDataType as O, PropertyAccessError as P, getSampleValueForInput as Q, getSectionElements as R, SearchListPipe as S, TDynamicDataEditComponent as T, UTILS_OBJECT_TOKEN as U, ValidationExpressioCreatorComponent as V, getSignatureImage as W, getUrl as X, getValueFromValueAccessor as Y, initFormConfigToV2 as Z, _isEqual as _, assignDeepPropertyToObject as a, returnDeepProperty as a0, returnMappedPathValue as a1, textIconsForUserHints as a2, validateExpressionSyntax as a3, validateObjectAgainstString as a4, index as a5, TDynamicDataViewComponent as b, FormTowerControllerService as c, TourManagerService as d, getSubmissionStatusFn as e, getInputIllustration as f, getAvatar as g, TreeComponent as h, convertPostmanFolderItemsToTree as i, DataTreeComponent as j, getToolbarColor as k, getToolbarBackground as l, getToolbarIconColor as m, DialogTemplateComponent as n, FORM_ACTIONS_TOKEN as o, FORM_CONFIG_TOKEN as p, FORM_INPUTS_TOKEN as q, FORM_SLIDES_TOKEN as r, safeReturnDeepProperty as s, testAgainstItem as t, FormBuilderComponent as u, FormatDataPipe as v, FormsComponent as w, MSCOA_TREE_PROVIDER as x, MULTIPLE_FORM_INPUT_TOKEN as y, MscoaFormInputComponent as z };
+//# sourceMappingURL=ngx-t-forms-ngx-t-forms-DP2koSL5.mjs.map