ngx-t-forms 2.0.15 → 2.0.17

package/fesm2022/{ngx-t-forms-ngx-t-forms-Biy_6-DN.mjs → ngx-t-forms-ngx-t-forms-fgu62eR1.mjs}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, Component, InjectionToken, makeEnvironmentProviders, inject, Inject, Directive, NgModule, Input, Pipe, EventEmitter, Output, ViewChild, Injector, Optional, Self, ChangeDetectionStrategy, ViewEncapsulation, forwardRef, HostListener } from '@angular/core';
-import { DataSources, formColumnInputsSchema, ElementTypes, validateCalculatedFieldRules, CalculationFunctions, MinInputTypes, InputDataTypes, FormSubmissionStatus, validateForm, FormListSection, FormStateErrors, getElementEditorConfig, DefaultInputConfig, ElementEditorTypes, SpecialElementKeys, validateFormColumnInputsWithRequired, validateFormSlide, BlurHandleTypes, AllFormInputPrimaryKeys, AllDocumentFileExtensions, AllImageFileExtensions, InputFileType, UploadTypes } from 'ngx-t-forms-types';
+import { DataSources, formColumnInputsSchema, ElementTypes, validateCalculatedFieldRules, CalculationFunctions, MinInputTypes, InputDataTypes, FormSubmissionStatus, getElementEditorConfig, DefaultInputConfig, ElementEditorTypes, SpecialElementKeys, validateFormColumnInputsWithRequired, validateForm, FormListSection, FormStateErrors, validateFormSlide, BlurHandleTypes, AllFormInputPrimaryKeys, AllDocumentFileExtensions, AllImageFileExtensions, InputFileType, UploadTypes } from 'ngx-t-forms-types';
 import * as i1$2 from '@angular/forms';
 import { Validators, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { takeUntil, debounceTime, distinctUntilChanged, startWith, map, pairwise, switchMap, catchError, EMPTY, throwError, of, tap, forkJoin, filter, Subject, take, Observable, concatMap, concat, finalize, Subscription, BehaviorSubject, combineLatest, withLatestFrom, timer, firstValueFrom } from 'rxjs';
@@ -2782,8 +2782,13 @@ const prepPopulateForm = (form, initValue) => {
                                 value: (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;
+                                        if (key === 'id') {
+                                            return {
+                                                ...acc,
+                                                [`${column.id}.id`]: value || ''
+                                            };
+                                        }
                                         if (!inputId) {
-                                            console.error('inputId not found', key, value);
                                             return acc;
                                         }
                                         return {
@@ -3090,7 +3095,7 @@ class FormTowerControllerService {
             // .3 Create the main form Group
             const allFormInputs = this.allFormInputs() || [];
             this._mainForm = formGenerator(allFormInputs, this.getFormValue.bind(this));
-            console.error(`[FormTowerControllerService] Initialized form`, this._mainForm);
+            console.error(`[FormTowerControllerService] Initialized form`, this._mainForm, this._form);
             // .4 crete change reaction functions
             this.createAllInputDependencies();
             this.createInputFunctionsCollection();
@@ -3424,6 +3429,161 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                     args: [HttpClient]
                 }] }] });
 
+function testAgainstItem(test, item) {
+    try {
+        const testValue = test.deepBind ? safeReturnDeepProperty(item, test.deepBind || [])?.value : item;
+        const key = test.deepBind ? test.deepBind[test.deepBind.length - 1] : '';
+        const objectValue = test.deepBind ? { [key || '']: testValue } : testValue;
+        if (test.expression) {
+            try {
+                return validateObjectAgainstString(test.expression, objectValue);
+            }
+            catch (error) {
+                console.error(error);
+                return false;
+            }
+        }
+        if (test.testType === 'exists') {
+            return test.testType === 'exists' && testValue !== '' && testValue !== undefined;
+        }
+        if (test.testType === 'equalTo') {
+            return testValue === test.valueMatch;
+        }
+        return false;
+    }
+    catch (error) {
+        return false;
+    }
+}
+
+;
+function inputElementEditorConfigs(form, inputInEdit, NGX_T_FORMS_CONFIG, utils) {
+    try {
+        // Get base configuration    
+        const config = getElementEditorConfig;
+        // Get validation errors for the input being edited
+        const errors = inputInEditValidationErrors(form, inputInEdit);
+        // Create a completely new configuration object (for change detection)
+        return {
+            ...config, // Copy all base properties
+            // Create new array with new section objects
+            editorSections: config.editorSections.map(section => {
+                const elements = getSectionElements(section.elements, inputInEdit, NGX_T_FORMS_CONFIG, utils, errors);
+                // Check if any element in this section has errors
+                const hasErrors = section.elements.some(el => errors.some(err => err.key === el.deepBind?.join('.')));
+                return ({
+                    ...section,
+                    elements: [...[], ...elements],
+                    hasErrors
+                });
+            })
+        };
+    }
+    catch (error) {
+        const message = error instanceof Error ? error.message : 'Failed to configure columns';
+        throw new Error(message);
+    }
+}
+function getSectionElements(elements, inputInEdit, NGX_T_FORMS_CONFIG, utils, errors = []) {
+    try {
+        const defaultInputs = { ...DefaultInputConfig };
+        if (!inputInEdit)
+            return [];
+        const defaultInput = defaultInputs[inputInEdit?.element];
+        const processedElements = elements
+            .map(el => processElement(el, inputInEdit, NGX_T_FORMS_CONFIG, utils, errors));
+        const filteredElements = processedElements.filter(el => isElementApplicable(inputInEdit, defaultInput?.properties, el));
+        return filteredElements;
+    }
+    catch (err) {
+        console.error('Error processing section elements:', err);
+        return [];
+    }
+}
+function processElement(element, inputInEdit, NGX_T_FORMS_CONFIG, utils, errors = []) {
+    const defaultInputs = { ...DefaultInputConfig };
+    if (!inputInEdit)
+        return [];
+    const defaultInput = defaultInputs[inputInEdit?.element];
+    return {
+        ...element,
+        computedErrors: computedErrors(element, errors),
+        required: defaultInput?.requiredProperties?.includes(element.name),
+        postmanCollectionConfig: getPostmanConfig(element, NGX_T_FORMS_CONFIG),
+        httpGetDataFunction: utils.httpGetDataFunction.bind(utils),
+        getWorkflowOptions: NGX_T_FORMS_CONFIG.formBuilder.workflows(),
+        getMscoaTree: element.editType === ElementEditorTypes.ConfigMscoaSegments ?
+            NGX_T_FORMS_CONFIG.formBuilder.getScoaTree() :
+            undefined
+    };
+}
+;
+function getPostmanConfig(element, NGX_T_FORMS_CONFIG) {
+    const validForPostman = [ElementEditorTypes.ApiCall, ElementEditorTypes.ApiValueAccessRules, ElementEditorTypes.DataSourcePicker].includes(element.editType);
+    if (!validForPostman)
+        return undefined;
+    const config = {
+        collectionUrl: String(NGX_T_FORMS_CONFIG['POSTMAN_COLLECTION_URL'] || ''),
+        collectionKey: String(NGX_T_FORMS_CONFIG['POSTMAN_COLLECTION_KEY'] || '')
+    };
+    return config;
+}
+function isElementApplicable(input, inputProperties, element) {
+    const { name, additionalTest } = element;
+    const isDefault = name === SpecialElementKeys.Default;
+    if (!!isDefault && !additionalTest)
+        return true;
+    // Check property inclusion
+    const isInputProperty = inputProperties?.includes(name);
+    if (!isInputProperty && !isDefault)
+        return false;
+    // Execute additional tests
+    return additionalTest ?
+        additionalTest.every(test => testAgainstItem(test, input)) :
+        !!isInputProperty;
+}
+;
+function inputInEditValidationErrors(form, inputInEdit) {
+    try {
+        const defaultInputs = { ...DefaultInputConfig };
+        let allInputs = form?.slides?.flatMap(slide => slide.columns) || [];
+        const parentInput = allInputs.find(input => input.id === inputInEdit?.multipleInputInEditId);
+        if (!inputInEdit || !inputInEdit.element)
+            return [];
+        const editingNewInput = !inputInEdit?.id;
+        if (!editingNewInput) {
+            return validateFormColumnInputsWithRequired({
+                data: inputInEdit,
+                requiredKeys: (defaultInputs[inputInEdit.element]?.requiredProperties || [])
+            });
+        }
+        // Improved duplicate check logic
+        const isDuplicateFormControl = () => {
+            if (!inputInEdit.formControlName)
+                return false;
+            if (parentInput) {
+                return parentInput.formInputs?.some(input => input.formControlName === inputInEdit.formControlName) || false;
+            }
+            return allInputs.some(input => input.formControlName === inputInEdit.formControlName);
+        };
+        const duplicateError = isDuplicateFormControl()
+            ? [{ key: 'formControlName', message: 'Form control name must be unique' }]
+            : [];
+        return [...duplicateError, ...validateFormColumnInputsWithRequired({
+                data: inputInEdit,
+                requiredKeys: (defaultInputs[inputInEdit.element]?.requiredProperties || [])
+            })];
+    }
+    catch (error) {
+        const msg = error instanceof Error ? error.message : 'Failed to check form config';
+        throw new Error(msg);
+    }
+}
+function computedErrors(element, allErrors) {
+    const errors = allErrors?.filter(error => error.key === element.deepBind?.join('.'));
+    return [...[], ...errors];
+}
+
 class MatModulesModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MatModulesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: MatModulesModule, exports: [CdkAccordionModule,
@@ -3694,7 +3854,10 @@ const handleToggleLoadingForms = (state, { loadingForms }) => ({
 });
 const handleLoadFormSuccess = (state, { form }) => ({
     ...state,
-    editForm: form
+    editForm: {
+        ...state.editForm,
+        ...form,
+    }
 });
 const handleToggleFormBusy = (state, { formId }) => ({
     ...state,
@@ -3999,162 +4162,6 @@ function missingConfig(form) {
     }
 }
 
-function testAgainstItem(test, item) {
-    try {
-        const testValue = test.deepBind ? safeReturnDeepProperty(item, test.deepBind || [])?.value : item;
-        const key = test.deepBind ? test.deepBind[test.deepBind.length - 1] : '';
-        const objectValue = test.deepBind ? { [key || '']: testValue } : testValue;
-        if (test.expression) {
-            try {
-                return validateObjectAgainstString(test.expression, objectValue);
-            }
-            catch (error) {
-                console.error(error);
-                return false;
-            }
-        }
-        if (test.testType === 'exists') {
-            return test.testType === 'exists' && testValue !== '' && testValue !== undefined;
-        }
-        if (test.testType === 'equalTo') {
-            return testValue === test.valueMatch;
-        }
-        return false;
-    }
-    catch (error) {
-        return false;
-    }
-}
-
-;
-function inputElementEditorConfigs(form, inputInEdit, NGX_T_FORMS_CONFIG, utils) {
-    try {
-        // Get base configuration    
-        const config = getElementEditorConfig;
-        // Get validation errors for the input being edited
-        const errors = inputInEditValidationErrors(form, inputInEdit);
-        // Create a completely new configuration object (for change detection)
-        return {
-            ...config, // Copy all base properties
-            // Create new array with new section objects
-            editorSections: config.editorSections.map(section => {
-                const elements = getSectionElements(section.elements, inputInEdit, NGX_T_FORMS_CONFIG, utils, errors);
-                // Check if any element in this section has errors
-                const hasErrors = section.elements.some(el => errors.some(err => err.key === el.deepBind?.join('.')));
-                return ({
-                    ...section,
-                    elements: [...[], ...elements],
-                    hasErrors
-                });
-            })
-        };
-    }
-    catch (error) {
-        const message = error instanceof Error ? error.message : 'Failed to configure columns';
-        throw new Error(message);
-    }
-}
-function getSectionElements(elements, inputInEdit, NGX_T_FORMS_CONFIG, utils, errors = []) {
-    try {
-        const defaultInputs = { ...DefaultInputConfig };
-        if (!inputInEdit)
-            return [];
-        const defaultInput = defaultInputs[inputInEdit?.element];
-        const processedElements = elements
-            .map(el => processElement(el, inputInEdit, NGX_T_FORMS_CONFIG, utils, errors));
-        const filteredElements = processedElements.filter(el => isElementApplicable(inputInEdit, defaultInput?.properties, el));
-        return filteredElements;
-    }
-    catch (err) {
-        console.error('Error processing section elements:', err);
-        return [];
-    }
-}
-function processElement(element, inputInEdit, NGX_T_FORMS_CONFIG, utils, errors = []) {
-    const defaultInputs = { ...DefaultInputConfig };
-    if (!inputInEdit)
-        return [];
-    const defaultInput = defaultInputs[inputInEdit?.element];
-    return {
-        ...element,
-        computedErrors: computedErrors(element, errors),
-        required: defaultInput?.requiredProperties?.includes(element.name),
-        postmanCollectionConfig: getPostmanConfig(element, NGX_T_FORMS_CONFIG),
-        httpGetDataFunction: utils.httpGetDataFunction.bind(utils),
-        getWorkflowOptions: element.editType === ElementEditorTypes.MongoPipelineBuilder ?
-            NGX_T_FORMS_CONFIG.formBuilder.workflows() :
-            undefined,
-        getMscoaTree: element.editType === ElementEditorTypes.ConfigMscoaSegments ?
-            NGX_T_FORMS_CONFIG.formBuilder.getScoaTree() :
-            undefined
-    };
-}
-;
-function getPostmanConfig(element, NGX_T_FORMS_CONFIG) {
-    if (![ElementEditorTypes.ApiCall, ElementEditorTypes.ApiValueAccessRules].includes(element.editType)) {
-        return undefined;
-    }
-    return {
-        collectionUrl: String(NGX_T_FORMS_CONFIG['POSTMAN_COLLECTION_URL'] || ''),
-        collectionKey: String(NGX_T_FORMS_CONFIG['POSTMAN_COLLECTION_KEY'] || '')
-    };
-}
-function isElementApplicable(input, inputProperties, element) {
-    const { name, additionalTest } = element;
-    const isDefault = name === SpecialElementKeys.Default;
-    if (!!isDefault && !additionalTest)
-        return true;
-    // Check property inclusion
-    const isInputProperty = inputProperties?.includes(name);
-    if (!isInputProperty && !isDefault)
-        return false;
-    // Execute additional tests
-    return additionalTest ?
-        additionalTest.every(test => testAgainstItem(test, input)) :
-        !!isInputProperty;
-}
-;
-function inputInEditValidationErrors(form, inputInEdit) {
-    try {
-        const defaultInputs = { ...DefaultInputConfig };
-        let allInputs = form?.slides?.flatMap(slide => slide.columns) || [];
-        const parentInput = allInputs.find(input => input.id === inputInEdit?.multipleInputInEditId);
-        if (!inputInEdit || !inputInEdit.element)
-            return [];
-        const editingNewInput = !inputInEdit?.id;
-        if (!editingNewInput) {
-            return validateFormColumnInputsWithRequired({
-                data: inputInEdit,
-                requiredKeys: (defaultInputs[inputInEdit.element]?.requiredProperties || [])
-            });
-        }
-        // Improved duplicate check logic
-        const isDuplicateFormControl = () => {
-            if (!inputInEdit.formControlName)
-                return false;
-            if (parentInput) {
-                return parentInput.formInputs?.some(input => input.formControlName === inputInEdit.formControlName) || false;
-            }
-            return allInputs.some(input => input.formControlName === inputInEdit.formControlName);
-        };
-        const duplicateError = isDuplicateFormControl()
-            ? [{ key: 'formControlName', message: 'Form control name must be unique' }]
-            : [];
-        return [...duplicateError, ...validateFormColumnInputsWithRequired({
-                data: inputInEdit,
-                requiredKeys: (defaultInputs[inputInEdit.element]?.requiredProperties || [])
-            })];
-    }
-    catch (error) {
-        const msg = error instanceof Error ? error.message : 'Failed to check form config';
-        throw new Error(msg);
-    }
-}
-function computedErrors(element, allErrors) {
-    const errors = allErrors?.filter(error => error.key === element.deepBind?.join('.'));
-    return [...[], ...errors];
-}
-
 ;
 ;
 function formsFormBuilderStoreSelectors(store) {
@@ -4505,7 +4512,7 @@ function deleteActiveSection(form, sectionId) {
     try {
         return {
             ...form,
-            slides: form.slides.filter(slide => slide.sectionId !== sectionId),
+            slides: form.slides.filter(slide => slide.sectionId !== sectionId && slide.columns.some(c => c.systemDefault === true) === false),
         };
     }
     catch (error) {
@@ -5196,12 +5203,14 @@ function formBuilderStoreActions(store) {
                 form: {
                     formId: undefined,
                     formTitle: `${form?.formTitle} - Copy`,
-                    slides: form.slides,
+                    slides: [...[], ...form.slides],
                 },
             };
             store.actions.loadFormSuccess(of({
                 form: newForm
             }));
+            // Refresh external form states 
+            store.refreshExternalFormStates?.(form);
             return;
         })).subscribe();
     };
@@ -5498,9 +5507,9 @@ class FormBuilderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FormBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: FormBuilderComponent, isStandalone: true, selector: "app-form-builder", inputs: { formId: "formId" }, providers: [
             FormsStoreService
-        ], ngImport: i0, template: "<header>\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())\"\r\n            (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        <!-- 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    </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    </div>\r\n\r\n    @if (elementEditorOpen()) {\r\n    <app-input-editor style=\"max-width:480px;height:calc(100vh - 64px);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)}.side{width:100px;background-color:#f8d7da}.middle{flex-grow:1;height:100%;overflow:auto;background-color:none}.section-title-input{border:none;background-color:transparent;font-size:16px;font-weight:600;color:#fff;padding-top:12px;padding-bottom:12px;outline:none;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;gap:8px;align-items:center;line-height:normal;font-size:14px;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[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.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: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], deferBlockDependencies: [() => [import('./ngx-t-forms-forms-builder-menu.component-CAE1-JXD.mjs').then(m => m.FormsBuilderMenuComponent)], () => [i2$1.CdkDrag, i7.MatProgressSpinner, import('./ngx-t-forms-input-editor.component-D18kU0fT.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-DGqSwAYD.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-BQbT17M7.mjs').then(m => m.MissingFormConfigsComponent)]] }); }
+        ], ngImport: i0, template: "<header>\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())\"\r\n            (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        <!-- 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    </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    </div>\r\n\r\n    @if (elementEditorOpen()) {\r\n    <app-input-editor style=\"max-width:480px;height:calc(100vh - 64px);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)}.side{width:100px;background-color:#f8d7da}.middle{flex-grow:1;height:100%;overflow:auto;background-color:none}.section-title-input{border:none;background-color:transparent;font-size:16px;font-weight:600;color:#fff;padding-top:12px;padding-bottom:12px;outline:none;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;gap:8px;align-items:center;line-height:normal;font-size:14px;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[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.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: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], deferBlockDependencies: [() => [import('./ngx-t-forms-forms-builder-menu.component-BSvhnXCy.mjs').then(m => m.FormsBuilderMenuComponent)], () => [i2$1.CdkDrag, i7.MatProgressSpinner, import('./ngx-t-forms-input-editor.component-C1UIixRM.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-CvVu8xJI.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-DO3QfrLp.mjs').then(m => m.MissingFormConfigsComponent)]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: FormBuilderComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-forms-builder-menu.component-CAE1-JXD.mjs').then(m => m.FormsBuilderMenuComponent), import('./ngx-t-forms-input-editor.component-D18kU0fT.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-DGqSwAYD.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-BQbT17M7.mjs').then(m => m.MissingFormConfigsComponent)], resolveMetadata: (FormsBuilderMenuComponent, InputEditorComponent, FormSectionStepperComponent, MissingFormConfigsComponent) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: FormBuilderComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-forms-builder-menu.component-BSvhnXCy.mjs').then(m => m.FormsBuilderMenuComponent), import('./ngx-t-forms-input-editor.component-C1UIixRM.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-CvVu8xJI.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-DO3QfrLp.mjs').then(m => m.MissingFormConfigsComponent)], resolveMetadata: (FormsBuilderMenuComponent, InputEditorComponent, FormSectionStepperComponent, MissingFormConfigsComponent) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'app-form-builder', standalone: true, imports: [CommonModule,
                             MatModulesModule,
@@ -5706,7 +5715,8 @@ class TDynamicDataEditComponent {
         this.elementEditorTypes = ElementEditorTypes;
         this._editorConfig = new BehaviorSubject(undefined);
         this._data = new BehaviorSubject(undefined);
-        this.formInputs = [];
+        this._formInputs$ = new BehaviorSubject([]);
+        this._formInputs = [];
         this.validationErrors = null;
         this.valueChange = new EventEmitter();
         this.blur = new EventEmitter();
@@ -5739,6 +5749,13 @@ class TDynamicDataEditComponent {
     set editorConfig(config) {
         this._editorConfig.next(config);
     }
+    set formInputs(inputs) {
+        this._formInputs = inputs;
+        console.error('In Dynamic Data Edit', inputs);
+    }
+    get formInputs() {
+        return this._formInputs;
+    }
     set data(data) {
         this._data.next(data);
         if (!this.editorInitiated) {
@@ -5775,6 +5792,10 @@ class TDynamicDataEditComponent {
     }
     get disabled$() {
         return this.editorConfigValue$.pipe(switchMap((config) => this.dataValue$.pipe(map((data) => {
+            const isSystemDefault = data?.systemDefault === true;
+            if (!!isSystemDefault && !config?.deepBind.includes('systemDefault')) {
+                return true;
+            }
             if (!config) {
                 return true;
             }
@@ -5864,9 +5885,9 @@ class TDynamicDataEditComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TDynamicDataEditComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", 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\"\r\n                 [color]=\"((validationErrors)||[]||[]).length>0 ? 'warn' : 'primary'\"\r\n                [floatLabel]=\"'always'\" [subscriptSizing]=\"'dynamic'\"\r\n                [hintLabel]=\"vm.editorConfigValue?.hint||''\">\r\n                <mat-label> {{ (vm.  editorConfigValue)?.label + ((vm.  editorConfigValue)?.required ? '*' : '')}} </mat-label>\r\n    \r\n                @switch ((vm.  editorConfigValue)?.editType) {\r\n                @default {\r\n                <input \r\n                (blur)=\"elementBlur($event)\" \r\n                (input)=\"inputChange($event)\" \r\n                [disabled]=\"(vm.disabled)\"\r\n                [value]=\"(vm.value)\" matInput \r\n                \r\n                [placeholder]=\"(vm.  editorConfigValue)?.placeholder ||'Enter value'\">\r\n    \r\n    \r\n                }\r\n                @case ( elementEditorTypes.Toggle) {\r\n                <lib-mat-slider-toggle-editor \r\n                [name]=\"((vm.  editorConfigValue)?.name||'') \" \r\n                [label]=\"((vm.  editorConfigValue)?.label||'')\"\r\n                \r\n                (valueChange)=\"valueChanged(!!$event)\" [value]=\"(vm.value)\" \r\n                [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 [format]=\"(  vm.editorConfigValue)?.format \" [formatLabel]=\" formatLabel\"\r\n                    [max]=\"(  vm.editorConfigValue)?.max || 100\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n                    [min]=\"(  vm.editorConfigValue)?.min || 0\" (valueChange)=\"inputChange($event)\"\r\n                    [step]=\"(  vm.editorConfigValue)?.step || 1\" 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 [options]=\"(vm.editorConfigValue)?.options\" [required]=\"!!( vm.editorConfigValue)?.required\"\r\n                    [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" (valueChange)=\"  valueChanged($event)\"></lib-mat-chip-list-editor>\r\n    \r\n                }\r\n    \r\n                @case (elementEditorTypes.OptionSelect) {\r\n    \r\n                <mat-select [value]=\"(vm.value)\" (selectionChange)=\"valueChanged($event.value)\">\r\n                    @for(option of ( vm.editorConfigValue)?.options;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                <p>\r\n                    Not implemented yet\r\n                </p>\r\n            }\r\n                --->\r\n    \r\n                @case (elementEditorTypes.SelectionOptions) {\r\n    \r\n                <app-selection-options-editor [errors]=\"(validationErrors)||[]\" [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                    [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\r\n                    [httpGetDataFunction]=\"(vm.editorConfigValue)?.httpGetDataFunction\"\r\n                    [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n                    (valueChanged)=\"valueChanged($event)\">\r\n    \r\n                </lib-rest-api-call-setup>\r\n                }\r\n    \r\n                @case (elementEditorTypes.MongoPipelineBuilder) {\r\n    \r\n                <app-pipeline-generator [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.ApiValueAccessRules) {\r\n    \r\n    \r\n    \r\n                <app-api-value-access-rules \r\n                    [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n                    [errors]=\"(validationErrors)||[]\" [formInputs]=\"formInputs ||[]\" \r\n                    [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\r\n            \r\n                    [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 [formInputs]=\"formInputs ||[]\" [errors]=\"(validationErrors)||[]\" [value]=\"(vm.value) || []\"\r\n                    (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 ||[]\" [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n                    [value]=\"(vm.value)\" [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 ||[]\"\r\n                    [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n                    (valueChanged)=\"valueChanged($event)\" [mapToData]=\"vm.dataOptions\"></app-calculated-field-rules>\r\n                }\r\n    \r\n                @case(elementEditorTypes.Validators){\r\n    \r\n                <app-validators-config [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 [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" \r\n                [getMscoaTree]=\"getMscoaTree$\"\r\n                  [dataValue]=\"vm.dataValue\"\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 [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n                    [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\"\r\n                    [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 (valueChange)=\"valueChanged($event)\" [value]=\"(vm.value)\" \r\n                    [errors]=\"(validationErrors)||[]\" >\r\n\r\n                    </lib-chip-options-creator-editor>\r\n                    \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    \r\n        <mat-error style=\"    font-size: 12px;\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:12px;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:16px;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$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }], deferBlockDependencies: [() => [i2$2.NgForOf, i2$2.NgIf, i2$2.AsyncPipe, import('./ngx-t-forms-selection-options-editor.component-C8KaRaIJ.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-DZXH_UBK.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-DmII4rB1.mjs').then(m => m.RestApiCallSetupComponent), import('./ngx-t-forms-api-value-access-rules.component-fKCk6tHv.mjs').then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-0l94qfKx.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-DfjnUdcM.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-B_8NQhQQ.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-DEZQOMZx.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-DuC1LDjl.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-pVWgzc5_.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-BxyJB21G.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-Ddy1-Jgp.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-qzR-rM4E.mjs').then(m => m.MatChipListEditorComponent), i3.MatOption, i2.MatIconButton, i6.MatIcon, i3$1.MatFormField, i3$1.MatLabel, i3$1.MatError, i3$1.MatSuffix, i3$1.MatSelect, i8.MatTooltip, i12.MatInput, import('./ngx-t-forms-chip-options-creator-editor.component-Wv7jtClz.mjs').then(m => m.ChipOptionsCreatorEditorComponent)]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", 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 + ((vm. editorConfigValue)?.required ? '*' : '')}} </mat-label>\r\n\r\n        @switch ((vm. editorConfigValue)?.editType) {\r\n        @default {\r\n        <input (blur)=\"elementBlur($event)\" (input)=\"inputChange($event)\" [disabled]=\"(vm.disabled)\"\r\n            [value]=\"(vm.value)\" matInput [placeholder]=\"(vm.  editorConfigValue)?.placeholder ||'Enter value'\">\r\n\r\n\r\n        }\r\n        @case ( elementEditorTypes.Toggle) {\r\n        <lib-mat-slider-toggle-editor [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 [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 [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        @case (elementEditorTypes.OptionSelect) {\r\n\r\n        <mat-select [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                <p>\r\n                    Not implemented yet\r\n                </p>\r\n            }\r\n                --->\r\n\r\n        @case (elementEditorTypes.SelectionOptions) {\r\n\r\n        <app-selection-options-editor [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 [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        @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.ApiValueAccessRules) {\r\n\r\n\r\n\r\n        <app-api-value-access-rules \r\n        [disabled]=\"(vm.disabled)||false\"\r\n        [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n            [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" [formInputs]=\"formInputs ||[]\"\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   [disabled]=\"(vm.disabled)||false\" [formInputs]=\"formInputs ||[]\" [errors]=\"(validationErrors)||[]\"\r\n            [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 ||[]\"\r\n         [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 ||[]\"\r\n          [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 \r\n         [disabled]=\"(vm.disabled)||false\"\r\n        [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n            [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\"\r\n            [formInputs]=\"formInputs ||[]\" [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 \r\n          [disabled]=\"(vm.disabled)||false\"\r\n        [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\"\r\n            [dataValue]=\"vm.dataValue\" [showAllSegments]=\"vm.dataOptions\"\r\n            (valueChanged)=\"valueChanged($event)\"></app-mscoa-segment-config>\r\n        }\r\n        @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\r\n\r\n        <app-config-mscoa-additional-inputs\r\n              [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 \r\n             [disabled]=\"(vm.disabled)||false\"\r\n        (valueChange)=\"valueChanged($event)\" [value]=\"(vm.value)\"\r\n            [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   [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm.  editorConfigValue\" (valueChange)=\"valueChanged($event)\"\r\n            [formInputs]=\"formInputs ||[]\" [value]=\"(vm.value)\" [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        \r\n        \r\n        [disabled]=\"(vm.disabled)||false\"\r\n        [editorConfig]=\"vm.  editorConfigValue\"\r\n            (valueChange)=\"valueChanged($event)\" [value]=\"(vm.value)\" [mapToData]=\"vm.dataOptions\"\r\n            [errors]=\"(validationErrors)||[]\">\r\n\r\n        </lib-document-list-label-config-editor>\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\r\n    <mat-error style=\"    font-size: 12px;\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:12px;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:16px;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$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }], deferBlockDependencies: [() => [i2$2.NgForOf, i2$2.NgIf, i2$2.AsyncPipe, import('./ngx-t-forms-selection-options-editor.component-CSTV4Hqm.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-BqJ7H_C5.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-Dx-EamZ8.mjs').then(m => m.RestApiCallSetupComponent), import('./ngx-t-forms-api-value-access-rules.component-DscZEY73.mjs').then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-BfrR28ge.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-BtkYF9xE.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-BP6qdagA.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-I346eCwr.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-0Svupljo.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-DKIiWPq3.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-Bo-aEuAQ.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-MFT33hkt.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-CZbupm3H.mjs').then(m => m.MatChipListEditorComponent), i3.MatOption, i2.MatIconButton, i6.MatIcon, i3$1.MatFormField, i3$1.MatLabel, i3$1.MatError, i3$1.MatSuffix, i3$1.MatSelect, i8.MatTooltip, i12.MatInput, import('./ngx-t-forms-chip-options-creator-editor.component-U-F-Mw4k.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-DFaFLo9z.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-CVF-JI3j.mjs').then(m => m.DocumentListLabelConfigEditorComponent)]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: TDynamicDataEditComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-selection-options-editor.component-C8KaRaIJ.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-DZXH_UBK.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-DmII4rB1.mjs').then(m => m.RestApiCallSetupComponent), import('./ngx-t-forms-api-value-access-rules.component-fKCk6tHv.mjs').then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-0l94qfKx.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-DfjnUdcM.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-B_8NQhQQ.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-DEZQOMZx.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-DuC1LDjl.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-pVWgzc5_.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-BxyJB21G.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-Ddy1-Jgp.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-qzR-rM4E.mjs').then(m => m.MatChipListEditorComponent), import('./ngx-t-forms-chip-options-creator-editor.component-Wv7jtClz.mjs').then(m => m.ChipOptionsCreatorEditorComponent)], resolveMetadata: (SelectionOptionsEditorComponent, FormInputSelectorComponent, RestApiCallSetupComponent, ApiValueAccessRulesComponent, RequiredInputsComponent, PipelineGeneratorComponent, CalculatedFieldRulesComponent, ValidatorsConfigComponent, ConfigMscoaAdditionalInputsComponent, MatSliderEditorComponent, MscoaSegmentConfigComponent, MatSliderToggleEditorComponent, MatChipListEditorComponent, ChipOptionsCreatorEditorComponent) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: TDynamicDataEditComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-selection-options-editor.component-CSTV4Hqm.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-BqJ7H_C5.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-Dx-EamZ8.mjs').then(m => m.RestApiCallSetupComponent), import('./ngx-t-forms-api-value-access-rules.component-DscZEY73.mjs').then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-BfrR28ge.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-BtkYF9xE.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-BP6qdagA.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-I346eCwr.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-0Svupljo.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-DKIiWPq3.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-Bo-aEuAQ.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-MFT33hkt.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-CZbupm3H.mjs').then(m => m.MatChipListEditorComponent), import('./ngx-t-forms-chip-options-creator-editor.component-U-F-Mw4k.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-DFaFLo9z.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-CVF-JI3j.mjs').then(m => m.DocumentListLabelConfigEditorComponent)], resolveMetadata: (SelectionOptionsEditorComponent, FormInputSelectorComponent, RestApiCallSetupComponent, ApiValueAccessRulesComponent, RequiredInputsComponent, PipelineGeneratorComponent, CalculatedFieldRulesComponent, ValidatorsConfigComponent, ConfigMscoaAdditionalInputsComponent, MatSliderEditorComponent, MscoaSegmentConfigComponent, MatSliderToggleEditorComponent, MatChipListEditorComponent, ChipOptionsCreatorEditorComponent, DataSourcePickerComponent, DocumentListLabelConfigEditorComponent) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'lib-t-dynamic-data-edit', standalone: true, imports: [CommonModule,
                             SelectionOptionsEditorComponent,
@@ -5882,7 +5903,11 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ng
                             MscoaSegmentConfigComponent,
                             MatSliderToggleEditorComponent,
                             MatChipListEditorComponent,
-                            MatModulesModule, ChipOptionsCreatorEditorComponent], template: "@defer {\r\n    <ng-container *ngIf=\"( vm$ |async) as vm\" >\r\n\r\n            <mat-form-field appearance=\"outline\"\r\n                 [color]=\"((validationErrors)||[]||[]).length>0 ? 'warn' : 'primary'\"\r\n                [floatLabel]=\"'always'\" [subscriptSizing]=\"'dynamic'\"\r\n                [hintLabel]=\"vm.editorConfigValue?.hint||''\">\r\n                <mat-label> {{ (vm.  editorConfigValue)?.label + ((vm.  editorConfigValue)?.required ? '*' : '')}} </mat-label>\r\n    \r\n                @switch ((vm.  editorConfigValue)?.editType) {\r\n                @default {\r\n                <input \r\n                (blur)=\"elementBlur($event)\" \r\n                (input)=\"inputChange($event)\" \r\n                [disabled]=\"(vm.disabled)\"\r\n                [value]=\"(vm.value)\" matInput \r\n                \r\n                [placeholder]=\"(vm.  editorConfigValue)?.placeholder ||'Enter value'\">\r\n    \r\n    \r\n                }\r\n                @case ( elementEditorTypes.Toggle) {\r\n                <lib-mat-slider-toggle-editor \r\n                [name]=\"((vm.  editorConfigValue)?.name||'') \" \r\n                [label]=\"((vm.  editorConfigValue)?.label||'')\"\r\n                \r\n                (valueChange)=\"valueChanged(!!$event)\" [value]=\"(vm.value)\" \r\n                [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 [format]=\"(  vm.editorConfigValue)?.format \" [formatLabel]=\" formatLabel\"\r\n                    [max]=\"(  vm.editorConfigValue)?.max || 100\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n                    [min]=\"(  vm.editorConfigValue)?.min || 0\" (valueChange)=\"inputChange($event)\"\r\n                    [step]=\"(  vm.editorConfigValue)?.step || 1\" 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 [options]=\"(vm.editorConfigValue)?.options\" [required]=\"!!( vm.editorConfigValue)?.required\"\r\n                    [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" (valueChange)=\"  valueChanged($event)\"></lib-mat-chip-list-editor>\r\n    \r\n                }\r\n    \r\n                @case (elementEditorTypes.OptionSelect) {\r\n    \r\n                <mat-select [value]=\"(vm.value)\" (selectionChange)=\"valueChanged($event.value)\">\r\n                    @for(option of ( vm.editorConfigValue)?.options;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                <p>\r\n                    Not implemented yet\r\n                </p>\r\n            }\r\n                --->\r\n    \r\n                @case (elementEditorTypes.SelectionOptions) {\r\n    \r\n                <app-selection-options-editor [errors]=\"(validationErrors)||[]\" [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                    [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\r\n                    [httpGetDataFunction]=\"(vm.editorConfigValue)?.httpGetDataFunction\"\r\n                    [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n                    (valueChanged)=\"valueChanged($event)\">\r\n    \r\n                </lib-rest-api-call-setup>\r\n                }\r\n    \r\n                @case (elementEditorTypes.MongoPipelineBuilder) {\r\n    \r\n                <app-pipeline-generator [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.ApiValueAccessRules) {\r\n    \r\n    \r\n    \r\n                <app-api-value-access-rules \r\n                    [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n                    [errors]=\"(validationErrors)||[]\" [formInputs]=\"formInputs ||[]\" \r\n                    [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\r\n            \r\n                    [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 [formInputs]=\"formInputs ||[]\" [errors]=\"(validationErrors)||[]\" [value]=\"(vm.value) || []\"\r\n                    (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 ||[]\" [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n                    [value]=\"(vm.value)\" [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 ||[]\"\r\n                    [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n                    (valueChanged)=\"valueChanged($event)\" [mapToData]=\"vm.dataOptions\"></app-calculated-field-rules>\r\n                }\r\n    \r\n                @case(elementEditorTypes.Validators){\r\n    \r\n                <app-validators-config [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 [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" \r\n                [getMscoaTree]=\"getMscoaTree$\"\r\n                  [dataValue]=\"vm.dataValue\"\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 [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n                    [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\"\r\n                    [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 (valueChange)=\"valueChanged($event)\" [value]=\"(vm.value)\" \r\n                    [errors]=\"(validationErrors)||[]\" >\r\n\r\n                    </lib-chip-options-creator-editor>\r\n                    \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    \r\n        <mat-error style=\"    font-size: 12px;\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:12px;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:16px;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"] }]
+                            MatModulesModule,
+                            ChipOptionsCreatorEditorComponent,
+                            DataSourcePickerComponent,
+                            DocumentListLabelConfigEditorComponent
+                        ], 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 + ((vm. editorConfigValue)?.required ? '*' : '')}} </mat-label>\r\n\r\n        @switch ((vm. editorConfigValue)?.editType) {\r\n        @default {\r\n        <input (blur)=\"elementBlur($event)\" (input)=\"inputChange($event)\" [disabled]=\"(vm.disabled)\"\r\n            [value]=\"(vm.value)\" matInput [placeholder]=\"(vm.  editorConfigValue)?.placeholder ||'Enter value'\">\r\n\r\n\r\n        }\r\n        @case ( elementEditorTypes.Toggle) {\r\n        <lib-mat-slider-toggle-editor [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 [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 [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        @case (elementEditorTypes.OptionSelect) {\r\n\r\n        <mat-select [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                <p>\r\n                    Not implemented yet\r\n                </p>\r\n            }\r\n                --->\r\n\r\n        @case (elementEditorTypes.SelectionOptions) {\r\n\r\n        <app-selection-options-editor [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 [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        @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.ApiValueAccessRules) {\r\n\r\n\r\n\r\n        <app-api-value-access-rules \r\n        [disabled]=\"(vm.disabled)||false\"\r\n        [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n            [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" [formInputs]=\"formInputs ||[]\"\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   [disabled]=\"(vm.disabled)||false\" [formInputs]=\"formInputs ||[]\" [errors]=\"(validationErrors)||[]\"\r\n            [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 ||[]\"\r\n         [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 ||[]\"\r\n          [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 \r\n         [disabled]=\"(vm.disabled)||false\"\r\n        [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n            [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\"\r\n            [formInputs]=\"formInputs ||[]\" [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 \r\n          [disabled]=\"(vm.disabled)||false\"\r\n        [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\"\r\n            [dataValue]=\"vm.dataValue\" [showAllSegments]=\"vm.dataOptions\"\r\n            (valueChanged)=\"valueChanged($event)\"></app-mscoa-segment-config>\r\n        }\r\n        @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\r\n\r\n        <app-config-mscoa-additional-inputs\r\n              [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 \r\n             [disabled]=\"(vm.disabled)||false\"\r\n        (valueChange)=\"valueChanged($event)\" [value]=\"(vm.value)\"\r\n            [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   [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm.  editorConfigValue\" (valueChange)=\"valueChanged($event)\"\r\n            [formInputs]=\"formInputs ||[]\" [value]=\"(vm.value)\" [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        \r\n        \r\n        [disabled]=\"(vm.disabled)||false\"\r\n        [editorConfig]=\"vm.  editorConfigValue\"\r\n            (valueChange)=\"valueChanged($event)\" [value]=\"(vm.value)\" [mapToData]=\"vm.dataOptions\"\r\n            [errors]=\"(validationErrors)||[]\">\r\n\r\n        </lib-document-list-label-config-editor>\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\r\n    <mat-error style=\"    font-size: 12px;\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:12px;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:16px;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: [{
@@ -6289,7 +6314,7 @@ function mscoaStoreSelectors(store) {
         credit: (segment.segmentValue?.credit?.SCOAAccount || segment.segmentValue?.credit),
     }))));
     function getSegmentCounterAccountValues(segment) {
-        return segment.additionalAccounts.reduce((acc, account) => {
+        return (segment.additionalAccounts || []).reduce((acc, account) => {
             const newEntry = {
                 [`${account}Credit`]: segment.segmentValue?.[`${account}Credit`]?.SCOAAccount,
                 [`${account}Debit`]: segment.segmentValue?.[`${account}Debit`]?.SCOAAccount
@@ -6638,11 +6663,11 @@ class AccountValueComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AccountValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: AccountValueComponent, isStandalone: true, selector: "app-account-value", inputs: { mscoaAccount: "mscoaAccount", accountInputs: "accountInputs", userCanClearAccount: "userCanClearAccount" }, outputs: { clearSelectedAccount: "clearSelectedAccount", updateAccount: "updateAccount" }, ngImport: i0, template: "<div style=\"max-width: 500px;     background: var(--mat-toolbar-container-background-color);\">\r\n    <mat-toolbar>\r\n        Account Details\r\n        <span class=\"spacer\"></span>\r\n        <button *ngIf=\"userCanClearAccount\" (click)=\"clearAccount()\" mat-flat-button color=\"accent\">\r\n            Clear Account\r\n            <mat-icon>\r\n                backspace\r\n            </mat-icon>\r\n        </button>\r\n    </mat-toolbar>\r\n    <div class=\"account-grid\">\r\n        <ng-container *ngFor=\"let item of accountDetails; let last = last\">\r\n            <div class=\"label\">\r\n                {{item.label}}\r\n            </div>\r\n            <div class=\"value\">\r\n                @if (item?.input) {\r\n                @if( !item.value){\r\n                <button (click)=\"openValueEdit(item)\" style=\"width: 100%;\" mat-stroked-button>\r\n                    {{item.value? item.value: 'set ' + item.label}}\r\n                </button>\r\n                }@else{\r\n                <button color=\"primary\" (click)=\"openValueEdit(item)\" style=\"width: 100%;text-align:start\" mat-button>\r\n                    {{item.value? item.value: 'set ' + item.label}}\r\n                </button>\r\n                }\r\n                }@else {\r\n                {{item.value}}\r\n                }\r\n            </div>\r\n            <mat-divider *ngIf=\"!last\"></mat-divider>\r\n        </ng-container>\r\n\r\n    </div>\r\n</div>", styles: [".account-card{max-width:500px;margin:20px auto;border-radius:8px;border:solid 1px #243d91}mat-card-header{background-color:#f5f5f5;padding:16px;border-bottom:1px solid #e0e0e0}mat-card-title{font-size:1.2rem;color:#333;margin:0}.account-grid{display:grid;grid-template-columns:max-content 1fr;gap:0px 16px;padding:16px;max-height:calc(95vh - 192px);overflow:auto}.label{font-weight:500;color:#555;text-align:right;font-size:14px}.value{color:#333;font-size:14px}mat-divider{grid-column:1/-1;margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: AccountValueComponent, isStandalone: true, selector: "app-account-value", inputs: { mscoaAccount: "mscoaAccount", accountInputs: "accountInputs", userCanClearAccount: "userCanClearAccount" }, outputs: { clearSelectedAccount: "clearSelectedAccount", updateAccount: "updateAccount" }, ngImport: i0, template: "<div style=\"max-width: 500px;     background: var(--mat-sys-surface-container);\">\r\n    <mat-toolbar>\r\n        Account Details\r\n        <span class=\"spacer\"></span>\r\n        <button *ngIf=\"userCanClearAccount\" (click)=\"clearAccount()\" mat-flat-button color=\"accent\">\r\n            Clear Account\r\n            <mat-icon>\r\n                backspace\r\n            </mat-icon>\r\n        </button>\r\n    </mat-toolbar>\r\n    <div class=\"account-grid\">\r\n        <ng-container *ngFor=\"let item of accountDetails; let last = last\">\r\n            <div class=\"label\">\r\n                {{item.label}}\r\n            </div>\r\n            <div class=\"value\">\r\n                @if (item?.input) {\r\n                @if( !item.value){\r\n                <button (click)=\"openValueEdit(item)\" style=\"width: 100%;\" mat-stroked-button>\r\n                    {{item.value? item.value: 'set ' + item.label}}\r\n                </button>\r\n                }@else{\r\n                <button color=\"primary\" (click)=\"openValueEdit(item)\" style=\"width: 100%;text-align:start\" mat-button>\r\n                    {{item.value? item.value: 'set ' + item.label}}\r\n                </button>\r\n                }\r\n                }@else {\r\n                {{item.value}}\r\n                }\r\n            </div>\r\n            <mat-divider *ngIf=\"!last\"></mat-divider>\r\n        </ng-container>\r\n\r\n    </div>\r\n</div>", styles: [".account-card{max-width:500px;margin:20px auto;border-radius:8px;border:solid 1px #243d91}mat-card-header{background-color:#f5f5f5;padding:16px;border-bottom:1px solid #e0e0e0}mat-card-title{font-size:1.2rem;color:#333;margin:0}.account-grid{display:grid;grid-template-columns:max-content 1fr;gap:0px 16px;padding:16px;max-height:calc(95vh - 192px);overflow:auto;background:var(--mat-sys-surface)}.label{font-weight:500;color:#555;text-align:right;font-size:14px}.value{color:#333;font-size:14px}mat-divider{grid-column:1/-1;margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AccountValueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-account-value', standalone: true, imports: [CommonModule, MatModulesModule], template: "<div style=\"max-width: 500px;     background: var(--mat-toolbar-container-background-color);\">\r\n    <mat-toolbar>\r\n        Account Details\r\n        <span class=\"spacer\"></span>\r\n        <button *ngIf=\"userCanClearAccount\" (click)=\"clearAccount()\" mat-flat-button color=\"accent\">\r\n            Clear Account\r\n            <mat-icon>\r\n                backspace\r\n            </mat-icon>\r\n        </button>\r\n    </mat-toolbar>\r\n    <div class=\"account-grid\">\r\n        <ng-container *ngFor=\"let item of accountDetails; let last = last\">\r\n            <div class=\"label\">\r\n                {{item.label}}\r\n            </div>\r\n            <div class=\"value\">\r\n                @if (item?.input) {\r\n                @if( !item.value){\r\n                <button (click)=\"openValueEdit(item)\" style=\"width: 100%;\" mat-stroked-button>\r\n                    {{item.value? item.value: 'set ' + item.label}}\r\n                </button>\r\n                }@else{\r\n                <button color=\"primary\" (click)=\"openValueEdit(item)\" style=\"width: 100%;text-align:start\" mat-button>\r\n                    {{item.value? item.value: 'set ' + item.label}}\r\n                </button>\r\n                }\r\n                }@else {\r\n                {{item.value}}\r\n                }\r\n            </div>\r\n            <mat-divider *ngIf=\"!last\"></mat-divider>\r\n        </ng-container>\r\n\r\n    </div>\r\n</div>", styles: [".account-card{max-width:500px;margin:20px auto;border-radius:8px;border:solid 1px #243d91}mat-card-header{background-color:#f5f5f5;padding:16px;border-bottom:1px solid #e0e0e0}mat-card-title{font-size:1.2rem;color:#333;margin:0}.account-grid{display:grid;grid-template-columns:max-content 1fr;gap:0px 16px;padding:16px;max-height:calc(95vh - 192px);overflow:auto}.label{font-weight:500;color:#555;text-align:right;font-size:14px}.value{color:#333;font-size:14px}mat-divider{grid-column:1/-1;margin:8px 0}\n"] }]
+            args: [{ selector: 'app-account-value', standalone: true, imports: [CommonModule, MatModulesModule], template: "<div style=\"max-width: 500px;     background: var(--mat-sys-surface-container);\">\r\n    <mat-toolbar>\r\n        Account Details\r\n        <span class=\"spacer\"></span>\r\n        <button *ngIf=\"userCanClearAccount\" (click)=\"clearAccount()\" mat-flat-button color=\"accent\">\r\n            Clear Account\r\n            <mat-icon>\r\n                backspace\r\n            </mat-icon>\r\n        </button>\r\n    </mat-toolbar>\r\n    <div class=\"account-grid\">\r\n        <ng-container *ngFor=\"let item of accountDetails; let last = last\">\r\n            <div class=\"label\">\r\n                {{item.label}}\r\n            </div>\r\n            <div class=\"value\">\r\n                @if (item?.input) {\r\n                @if( !item.value){\r\n                <button (click)=\"openValueEdit(item)\" style=\"width: 100%;\" mat-stroked-button>\r\n                    {{item.value? item.value: 'set ' + item.label}}\r\n                </button>\r\n                }@else{\r\n                <button color=\"primary\" (click)=\"openValueEdit(item)\" style=\"width: 100%;text-align:start\" mat-button>\r\n                    {{item.value? item.value: 'set ' + item.label}}\r\n                </button>\r\n                }\r\n                }@else {\r\n                {{item.value}}\r\n                }\r\n            </div>\r\n            <mat-divider *ngIf=\"!last\"></mat-divider>\r\n        </ng-container>\r\n\r\n    </div>\r\n</div>", styles: [".account-card{max-width:500px;margin:20px auto;border-radius:8px;border:solid 1px #243d91}mat-card-header{background-color:#f5f5f5;padding:16px;border-bottom:1px solid #e0e0e0}mat-card-title{font-size:1.2rem;color:#333;margin:0}.account-grid{display:grid;grid-template-columns:max-content 1fr;gap:0px 16px;padding:16px;max-height:calc(95vh - 192px);overflow:auto;background:var(--mat-sys-surface)}.label{font-weight:500;color:#555;text-align:right;font-size:14px}.value{color:#333;font-size:14px}mat-divider{grid-column:1/-1;margin:8px 0}\n"] }]
         }], propDecorators: { mscoaAccount: [{
                 type: Input
             }], accountInputs: [{
@@ -6917,7 +6942,7 @@ class MscoaComputationComponent {
         return !this.segmentConfig?.readOnly;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MscoaComputationComponent, deps: [{ token: i1$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MscoaComputationComponent, isStandalone: true, selector: "app-mscoa-computation", ngImport: i0, template: "<mat-toolbar class=\"glass\" [color]=\"activeColumn ==='debit'?'primary':'warn'\">\r\n    <span>\r\n        <h1>\r\n            {{ segment|| 'No segment' | titlecase}} : {{activeColumn |\r\n            titlecase}}\r\n            account\r\n        </h1>\r\n\r\n    </span>\r\n\r\n    <span class=\"spacer\">\r\n    </span>\r\n\r\n</mat-toolbar>\r\n\r\n@if ( _selectedAccount ) {\r\n<div style=\"max-height:calc(98vh - 128px);    max-width: 98vw;\">\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\r\n\r\n}@else{\r\n<mat-drawer-container style=\"max-height:calc(98vh - 128px);    max-width: 98vw;\" autosize>\r\n    <mat-drawer #drawer style=\" \r\n        max-width: 98vw;\r\n        overflow: auto;\r\n    background: var(--mat-toolbar-container-background-color) !important;padding:16px\" mode=\"side\" position=\"end\"\r\n        [opened]=\"!searchingAccounts &&  !!this._selected\">\r\n\r\n        <h4>Select an Account</h4>\r\n        <p class=\"info\">Please choose from the options below. Search results for account\r\n            <strong>{{account}}</strong>\r\n        </p>\r\n\r\n\r\n        <app-scoa-account-table [selectedAccount]=\" _selectedAccount\" [segment]=\"segment\"\r\n            (accountSelected)=\" selectAccount($event)\" [data]=\"{\r\n                            accounts: searchAccount,\r\n                            account: ''\r\n                            }\">\r\n        </app-scoa-account-table>\r\n\r\n        <footer>\r\n            <mat-toolbar>\r\n                <span class=\"spacer\"></span>\r\n                <button mat-flat-button color=\"warn\" (click)=\"cancel()\">Cancel account selection</button>\r\n\r\n            </mat-toolbar>\r\n        </footer>\r\n    </mat-drawer>\r\n    <div class=\"tree-content\">\r\n\r\n        <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n            <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding>\r\n\r\n\r\n                <button class=\"toggle-button\" mat-icon-button disabled></button>\r\n                <mat-checkbox (change)=\"selectNode(node)\"\r\n                    disabled=\"{{isActivePathOrParent(node.path) && searchingAccounts}}\"\r\n                    [checked]=\"isActivePathOrParent(node.path)\">\r\n                    <mat-spinner color=\"primary\" *ngIf=\"isActivePathOrParent(node.path) && searchingAccounts\"\r\n                        class=\"loading\"></mat-spinner>\r\n                    <span *ngIf=\"!(isActivePathOrParent(node.path) && searchingAccounts)\" class=\"label\"\r\n                        [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                        {{node.name}}\r\n\r\n                    </span>\r\n                    <span *ngIf=\"isActivePathOrParent(node.path) && searchingAccounts\" class=\"label\"\r\n                        [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                        ...Loading <strong>{{node.name}}</strong> accounts\r\n                    </span>\r\n                </mat-checkbox>\r\n\r\n            </mat-tree-node>\r\n            <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n\r\n                <button class=\"toggle-button\" mat-icon-button [attr.aria-label]=\"'Toggle ' + node.name\"\r\n                    (click)=\"toggleNode(node)\">\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                <mat-checkbox (change)=\"selectNode(node)\" disabled=\"true\" checked=\"true\"\r\n                    *ngIf=\"isActivePathOrParent(node.path)\">\r\n                    <span class=\"label\" [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                        {{node.name}}\r\n                    </span>\r\n                </mat-checkbox>\r\n\r\n                <span *ngIf=\"!isActivePathOrParent(node.path)\" class=\"label\"\r\n                    [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                    {{node.name}} {{node.selected}}\r\n                </span>\r\n\r\n\r\n\r\n            </mat-tree-node>\r\n        </mat-tree>\r\n    </div>\r\n</mat-drawer-container>\r\n}\r\n<mat-divider></mat-divider>\r\n<mat-toolbar class=\"glass\" style=\"  background: rgba(255, 255, 255, 0.15)\">\r\n    <span class=\"spacer\"></span>\r\n    <button mat-button (click)=\"closeAndPassData(undefined)\">Close</button>\r\n    @if (userCanClearAccount&& !!_selectedAccount?._id) {\r\n    <button mat-raised-button color=\"primary\" [disabled]=\"!saveSelection\" (click)=\"saveAccount()\">Save</button>\r\n    }\r\n\r\n</mat-toolbar>", styles: ["h4{margin-top:0;margin-bottom:0;padding-left:16px}.label{font-size:14px}.selected{color:#243d91!important;font-weight:500}.accountSeperator{margin-left:2px;margin-right:2px}.loading{width:24px!important;height:24px!important;--mdc-circular-progress-size: 28px !important;--mdc-circular-progress-active-indicator-width: 24px !important;position:absolute;left:8px;bottom:8px}.info{font-size:.875rem;opacity:.8;padding-left:16px;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:4px;margin-left:4px}mat-tree{min-height:368px;min-width:fit-content;max-height:calc(98vh - 128px);overflow:auto;margin-top:8px}mat-tree-node{display:flex;align-items:flex-start;min-height:28px;padding-right:4px!important;box-sizing:border-box;width:100%;padding-top:2px!important;padding-bottom:2px!important}.mat-tree-node{display:flex;align-items:center;flex-wrap:nowrap;min-height:28px;padding:4px 0;box-sizing:border-box}.mat-tree-node button,.mat-tree-node mat-checkbox{flex-shrink:0;height:28px;max-width:236px}.mat-tree-node mat-checkbox{display:flex;align-items:center;height:28px;max-width:236px;min-height:fit-content}.mat-tree-node .label{flex:1;min-width:0;word-wrap:break-word;overflow-wrap:break-word;white-space:normal}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6.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: i8$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i8$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i3$3.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3$3.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: i3$3.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$3.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "component", type: AccountValueComponent, selector: "app-account-value", inputs: ["mscoaAccount", "accountInputs", "userCanClearAccount"], outputs: ["clearSelectedAccount", "updateAccount"] }, { kind: "component", type: ScoaAccountTableComponent, selector: "app-scoa-account-table", inputs: ["data", "selectedAccount", "segment"], outputs: ["accountSelected"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MscoaComputationComponent, isStandalone: true, selector: "app-mscoa-computation", ngImport: i0, template: "<mat-toolbar class=\"glass\" [color]=\"activeColumn ==='debit'?'primary':'warn'\">\r\n    <span>\r\n        <h1>\r\n            {{ segment|| 'No segment' | titlecase}} : {{activeColumn |\r\n            titlecase}}\r\n            account\r\n        </h1>\r\n\r\n    </span>\r\n\r\n    <span class=\"spacer\">\r\n    </span>\r\n\r\n</mat-toolbar>\r\n\r\n@if ( _selectedAccount ) {\r\n<div style=\"max-height:calc(98vh - 128px);    max-width: 98vw;\">\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\r\n\r\n}@else{\r\n<mat-drawer-container style=\"max-height:calc(98vh - 128px);    max-width: 98vw;\" autosize>\r\n    <mat-drawer #drawer style=\" \r\n        max-width: 98vw;\r\n        overflow: auto;\r\n    background: var(--mat-sys-surface-container) !important;padding:16px\" mode=\"side\" position=\"end\"\r\n        [opened]=\"!searchingAccounts &&  !!this._selected\">\r\n\r\n        <h4>Select an Account</h4>\r\n        <p class=\"info\">Please choose from the options below. Search results for account\r\n            <strong>{{account}}</strong>\r\n        </p>\r\n\r\n\r\n        <app-scoa-account-table [selectedAccount]=\" _selectedAccount\" [segment]=\"segment\"\r\n            (accountSelected)=\" selectAccount($event)\" [data]=\"{\r\n                            accounts: searchAccount,\r\n                            account: ''\r\n                            }\">\r\n        </app-scoa-account-table>\r\n\r\n        <footer>\r\n            <mat-toolbar>\r\n                <span class=\"spacer\"></span>\r\n                <button mat-flat-button color=\"warn\" (click)=\"cancel()\">Cancel account selection</button>\r\n\r\n            </mat-toolbar>\r\n        </footer>\r\n    </mat-drawer>\r\n    <div class=\"tree-content\">\r\n\r\n        <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n            <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding>\r\n\r\n\r\n                <button class=\"toggle-button\" mat-icon-button disabled></button>\r\n                <mat-checkbox (change)=\"selectNode(node)\"\r\n                    disabled=\"{{isActivePathOrParent(node.path) && searchingAccounts}}\"\r\n                    [checked]=\"isActivePathOrParent(node.path)\">\r\n                    <mat-spinner color=\"primary\" *ngIf=\"isActivePathOrParent(node.path) && searchingAccounts\"\r\n                        class=\"loading\"></mat-spinner>\r\n                    <span *ngIf=\"!(isActivePathOrParent(node.path) && searchingAccounts)\" class=\"label\"\r\n                        [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                        {{node.name}}\r\n\r\n                    </span>\r\n                    <span *ngIf=\"isActivePathOrParent(node.path) && searchingAccounts\" class=\"label\"\r\n                        [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                        ...Loading <strong>{{node.name}}</strong> accounts\r\n                    </span>\r\n                </mat-checkbox>\r\n\r\n            </mat-tree-node>\r\n            <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n\r\n                <button class=\"toggle-button\" mat-icon-button [attr.aria-label]=\"'Toggle ' + node.name\"\r\n                    (click)=\"toggleNode(node)\">\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                <mat-checkbox (change)=\"selectNode(node)\" disabled=\"true\" checked=\"true\"\r\n                    *ngIf=\"isActivePathOrParent(node.path)\">\r\n                    <span class=\"label\" [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                        {{node.name}}\r\n                    </span>\r\n                </mat-checkbox>\r\n\r\n                <span *ngIf=\"!isActivePathOrParent(node.path)\" class=\"label\"\r\n                    [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                    {{node.name}} {{node.selected}}\r\n                </span>\r\n\r\n\r\n\r\n            </mat-tree-node>\r\n        </mat-tree>\r\n    </div>\r\n</mat-drawer-container>\r\n}\r\n<mat-divider></mat-divider>\r\n<mat-toolbar class=\"glass\" style=\"  background: rgba(255, 255, 255, 0.15)\">\r\n    <span class=\"spacer\"></span>\r\n    <button mat-button (click)=\"closeAndPassData(undefined)\">Close</button>\r\n    @if (userCanClearAccount&& !!_selectedAccount?._id) {\r\n    <button mat-raised-button color=\"primary\" [disabled]=\"!saveSelection\" (click)=\"saveAccount()\">Save</button>\r\n    }\r\n\r\n</mat-toolbar>", styles: ["h4{margin-top:0;margin-bottom:0;padding-left:16px}.label{font-size:14px}.selected{color:#243d91!important;font-weight:500}.accountSeperator{margin-left:2px;margin-right:2px}.loading{width:24px!important;height:24px!important;--mdc-circular-progress-size: 28px !important;--mdc-circular-progress-active-indicator-width: 24px !important;position:absolute;left:8px;bottom:8px}.info{font-size:.875rem;opacity:.8;padding-left:16px;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:4px;margin-left:4px}mat-tree{min-height:368px;min-width:fit-content;max-height:calc(98vh - 128px);overflow:auto;margin-top:8px}mat-tree-node{display:flex;align-items:flex-start;min-height:28px;padding-right:4px!important;box-sizing:border-box;width:100%;padding-top:2px!important;padding-bottom:2px!important}.mat-tree-node{display:flex;align-items:center;flex-wrap:nowrap;min-height:28px;padding:4px 0;box-sizing:border-box}.mat-tree-node button,.mat-tree-node mat-checkbox{flex-shrink:0;height:28px;max-width:236px}.mat-tree-node mat-checkbox{display:flex;align-items:center;height:28px;max-width:236px;min-height:fit-content}.mat-tree-node .label{flex:1;min-width:0;word-wrap:break-word;overflow-wrap:break-word;white-space:normal}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6.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: i8$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i8$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i3$3.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3$3.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: i3$3.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3$3.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "component", type: AccountValueComponent, selector: "app-account-value", inputs: ["mscoaAccount", "accountInputs", "userCanClearAccount"], outputs: ["clearSelectedAccount", "updateAccount"] }, { kind: "component", type: ScoaAccountTableComponent, selector: "app-scoa-account-table", inputs: ["data", "selectedAccount", "segment"], outputs: ["accountSelected"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MscoaComputationComponent, decorators: [{
             type: Component,
@@ -6925,7 +6950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         MatModulesModule,
                         AccountValueComponent,
                         ScoaAccountTableComponent
-                    ], template: "<mat-toolbar class=\"glass\" [color]=\"activeColumn ==='debit'?'primary':'warn'\">\r\n    <span>\r\n        <h1>\r\n            {{ segment|| 'No segment' | titlecase}} : {{activeColumn |\r\n            titlecase}}\r\n            account\r\n        </h1>\r\n\r\n    </span>\r\n\r\n    <span class=\"spacer\">\r\n    </span>\r\n\r\n</mat-toolbar>\r\n\r\n@if ( _selectedAccount ) {\r\n<div style=\"max-height:calc(98vh - 128px);    max-width: 98vw;\">\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\r\n\r\n}@else{\r\n<mat-drawer-container style=\"max-height:calc(98vh - 128px);    max-width: 98vw;\" autosize>\r\n    <mat-drawer #drawer style=\" \r\n        max-width: 98vw;\r\n        overflow: auto;\r\n    background: var(--mat-toolbar-container-background-color) !important;padding:16px\" mode=\"side\" position=\"end\"\r\n        [opened]=\"!searchingAccounts &&  !!this._selected\">\r\n\r\n        <h4>Select an Account</h4>\r\n        <p class=\"info\">Please choose from the options below. Search results for account\r\n            <strong>{{account}}</strong>\r\n        </p>\r\n\r\n\r\n        <app-scoa-account-table [selectedAccount]=\" _selectedAccount\" [segment]=\"segment\"\r\n            (accountSelected)=\" selectAccount($event)\" [data]=\"{\r\n                            accounts: searchAccount,\r\n                            account: ''\r\n                            }\">\r\n        </app-scoa-account-table>\r\n\r\n        <footer>\r\n            <mat-toolbar>\r\n                <span class=\"spacer\"></span>\r\n                <button mat-flat-button color=\"warn\" (click)=\"cancel()\">Cancel account selection</button>\r\n\r\n            </mat-toolbar>\r\n        </footer>\r\n    </mat-drawer>\r\n    <div class=\"tree-content\">\r\n\r\n        <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n            <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding>\r\n\r\n\r\n                <button class=\"toggle-button\" mat-icon-button disabled></button>\r\n                <mat-checkbox (change)=\"selectNode(node)\"\r\n                    disabled=\"{{isActivePathOrParent(node.path) && searchingAccounts}}\"\r\n                    [checked]=\"isActivePathOrParent(node.path)\">\r\n                    <mat-spinner color=\"primary\" *ngIf=\"isActivePathOrParent(node.path) && searchingAccounts\"\r\n                        class=\"loading\"></mat-spinner>\r\n                    <span *ngIf=\"!(isActivePathOrParent(node.path) && searchingAccounts)\" class=\"label\"\r\n                        [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                        {{node.name}}\r\n\r\n                    </span>\r\n                    <span *ngIf=\"isActivePathOrParent(node.path) && searchingAccounts\" class=\"label\"\r\n                        [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                        ...Loading <strong>{{node.name}}</strong> accounts\r\n                    </span>\r\n                </mat-checkbox>\r\n\r\n            </mat-tree-node>\r\n            <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n\r\n                <button class=\"toggle-button\" mat-icon-button [attr.aria-label]=\"'Toggle ' + node.name\"\r\n                    (click)=\"toggleNode(node)\">\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                <mat-checkbox (change)=\"selectNode(node)\" disabled=\"true\" checked=\"true\"\r\n                    *ngIf=\"isActivePathOrParent(node.path)\">\r\n                    <span class=\"label\" [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                        {{node.name}}\r\n                    </span>\r\n                </mat-checkbox>\r\n\r\n                <span *ngIf=\"!isActivePathOrParent(node.path)\" class=\"label\"\r\n                    [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                    {{node.name}} {{node.selected}}\r\n                </span>\r\n\r\n\r\n\r\n            </mat-tree-node>\r\n        </mat-tree>\r\n    </div>\r\n</mat-drawer-container>\r\n}\r\n<mat-divider></mat-divider>\r\n<mat-toolbar class=\"glass\" style=\"  background: rgba(255, 255, 255, 0.15)\">\r\n    <span class=\"spacer\"></span>\r\n    <button mat-button (click)=\"closeAndPassData(undefined)\">Close</button>\r\n    @if (userCanClearAccount&& !!_selectedAccount?._id) {\r\n    <button mat-raised-button color=\"primary\" [disabled]=\"!saveSelection\" (click)=\"saveAccount()\">Save</button>\r\n    }\r\n\r\n</mat-toolbar>", styles: ["h4{margin-top:0;margin-bottom:0;padding-left:16px}.label{font-size:14px}.selected{color:#243d91!important;font-weight:500}.accountSeperator{margin-left:2px;margin-right:2px}.loading{width:24px!important;height:24px!important;--mdc-circular-progress-size: 28px !important;--mdc-circular-progress-active-indicator-width: 24px !important;position:absolute;left:8px;bottom:8px}.info{font-size:.875rem;opacity:.8;padding-left:16px;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:4px;margin-left:4px}mat-tree{min-height:368px;min-width:fit-content;max-height:calc(98vh - 128px);overflow:auto;margin-top:8px}mat-tree-node{display:flex;align-items:flex-start;min-height:28px;padding-right:4px!important;box-sizing:border-box;width:100%;padding-top:2px!important;padding-bottom:2px!important}.mat-tree-node{display:flex;align-items:center;flex-wrap:nowrap;min-height:28px;padding:4px 0;box-sizing:border-box}.mat-tree-node button,.mat-tree-node mat-checkbox{flex-shrink:0;height:28px;max-width:236px}.mat-tree-node mat-checkbox{display:flex;align-items:center;height:28px;max-width:236px;min-height:fit-content}.mat-tree-node .label{flex:1;min-width:0;word-wrap:break-word;overflow-wrap:break-word;white-space:normal}\n"] }]
+                    ], template: "<mat-toolbar class=\"glass\" [color]=\"activeColumn ==='debit'?'primary':'warn'\">\r\n    <span>\r\n        <h1>\r\n            {{ segment|| 'No segment' | titlecase}} : {{activeColumn |\r\n            titlecase}}\r\n            account\r\n        </h1>\r\n\r\n    </span>\r\n\r\n    <span class=\"spacer\">\r\n    </span>\r\n\r\n</mat-toolbar>\r\n\r\n@if ( _selectedAccount ) {\r\n<div style=\"max-height:calc(98vh - 128px);    max-width: 98vw;\">\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\r\n\r\n}@else{\r\n<mat-drawer-container style=\"max-height:calc(98vh - 128px);    max-width: 98vw;\" autosize>\r\n    <mat-drawer #drawer style=\" \r\n        max-width: 98vw;\r\n        overflow: auto;\r\n    background: var(--mat-sys-surface-container) !important;padding:16px\" mode=\"side\" position=\"end\"\r\n        [opened]=\"!searchingAccounts &&  !!this._selected\">\r\n\r\n        <h4>Select an Account</h4>\r\n        <p class=\"info\">Please choose from the options below. Search results for account\r\n            <strong>{{account}}</strong>\r\n        </p>\r\n\r\n\r\n        <app-scoa-account-table [selectedAccount]=\" _selectedAccount\" [segment]=\"segment\"\r\n            (accountSelected)=\" selectAccount($event)\" [data]=\"{\r\n                            accounts: searchAccount,\r\n                            account: ''\r\n                            }\">\r\n        </app-scoa-account-table>\r\n\r\n        <footer>\r\n            <mat-toolbar>\r\n                <span class=\"spacer\"></span>\r\n                <button mat-flat-button color=\"warn\" (click)=\"cancel()\">Cancel account selection</button>\r\n\r\n            </mat-toolbar>\r\n        </footer>\r\n    </mat-drawer>\r\n    <div class=\"tree-content\">\r\n\r\n        <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n            <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding>\r\n\r\n\r\n                <button class=\"toggle-button\" mat-icon-button disabled></button>\r\n                <mat-checkbox (change)=\"selectNode(node)\"\r\n                    disabled=\"{{isActivePathOrParent(node.path) && searchingAccounts}}\"\r\n                    [checked]=\"isActivePathOrParent(node.path)\">\r\n                    <mat-spinner color=\"primary\" *ngIf=\"isActivePathOrParent(node.path) && searchingAccounts\"\r\n                        class=\"loading\"></mat-spinner>\r\n                    <span *ngIf=\"!(isActivePathOrParent(node.path) && searchingAccounts)\" class=\"label\"\r\n                        [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                        {{node.name}}\r\n\r\n                    </span>\r\n                    <span *ngIf=\"isActivePathOrParent(node.path) && searchingAccounts\" class=\"label\"\r\n                        [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                        ...Loading <strong>{{node.name}}</strong> accounts\r\n                    </span>\r\n                </mat-checkbox>\r\n\r\n            </mat-tree-node>\r\n            <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding>\r\n\r\n                <button class=\"toggle-button\" mat-icon-button [attr.aria-label]=\"'Toggle ' + node.name\"\r\n                    (click)=\"toggleNode(node)\">\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                <mat-checkbox (change)=\"selectNode(node)\" disabled=\"true\" checked=\"true\"\r\n                    *ngIf=\"isActivePathOrParent(node.path)\">\r\n                    <span class=\"label\" [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                        {{node.name}}\r\n                    </span>\r\n                </mat-checkbox>\r\n\r\n                <span *ngIf=\"!isActivePathOrParent(node.path)\" class=\"label\"\r\n                    [class.selected]=\"isActivePathOrParent(node.path)\">\r\n                    {{node.name}} {{node.selected}}\r\n                </span>\r\n\r\n\r\n\r\n            </mat-tree-node>\r\n        </mat-tree>\r\n    </div>\r\n</mat-drawer-container>\r\n}\r\n<mat-divider></mat-divider>\r\n<mat-toolbar class=\"glass\" style=\"  background: rgba(255, 255, 255, 0.15)\">\r\n    <span class=\"spacer\"></span>\r\n    <button mat-button (click)=\"closeAndPassData(undefined)\">Close</button>\r\n    @if (userCanClearAccount&& !!_selectedAccount?._id) {\r\n    <button mat-raised-button color=\"primary\" [disabled]=\"!saveSelection\" (click)=\"saveAccount()\">Save</button>\r\n    }\r\n\r\n</mat-toolbar>", styles: ["h4{margin-top:0;margin-bottom:0;padding-left:16px}.label{font-size:14px}.selected{color:#243d91!important;font-weight:500}.accountSeperator{margin-left:2px;margin-right:2px}.loading{width:24px!important;height:24px!important;--mdc-circular-progress-size: 28px !important;--mdc-circular-progress-active-indicator-width: 24px !important;position:absolute;left:8px;bottom:8px}.info{font-size:.875rem;opacity:.8;padding-left:16px;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:4px;margin-left:4px}mat-tree{min-height:368px;min-width:fit-content;max-height:calc(98vh - 128px);overflow:auto;margin-top:8px}mat-tree-node{display:flex;align-items:flex-start;min-height:28px;padding-right:4px!important;box-sizing:border-box;width:100%;padding-top:2px!important;padding-bottom:2px!important}.mat-tree-node{display:flex;align-items:center;flex-wrap:nowrap;min-height:28px;padding:4px 0;box-sizing:border-box}.mat-tree-node button,.mat-tree-node mat-checkbox{flex-shrink:0;height:28px;max-width:236px}.mat-tree-node mat-checkbox{display:flex;align-items:center;height:28px;max-width:236px;min-height:fit-content}.mat-tree-node .label{flex:1;min-width:0;word-wrap:break-word;overflow-wrap:break-word;white-space:normal}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialogRef }] });
 
 ;
@@ -7211,6 +7236,11 @@ class MscoaChartComponent {
     onClick() {
         console.error("onContainerClick not implemented");
     }
+    test() {
+        this.viewData$.pipe(take(1)).subscribe((data) => {
+            console.error("Data---", data);
+        });
+    }
     inputWillBeRemovedIn(id) {
         return this.countdownSeconds[id]?.count;
     }
@@ -7281,11 +7311,11 @@ class MscoaChartComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MscoaChartComponent, deps: [{ token: MscoaComponentStore }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MscoaChartComponent, isStandalone: true, selector: "app-mscoa-chart", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formBuilderFunctions: "formBuilderFunctions", segmentValues: "segmentValues", readonly: "readonly", config: "config", formGroup: "formGroup" }, outputs: { onContainerClick: "onContainerClick", segmentValuesChanged: "segmentValuesChanged", interaction: "interaction" }, providers: [MscoaComponentStore,], ngImport: i0, template: "<section (click)=\"setAsTouched($event)\" class=\"p-4\" *ngIf=\"(viewData$ | async) as viewData\">\r\n\r\n  @if (viewData.loading) {\r\n  <div style=\"padding: 24px; display: flex; align-items: center; justify-content: center;\">\r\n    <mat-spinner></mat-spinner>\r\n  </div>\r\n  } @else {\r\n  @defer (on viewport) {\r\n  <ng-container *ngIf=\"viewData.accountTreeKeys\">\r\n    <div class=\"table-container\">\r\n      <table mat-table [dataSource]=\"viewData.tableData\" class=\"table\">\r\n        @for (col of viewData.cols; track col; let i = $index) {\r\n        <ng-container [matColumnDef]=\"col\">\r\n          <th [style.text-align]=\"i === 0 ? 'right' : 'center'\"\r\n            style=\"background: var(--mat-toolbar-container-background-color);\" mat-header-cell *matHeaderCellDef>\r\n            @if (viewData.hasMultiSelect || i === 0) {\r\n            {{col | titlecase | unCamelCase}}\r\n            } @else if (col === 'debit') {\r\n            Debit / Credit\r\n            }@else if (col === 'vatDebit') {\r\n              VAT Debit / Credit\r\n            }@else{\r\n              {{col | unCamelCase}} / credit\r\n            }\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let row\" [style.text-align]=\"i === 0 ? 'right' : 'center'\"\r\n            [ngClass]=\"{'segment-cell': i === 0}\"\r\n            [class.active]=\"editSelection?.segment === row['segment'] && activeColumn === col\">\r\n            @if (i === 0) {\r\n              <div style=\"    display: flex\r\n;\r\n    align-items: center;\r\n    justify-self: right;\">\r\n\r\n    @if(editorMode && row.innerInput?.id){\r\n      <button mat-icon-button\r\n      [matMenuTriggerData]=\"{innerInput:row.innerInput}\"\r\n       [matMenuTriggerFor]=\"inputMenu\" \r\n      [matTooltip]=\"'options for: ' + row.innerInput.label\">\r\n        <mat-icon>\r\n          more_vert\r\n        </mat-icon>\r\n      </button>\r\n    }\r\n                {{row['label']}}\r\n               \r\n              </div>\r\n           \r\n            } @else {\r\n              \r\n            @if(row.innerInput?.id &&formGroup && inputPortals[row.innerInput.id]){\r\n            <div>\r\n              <ng-template [cdkPortalOutlet]=\"inputPortals[row.innerInput?.id]\"></ng-template>\r\n          \r\n            </div>\r\n\r\n\r\n\r\n            }@else {\r\n            @if (row[col]) {\r\n\r\n            <button [disabled]=\"!!row['singleSelect'] === true && col === 'credit'\"\r\n              (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); \r\n              selectAccount(row, col);setAsTouched($event)\" color=\"primary\"\r\n              mat-button class=\"cell-button\">\r\n              <div class=\"content\">\r\n                \r\n                {{row[col]| unCamelCase}}\r\n              </div>\r\n            </button>\r\n            } @else {\r\n            <button [disabled]=\"selectionDisabled(row, col)\"\r\n              (click)=\"selectAccount(row, col); $event.stopPropagation();setAsTouched($event)\" mat-stroked-button class=\"cell-button\">\r\n              <div class=\"content\">\r\n                {{!!row['singleSelect'] === true && col === 'credit' ? 'auto selected ' : 'Select ' + row['segment'] + '\r\n                ' + col + ' account' | unCamelCase}}\r\n              </div>\r\n            </button>\r\n            }\r\n            }\r\n\r\n            }\r\n          </td>\r\n        </ng-container>\r\n        }\r\n        <tr mat-header-row *matHeaderRowDef=\"viewData.cols\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: viewData.cols;\"></tr>\r\n      </table>\r\n    </div>\r\n    <ng-container *ngIf=\"viewData.accountTreeKeys.length === 0\">\r\n      <section style=\"padding: 16px; text-align: center; display: flex;\">\r\n        <span><mat-icon>info</mat-icon></span>\r\n        <span>\r\n          No account segments are currently configured.\r\n          Please configure account segments to proceed.\r\n        </span>\r\n      </section>\r\n    </ng-container>\r\n  </ng-container>\r\n  } @placeholder {\r\n  <div class=\"table-container\">\r\n    <p class=\"text-gray-500\">Loading data...</p>\r\n  </div>\r\n  }\r\n\r\n  @loading (minimum 100ms) {\r\n  <div class=\"flex justify-center items-center h-64\">\r\n    <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n  </div>\r\n  } @error {\r\n  <div class=\"table-container\">\r\n    <p class=\"text-red-500\">Error loading data. Please try again.</p>\r\n  </div>\r\n  }\r\n  }\r\n\r\n</section>\r\n\r\n<mat-menu #inputMenu=\"matMenu\">\r\n  <ng-template matMenuContent let-innerInput=\"innerInput\">\r\n\r\n\r\n    <button [matTooltip]=\"'Edit Input: ' +innerInput.label \" (click)=\"editInput(innerInput)\"\r\n      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        {{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 {\r\n    <button [matTooltip]=\"'Delete input ' +  innerInput.label \" (click)=\"removeInput(innerInput)\"\r\n      mat-icon-button>\r\n\r\n      <mat-icon>\r\n        delete\r\n      </mat-icon>\r\n    </button>\r\n    }\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".cell-button{height:fit-content;min-height:38px;min-width:100%}.content{padding:8px}.info-box{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px;margin:8px auto auto}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$2.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$2.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: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PortalModule }], deferBlockDependencies: [() => [i2.MatButton, i2.MatIconButton, i6.MatIcon, i6$2.MatMenuTrigger, i5.MatTable, i5.MatHeaderCellDef, i5.MatHeaderRowDef, i5.MatColumnDef, i5.MatCellDef, i5.MatRowDef, i5.MatHeaderCell, i5.MatCell, i5.MatHeaderRow, i5.MatRow, i8.MatTooltip, i9$1.CdkPortalOutlet, i2$2.NgClass, i2$2.NgIf, i2$2.TitleCasePipe, Promise.resolve().then(function () { return daysAgo_pipe; }).then(m => m.ConvertCamelCasePipe)]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MscoaChartComponent, isStandalone: true, selector: "app-mscoa-chart", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formBuilderFunctions: "formBuilderFunctions", segmentValues: "segmentValues", readonly: "readonly", config: "config", formGroup: "formGroup" }, outputs: { onContainerClick: "onContainerClick", segmentValuesChanged: "segmentValuesChanged", interaction: "interaction" }, providers: [MscoaComponentStore,], ngImport: i0, template: "\r\n<section (click)=\"setAsTouched($event)\" class=\"p-4\" *ngIf=\"(viewData$ | async) as viewData\">\r\n\r\n  @if (viewData.loading) {\r\n  <div style=\"padding: 24px; display: flex; align-items: center; justify-content: center;\">\r\n    <mat-spinner></mat-spinner>\r\n  </div>\r\n  } @else {\r\n  @defer (on viewport) {\r\n  <ng-container *ngIf=\"viewData.accountTreeKeys\">\r\n    <div class=\"table-container\">\r\n      <table mat-table [dataSource]=\"viewData.tableData\" class=\"table\">\r\n        @for (col of viewData.cols; track col; let i = $index) {\r\n        <ng-container [matColumnDef]=\"col\">\r\n          <th [style.text-align]=\"i === 0 ? 'right' : 'center'\"\r\n            style=\"background: var(--mat-sys-surface-container);\" mat-header-cell *matHeaderCellDef>\r\n            @if (viewData.hasMultiSelect || i === 0) {\r\n            {{col | titlecase | unCamelCase}}\r\n            } @else if (col === 'debit') {\r\n            Debit / Credit\r\n            }@else if (col === 'vatDebit') {\r\n              VAT Debit / Credit\r\n            }@else{\r\n              {{col | unCamelCase}} / credit\r\n            }\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let row\" [style.text-align]=\"i === 0 ? 'right' : 'center'\"\r\n            [ngClass]=\"{'segment-cell': i === 0}\"\r\n            [class.active]=\"editSelection?.segment === row['segment'] && activeColumn === col\">\r\n            @if (i === 0) {\r\n              <div style=\"    display: flex\r\n;\r\n    align-items: center;\r\n    justify-self: right;\">\r\n\r\n    @if(editorMode && row.innerInput?.id){\r\n      <button mat-icon-button\r\n      [matMenuTriggerData]=\"{innerInput:row.innerInput}\"\r\n       [matMenuTriggerFor]=\"inputMenu\" \r\n      [matTooltip]=\"'options for: ' + row.innerInput.label\">\r\n        <mat-icon>\r\n          more_vert\r\n        </mat-icon>\r\n      </button>\r\n    }\r\n                {{row['label']}}\r\n               \r\n              </div>\r\n           \r\n            } @else {\r\n              \r\n            @if(row.innerInput?.id &&formGroup && inputPortals[row.innerInput.id]){\r\n            <div>\r\n              <ng-template [cdkPortalOutlet]=\"inputPortals[row.innerInput?.id]\"></ng-template>\r\n          \r\n            </div>\r\n\r\n\r\n\r\n            }@else {\r\n            @if (row[col]) {\r\n\r\n            <button [disabled]=\"!!row['singleSelect'] === true && col === 'credit'\"\r\n              (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); \r\n              selectAccount(row, col);setAsTouched($event)\" color=\"primary\"\r\n              mat-button class=\"cell-button\">\r\n              <div class=\"content\">\r\n                \r\n                {{row[col]| unCamelCase}}\r\n              </div>\r\n            </button>\r\n            } @else {\r\n            <button [disabled]=\"selectionDisabled(row, col)\"\r\n              (click)=\"selectAccount(row, col); $event.stopPropagation();setAsTouched($event)\" mat-button class=\"cell-button\">\r\n              <div class=\"content\">\r\n                {{!!row['singleSelect'] === true && col === 'credit' ? 'auto selected ' : 'Select ' + row['segment'] + '\r\n                ' + col + ' account' | unCamelCase}}\r\n              </div>\r\n            </button>\r\n            }\r\n            }\r\n\r\n            }\r\n          </td>\r\n        </ng-container>\r\n        }\r\n        <tr mat-header-row *matHeaderRowDef=\"viewData.cols\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: viewData.cols;\"></tr>\r\n      </table>\r\n    </div>\r\n    <ng-container *ngIf=\"viewData.accountTreeKeys.length === 0\">\r\n      <section style=\"padding: 16px; text-align: center; display: flex;\">\r\n        <span><mat-icon>info</mat-icon></span>\r\n        <span>\r\n          No account segments are currently configured.\r\n          Please configure account segments to proceed.\r\n        </span>\r\n      </section>\r\n    </ng-container>\r\n  </ng-container>\r\n  } @placeholder {\r\n  <div class=\"table-container\">\r\n    <p class=\"text-gray-500\">Loading data...</p>\r\n  </div>\r\n  }\r\n\r\n  @loading (minimum 100ms) {\r\n  <div class=\"flex justify-center items-center h-64\">\r\n    <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n  </div>\r\n  } @error {\r\n  <div class=\"table-container\">\r\n    <p class=\"text-red-500\">Error loading data. Please try again.</p>\r\n  </div>\r\n  }\r\n  }\r\n\r\n</section>\r\n\r\n<mat-menu #inputMenu=\"matMenu\">\r\n  <ng-template matMenuContent let-innerInput=\"innerInput\">\r\n\r\n\r\n    <button [matTooltip]=\"'Edit Input: ' +innerInput.label \" (click)=\"editInput(innerInput)\"\r\n      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        {{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 {\r\n    <button [matTooltip]=\"'Delete input ' +  innerInput.label \" (click)=\"removeInput(innerInput)\"\r\n      mat-icon-button>\r\n\r\n      <mat-icon>\r\n        delete\r\n      </mat-icon>\r\n    </button>\r\n    }\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".cell-button{height:fit-content;min-height:38px;min-width:100%}.content{padding:8px}.info-box{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px;margin:8px auto auto}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$2.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$2.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: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: PortalModule }], deferBlockDependencies: [() => [i2.MatButton, i2.MatIconButton, i6.MatIcon, i6$2.MatMenuTrigger, i5.MatTable, i5.MatHeaderCellDef, i5.MatHeaderRowDef, i5.MatColumnDef, i5.MatCellDef, i5.MatRowDef, i5.MatHeaderCell, i5.MatCell, i5.MatHeaderRow, i5.MatRow, i8.MatTooltip, i9$1.CdkPortalOutlet, i2$2.NgClass, i2$2.NgIf, i2$2.TitleCasePipe, Promise.resolve().then(function () { return daysAgo_pipe; }).then(m => m.ConvertCamelCasePipe)]] }); }
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: MscoaChartComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return daysAgo_pipe; }).then(m => m.ConvertCamelCasePipe)], resolveMetadata: ConvertCamelCasePipe => ({ decorators: [{
                 type: Component,
-                args: [{ selector: 'app-mscoa-chart', standalone: true, imports: [MatModulesModule, CommonModule, PortalModule, ConvertCamelCasePipe], providers: [MscoaComponentStore,], template: "<section (click)=\"setAsTouched($event)\" class=\"p-4\" *ngIf=\"(viewData$ | async) as viewData\">\r\n\r\n  @if (viewData.loading) {\r\n  <div style=\"padding: 24px; display: flex; align-items: center; justify-content: center;\">\r\n    <mat-spinner></mat-spinner>\r\n  </div>\r\n  } @else {\r\n  @defer (on viewport) {\r\n  <ng-container *ngIf=\"viewData.accountTreeKeys\">\r\n    <div class=\"table-container\">\r\n      <table mat-table [dataSource]=\"viewData.tableData\" class=\"table\">\r\n        @for (col of viewData.cols; track col; let i = $index) {\r\n        <ng-container [matColumnDef]=\"col\">\r\n          <th [style.text-align]=\"i === 0 ? 'right' : 'center'\"\r\n            style=\"background: var(--mat-toolbar-container-background-color);\" mat-header-cell *matHeaderCellDef>\r\n            @if (viewData.hasMultiSelect || i === 0) {\r\n            {{col | titlecase | unCamelCase}}\r\n            } @else if (col === 'debit') {\r\n            Debit / Credit\r\n            }@else if (col === 'vatDebit') {\r\n              VAT Debit / Credit\r\n            }@else{\r\n              {{col | unCamelCase}} / credit\r\n            }\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let row\" [style.text-align]=\"i === 0 ? 'right' : 'center'\"\r\n            [ngClass]=\"{'segment-cell': i === 0}\"\r\n            [class.active]=\"editSelection?.segment === row['segment'] && activeColumn === col\">\r\n            @if (i === 0) {\r\n              <div style=\"    display: flex\r\n;\r\n    align-items: center;\r\n    justify-self: right;\">\r\n\r\n    @if(editorMode && row.innerInput?.id){\r\n      <button mat-icon-button\r\n      [matMenuTriggerData]=\"{innerInput:row.innerInput}\"\r\n       [matMenuTriggerFor]=\"inputMenu\" \r\n      [matTooltip]=\"'options for: ' + row.innerInput.label\">\r\n        <mat-icon>\r\n          more_vert\r\n        </mat-icon>\r\n      </button>\r\n    }\r\n                {{row['label']}}\r\n               \r\n              </div>\r\n           \r\n            } @else {\r\n              \r\n            @if(row.innerInput?.id &&formGroup && inputPortals[row.innerInput.id]){\r\n            <div>\r\n              <ng-template [cdkPortalOutlet]=\"inputPortals[row.innerInput?.id]\"></ng-template>\r\n          \r\n            </div>\r\n\r\n\r\n\r\n            }@else {\r\n            @if (row[col]) {\r\n\r\n            <button [disabled]=\"!!row['singleSelect'] === true && col === 'credit'\"\r\n              (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); \r\n              selectAccount(row, col);setAsTouched($event)\" color=\"primary\"\r\n              mat-button class=\"cell-button\">\r\n              <div class=\"content\">\r\n                \r\n                {{row[col]| unCamelCase}}\r\n              </div>\r\n            </button>\r\n            } @else {\r\n            <button [disabled]=\"selectionDisabled(row, col)\"\r\n              (click)=\"selectAccount(row, col); $event.stopPropagation();setAsTouched($event)\" mat-stroked-button class=\"cell-button\">\r\n              <div class=\"content\">\r\n                {{!!row['singleSelect'] === true && col === 'credit' ? 'auto selected ' : 'Select ' + row['segment'] + '\r\n                ' + col + ' account' | unCamelCase}}\r\n              </div>\r\n            </button>\r\n            }\r\n            }\r\n\r\n            }\r\n          </td>\r\n        </ng-container>\r\n        }\r\n        <tr mat-header-row *matHeaderRowDef=\"viewData.cols\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: viewData.cols;\"></tr>\r\n      </table>\r\n    </div>\r\n    <ng-container *ngIf=\"viewData.accountTreeKeys.length === 0\">\r\n      <section style=\"padding: 16px; text-align: center; display: flex;\">\r\n        <span><mat-icon>info</mat-icon></span>\r\n        <span>\r\n          No account segments are currently configured.\r\n          Please configure account segments to proceed.\r\n        </span>\r\n      </section>\r\n    </ng-container>\r\n  </ng-container>\r\n  } @placeholder {\r\n  <div class=\"table-container\">\r\n    <p class=\"text-gray-500\">Loading data...</p>\r\n  </div>\r\n  }\r\n\r\n  @loading (minimum 100ms) {\r\n  <div class=\"flex justify-center items-center h-64\">\r\n    <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n  </div>\r\n  } @error {\r\n  <div class=\"table-container\">\r\n    <p class=\"text-red-500\">Error loading data. Please try again.</p>\r\n  </div>\r\n  }\r\n  }\r\n\r\n</section>\r\n\r\n<mat-menu #inputMenu=\"matMenu\">\r\n  <ng-template matMenuContent let-innerInput=\"innerInput\">\r\n\r\n\r\n    <button [matTooltip]=\"'Edit Input: ' +innerInput.label \" (click)=\"editInput(innerInput)\"\r\n      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        {{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 {\r\n    <button [matTooltip]=\"'Delete input ' +  innerInput.label \" (click)=\"removeInput(innerInput)\"\r\n      mat-icon-button>\r\n\r\n      <mat-icon>\r\n        delete\r\n      </mat-icon>\r\n    </button>\r\n    }\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".cell-button{height:fit-content;min-height:38px;min-width:100%}.content{padding:8px}.info-box{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px;margin:8px auto auto}\n"] }]
+                args: [{ selector: 'app-mscoa-chart', standalone: true, imports: [MatModulesModule, CommonModule, PortalModule, ConvertCamelCasePipe], providers: [MscoaComponentStore,], template: "\r\n<section (click)=\"setAsTouched($event)\" class=\"p-4\" *ngIf=\"(viewData$ | async) as viewData\">\r\n\r\n  @if (viewData.loading) {\r\n  <div style=\"padding: 24px; display: flex; align-items: center; justify-content: center;\">\r\n    <mat-spinner></mat-spinner>\r\n  </div>\r\n  } @else {\r\n  @defer (on viewport) {\r\n  <ng-container *ngIf=\"viewData.accountTreeKeys\">\r\n    <div class=\"table-container\">\r\n      <table mat-table [dataSource]=\"viewData.tableData\" class=\"table\">\r\n        @for (col of viewData.cols; track col; let i = $index) {\r\n        <ng-container [matColumnDef]=\"col\">\r\n          <th [style.text-align]=\"i === 0 ? 'right' : 'center'\"\r\n            style=\"background: var(--mat-sys-surface-container);\" mat-header-cell *matHeaderCellDef>\r\n            @if (viewData.hasMultiSelect || i === 0) {\r\n            {{col | titlecase | unCamelCase}}\r\n            } @else if (col === 'debit') {\r\n            Debit / Credit\r\n            }@else if (col === 'vatDebit') {\r\n              VAT Debit / Credit\r\n            }@else{\r\n              {{col | unCamelCase}} / credit\r\n            }\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let row\" [style.text-align]=\"i === 0 ? 'right' : 'center'\"\r\n            [ngClass]=\"{'segment-cell': i === 0}\"\r\n            [class.active]=\"editSelection?.segment === row['segment'] && activeColumn === col\">\r\n            @if (i === 0) {\r\n              <div style=\"    display: flex\r\n;\r\n    align-items: center;\r\n    justify-self: right;\">\r\n\r\n    @if(editorMode && row.innerInput?.id){\r\n      <button mat-icon-button\r\n      [matMenuTriggerData]=\"{innerInput:row.innerInput}\"\r\n       [matMenuTriggerFor]=\"inputMenu\" \r\n      [matTooltip]=\"'options for: ' + row.innerInput.label\">\r\n        <mat-icon>\r\n          more_vert\r\n        </mat-icon>\r\n      </button>\r\n    }\r\n                {{row['label']}}\r\n               \r\n              </div>\r\n           \r\n            } @else {\r\n              \r\n            @if(row.innerInput?.id &&formGroup && inputPortals[row.innerInput.id]){\r\n            <div>\r\n              <ng-template [cdkPortalOutlet]=\"inputPortals[row.innerInput?.id]\"></ng-template>\r\n          \r\n            </div>\r\n\r\n\r\n\r\n            }@else {\r\n            @if (row[col]) {\r\n\r\n            <button [disabled]=\"!!row['singleSelect'] === true && col === 'credit'\"\r\n              (mousedown)=\"$event.preventDefault(); $event.stopPropagation(); \r\n              selectAccount(row, col);setAsTouched($event)\" color=\"primary\"\r\n              mat-button class=\"cell-button\">\r\n              <div class=\"content\">\r\n                \r\n                {{row[col]| unCamelCase}}\r\n              </div>\r\n            </button>\r\n            } @else {\r\n            <button [disabled]=\"selectionDisabled(row, col)\"\r\n              (click)=\"selectAccount(row, col); $event.stopPropagation();setAsTouched($event)\" mat-button class=\"cell-button\">\r\n              <div class=\"content\">\r\n                {{!!row['singleSelect'] === true && col === 'credit' ? 'auto selected ' : 'Select ' + row['segment'] + '\r\n                ' + col + ' account' | unCamelCase}}\r\n              </div>\r\n            </button>\r\n            }\r\n            }\r\n\r\n            }\r\n          </td>\r\n        </ng-container>\r\n        }\r\n        <tr mat-header-row *matHeaderRowDef=\"viewData.cols\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: viewData.cols;\"></tr>\r\n      </table>\r\n    </div>\r\n    <ng-container *ngIf=\"viewData.accountTreeKeys.length === 0\">\r\n      <section style=\"padding: 16px; text-align: center; display: flex;\">\r\n        <span><mat-icon>info</mat-icon></span>\r\n        <span>\r\n          No account segments are currently configured.\r\n          Please configure account segments to proceed.\r\n        </span>\r\n      </section>\r\n    </ng-container>\r\n  </ng-container>\r\n  } @placeholder {\r\n  <div class=\"table-container\">\r\n    <p class=\"text-gray-500\">Loading data...</p>\r\n  </div>\r\n  }\r\n\r\n  @loading (minimum 100ms) {\r\n  <div class=\"flex justify-center items-center h-64\">\r\n    <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n  </div>\r\n  } @error {\r\n  <div class=\"table-container\">\r\n    <p class=\"text-red-500\">Error loading data. Please try again.</p>\r\n  </div>\r\n  }\r\n  }\r\n\r\n</section>\r\n\r\n<mat-menu #inputMenu=\"matMenu\">\r\n  <ng-template matMenuContent let-innerInput=\"innerInput\">\r\n\r\n\r\n    <button [matTooltip]=\"'Edit Input: ' +innerInput.label \" (click)=\"editInput(innerInput)\"\r\n      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        {{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 {\r\n    <button [matTooltip]=\"'Delete input ' +  innerInput.label \" (click)=\"removeInput(innerInput)\"\r\n      mat-icon-button>\r\n\r\n      <mat-icon>\r\n        delete\r\n      </mat-icon>\r\n    </button>\r\n    }\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".cell-button{height:fit-content;min-height:38px;min-width:100%}.content{padding:8px}.info-box{display:flex;align-items:center;gap:8px;padding:12px;background:azure;border-radius:4px;margin-bottom:16px}.info-icon{min-width:38px;margin:8px auto auto}\n"] }]
             }], ctorParameters: () => [{ type: MscoaComponentStore }, { type: i0.Injector }], propDecorators: { onContainerClick: [{
                     type: Output
                 }], inputConfig: [{
@@ -7608,14 +7638,14 @@ class MscoaReactiveFormFieldComponent extends BaseCustomInput {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MscoaReactiveFormFieldComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MscoaReactiveFormFieldComponent, isStandalone: true, selector: "lib-mscoa-reactive-form-field", inputs: { formBuilderFunctions: "formBuilderFunctions", editorMode: "editorMode", inputConfig: "inputConfig" }, host: { properties: { "lib-mscoa-reactive-form-field.floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: MscoaReactiveFormFieldComponent }], usesInheritance: true, ngImport: i0, template: "\r\n<div (click)=\"onContainerClick($event)\">\r\n    <app-mscoa-chart \r\n        (onContainerClick)=\"onContainerClick($event)\"\r\n        (segmentValuesChanged)=\"segmentValuesChanged($event)\" \r\n         [config]=\"mscoaInputConfig$|async\"\r\n         [inputConfig]=\"_inputConfig \"\r\n         [readonly]=\"readonly\"\r\n         [editorMode]=\"editorMode\"\r\n         [formGroup]=\"parentFormGroup\"\r\n         [formBuilderFunctions]=\"formBuilderFunctions\"\r\n        [segmentValues]=\"value\"></app-mscoa-chart>\r\n    \r\n\r\n</div>\r\n\r\n", styles: [""], dependencies: [{ kind: "component", type: MscoaChartComponent, selector: "app-mscoa-chart", inputs: ["inputConfig", "editorMode", "formBuilderFunctions", "segmentValues", "readonly", "config", "formGroup"], outputs: ["onContainerClick", "segmentValuesChanged", "interaction"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: MscoaReactiveFormFieldComponent, isStandalone: true, selector: "lib-mscoa-reactive-form-field", inputs: { formBuilderFunctions: "formBuilderFunctions", editorMode: "editorMode", inputConfig: "inputConfig" }, host: { properties: { "lib-mscoa-reactive-form-field.floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: MscoaReactiveFormFieldComponent }], usesInheritance: true, ngImport: i0, template: "\r\n<div (click)=\"onContainerClick($event)\">\r\n\r\n    <app-mscoa-chart \r\n        (onContainerClick)=\"onContainerClick($event)\"\r\n        (segmentValuesChanged)=\"segmentValuesChanged($event)\" \r\n         [config]=\"mscoaInputConfig$|async\"\r\n         [inputConfig]=\"_inputConfig \"\r\n         [readonly]=\"readonly\"\r\n         [editorMode]=\"editorMode\"\r\n         [formGroup]=\"parentFormGroup\"\r\n         [formBuilderFunctions]=\"formBuilderFunctions\"\r\n        [segmentValues]=\"value\"></app-mscoa-chart>\r\n    \r\n\r\n</div>\r\n\r\n", styles: [""], dependencies: [{ kind: "component", type: MscoaChartComponent, selector: "app-mscoa-chart", inputs: ["inputConfig", "editorMode", "formBuilderFunctions", "segmentValues", "readonly", "config", "formGroup"], outputs: ["onContainerClick", "segmentValuesChanged", "interaction"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MscoaReactiveFormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-mscoa-reactive-form-field', standalone: true, imports: [MscoaChartComponent, CommonModule], host: {
                         '[lib-mscoa-reactive-form-field.floating]': 'shouldLabelFloat',
                         '[id]': 'id',
-                    }, providers: [{ provide: MatFormFieldControl, useExisting: MscoaReactiveFormFieldComponent }], template: "\r\n<div (click)=\"onContainerClick($event)\">\r\n    <app-mscoa-chart \r\n        (onContainerClick)=\"onContainerClick($event)\"\r\n        (segmentValuesChanged)=\"segmentValuesChanged($event)\" \r\n         [config]=\"mscoaInputConfig$|async\"\r\n         [inputConfig]=\"_inputConfig \"\r\n         [readonly]=\"readonly\"\r\n         [editorMode]=\"editorMode\"\r\n         [formGroup]=\"parentFormGroup\"\r\n         [formBuilderFunctions]=\"formBuilderFunctions\"\r\n        [segmentValues]=\"value\"></app-mscoa-chart>\r\n    \r\n\r\n</div>\r\n\r\n" }]
+                    }, providers: [{ provide: MatFormFieldControl, useExisting: MscoaReactiveFormFieldComponent }], template: "\r\n<div (click)=\"onContainerClick($event)\">\r\n\r\n    <app-mscoa-chart \r\n        (onContainerClick)=\"onContainerClick($event)\"\r\n        (segmentValuesChanged)=\"segmentValuesChanged($event)\" \r\n         [config]=\"mscoaInputConfig$|async\"\r\n         [inputConfig]=\"_inputConfig \"\r\n         [readonly]=\"readonly\"\r\n         [editorMode]=\"editorMode\"\r\n         [formGroup]=\"parentFormGroup\"\r\n         [formBuilderFunctions]=\"formBuilderFunctions\"\r\n        [segmentValues]=\"value\"></app-mscoa-chart>\r\n    \r\n\r\n</div>\r\n\r\n" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -7679,7 +7709,7 @@ class MscoaFormInputComponent {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MscoaFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MscoaFormInputComponent, isStandalone: true, selector: "lib-mscoa-form-input", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formGroup: "formGroup", formBuilderFunctions: "formBuilderFunctions" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n    <mat-form-field \r\n\r\n    [appearance]=\"this.inputConfig.appearance ||'fill' \"\r\n    [floatLabel]=\"'always'\"\r\n    subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as inputConfig\">\r\n        <mat-label>\r\n            {{this.inputConfig.label }}  \r\n            <lib-t-form-input-status \r\n            [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n        </mat-label>\r\n    <mat-card      style=\"overflow:auto\">\r\n           <lib-mscoa-reactive-form-field \r\n            [inputConfig]=\"this.inputConfig\"\r\n            [formControlName]=\"this.inputConfig.id\"\r\n            [required]=\"this.inputConfig.required\"\r\n            [formGroup]=\"formGroup\"\r\n            [editorMode]=\"editorMode\"\r\n            [formBuilderFunctions]=\"formBuilderFunctions\"\r\n           ></lib-mscoa-reactive-form-field>\r\n      \r\n    </mat-card>\r\n   \r\n\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        @if (!!errorMessage) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\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    </mat-form-field>\r\n\r\n\r\n  \r\n   \r\n    \r\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i6.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: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "component", type: MscoaReactiveFormFieldComponent, selector: "lib-mscoa-reactive-form-field", inputs: ["formBuilderFunctions", "editorMode", "inputConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MscoaFormInputComponent, isStandalone: true, selector: "lib-mscoa-form-input", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formGroup: "formGroup", formBuilderFunctions: "formBuilderFunctions" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n    <mat-form-field \r\n\r\n    [appearance]=\"this.inputConfig.appearance ||'fill' \"\r\n    [floatLabel]=\"'always'\"\r\n    subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as inputConfig\">\r\n        <mat-label>\r\n            {{this.inputConfig.label }}  \r\n            <lib-t-form-input-status \r\n            [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n        </mat-label>\r\n    <mat-card      style=\"overflow:auto\">\r\n \r\n           <lib-mscoa-reactive-form-field \r\n            [inputConfig]=\"this.inputConfig\"\r\n            [formControlName]=\"this.inputConfig.id\"\r\n            [required]=\"this.inputConfig.required\"\r\n            [formGroup]=\"formGroup\"\r\n            [editorMode]=\"editorMode\"\r\n            [formBuilderFunctions]=\"formBuilderFunctions\"\r\n           ></lib-mscoa-reactive-form-field>\r\n      \r\n    </mat-card>\r\n   \r\n\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        @if (!!errorMessage) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\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    </mat-form-field>\r\n\r\n\r\n  \r\n   \r\n    \r\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i6.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: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "component", type: MscoaReactiveFormFieldComponent, selector: "lib-mscoa-reactive-form-field", inputs: ["formBuilderFunctions", "editorMode", "inputConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MscoaFormInputComponent, decorators: [{
             type: Component,
@@ -7689,7 +7719,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         ReactiveFormsModule,
                         TFormInputStatusComponent,
                         MscoaReactiveFormFieldComponent
-                    ], template: "<form [formGroup]=\"formGroup\">\r\n    <mat-form-field \r\n\r\n    [appearance]=\"this.inputConfig.appearance ||'fill' \"\r\n    [floatLabel]=\"'always'\"\r\n    subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as inputConfig\">\r\n        <mat-label>\r\n            {{this.inputConfig.label }}  \r\n            <lib-t-form-input-status \r\n            [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n        </mat-label>\r\n    <mat-card      style=\"overflow:auto\">\r\n           <lib-mscoa-reactive-form-field \r\n            [inputConfig]=\"this.inputConfig\"\r\n            [formControlName]=\"this.inputConfig.id\"\r\n            [required]=\"this.inputConfig.required\"\r\n            [formGroup]=\"formGroup\"\r\n            [editorMode]=\"editorMode\"\r\n            [formBuilderFunctions]=\"formBuilderFunctions\"\r\n           ></lib-mscoa-reactive-form-field>\r\n      \r\n    </mat-card>\r\n   \r\n\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        @if (!!errorMessage) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\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    </mat-form-field>\r\n\r\n\r\n  \r\n   \r\n    \r\n", styles: ["mat-form-field{width:100%}\n"] }]
+                    ], template: "<form [formGroup]=\"formGroup\">\r\n    <mat-form-field \r\n\r\n    [appearance]=\"this.inputConfig.appearance ||'fill' \"\r\n    [floatLabel]=\"'always'\"\r\n    subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as inputConfig\">\r\n        <mat-label>\r\n            {{this.inputConfig.label }}  \r\n            <lib-t-form-input-status \r\n            [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n        </mat-label>\r\n    <mat-card      style=\"overflow:auto\">\r\n \r\n           <lib-mscoa-reactive-form-field \r\n            [inputConfig]=\"this.inputConfig\"\r\n            [formControlName]=\"this.inputConfig.id\"\r\n            [required]=\"this.inputConfig.required\"\r\n            [formGroup]=\"formGroup\"\r\n            [editorMode]=\"editorMode\"\r\n            [formBuilderFunctions]=\"formBuilderFunctions\"\r\n           ></lib-mscoa-reactive-form-field>\r\n      \r\n    </mat-card>\r\n   \r\n\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        @if (!!errorMessage) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\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    </mat-form-field>\r\n\r\n\r\n  \r\n   \r\n    \r\n", styles: ["mat-form-field{width:100%}\n"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], editorMode: [{
@@ -8336,14 +8366,14 @@ class TextAreaReactiveInputComponent extends BaseCustomInput {
         this.valueSubject.next($event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextAreaReactiveInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TextAreaReactiveInputComponent, isStandalone: true, selector: "lib-text-area-reactive-input", inputs: { auto: "auto", inputConfig: "inputConfig" }, host: { properties: { "lib-text-area-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: TextAreaReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "\r\n<textarea \r\n    [readonly]=\"this.inputConfig?.readonly\"\r\n      [required]=\"inputConfig?.required\" \r\n      [attr.maxlength]=\"inputConfig?.maxLength\" [attr.minlength]=\"inputConfig?.minLength\"\r\n      [rows]=\"inputConfig?.rows\" [spellcheck]=\"inputConfig?.spellcheck\"\r\n      [autocapitalize]=\"inputConfig?.autocapitalize\" [autocomplete]=\"inputConfig?.autocomplete\"\r\n      (input)=\"onInputChange($event)\" \r\n      [placeholder]=\"inputConfig?.placeholder||''\" [wrap]=\"inputConfig?.wrap\" matInput></textarea>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TextAreaReactiveInputComponent, isStandalone: true, selector: "lib-text-area-reactive-input", inputs: { auto: "auto", inputConfig: "inputConfig" }, host: { properties: { "lib-text-area-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: TextAreaReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "\r\n<textarea \r\n    [readonly]=\"this.inputConfig?.readonly\"\r\n      [required]=\"inputConfig?.required\" \r\n      [attr.maxlength]=\"inputConfig?.maxLength\" [attr.minlength]=\"inputConfig?.minLength\"\r\n      [rows]=\"inputConfig?.rows\" [spellcheck]=\"inputConfig?.spellcheck\"\r\n      [value]=\"value\"\r\n      [autocapitalize]=\"inputConfig?.autocapitalize\" [autocomplete]=\"inputConfig?.autocomplete\"\r\n      (input)=\"onInputChange($event)\" \r\n      [placeholder]=\"inputConfig?.placeholder||''\" [wrap]=\"inputConfig?.wrap\" matInput></textarea>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextAreaReactiveInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-text-area-reactive-input', imports: [CommonModule, MatModulesModule, ReactiveFormsModule], host: {
                         '[lib-text-area-reactive-input]': 'shouldLabelFloat',
                         '[id]': 'id',
-                    }, providers: [{ provide: MatFormFieldControl, useExisting: TextAreaReactiveInputComponent }], template: "\r\n<textarea \r\n    [readonly]=\"this.inputConfig?.readonly\"\r\n      [required]=\"inputConfig?.required\" \r\n      [attr.maxlength]=\"inputConfig?.maxLength\" [attr.minlength]=\"inputConfig?.minLength\"\r\n      [rows]=\"inputConfig?.rows\" [spellcheck]=\"inputConfig?.spellcheck\"\r\n      [autocapitalize]=\"inputConfig?.autocapitalize\" [autocomplete]=\"inputConfig?.autocomplete\"\r\n      (input)=\"onInputChange($event)\" \r\n      [placeholder]=\"inputConfig?.placeholder||''\" [wrap]=\"inputConfig?.wrap\" matInput></textarea>\r\n" }]
+                    }, providers: [{ provide: MatFormFieldControl, useExisting: TextAreaReactiveInputComponent }], template: "\r\n<textarea \r\n    [readonly]=\"this.inputConfig?.readonly\"\r\n      [required]=\"inputConfig?.required\" \r\n      [attr.maxlength]=\"inputConfig?.maxLength\" [attr.minlength]=\"inputConfig?.minLength\"\r\n      [rows]=\"inputConfig?.rows\" [spellcheck]=\"inputConfig?.spellcheck\"\r\n      [value]=\"value\"\r\n      [autocapitalize]=\"inputConfig?.autocapitalize\" [autocomplete]=\"inputConfig?.autocomplete\"\r\n      (input)=\"onInputChange($event)\" \r\n      [placeholder]=\"inputConfig?.placeholder||''\" [wrap]=\"inputConfig?.wrap\" matInput></textarea>\r\n" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -8359,11 +8389,11 @@ class TextareaInputElementComponent {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextareaInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: TextareaInputElementComponent, isStandalone: true, selector: "lib-textarea-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n  <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" *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    <lib-text-area-reactive-input [inputConfig]=\"this.inputConfig\"\r\n    [required]=\"this.inputConfig.required\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n\r\n >\r\n\r\n    </lib-text-area-reactive-input>\r\n\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        @if (!!errorMessage) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\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    </mat-form-field>\r\n</form>\r\n", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i6.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: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "component", type: TextAreaReactiveInputComponent, selector: "lib-text-area-reactive-input", inputs: ["auto", "inputConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: TextareaInputElementComponent, isStandalone: true, selector: "lib-textarea-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n  <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" *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    <lib-text-area-reactive-input \r\n    [inputConfig]=\"this.inputConfig\"\r\n    [required]=\"this.inputConfig.required\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n\r\n >\r\n\r\n    </lib-text-area-reactive-input>\r\n\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        @if (!!errorMessage) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\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    </mat-form-field>\r\n</form>\r\n", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i6.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: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "component", type: TextAreaReactiveInputComponent, selector: "lib-text-area-reactive-input", inputs: ["auto", "inputConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TextareaInputElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-textarea-input-element', standalone: true, imports: [ReactiveFormsModule, CommonModule, MatModulesModule, TFormInputStatusComponent, TextAreaReactiveInputComponent], template: "<form [formGroup]=\"formGroup\">\r\n  <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" *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    <lib-text-area-reactive-input [inputConfig]=\"this.inputConfig\"\r\n    [required]=\"this.inputConfig.required\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n\r\n >\r\n\r\n    </lib-text-area-reactive-input>\r\n\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        @if (!!errorMessage) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\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    </mat-form-field>\r\n</form>\r\n", styles: ["mat-form-field{width:100%!important}\n"] }]
+            args: [{ selector: 'lib-textarea-input-element', standalone: true, imports: [ReactiveFormsModule, CommonModule, MatModulesModule, TFormInputStatusComponent, TextAreaReactiveInputComponent], template: "<form [formGroup]=\"formGroup\">\r\n  <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" *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    <lib-text-area-reactive-input \r\n    [inputConfig]=\"this.inputConfig\"\r\n    [required]=\"this.inputConfig.required\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n\r\n >\r\n\r\n    </lib-text-area-reactive-input>\r\n\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        @if (!!errorMessage) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\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    </mat-form-field>\r\n</form>\r\n", styles: ["mat-form-field{width:100%!important}\n"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
@@ -9324,11 +9354,11 @@ class MultipleInputTableViewComponent {
         return !!this.inputConfig?.formIsOpen && this.formGroup?.controls[`${this.inputConfig?.id}.id`]?.value === row[`${this.inputConfig?.id}.id`];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MultipleInputTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", 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 (configureCols.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: 13px;\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 (configureCols.displayedColumnsInOrder||[]); track col) {\r\n    <ng-container [matColumnDef]=\"col\">\r\n      <th mat-header-cell mat-sort-header *matHeaderCellDef>\r\n        <span style=\"text-align: start; line-height: normal; font-size: 13px\">\r\n          {{ configureCols.columnsConfig?.[col]?.[\"label\"] }}\r\n        </span>\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,  configureCols.columnsConfig?.[col])\r\n        \" mat-cell *matCellDef=\"let row\">\r\n        <div *ngIf=\" configureCols.columnsConfig?.[col]?.['type'] === 'removal'\" class=\"cellClass\">\r\n          <span *ngIf=\"\r\n          !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n          inputConfig?.multipleInputInEditId !== row['id']\">\r\n            <strong>\r\n\r\n              {{getCalculationFunction(row)}}\r\n            </strong>\r\n\r\n          </span>\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'\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=\"configureCols.columnsConfig && configureCols.columnsConfig?.[col]?.type !== 'removal'\"\r\n          class=\"cellClass\">\r\n          <span *ngIf=\"isNumber(row[col])\">\r\n            {{ row[col] | number }}\r\n          </span>\r\n          <span *ngIf=\"!isNumber(row[col])\"> {{ row[col] }}\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=\"configureCols.displayedColumnsInOrder \"></tr>\r\n    <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n      *matRowDef=\"let row; columns: configureCols.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: 13px;\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: 13px;\r\n      \">\r\n   \r\n    <div style=\"margin-top: 8px; text-align: center;\">\r\n      <mat-icon style=\"font-size: 20px; 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: 13px;\">\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 #rowOptions=\"matMenu\">\r\n  <ng-template matMenuContent let-row=\"row\">\r\n\r\n    <button mat-menu-item (click)=\"editItem(row)\">\r\n      <mat-icon>\r\n        {{inputConfig?.readonly ? 'visibility' : 'edit'}}\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          {{inputConfig?.readonly ? 'View details' : '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    @if(!inputConfig?.readonly){\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-toolbar-container-background-color, var(--mat-app-surface));font-weight:500}.option-text{display:flex;flex-direction:column;margin-left:8px}.option-main-text{font-size:14px;font-weight:500;margin-bottom:2px;line-height:normal}.option-sub-text{line-height:normal;font-size:12px;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:11px;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: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$2.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$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: i4$2.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$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTableModule }], deferBlockDependencies: [() => [i2.MatIconButton, i4$3.MatChip, i6.MatIcon, i6$2.MatMenuTrigger, i4$1.MatSort, i4$1.MatSortHeader, i5.MatTable, i5.MatHeaderCellDef, i5.MatHeaderRowDef, i5.MatColumnDef, i5.MatCellDef, i5.MatRowDef, i5.MatHeaderCell, i5.MatCell, i5.MatHeaderRow, i5.MatRow, i2$2.NgIf, i2$2.DecimalPipe]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", 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 (configureCols.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: 13px;\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 (configureCols.displayedColumnsInOrder||[]); track col) {\r\n    <ng-container [matColumnDef]=\"col\">\r\n      <th mat-header-cell mat-sort-header *matHeaderCellDef>\r\n        <span style=\"text-align: start; line-height: normal; font-size: 13px\">\r\n          {{ configureCols.columnsConfig?.[col]?.[\"label\"] }}\r\n        </span>\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,  configureCols.columnsConfig?.[col])\r\n        \" mat-cell *matCellDef=\"let row\">\r\n        <div *ngIf=\" configureCols.columnsConfig?.[col]?.['type'] === 'removal'\" class=\"cellClass\">\r\n          <span *ngIf=\"\r\n          !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n          inputConfig?.multipleInputInEditId !== row['id']\">\r\n            <strong>\r\n\r\n              {{getCalculationFunction(row)}}\r\n            </strong>\r\n\r\n          </span>\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'\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=\"configureCols.columnsConfig && configureCols.columnsConfig?.[col]?.type !== 'removal'\"\r\n          class=\"cellClass\">\r\n          <span *ngIf=\"isNumber(row[col])\">\r\n            {{ row[col] | number }}\r\n          </span>\r\n          <span *ngIf=\"!isNumber(row[col])\"> {{ row[col] }}\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=\"configureCols.displayedColumnsInOrder \"></tr>\r\n    <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n      \r\n      *matRowDef=\"let row; columns: configureCols.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: 13px;\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: 13px;\r\n      \">\r\n   \r\n    <div style=\"margin-top: 8px; text-align: center;\">\r\n      <mat-icon style=\"font-size: 20px; 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: 13px;\">\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 #rowOptions=\"matMenu\">\r\n  <ng-template matMenuContent let-row=\"row\">\r\n\r\n    <button mat-menu-item (click)=\"editItem(row)\">\r\n      <mat-icon>\r\n        {{inputConfig?.readonly ? 'visibility' : 'edit'}}\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          {{inputConfig?.readonly ? 'View details' : '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    @if(!inputConfig?.readonly){\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:14px;font-weight:500;margin-bottom:2px;line-height:normal}.option-sub-text{line-height:normal;font-size:12px;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:11px;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: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$2.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$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: i4$2.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$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTableModule }], deferBlockDependencies: [() => [i2.MatIconButton, i4$3.MatChip, i6.MatIcon, i6$2.MatMenuTrigger, i4$1.MatSort, i4$1.MatSortHeader, i5.MatTable, i5.MatHeaderCellDef, i5.MatHeaderRowDef, i5.MatColumnDef, i5.MatCellDef, i5.MatRowDef, i5.MatHeaderCell, i5.MatCell, i5.MatHeaderRow, i5.MatRow, i2$2.NgIf, i2$2.DecimalPipe]] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MultipleInputTableViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-multiple-input-table-view', standalone: true, imports: [MatModulesModule, CommonModule, MatTableModule], template: "@defer (on viewport) {\r\n\r\n@if (configureCols.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: 13px;\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 (configureCols.displayedColumnsInOrder||[]); track col) {\r\n    <ng-container [matColumnDef]=\"col\">\r\n      <th mat-header-cell mat-sort-header *matHeaderCellDef>\r\n        <span style=\"text-align: start; line-height: normal; font-size: 13px\">\r\n          {{ configureCols.columnsConfig?.[col]?.[\"label\"] }}\r\n        </span>\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,  configureCols.columnsConfig?.[col])\r\n        \" mat-cell *matCellDef=\"let row\">\r\n        <div *ngIf=\" configureCols.columnsConfig?.[col]?.['type'] === 'removal'\" class=\"cellClass\">\r\n          <span *ngIf=\"\r\n          !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n          inputConfig?.multipleInputInEditId !== row['id']\">\r\n            <strong>\r\n\r\n              {{getCalculationFunction(row)}}\r\n            </strong>\r\n\r\n          </span>\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'\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=\"configureCols.columnsConfig && configureCols.columnsConfig?.[col]?.type !== 'removal'\"\r\n          class=\"cellClass\">\r\n          <span *ngIf=\"isNumber(row[col])\">\r\n            {{ row[col] | number }}\r\n          </span>\r\n          <span *ngIf=\"!isNumber(row[col])\"> {{ row[col] }}\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=\"configureCols.displayedColumnsInOrder \"></tr>\r\n    <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n      *matRowDef=\"let row; columns: configureCols.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: 13px;\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: 13px;\r\n      \">\r\n   \r\n    <div style=\"margin-top: 8px; text-align: center;\">\r\n      <mat-icon style=\"font-size: 20px; 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: 13px;\">\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 #rowOptions=\"matMenu\">\r\n  <ng-template matMenuContent let-row=\"row\">\r\n\r\n    <button mat-menu-item (click)=\"editItem(row)\">\r\n      <mat-icon>\r\n        {{inputConfig?.readonly ? 'visibility' : 'edit'}}\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          {{inputConfig?.readonly ? 'View details' : '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    @if(!inputConfig?.readonly){\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-toolbar-container-background-color, var(--mat-app-surface));font-weight:500}.option-text{display:flex;flex-direction:column;margin-left:8px}.option-main-text{font-size:14px;font-weight:500;margin-bottom:2px;line-height:normal}.option-sub-text{line-height:normal;font-size:12px;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:11px;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], template: "@defer (on viewport) {\r\n\r\n@if (configureCols.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: 13px;\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 (configureCols.displayedColumnsInOrder||[]); track col) {\r\n    <ng-container [matColumnDef]=\"col\">\r\n      <th mat-header-cell mat-sort-header *matHeaderCellDef>\r\n        <span style=\"text-align: start; line-height: normal; font-size: 13px\">\r\n          {{ configureCols.columnsConfig?.[col]?.[\"label\"] }}\r\n        </span>\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,  configureCols.columnsConfig?.[col])\r\n        \" mat-cell *matCellDef=\"let row\">\r\n        <div *ngIf=\" configureCols.columnsConfig?.[col]?.['type'] === 'removal'\" class=\"cellClass\">\r\n          <span *ngIf=\"\r\n          !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n          inputConfig?.multipleInputInEditId !== row['id']\">\r\n            <strong>\r\n\r\n              {{getCalculationFunction(row)}}\r\n            </strong>\r\n\r\n          </span>\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'\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=\"configureCols.columnsConfig && configureCols.columnsConfig?.[col]?.type !== 'removal'\"\r\n          class=\"cellClass\">\r\n          <span *ngIf=\"isNumber(row[col])\">\r\n            {{ row[col] | number }}\r\n          </span>\r\n          <span *ngIf=\"!isNumber(row[col])\"> {{ row[col] }}\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=\"configureCols.displayedColumnsInOrder \"></tr>\r\n    <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n      \r\n      *matRowDef=\"let row; columns: configureCols.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: 13px;\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: 13px;\r\n      \">\r\n   \r\n    <div style=\"margin-top: 8px; text-align: center;\">\r\n      <mat-icon style=\"font-size: 20px; 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: 13px;\">\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 #rowOptions=\"matMenu\">\r\n  <ng-template matMenuContent let-row=\"row\">\r\n\r\n    <button mat-menu-item (click)=\"editItem(row)\">\r\n      <mat-icon>\r\n        {{inputConfig?.readonly ? 'visibility' : 'edit'}}\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          {{inputConfig?.readonly ? 'View details' : '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    @if(!inputConfig?.readonly){\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:14px;font-weight:500;margin-bottom:2px;line-height:normal}.option-sub-text{line-height:normal;font-size:12px;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:11px;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"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], dataSource: [{
@@ -9472,11 +9502,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: "19.2.6", ngImport: i0, type: MultipleInputTableEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", 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-toolbar-container-background-color)\" 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 {\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<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-toolbar-container-background-color, 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: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.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: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$2.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$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i6$2.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: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DragDropModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", 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<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: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.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: i2$1.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$2.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$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i6$2.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: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DragDropModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", 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-toolbar-container-background-color)\" 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 {\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<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-toolbar-container-background-color, 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                    <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<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"] }]
         }], ctorParameters: () => [], propDecorators: { inputConfig: [{
                 type: Input
             }], editorMode: [{
@@ -9541,7 +9571,7 @@ class MultipleInputTableComponent extends BaseCustomInput {
     constructor(ngControl, elementRef) {
         super(ngControl, elementRef, customInputConfig$3);
         this.editorMode = false;
-        this._tableData = [];
+        this.listenToValueChanges();
     }
     set inputConfig(config) {
         if (_isEqual(this._inputConfig, config))
@@ -9557,11 +9587,13 @@ class MultipleInputTableComponent extends BaseCustomInput {
     get shouldLabelFloat() {
         return this.focused || !this.empty;
     }
+    listenToValueChanges() {
+        this.stateChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.checkItemList();
+        });
+    }
     checkItemList() {
         try {
-            if (_isEqual(this._tableData, this.value))
-                return true;
-            this._tableData = this.value || [];
             if (this.value) {
                 const TableData = this.inputConfig
                     .groupBy
@@ -9575,19 +9607,21 @@ class MultipleInputTableComponent extends BaseCustomInput {
                 }
                 else {
                     this.dataSource.data = data;
+                    console.error('Table data is not equal to value', data, this.value);
                 }
             }
             return true;
         }
         catch (error) {
-            console.error(error);
+            const msg = error instanceof Error ? error.message : 'Error checking item list';
+            console.error(msg);
             return false;
         }
     }
     multipleInputRemoveItem(item) {
         if (!this.value)
             return;
-        this.value.splice(this.value.indexOf(item), 1);
+        this.value = this.value.filter((i) => !_isEqual(i, item));
         this.applyOptionsTo = undefined;
         this.onChange(this.value);
         this.stateChanges.next();
@@ -9688,7 +9722,7 @@ class MultipleInputTableComponent extends BaseCustomInput {
         return this.ngControl?.control?.parent;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MultipleInputTableComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", 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*ngIf=\"checkItemList()\"\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){\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: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.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: "19.2.6", 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){\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[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.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: "19.2.6", ngImport: i0, type: MultipleInputTableComponent, decorators: [{
             type: Component,
@@ -9697,7 +9731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         MatModulesModule,
                         MultipleInputTableEditComponent,
                         MultipleInputTableViewComponent,
-                    ], providers: [{ provide: MatFormFieldControl, useExisting: MultipleInputTableComponent }], template: "\r\n<lib-multiple-input-table-view\r\n*ngIf=\"checkItemList()\"\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){\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){\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"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -9723,14 +9757,14 @@ class MultipleInputInputElementComponent {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MultipleInputInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MultipleInputInputElementComponent, isStandalone: true, selector: "lib-multiple-input-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", editorMode: "editorMode", formBuilderFunctions: "formBuilderFunctions" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n  <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" floatLabel=\"always\"\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    <app-multiple-input-table [editorMode]=\"editorMode\" [required]=\"this.inputConfig.required\" [formGroup]=\"formGroup\"\r\n      [formBuilderFunctions]=\"formBuilderFunctions\" *ngIf=\"inputConfig.id\" [formControlName]=\"inputConfig.id\"\r\n      [inputConfig]=\"inputConfig\">\r\n    </app-multiple-input-table>\r\n\r\n\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    @if (!!errorMessage) {\r\n    <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\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  </mat-form-field>\r\n</form>", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i6.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: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MultipleInputTableComponent, selector: "app-multiple-input-table", inputs: ["editorMode", "formGroup", "inputConfig", "formBuilderFunctions"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: MultipleInputInputElementComponent, isStandalone: true, selector: "lib-multiple-input-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", editorMode: "editorMode", formBuilderFunctions: "formBuilderFunctions" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n  <mat-form-field  [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" floatLabel=\"always\"\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    <app-multiple-input-table [editorMode]=\"editorMode\" [required]=\"this.inputConfig.required\" [formGroup]=\"formGroup\"\r\n      [formBuilderFunctions]=\"formBuilderFunctions\" *ngIf=\"inputConfig.id\" [formControlName]=\"inputConfig.id\"\r\n      [inputConfig]=\"inputConfig\">\r\n    </app-multiple-input-table>\r\n\r\n\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    @if (!!errorMessage) {\r\n    <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\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  </mat-form-field>\r\n</form>", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i6.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: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MultipleInputTableComponent, selector: "app-multiple-input-table", inputs: ["editorMode", "formGroup", "inputConfig", "formBuilderFunctions"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MultipleInputInputElementComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-multiple-input-input-element', standalone: true, imports: [MatModulesModule,
                         TFormInputStatusComponent,
                         CommonModule,
-                        ReactiveFormsModule, MultipleInputTableComponent], template: "<form [formGroup]=\"formGroup\">\r\n  <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" floatLabel=\"always\"\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    <app-multiple-input-table [editorMode]=\"editorMode\" [required]=\"this.inputConfig.required\" [formGroup]=\"formGroup\"\r\n      [formBuilderFunctions]=\"formBuilderFunctions\" *ngIf=\"inputConfig.id\" [formControlName]=\"inputConfig.id\"\r\n      [inputConfig]=\"inputConfig\">\r\n    </app-multiple-input-table>\r\n\r\n\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    @if (!!errorMessage) {\r\n    <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\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  </mat-form-field>\r\n</form>", styles: ["mat-form-field{width:100%!important}\n"] }]
+                        ReactiveFormsModule, MultipleInputTableComponent], template: "<form [formGroup]=\"formGroup\">\r\n  <mat-form-field  [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" floatLabel=\"always\"\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    <app-multiple-input-table [editorMode]=\"editorMode\" [required]=\"this.inputConfig.required\" [formGroup]=\"formGroup\"\r\n      [formBuilderFunctions]=\"formBuilderFunctions\" *ngIf=\"inputConfig.id\" [formControlName]=\"inputConfig.id\"\r\n      [inputConfig]=\"inputConfig\">\r\n    </app-multiple-input-table>\r\n\r\n\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    @if (!!errorMessage) {\r\n    <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\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  </mat-form-field>\r\n</form>", styles: ["mat-form-field{width:100%!important}\n"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
@@ -10148,7 +10182,7 @@ class TFormInputComponent {
         return !!this.formGroup.controls[id];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TFormInputComponent, deps: [{ token: 'COMPONENT_PROPS', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: TFormInputComponent, isStandalone: true, selector: "lib-t-form-input", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", editorMode: "editorMode", formBuilderFunctions: "formBuilderFunctions" }, ngImport: i0, template: "\r\n@if(inputConfig ){\r\n\r\n@if(inputConfig.element === elementTypes.SectionTitle){\r\n<lib-section-title  [inputConfig]=\"inputConfig\"></lib-section-title>\r\n}\r\n\r\n@if(inputConfig.element !== elementTypes.SectionTitle && !!formGroup && !!hasFormControlInstance){\r\n    @switch (inputConfig.element) {\r\n    @case (elementTypes.Location) {\r\n    <lib-geo-location\r\n    [editorMode]=\"editorMode\"\r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n    [formBuilderFunctions]=\"formBuilderFunctions\">\r\n    </lib-geo-location>\r\n    }\r\n    <!-- @case (elementTypes.QrCodeScanner) {\r\n    <lib-qr-code-scanner-element [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" \r\n    \r\n    (valueChange)=\"changed($event)\">\r\n    </lib-qr-code-scanner-element>\r\n    } -->\r\n    @case (elementTypes.AutoCompleteInput) {\r\n    <lib-auto-complete-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n    [options]=\"[]\">\r\n    </lib-auto-complete-input-element>\r\n    }\r\n    @case (elementTypes.Toggle) {\r\n    <lib-toggle-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" >\r\n    </lib-toggle-input-element>\r\n\r\n    \r\n    }\r\n    @case (elementTypes.Select) {\r\n    <lib-select-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" >\r\n    </lib-select-input-element>\r\n    }\r\n    @case (elementTypes.Textarea) {\r\n    <lib-textarea-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\">\r\n    </lib-textarea-input-element>\r\n    }\r\n    @case (elementTypes.DateRangePicker) {\r\n    <lib-date-range-picker-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\">\r\n    </lib-date-range-picker-input-element>\r\n    }\r\n    @case (elementTypes.DatePicker){\r\n    <lib-date-picker-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n     >\r\n    </lib-date-picker-input-element>\r\n    }\r\n    @case (elementTypes.FileUpload) {\r\n    <lib-file-upload-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\">\r\n    </lib-file-upload-input-element>\r\n\r\n    }\r\n    @case (elementTypes.ImageCapture) {\r\n    <lib-image-capture-input-element [inputConfig]=\"inputConfig\" [formGroup]=\"formGroup\"\r\n    ></lib-image-capture-input-element>\r\n\r\n    }\r\n    @case (elementTypes.Editor) {\r\n    <lib-editor-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" \r\n    >\r\n  </lib-editor-input-element>\r\n    }\r\n    @case (elementTypes.Signature) {\r\n    <lib-signature-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" \r\n    >\r\n    </lib-signature-input-element>\r\n    }\r\n  \r\n    @case (elementTypes.MultipleInput) {\r\n    <lib-multiple-input-input-element\r\n    [editorMode]=\"editorMode\"\r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n     \r\n    [formBuilderFunctions]=\"formBuilderFunctions\"\r\n    \r\n    >\r\n\r\n    </lib-multiple-input-input-element>\r\n\r\n    }\r\n    @case (elementTypes.MscoaSelection) {\r\n      <lib-mscoa-form-input\r\n      [inputConfig]=\"inputConfig\"\r\n      [formGroup]=\"formGroup\"\r\n      [editorMode]=\"editorMode\"\r\n      [formBuilderFunctions]=\"formBuilderFunctions\">\r\n      </lib-mscoa-form-input>\r\n\r\n    }\r\n    @case (elementTypes.TableSelection) {\r\n      <lib-select-table-input [inputConfig]=\"inputConfig\"\r\n      [formGroup]=\"formGroup\">\r\n\r\n      </lib-select-table-input>\r\n    }\r\n    @default {\r\n      <lib-basic-input-input-element \r\n      [inputConfig]=\"inputConfig\" \r\n      [formGroup]=\"formGroup\">\r\n      </lib-basic-input-input-element>\r\n      }\r\n    }\r\n}\r\n} \r\n\r\n\r\n<!-- \r\n<button mat-button (click)=\"externalError()\">error</button>\r\n<button mat-button (click)=\"externalErrorClear()\"> clear error</button>-->\r\n", styles: ["mat-form-field{width:100%!important}.description{font-size:.875rem;text-align:start;line-height:1.6;max-width:493px}.sectionHeading{text-align:start;font-weight:500;margin-bottom:2px;line-height:1.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MscoaFormInputComponent, selector: "lib-mscoa-form-input", inputs: ["inputConfig", "editorMode", "formGroup", "formBuilderFunctions"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: SectionTitleComponent, selector: "lib-section-title", inputs: ["inputConfig"] }, { kind: "component", type: GeoLocationComponent, selector: "lib-geo-location", inputs: ["inputConfig", "formGroup", "editorMode", "formBuilderFunctions"] }, { kind: "component", type: AutoCompleteInputElementComponent, selector: "lib-auto-complete-input-element", inputs: ["inputConfig", "formGroup", "options"] }, { kind: "component", type: ToggleInputElementComponent, selector: "lib-toggle-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: SelectInputElementComponent, selector: "lib-select-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: TextareaInputElementComponent, selector: "lib-textarea-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: DateRangePickerInputElementComponent, selector: "lib-date-range-picker-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: DatePickerInputElementComponent, selector: "lib-date-picker-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: FileUploadInputElementComponent, selector: "lib-file-upload-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: TFormInputComponent, isStandalone: true, selector: "lib-t-form-input", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", editorMode: "editorMode", formBuilderFunctions: "formBuilderFunctions" }, ngImport: i0, template: "\r\n@if(inputConfig ){\r\n\r\n@if(inputConfig.element === elementTypes.SectionTitle){\r\n<lib-section-title  [inputConfig]=\"inputConfig\"></lib-section-title>\r\n}\r\n\r\n@if(inputConfig.element !== elementTypes.SectionTitle && !!formGroup && !!hasFormControlInstance){\r\n    @switch (inputConfig.element) {\r\n    @case (elementTypes.Location) {\r\n    <lib-geo-location\r\n    [editorMode]=\"editorMode\"\r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n    [formBuilderFunctions]=\"formBuilderFunctions\">\r\n    </lib-geo-location>\r\n    }\r\n    <!-- @case (elementTypes.QrCodeScanner) {\r\n    <lib-qr-code-scanner-element [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" \r\n    \r\n    (valueChange)=\"changed($event)\">\r\n    </lib-qr-code-scanner-element>\r\n    } -->\r\n    @case (elementTypes.AutoCompleteInput) {\r\n    <lib-auto-complete-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n    [options]=\"[]\">\r\n    </lib-auto-complete-input-element>\r\n    }\r\n    @case (elementTypes.Toggle) {\r\n    <lib-toggle-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" >\r\n    </lib-toggle-input-element>\r\n\r\n    \r\n    }\r\n    @case (elementTypes.Select) {\r\n    <lib-select-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" >\r\n    </lib-select-input-element>\r\n    }\r\n    @case (elementTypes.Textarea) {\r\n    <lib-textarea-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\">\r\n    </lib-textarea-input-element>\r\n    }\r\n    @case (elementTypes.DateRangePicker) {\r\n    <lib-date-range-picker-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\">\r\n    </lib-date-range-picker-input-element>\r\n    }\r\n    @case (elementTypes.DatePicker){\r\n    <lib-date-picker-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n     >\r\n    </lib-date-picker-input-element>\r\n    }\r\n    @case (elementTypes.FileUpload) {\r\n    <lib-file-upload-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\">\r\n    </lib-file-upload-input-element>\r\n\r\n    }\r\n    @case (elementTypes.ImageCapture) {\r\n    <lib-image-capture-input-element [inputConfig]=\"inputConfig\" [formGroup]=\"formGroup\"\r\n    ></lib-image-capture-input-element>\r\n\r\n    }\r\n    @case (elementTypes.Editor) {\r\n    <lib-editor-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" \r\n    >\r\n  </lib-editor-input-element>\r\n    }\r\n    @case (elementTypes.Signature) {\r\n    <lib-signature-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" \r\n    >\r\n    </lib-signature-input-element>\r\n    }\r\n  \r\n    @case (elementTypes.MultipleInput) {\r\n    <lib-multiple-input-input-element\r\n    [editorMode]=\"editorMode\"\r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n     \r\n    [formBuilderFunctions]=\"formBuilderFunctions\"\r\n    \r\n    >\r\n\r\n    </lib-multiple-input-input-element>\r\n\r\n    }\r\n    @case (elementTypes.MscoaSelection) {\r\n      <lib-mscoa-form-input\r\n      [inputConfig]=\"inputConfig\"\r\n      [formGroup]=\"formGroup\"\r\n      [editorMode]=\"editorMode\"\r\n      [formBuilderFunctions]=\"formBuilderFunctions\">\r\n      </lib-mscoa-form-input>\r\n\r\n    }\r\n    @case (elementTypes.TableSelection) {\r\n      <lib-select-table-input [inputConfig]=\"inputConfig\"\r\n      [formGroup]=\"formGroup\">\r\n\r\n      </lib-select-table-input>\r\n    }\r\n    @default {\r\n   \r\n      <lib-basic-input-input-element \r\n      [inputConfig]=\"inputConfig\" \r\n      [formGroup]=\"formGroup\">\r\n      </lib-basic-input-input-element>\r\n      }\r\n    }\r\n}\r\n} \r\n\r\n\r\n<!-- \r\n<button mat-button (click)=\"externalError()\">error</button>\r\n<button mat-button (click)=\"externalErrorClear()\"> clear error</button>-->\r\n", styles: ["mat-form-field{width:100%!important}.description{font-size:.875rem;text-align:start;line-height:1.6;max-width:493px}.sectionHeading{text-align:start;font-weight:500;margin-bottom:2px;line-height:1.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MscoaFormInputComponent, selector: "lib-mscoa-form-input", inputs: ["inputConfig", "editorMode", "formGroup", "formBuilderFunctions"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: SectionTitleComponent, selector: "lib-section-title", inputs: ["inputConfig"] }, { kind: "component", type: GeoLocationComponent, selector: "lib-geo-location", inputs: ["inputConfig", "formGroup", "editorMode", "formBuilderFunctions"] }, { kind: "component", type: AutoCompleteInputElementComponent, selector: "lib-auto-complete-input-element", inputs: ["inputConfig", "formGroup", "options"] }, { kind: "component", type: ToggleInputElementComponent, selector: "lib-toggle-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: SelectInputElementComponent, selector: "lib-select-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: TextareaInputElementComponent, selector: "lib-textarea-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: DateRangePickerInputElementComponent, selector: "lib-date-range-picker-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: DatePickerInputElementComponent, selector: "lib-date-picker-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: FileUploadInputElementComponent, selector: "lib-file-upload-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: 
                 //REVIEW -  check circular dependency error for ImageCaptureInputElementComponent
                 // ImageCaptureInputElementComponent,
                 EditorInputElementComponent, selector: "lib-editor-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: SignatureInputElementComponent, selector: "lib-signature-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: MultipleInputInputElementComponent, selector: "lib-multiple-input-input-element", inputs: ["inputConfig", "formGroup", "editorMode", "formBuilderFunctions"] }, { kind: "component", type: BasicInputInputElementComponent, selector: "lib-basic-input-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: ImageCaptureInputElementComponent, selector: "lib-image-capture-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: SelectTableInputComponent, selector: "lib-select-table-input", inputs: ["inputConfig", "formGroup"] }] }); }
@@ -10177,7 +10211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         BasicInputInputElementComponent,
                         ImageCaptureInputElementComponent,
                         SelectTableInputComponent
-                    ], template: "\r\n@if(inputConfig ){\r\n\r\n@if(inputConfig.element === elementTypes.SectionTitle){\r\n<lib-section-title  [inputConfig]=\"inputConfig\"></lib-section-title>\r\n}\r\n\r\n@if(inputConfig.element !== elementTypes.SectionTitle && !!formGroup && !!hasFormControlInstance){\r\n    @switch (inputConfig.element) {\r\n    @case (elementTypes.Location) {\r\n    <lib-geo-location\r\n    [editorMode]=\"editorMode\"\r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n    [formBuilderFunctions]=\"formBuilderFunctions\">\r\n    </lib-geo-location>\r\n    }\r\n    <!-- @case (elementTypes.QrCodeScanner) {\r\n    <lib-qr-code-scanner-element [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" \r\n    \r\n    (valueChange)=\"changed($event)\">\r\n    </lib-qr-code-scanner-element>\r\n    } -->\r\n    @case (elementTypes.AutoCompleteInput) {\r\n    <lib-auto-complete-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n    [options]=\"[]\">\r\n    </lib-auto-complete-input-element>\r\n    }\r\n    @case (elementTypes.Toggle) {\r\n    <lib-toggle-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" >\r\n    </lib-toggle-input-element>\r\n\r\n    \r\n    }\r\n    @case (elementTypes.Select) {\r\n    <lib-select-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" >\r\n    </lib-select-input-element>\r\n    }\r\n    @case (elementTypes.Textarea) {\r\n    <lib-textarea-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\">\r\n    </lib-textarea-input-element>\r\n    }\r\n    @case (elementTypes.DateRangePicker) {\r\n    <lib-date-range-picker-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\">\r\n    </lib-date-range-picker-input-element>\r\n    }\r\n    @case (elementTypes.DatePicker){\r\n    <lib-date-picker-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n     >\r\n    </lib-date-picker-input-element>\r\n    }\r\n    @case (elementTypes.FileUpload) {\r\n    <lib-file-upload-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\">\r\n    </lib-file-upload-input-element>\r\n\r\n    }\r\n    @case (elementTypes.ImageCapture) {\r\n    <lib-image-capture-input-element [inputConfig]=\"inputConfig\" [formGroup]=\"formGroup\"\r\n    ></lib-image-capture-input-element>\r\n\r\n    }\r\n    @case (elementTypes.Editor) {\r\n    <lib-editor-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" \r\n    >\r\n  </lib-editor-input-element>\r\n    }\r\n    @case (elementTypes.Signature) {\r\n    <lib-signature-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" \r\n    >\r\n    </lib-signature-input-element>\r\n    }\r\n  \r\n    @case (elementTypes.MultipleInput) {\r\n    <lib-multiple-input-input-element\r\n    [editorMode]=\"editorMode\"\r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n     \r\n    [formBuilderFunctions]=\"formBuilderFunctions\"\r\n    \r\n    >\r\n\r\n    </lib-multiple-input-input-element>\r\n\r\n    }\r\n    @case (elementTypes.MscoaSelection) {\r\n      <lib-mscoa-form-input\r\n      [inputConfig]=\"inputConfig\"\r\n      [formGroup]=\"formGroup\"\r\n      [editorMode]=\"editorMode\"\r\n      [formBuilderFunctions]=\"formBuilderFunctions\">\r\n      </lib-mscoa-form-input>\r\n\r\n    }\r\n    @case (elementTypes.TableSelection) {\r\n      <lib-select-table-input [inputConfig]=\"inputConfig\"\r\n      [formGroup]=\"formGroup\">\r\n\r\n      </lib-select-table-input>\r\n    }\r\n    @default {\r\n      <lib-basic-input-input-element \r\n      [inputConfig]=\"inputConfig\" \r\n      [formGroup]=\"formGroup\">\r\n      </lib-basic-input-input-element>\r\n      }\r\n    }\r\n}\r\n} \r\n\r\n\r\n<!-- \r\n<button mat-button (click)=\"externalError()\">error</button>\r\n<button mat-button (click)=\"externalErrorClear()\"> clear error</button>-->\r\n", styles: ["mat-form-field{width:100%!important}.description{font-size:.875rem;text-align:start;line-height:1.6;max-width:493px}.sectionHeading{text-align:start;font-weight:500;margin-bottom:2px;line-height:1.5}\n"] }]
+                    ], template: "\r\n@if(inputConfig ){\r\n\r\n@if(inputConfig.element === elementTypes.SectionTitle){\r\n<lib-section-title  [inputConfig]=\"inputConfig\"></lib-section-title>\r\n}\r\n\r\n@if(inputConfig.element !== elementTypes.SectionTitle && !!formGroup && !!hasFormControlInstance){\r\n    @switch (inputConfig.element) {\r\n    @case (elementTypes.Location) {\r\n    <lib-geo-location\r\n    [editorMode]=\"editorMode\"\r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n    [formBuilderFunctions]=\"formBuilderFunctions\">\r\n    </lib-geo-location>\r\n    }\r\n    <!-- @case (elementTypes.QrCodeScanner) {\r\n    <lib-qr-code-scanner-element [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" \r\n    \r\n    (valueChange)=\"changed($event)\">\r\n    </lib-qr-code-scanner-element>\r\n    } -->\r\n    @case (elementTypes.AutoCompleteInput) {\r\n    <lib-auto-complete-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n    [options]=\"[]\">\r\n    </lib-auto-complete-input-element>\r\n    }\r\n    @case (elementTypes.Toggle) {\r\n    <lib-toggle-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" >\r\n    </lib-toggle-input-element>\r\n\r\n    \r\n    }\r\n    @case (elementTypes.Select) {\r\n    <lib-select-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" >\r\n    </lib-select-input-element>\r\n    }\r\n    @case (elementTypes.Textarea) {\r\n    <lib-textarea-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\">\r\n    </lib-textarea-input-element>\r\n    }\r\n    @case (elementTypes.DateRangePicker) {\r\n    <lib-date-range-picker-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\">\r\n    </lib-date-range-picker-input-element>\r\n    }\r\n    @case (elementTypes.DatePicker){\r\n    <lib-date-picker-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n     >\r\n    </lib-date-picker-input-element>\r\n    }\r\n    @case (elementTypes.FileUpload) {\r\n    <lib-file-upload-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\">\r\n    </lib-file-upload-input-element>\r\n\r\n    }\r\n    @case (elementTypes.ImageCapture) {\r\n    <lib-image-capture-input-element [inputConfig]=\"inputConfig\" [formGroup]=\"formGroup\"\r\n    ></lib-image-capture-input-element>\r\n\r\n    }\r\n    @case (elementTypes.Editor) {\r\n    <lib-editor-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" \r\n    >\r\n  </lib-editor-input-element>\r\n    }\r\n    @case (elementTypes.Signature) {\r\n    <lib-signature-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" \r\n    >\r\n    </lib-signature-input-element>\r\n    }\r\n  \r\n    @case (elementTypes.MultipleInput) {\r\n    <lib-multiple-input-input-element\r\n    [editorMode]=\"editorMode\"\r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n     \r\n    [formBuilderFunctions]=\"formBuilderFunctions\"\r\n    \r\n    >\r\n\r\n    </lib-multiple-input-input-element>\r\n\r\n    }\r\n    @case (elementTypes.MscoaSelection) {\r\n      <lib-mscoa-form-input\r\n      [inputConfig]=\"inputConfig\"\r\n      [formGroup]=\"formGroup\"\r\n      [editorMode]=\"editorMode\"\r\n      [formBuilderFunctions]=\"formBuilderFunctions\">\r\n      </lib-mscoa-form-input>\r\n\r\n    }\r\n    @case (elementTypes.TableSelection) {\r\n      <lib-select-table-input [inputConfig]=\"inputConfig\"\r\n      [formGroup]=\"formGroup\">\r\n\r\n      </lib-select-table-input>\r\n    }\r\n    @default {\r\n   \r\n      <lib-basic-input-input-element \r\n      [inputConfig]=\"inputConfig\" \r\n      [formGroup]=\"formGroup\">\r\n      </lib-basic-input-input-element>\r\n      }\r\n    }\r\n}\r\n} \r\n\r\n\r\n<!-- \r\n<button mat-button (click)=\"externalError()\">error</button>\r\n<button mat-button (click)=\"externalErrorClear()\"> clear error</button>-->\r\n", styles: ["mat-form-field{width:100%!important}.description{font-size:.875rem;text-align:start;line-height:1.6;max-width:493px}.sectionHeading{text-align:start;font-weight:500;margin-bottom:2px;line-height:1.5}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -10365,5 +10399,5 @@ console.debug = () => { };
  * Generated bundle index. Do not edit.
  */
 
-export { validateObjectAgainstString as A, getUrl as B, textIconsForUserHints as C, DaysAgoPipe as D, index as E, FormsStoreService as F, MatModulesModule as M, NGX_T_FORMS_CONFIG_TOKEN as N, PropertyAccessError as P, SignatureInputElementComponent as S, TDynamicDataEditComponent as T, UTILS_OBJECT_TOKEN as U, _isEqual as _, assignDeepPropertyToObject as a, TDynamicDataViewComponent as b, FormTowerControllerService as c, getSubmissionStatusFn as d, TreeComponent as e, NgxTFormsService as f, getAvatar as g, NgxTFormsComponent as h, initFormConfigToV2 as i, formGenerator as j, FORM_ACTIONS_TOKEN as k, FORM_CONFIG_TOKEN as l, FORM_SLIDES_TOKEN as m, FORM_INPUTS_TOKEN as n, MULTIPLE_FORM_INPUT_TOKEN as o, provideNgxTForms as p, MSCOA_TREE_PROVIDER as q, FormsComponent as r, FormBuilderComponent as s, testAgainstItem as t, MscoaFormInputComponent as u, UserFormStepperComponent as v, TFormInputComponent as w, DialogTemplateComponent as x, returnDeepProperty as y, safeReturnDeepProperty as z };
-//# sourceMappingURL=ngx-t-forms-ngx-t-forms-Biy_6-DN.mjs.map
+export { safeReturnDeepProperty as A, validateObjectAgainstString as B, getUrl as C, DaysAgoPipe as D, textIconsForUserHints as E, FormsStoreService as F, index as G, MatModulesModule as M, NGX_T_FORMS_CONFIG_TOKEN as N, PropertyAccessError as P, SignatureInputElementComponent as S, TDynamicDataEditComponent as T, UTILS_OBJECT_TOKEN as U, _isEqual as _, assignDeepPropertyToObject as a, TDynamicDataViewComponent as b, FormTowerControllerService as c, getSubmissionStatusFn as d, TreeComponent as e, NgxTFormsService as f, getAvatar as g, NgxTFormsComponent as h, initFormConfigToV2 as i, formGenerator as j, getSectionElements as k, FORM_ACTIONS_TOKEN as l, FORM_CONFIG_TOKEN as m, FORM_SLIDES_TOKEN as n, FORM_INPUTS_TOKEN as o, provideNgxTForms as p, MULTIPLE_FORM_INPUT_TOKEN as q, MSCOA_TREE_PROVIDER as r, FormsComponent as s, testAgainstItem as t, FormBuilderComponent as u, MscoaFormInputComponent as v, UserFormStepperComponent as w, TFormInputComponent as x, DialogTemplateComponent as y, returnDeepProperty as z };
+//# sourceMappingURL=ngx-t-forms-ngx-t-forms-fgu62eR1.mjs.map