ngx-t-forms 2.0.16 → 2.0.18

package/fesm2022/{ngx-t-forms-ngx-t-forms-BX1gh-MK.mjs → ngx-t-forms-ngx-t-forms-B4C0NbAb.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, getElementEditorConfig, DefaultInputConfig, ElementEditorTypes, SpecialElementKeys, validateFormColumnInputsWithRequired, validateForm, FormListSection, FormStateErrors, 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, DocumentLitsLabelConfigInterfaceValueType } 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';
@@ -14,7 +14,7 @@ import { CdkAccordionModule } from '@angular/cdk/accordion';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import * as i2$1 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import * as i9$1 from '@angular/cdk/portal';
+import * as i9$2 from '@angular/cdk/portal';
 import { PortalModule, ComponentPortal } from '@angular/cdk/portal';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { CdkStepperModule } from '@angular/cdk/stepper';
@@ -27,50 +27,50 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i3$2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i3$4 from '@angular/material/checkbox';
+import * as i4$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i4$3 from '@angular/material/chips';
+import * as i4$4 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i3$6 from '@angular/material/stepper';
+import * as i3$5 from '@angular/material/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
-import * as i3$5 from '@angular/material/datepicker';
+import * as i3$4 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i4 from '@angular/material/divider';
+import * as i4$1 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatGridListModule } from '@angular/material/grid-list';
-import * as i6 from '@angular/material/icon';
+import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i12 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i6$1 from '@angular/material/list';
+import * as i6 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i6$2 from '@angular/material/menu';
+import * as i6$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatNativeDateModule, MatRippleModule, provideNativeDateAdapter } from '@angular/material/core';
 import * as i7$1 from '@angular/material/paginator';
 import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
-import * as i4$2 from '@angular/material/progress-bar';
+import * as i4$3 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i7 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatRadioModule } from '@angular/material/radio';
 import * as i3$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i8$1 from '@angular/material/sidenav';
+import * as i8 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatSliderModule } from '@angular/material/slider';
-import * as i9$2 from '@angular/material/slide-toggle';
+import * as i9$3 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
-import * as i4$1 from '@angular/material/sort';
+import * as i9$1 from '@angular/material/sort';
 import { MatSortModule, MatSort } from '@angular/material/sort';
-import * as i5 from '@angular/material/table';
+import * as i10 from '@angular/material/table';
 import { MatTableModule, MatTableDataSource } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i9 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i8 from '@angular/material/tooltip';
+import * as i4 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i3$3 from '@angular/material/tree';
 import { MatTreeModule, MatTreeFlattener, MatTreeFlatDataSource } from '@angular/material/tree';
@@ -79,7 +79,7 @@ import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-
 import * as i3 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i2$2 from '@angular/common';
-import { CommonModule, DOCUMENT } from '@angular/common';
+import { CommonModule, DOCUMENT, CurrencyPipe, DatePipe } from '@angular/common';
 import { ComponentStore } from '@ngrx/component-store';
 import * as i1$3 from '@angular/router';
 import { ActivatedRoute, RouterModule, Router } from '@angular/router';
@@ -571,7 +571,7 @@ function getSectionForm(form, sectionId) {
     if (!form) {
         return null;
     }
-    return form.get(sectionId);
+    return form.get(sectionId) || form.controls[sectionId];
 }
 /**
  * Retrieves a specific control from a section
@@ -775,14 +775,14 @@ function getAllFunctionTypes(inputConfig) {
     try {
         // Check for each function type
         functionTypes[FunctionTypes$1.ValueCalculation] = Boolean(!!validateCalculatedFieldRules(inputConfig.calculatedFieldRules).value);
-        functionTypes[FunctionTypes$1.ValuePostMethodAPI] = Boolean(inputConfig.matOptions?.fetch.value?.source === 'api' && inputConfig.matOptions?.fetch.value?.httpMethod === 'POST');
+        functionTypes[FunctionTypes$1.ValuePostMethodAPI] = Boolean(inputConfig.matOptions?.fetch?.value?.source === 'api' && inputConfig.matOptions?.fetch.value?.httpMethod === 'POST');
         functionTypes[FunctionTypes$1.ValuePostMethodAPIWithAllDefaultParams] = Boolean(inputConfig.matOptions?.fetch.value?.source === 'api'
-            && inputConfig.matOptions?.fetch.value?.httpMethod === 'POST')
-            && (inputConfig.matOptions?.fetch.value).backEndConfig.minimumInputRequired.every((minIn) => minIn.type === 'default');
-        functionTypes[FunctionTypes$1.OptionsPostMethodAPI] = Boolean(inputConfig.matOptions?.fetch.options?.source === 'api' && inputConfig.matOptions?.fetch.options?.httpMethod === 'POST');
-        functionTypes[FunctionTypes$1.OptionsPostMethodAPIWithAllDefaultParams] = Boolean(inputConfig.matOptions?.fetch.options?.source === 'api'
-            && inputConfig.matOptions?.fetch.options?.httpMethod === 'POST')
-            && (inputConfig.matOptions?.fetch.options).backEndConfig.minimumInputRequired.every((minIn) => minIn.type === 'default');
+            && inputConfig.matOptions?.fetch?.value?.httpMethod === 'POST')
+            && (inputConfig.matOptions?.fetch?.value).backEndConfig.minimumInputRequired.every((minIn) => minIn.type === 'default');
+        functionTypes[FunctionTypes$1.OptionsPostMethodAPI] = Boolean(inputConfig.matOptions?.fetch?.options?.source === 'api' && inputConfig.matOptions?.fetch.options?.httpMethod === 'POST');
+        functionTypes[FunctionTypes$1.OptionsPostMethodAPIWithAllDefaultParams] = Boolean(inputConfig.matOptions?.fetch?.options?.source === 'api'
+            && inputConfig.matOptions?.fetch?.options?.httpMethod === 'POST')
+            && (inputConfig.matOptions?.fetch?.options).backEndConfig.minimumInputRequired.every((minIn) => minIn.type === 'default');
         functionTypes[FunctionTypes$1.ValueGetMethodAPI] = Boolean(inputConfig.matOptions?.fetch?.value?.source === 'api' && inputConfig.matOptions?.fetch.value?.httpMethod === 'GET');
         functionTypes[FunctionTypes$1.OptionsGetMethodAPI] = Boolean(inputConfig.matOptions?.fetch?.options?.source === 'api' && inputConfig.matOptions?.fetch.options?.httpMethod === 'GET');
         functionTypes[FunctionTypes$1.InputSourcedValue] = Boolean(inputConfig.matOptions?.fetch.value?.source === DataSources.Local && !!inputConfig.matOptions?.fetch.value?.source);
@@ -933,7 +933,7 @@ function calculateInput(inputConfig, formValue, utils) {
     }
     catch (error) {
         utils.removeInputStatus(inputConfig.id, "59565b2a-7deb-4b6b-a762-1cbb2465f55a");
-        utils.setTemporaryHint(inputConfig.id, `Failed to calculate input value`, HintType.ERROR);
+        utils.setTemporaryHint(inputConfig.id, error instanceof Error ? error.message : 'Failed to calculate input value', HintType.ERROR);
         return throwError(() => error instanceof Error ? error.message : 'Failed to calculate input value');
     }
 }
@@ -962,14 +962,11 @@ function configureCalculationScope(input, formValue) {
             }
             else {
                 if (input.element === ElementTypes.MultipleInput) {
-                    arrayValues = formInputValues.map((v) => Number(v[rule.formControlName]));
+                    arrayValues = formInputValues.map((v) => Number(v[rule.inputId]));
                 }
                 else {
-                    const controlName = rule.parentInputId
-                        ? rule.formControlName
-                        : rule.applyFunctionToCol;
                     arrayValues = formInputValues
-                        ? formInputValues.map((v) => Number(v[controlName]))
+                        ? formInputValues.map((v) => Number(v[rule.inputId]))
                         : [];
                 }
             }
@@ -1567,10 +1564,11 @@ function inputGetApiPostData(inputConfig, formValues, dataFor, utils) {
         return utils.httpPostDataFunction(submissionParameters.httpEndPoint, submissionParameters.data, submissionParameters.httpHeaderOptions).pipe(tap((response) => {
             utils.removeInputStatus(inputConfig.id, 'd19be9ca-ceda-4388-9f7b-3fcb5f12d921');
             const valueAccessRules = fetchOptions?.valueAccessRules;
-            const results = getValueFromValueAccessor(valueAccessRules || [], response);
+            const results = !valueAccessRules ? response : getValueFromValueAccessor(valueAccessRules || [], response);
             if (dataFor !== "options") {
-                console.error(multipleFormInputMapValueToInputsId(inputConfig, results), "tttttttttttttttttttttttttttttttttttttzzz");
-                utils.updateValue(inputConfig.id, multipleFormInputMapValueToInputsId(inputConfig, results));
+                const mappedData = multipleFormInputMapValueToInputsId(inputConfig, results);
+                console.error(mappedData, results, "-------", valueAccessRules, "dddddddddd", response, "ddddddddddddd");
+                utils.updateValue(inputConfig.id, mappedData);
                 utils.setTemporaryHint(inputConfig.id, 'Data fetched successfully', HintType.SUCCESS);
                 return;
             }
@@ -2014,7 +2012,6 @@ const updateFormInputConfig = (self, inputId, config) => {
             })
         }))
     };
-    console.error('Form updated', self.form, config);
 };
 
 const returnAnyFormInputFromForm = (form, id) => {
@@ -2064,19 +2061,17 @@ const updateValue = (self, inputId, value) => {
     const input = returnAnyFormInputFromForm(self.form, inputId);
     console.error(`Input with ID ******************** ${inputId} `, input);
     if (!input) {
-        self.setInputTemporaryError(inputId, `Input with ID ${inputId} not found`);
-        return;
+        throw new Error(`Input cant be found.Failed to set value`);
     }
     const sectionId = input?.sectionId;
     if (!sectionId) {
-        self.setInputTemporaryError(inputId, `Input with ID ${inputId} has no section ID`);
-        return;
+        throw new Error(`Input is missing a section. Failed to set value`);
     }
     const isDateRangePicker = input?.element === ElementTypes.DateRangePicker;
     if (isDateRangePicker) {
         const alreadyHasCompoundedKey = inputId.includes('.');
         if (!alreadyHasCompoundedKey) {
-            throw new Error(`Input ID ${inputId} does not have a compounded key for date range picker`);
+            throw new Error(`Input ID ${inputId} does not have a compounded key for date range picker. Failed to set value`);
         }
         const sectionControl = (self.mainForm?.controls[sectionId]).controls[inputId];
         const isStartDate = inputId.split('.')?.[1] === input.startDateControl;
@@ -2090,8 +2085,8 @@ const updateValue = (self, inputId, value) => {
     }
     const sectionControl = getSectionControl(self.mainForm, sectionId, inputId);
     if (!sectionControl) {
-        self.setInputTemporaryError(inputId, `Missing FormControl. Failed to set value `);
-        return;
+        console.error(sectionControl, sectionId, self.mainForm);
+        throw new Error('Missing FormControl. Failed to set value');
     }
     sectionControl?.setValue(value);
 };
@@ -2099,7 +2094,6 @@ const updateValue = (self, inputId, value) => {
 const setInputAsTouchedAndDirty = (self, inputId) => {
     const input = self.allFormInputs()?.find(input => input.id === inputId);
     if (!input?.sectionId) {
-        console.error(`Input with ID ${inputId} has no section ID`);
         return;
     }
     const inputSectionIsSeen = !!self.mainForm?.controls[input.sectionId]?.touched && !!self.mainForm?.controls[input.sectionId]?.dirty;
@@ -3095,7 +3089,6 @@ 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, this._form);
             // .4 crete change reaction functions
             this.createAllInputDependencies();
             this.createInputFunctionsCollection();
@@ -3358,7 +3351,6 @@ class FormTowerControllerService {
     }
     getFunctionByType(fn, input) {
         return new Observable(observer => {
-            console.error(`Re-running calculation for ${input.id}`);
             const utils = {
                 setTemporaryHint: this.setTemporaryHint.bind(this),
                 updateValue: this.updateValue.bind(this),
@@ -4225,7 +4217,10 @@ function formsFormBuilderStoreSelectors(store) {
             }));
         }));
         const selectFormTitle$ = selectFormInEdit$.pipe(map((form) => form?.formTitle));
-        const getAllFormInputs$ = selectFormInEdit$.pipe(map((form) => allFormInputs(form)));
+        const getAllFormInputs$ = selectFormInEdit$.pipe(map((form) => {
+            const inputs = allFormInputs(form);
+            return inputs;
+        }));
         const inputElementEditorConfigs$ = inputInEdit$.pipe(switchMap((inputInEdit) => selectFormInEdit$.pipe(map(form => inputElementEditorConfigs(form, inputInEdit, store.NGX_T_FORMS_CONFIG, store.utils)))));
         return {
             selectFormSlides$,
@@ -4560,7 +4555,14 @@ function createUpdatedForm(currentForm, inputId, sourceSection, targetSection, i
             if (slide.sectionId === targetSection) {
                 return {
                     ...slide,
-                    columns: [...slide.columns, { ...inputData, sectionId: targetSection }]
+                    columns: [...slide.columns, {
+                            ...inputData,
+                            sectionId: targetSection,
+                            formInputs: Array.isArray(inputData.formInputs) ? inputData.formInputs.map(i => ({
+                                ...i,
+                                sectionId: targetSection
+                            })) : inputData.formInputs
+                        }]
                 };
             }
             return slide;
@@ -5351,7 +5353,7 @@ function formBuilderStoreActions(store) {
         elementBlur,
         addMultipleFormInput,
         clearInputInEdit,
-        addInputToScoaSelection
+        addInputToScoaSelection,
     };
 }
 
@@ -5507,9 +5509,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-DuXf9zC_.mjs').then(m => m.FormsBuilderMenuComponent)], () => [i2$1.CdkDrag, i7.MatProgressSpinner, import('./ngx-t-forms-input-editor.component-C5cPOIhT.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-CR3gyw3D.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-DynxybEE.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);background-color:var(--mat-sys-surface-container-high)}.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;color:var(--mat-sidenav-content-text-color, var(--mat-sys-on-background));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: i5.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-DIHHOIPI.mjs').then(m => m.FormsBuilderMenuComponent)], () => [i2$1.CdkDrag, i7.MatProgressSpinner, import('./ngx-t-forms-input-editor.component-BCRKxzzO.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-npSCBik4.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-BXGNkL4Z.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-DuXf9zC_.mjs').then(m => m.FormsBuilderMenuComponent), import('./ngx-t-forms-input-editor.component-C5cPOIhT.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-CR3gyw3D.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-DynxybEE.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-DIHHOIPI.mjs').then(m => m.FormsBuilderMenuComponent), import('./ngx-t-forms-input-editor.component-BCRKxzzO.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-npSCBik4.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-BXGNkL4Z.mjs').then(m => m.MissingFormConfigsComponent)], resolveMetadata: (FormsBuilderMenuComponent, InputEditorComponent, FormSectionStepperComponent, MissingFormConfigsComponent) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'app-form-builder', standalone: true, imports: [CommonModule,
                             MatModulesModule,
@@ -5520,7 +5522,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ng
                             MissingFormConfigsComponent,
                             RouterModule], providers: [
                             FormsStoreService
-                        ], 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"] }]
+                        ], 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);background-color:var(--mat-sys-surface-container-high)}.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;color:var(--mat-sidenav-content-text-color, var(--mat-sys-on-background));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"] }]
             }], ctorParameters: () => [], propDecorators: { formId: [{
                     type: Input
                 }] } }) });
@@ -5694,7 +5696,7 @@ class FormsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FormsComponent, deps: [{ token: i1$3.ActivatedRoute }, { token: FormsStoreService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: FormsComponent, isStandalone: true, selector: "app-forms", providers: [
             FormsStoreService,
-        ], ngImport: i0, template: "<header>\r\n  <mat-toolbar class=\"app-header\" 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    <span class=\"app-title\">Form List</span>\r\n\r\n\r\n    <span class=\"flex-spacer\"></span>\r\n    @for (section of formListSections; track section.value) {\r\n      @if(section.value === (selectFormListSection$|async)){\r\n        <button    mat-flat-button (click)=\"setSection(section.value)\">\r\n          <span>{{section.label}}</span>\r\n        </button>\r\n      }@else {\r\n        <button mat-button (click)=\"setSection(section.value)\" >\r\n          <span>{{section.label}}</span>\r\n        </button>\r\n      }\r\n    }\r\n    <span class=\"flex-spacer\"></span>\r\n   <button mat-raised-button  color=\"accent\" (click)=\"addNewForm()\" class=\"action-button\"\r\n      aria-label=\"Create new form\">\r\n      <mat-icon>add</mat-icon>\r\n      <span>Add Form</span>\r\n    </button>\r\n  </mat-toolbar>\r\n</header>\r\n\r\n<div class=\"content-container\">\r\n\r\n  @if((selectErrors$ |async)?.['LoadForms']){\r\n    <div class=\"error-container mat-elevation-z2\">\r\n      <div class=\"error-content\">\r\n        <mat-icon class=\"error-icon\" color=\"warn\">error_outline</mat-icon>\r\n        <span class=\"error-message\">{{(selectErrors$ |async)?.['LoadForms']}}</span>\r\n        <button mat-icon-button class=\"refresh-button\" (click)=\"loadForms()\" aria-label=\"Retry\">\r\n          <mat-icon>refresh</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n\r\n  @if (selectLoadingForms$ | async) {\r\n  <div class=\"loading-container\">\r\n\r\n    <span>\r\n      <mat-spinner style=\"    margin: auto;\"></mat-spinner>\r\n      <span style=\"position: relative;text-align: center;\">\r\n        <br>\r\n        Loading forms...\r\n\r\n      </span>\r\n\r\n\r\n\r\n    </span>\r\n\r\n\r\n  </div>\r\n  } @else {\r\n    @if ((selectFormsList$ | async)?.length === 0) {\r\n     <div class=\"empty-container\">\r\n      <img  src=\"https://res.cloudinary.com/glick/image/upload/v1738529610/ngx-t-forms/Blank_canvas-cuate_v7rpe0.svg\" alt=\"\">\r\n      <p  style=\"font-style: italic;\">\r\n        <strong >\r\n          No forms available.\r\n        </strong>\r\n        \r\n            </p>\r\n     </div>\r\n        \r\n     \r\n    \r\n    }\r\n  <mat-nav-list class=\"forms-list\">\r\n \r\n    @for (form of (selectFormsList$ | async) ?? []; track form._id) {\r\n\r\n    <mat-list-item \r\n    \r\n    (click)=\"editForm(form)\"\r\n     [disabled]=\"form.busy\"\r\n      [class.archived]=\"form.archived\"\r\n      [class.mat-elevation-z1]=\"activeForm !== form._id\" \r\n      [class.mat-elevation-z2]=\"activeForm === form._id\"\r\n      (mouseover)=\"activeForm = form._id\"\r\n       (mouseleave)=\"activeForm = null\" \r\n      class=\"form-list-item\">\r\n      @if (form.busy) {\r\n      <mat-spinner style=\"position: absolute;    margin-left: 12px;\" matListItemAvatar [diameter]=\"48\"></mat-spinner>\r\n      }\r\n\r\n      <img [class.error]=\"form.errors.length > 0\" matListItemAvatar [src]=\"getFormAvatar(form.formTitle)\"\r\n        [alt]=\"'form image ' + form.formTitle\">\r\n      <div matListItemTitle class=\"form-item-content\">\r\n        <div class=\"form-title\">{{ form.formTitle | titlecase }}</div>\r\n        <div class=\"form-metadata\">\r\n\r\n          @if(form.errors.length > 0) {\r\n          <span><mat-icon \r\n            [matTooltip]=\"form.errors.length + ' error(s) found in this form'\"\r\n            color=\"warn\">error</mat-icon> <small>{{ form.errors.length}}</small></span>\r\n          <span class=\"metadata-divider\">\u2022</span>\r\n          }\r\n          <span><mat-icon>add_circle_outline</mat-icon> <small>{{ form.createdAt | daysAgo }}</small> </span>\r\n          <span class=\"metadata-divider\">\u2022</span>\r\n          <span><mat-icon>update</mat-icon><small> {{ form.updatedAt | daysAgo }}</small></span>\r\n\r\n\r\n\r\n        </div>\r\n      </div>\r\n      @if (activeForm === form._id) {\r\n      <span class=\"form-actions\" matListItemMeta>\r\n\r\n        @if(!form.archived){\r\n          <button mat-icon-button color=\"warn\" (click)=\"archive(form,$event)\"\r\n          matTooltip=\"Archiving a form will affect all the workflows it is linked to. Make sure to review and update all workflow configurations accordingly.\"\r\n          aria-label=\"Archive form\">\r\n\r\n          <mat-icon>archive</mat-icon>\r\n        </button>\r\n        }@else {\r\n          <button mat-icon-button (click)=\"delete(form,$event)\" color=\"warn\" \r\n          matTooltip=\"Permanently delete a form. This action cannot be undone.\"\r\n          aria-label=\"Restore form\">\r\n          <mat-icon>\r\n            delete_forever\r\n          </mat-icon>\r\n        </button>\r\n          <button mat-icon-button color=\"primary\" (click)=\"unarchive(form,$event)\"\r\n          matTooltip=\"Restore a form will make it available for use in workflows.\"\r\n          aria-label=\"Restore form\">\r\n          <mat-icon>unarchive</mat-icon>\r\n        </button>\r\n        }\r\n       \r\n\r\n      </span>\r\n      }\r\n    </mat-list-item>\r\n    }\r\n  </mat-nav-list>\r\n  }\r\n\r\n</div>", styles: [".app-header{box-shadow:0 2px 4px #0000001f;position:fixed;top:0;z-index:1000}.app-title{margin-left:4px;font-weight:500}.content-container{max-width:1440px;margin:84px auto 0;padding:0 24px}.page-toolbar{background:none;padding:0;height:64px;margin-bottom:24px}.action-button .mat-icon{margin-right:8px}.forms-list{background:none;box-shadow:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(312px,1fr));grid-auto-rows:min-content;gap:12px;padding:16px;width:100%;min-height:calc(100vh - 172px)}.form-list-item{margin:0;border-radius:8px!important;border:solid 1px var(--mat-divider-color, var(--mat-sys-outline))!important;transition:background-color .2s ease;background:var(--mdc-elevated-card-container-color, var(--mat-app-surface-container-low));height:fit-content!important;min-width:280px;max-width:none}.form-item-content{padding:16px 0}.form-title{margin-bottom:0}.form-metadata{color:#0009;font-size:14px;line-height:normal;display:flex}.form-metadata .metadata-divider{margin:0 8px}.form-metadata span{display:inline-flex;gap:4px}.form-metadata span mat-icon{font-size:14px;height:14px;width:14px}.loading-container{display:flex;justify-content:center;align-items:center;padding:48px 0}.flex-spacer{flex:1 1 auto}.active-link{background-color:#0000000d}@media screen and (max-width: 599px){.forms-list{grid-template-columns:1fr;padding:8px}.form-list-item{width:100%;max-width:100%}.content-container{padding:0 16px}}.error{border:solid #f44336 1px}.error-container{background-color:#fef2f2;border-radius:8px;border-left:4px solid #ef4444;padding:16px;margin:16px 0;transition:all .2s ease-in-out;position:relative}.error-container:hover{transform:translateY(-1px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.error-content{display:flex;align-items:center;gap:12px}.error-icon{flex-shrink:0;font-size:24px;height:24px;width:24px}.error-message{flex-grow:1;color:#f44336;font-size:14px;line-height:1.5;margin:0}.refresh-button{flex-shrink:0;color:#f44336;opacity:.8;transition:opacity .2s ease-in-out}.refresh-button:hover{opacity:1;background-color:#991b1b0a}.archived{opacity:.6!important}.archived:hover{opacity:1!important}.empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;max-width:500px;margin:auto;gap:16px;background:#ffffff52;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(8.2px);-webkit-backdrop-filter:blur(8.2px);border:1px solid rgba(255,255,255,.77);aspect-ratio:1;width:350px;height:430px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { 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: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i6$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i6$1.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i6$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i6$1.MatListItemMeta, selector: "[matListItemMeta]" }, { 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: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: DaysAgoPipe, name: "daysAgo" }, { kind: "ngmodule", type: RouterModule }] }); }
+        ], ngImport: i0, template: "<header>\r\n  <mat-toolbar class=\"app-header\" 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    <span class=\"app-title\">Form List</span>\r\n\r\n\r\n    <span class=\"flex-spacer\"></span>\r\n    @for (section of formListSections; track section.value) {\r\n      @if(section.value === (selectFormListSection$|async)){\r\n        <button    mat-flat-button (click)=\"setSection(section.value)\">\r\n          <span>{{section.label}}</span>\r\n        </button>\r\n      }@else {\r\n        <button mat-button (click)=\"setSection(section.value)\" >\r\n          <span>{{section.label}}</span>\r\n        </button>\r\n      }\r\n    }\r\n    <span class=\"flex-spacer\"></span>\r\n   <button mat-raised-button  color=\"accent\" (click)=\"addNewForm()\" class=\"action-button\"\r\n      aria-label=\"Create new form\">\r\n      <mat-icon>add</mat-icon>\r\n      <span>Add Form</span>\r\n    </button>\r\n  </mat-toolbar>\r\n</header>\r\n\r\n<div class=\"content-container\">\r\n\r\n  @if((selectErrors$ |async)?.['LoadForms']){\r\n    <div class=\"error-container mat-elevation-z2\">\r\n      <div class=\"error-content\">\r\n        <mat-icon class=\"error-icon\" color=\"warn\">error_outline</mat-icon>\r\n        <span class=\"error-message\">{{(selectErrors$ |async)?.['LoadForms']}}</span>\r\n        <button mat-icon-button class=\"refresh-button\" (click)=\"loadForms()\" aria-label=\"Retry\">\r\n          <mat-icon>refresh</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n\r\n  @if (selectLoadingForms$ | async) {\r\n  <div class=\"loading-container\">\r\n\r\n    <span>\r\n      <mat-spinner style=\"    margin: auto;\"></mat-spinner>\r\n      <span style=\"position: relative;text-align: center;\">\r\n        <br>\r\n        Loading forms...\r\n\r\n      </span>\r\n\r\n\r\n\r\n    </span>\r\n\r\n\r\n  </div>\r\n  } @else {\r\n    @if ((selectFormsList$ | async)?.length === 0) {\r\n     <div class=\"empty-container\">\r\n      <img  src=\"https://res.cloudinary.com/glick/image/upload/v1738529610/ngx-t-forms/Blank_canvas-cuate_v7rpe0.svg\" alt=\"\">\r\n      <p  style=\"font-style: italic;\">\r\n        <strong >\r\n          No forms available.\r\n        </strong>\r\n        \r\n            </p>\r\n     </div>\r\n        \r\n     \r\n    \r\n    }\r\n  <mat-nav-list class=\"forms-list\">\r\n \r\n    @for (form of (selectFormsList$ | async) ?? []; track form._id) {\r\n\r\n    <mat-list-item \r\n    \r\n    (click)=\"editForm(form)\"\r\n     [disabled]=\"form.busy\"\r\n      [class.archived]=\"form.archived\"\r\n      [class.mat-elevation-z1]=\"activeForm !== form._id\" \r\n      [class.mat-elevation-z2]=\"activeForm === form._id\"\r\n      (mouseover)=\"activeForm = form._id\"\r\n       (mouseleave)=\"activeForm = null\" \r\n      class=\"form-list-item\">\r\n      @if (form.busy) {\r\n      <mat-spinner style=\"position: absolute;    margin-left: 12px;\" matListItemAvatar [diameter]=\"48\"></mat-spinner>\r\n      }\r\n\r\n      <img [class.error]=\"form.errors.length > 0\" matListItemAvatar [src]=\"getFormAvatar(form.formTitle)\"\r\n        [alt]=\"'form image ' + form.formTitle\">\r\n      <div matListItemTitle class=\"form-item-content\">\r\n        <div class=\"form-title\">{{ form.formTitle | titlecase }}</div>\r\n        <div class=\"form-metadata\">\r\n\r\n          @if(form.errors.length > 0) {\r\n          <span><mat-icon \r\n            [matTooltip]=\"form.errors.length + ' error(s) found in this form'\"\r\n            color=\"warn\">error</mat-icon> <small>{{ form.errors.length}}</small></span>\r\n          <span class=\"metadata-divider\">\u2022</span>\r\n          }\r\n          <span><mat-icon>add_circle_outline</mat-icon> <small>{{ form.createdAt | daysAgo }}</small> </span>\r\n          <span class=\"metadata-divider\">\u2022</span>\r\n          <span><mat-icon>update</mat-icon><small> {{ form.updatedAt | daysAgo }}</small></span>\r\n\r\n\r\n\r\n        </div>\r\n      </div>\r\n      @if (activeForm === form._id) {\r\n      <span class=\"form-actions\" matListItemMeta>\r\n\r\n        @if(!form.archived){\r\n          <button mat-icon-button color=\"warn\" (click)=\"archive(form,$event)\"\r\n          matTooltip=\"Archiving a form will affect all the workflows it is linked to. Make sure to review and update all workflow configurations accordingly.\"\r\n          aria-label=\"Archive form\">\r\n\r\n          <mat-icon>archive</mat-icon>\r\n        </button>\r\n        }@else {\r\n          <button mat-icon-button (click)=\"delete(form,$event)\" color=\"warn\" \r\n          matTooltip=\"Permanently delete a form. This action cannot be undone.\"\r\n          aria-label=\"Restore form\">\r\n          <mat-icon>\r\n            delete_forever\r\n          </mat-icon>\r\n        </button>\r\n          <button mat-icon-button color=\"primary\" (click)=\"unarchive(form,$event)\"\r\n          matTooltip=\"Restore a form will make it available for use in workflows.\"\r\n          aria-label=\"Restore form\">\r\n          <mat-icon>unarchive</mat-icon>\r\n        </button>\r\n        }\r\n       \r\n\r\n      </span>\r\n      }\r\n    </mat-list-item>\r\n    }\r\n  </mat-nav-list>\r\n  }\r\n\r\n</div>", styles: [".app-header{box-shadow:0 2px 4px #0000001f;position:fixed;top:0;z-index:1000}.app-title{margin-left:4px;font-weight:500}.content-container{max-width:1440px;margin:84px auto 0;padding:0 24px}.page-toolbar{background:none;padding:0;height:64px;margin-bottom:24px}.action-button .mat-icon{margin-right:8px}.forms-list{background:none;box-shadow:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(312px,1fr));grid-auto-rows:min-content;gap:12px;padding:16px;width:100%;min-height:calc(100vh - 172px)}.form-list-item{margin:0;border-radius:8px!important;border:solid 1px var(--mat-divider-color, var(--mat-sys-outline))!important;transition:background-color .2s ease;background:var(--mdc-elevated-card-container-color, var(--mat-app-surface-container-low));height:fit-content!important;min-width:280px;max-width:none}.form-item-content{padding:16px 0}.form-title{margin-bottom:0}.form-metadata{color:#0009;font-size:14px;line-height:normal;display:flex}.form-metadata .metadata-divider{margin:0 8px}.form-metadata span{display:inline-flex;gap:4px}.form-metadata span mat-icon{font-size:14px;height:14px;width:14px}.loading-container{display:flex;justify-content:center;align-items:center;padding:48px 0}.flex-spacer{flex:1 1 auto}.active-link{background-color:#0000000d}@media screen and (max-width: 599px){.forms-list{grid-template-columns:1fr;padding:8px}.form-list-item{width:100%;max-width:100%}.content-container{padding:0 16px}}.error{border:solid #f44336 1px}.error-container{background-color:#fef2f2;border-radius:8px;border-left:4px solid #ef4444;padding:16px;margin:16px 0;transition:all .2s ease-in-out;position:relative}.error-container:hover{transform:translateY(-1px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.error-content{display:flex;align-items:center;gap:12px}.error-icon{flex-shrink:0;font-size:24px;height:24px;width:24px}.error-message{flex-grow:1;color:#f44336;font-size:14px;line-height:1.5;margin:0}.refresh-button{flex-shrink:0;color:#f44336;opacity:.8;transition:opacity .2s ease-in-out}.refresh-button:hover{opacity:1;background-color:#991b1b0a}.archived{opacity:.6!important}.archived:hover{opacity:1!important}.empty-container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;max-width:500px;margin:auto;gap:16px;background:#ffffff52;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(8.2px);-webkit-backdrop-filter:blur(8.2px);border:1px solid rgba(255,255,255,.77);aspect-ratio:1;width:350px;height:430px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }, { 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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i6.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i6.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i6.MatListItemMeta, selector: "[matListItemMeta]" }, { 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: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: DaysAgoPipe, name: "daysAgo" }, { kind: "ngmodule", type: RouterModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FormsComponent, decorators: [{
             type: Component,
@@ -5751,7 +5753,6 @@ class TDynamicDataEditComponent {
     }
     set formInputs(inputs) {
         this._formInputs = inputs;
-        console.error('In Dynamic Data Edit', inputs);
     }
     get formInputs() {
         return this._formInputs;
@@ -5885,9 +5886,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\" [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-Cj7fqo70.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-BuVzRUkY.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-CDraedkm.mjs').then(m => m.RestApiCallSetupComponent), import('./ngx-t-forms-api-value-access-rules.component-DADGz7pX.mjs').then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-QsOGfmug.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-CmSkYW71.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-BkkHK5vI.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-DPD3QcOu.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-AhbjCCQv.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-9K8e2gqm.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-C1zx7OZB.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-CbYV5fCZ.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-C9Hd21i1.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-CHnQQdI8.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-BOlk7nkl.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-Bc-qTS2m.mjs').then(m => m.DocumentListLabelConfigEditorComponent)]] }); }
+    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\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 [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [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 ||[]\"\r\n            [errors]=\"(validationErrors)||[]\" [value]=\"(vm.value) || []\" (change)=\"valueChanged($event)\">\r\n        </lib-form-input-selector>\r\n        }\r\n\r\n        @case (\r\n        elementEditorTypes.RequiredInputs\r\n        ){\r\n\r\n        <app-required-inputs [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n        </app-required-inputs>\r\n        }\r\n\r\n        @case(elementEditorTypes.CalculatedFieldRules){\r\n\r\n        <app-calculated-field-rules [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\"\r\n            [mapToData]=\"vm.dataOptions\"></app-calculated-field-rules>\r\n        }\r\n\r\n        @case(elementEditorTypes.Validators){\r\n\r\n        <app-validators-config [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\"\r\n            [mapToData]=\"vm.dataOptions\">\r\n        </app-validators-config>\r\n\r\n        }\r\n        @case(elementEditorTypes.ConfigMscoaSegments){\r\n\r\n        <app-mscoa-segment-config [disabled]=\"(vm.disabled)||false\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [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 [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 [disabled]=\"(vm.disabled)||false\" (valueChange)=\"valueChanged($event)\"\r\n            [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n\r\n        </lib-chip-options-creator-editor>\r\n\r\n        }\r\n        @case (elementEditorTypes.DataSourcePicker) {\r\n        <lib-data-source-picker [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm.  editorConfigValue\"\r\n            (valueChange)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\">\r\n        </lib-data-source-picker>\r\n        }\r\n        @case (elementEditorTypes.ListLabelConfigEditor) {\r\n        <lib-document-list-label-config-editor [disabled]=\"(vm.disabled)||false\" [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        @case(\r\n        elementEditorTypes.WorkflowPicker\r\n        ){\r\n        <lib-t-workflow-picker [disabled]=\"(vm.disabled)||false\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n            (valueChanged)=\"valueChanged($event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n            [value]=\"(vm.value)\"></lib-t-workflow-picker>\r\n        }\r\n        }\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-BZFa1mmi.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-DdTRH1a0.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-BqiD8UGC.mjs').then(m => m.RestApiCallSetupComponent), import('./ngx-t-forms-api-value-access-rules.component-Drlk8YPy.mjs').then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-DDHYfkyu.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-CLs9AZ8p.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-Byim7p5A.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-BkzKKK07.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-D9iDMGP4.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-T764zgZ1.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-DqCaJoe6.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-DfTrKkE_.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-CK-W-ltG.mjs').then(m => m.MatChipListEditorComponent), i3.MatOption, i2.MatIconButton, i5.MatIcon, i3$1.MatFormField, i3$1.MatLabel, i3$1.MatError, i3$1.MatSuffix, i3$1.MatSelect, i4.MatTooltip, i12.MatInput, import('./ngx-t-forms-chip-options-creator-editor.component-DJdo617E.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-baq9XVW_.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-O0z6NtqG.mjs').then(m => m.DocumentListLabelConfigEditorComponent), import('./ngx-t-forms-t-workflow-picker.component-DQA2XovD.mjs').then(m => m.TWorkflowPickerComponent)]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: TDynamicDataEditComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-selection-options-editor.component-Cj7fqo70.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-BuVzRUkY.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-CDraedkm.mjs').then(m => m.RestApiCallSetupComponent), import('./ngx-t-forms-api-value-access-rules.component-DADGz7pX.mjs').then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-QsOGfmug.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-CmSkYW71.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-BkkHK5vI.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-DPD3QcOu.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-AhbjCCQv.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-9K8e2gqm.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-C1zx7OZB.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-CbYV5fCZ.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-C9Hd21i1.mjs').then(m => m.MatChipListEditorComponent), import('./ngx-t-forms-chip-options-creator-editor.component-CHnQQdI8.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-BOlk7nkl.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-Bc-qTS2m.mjs').then(m => m.DocumentListLabelConfigEditorComponent)], resolveMetadata: (SelectionOptionsEditorComponent, FormInputSelectorComponent, RestApiCallSetupComponent, ApiValueAccessRulesComponent, RequiredInputsComponent, PipelineGeneratorComponent, CalculatedFieldRulesComponent, ValidatorsConfigComponent, ConfigMscoaAdditionalInputsComponent, MatSliderEditorComponent, MscoaSegmentConfigComponent, MatSliderToggleEditorComponent, MatChipListEditorComponent, ChipOptionsCreatorEditorComponent, DataSourcePickerComponent, DocumentListLabelConfigEditorComponent) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: TDynamicDataEditComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-selection-options-editor.component-BZFa1mmi.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-DdTRH1a0.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-BqiD8UGC.mjs').then(m => m.RestApiCallSetupComponent), import('./ngx-t-forms-api-value-access-rules.component-Drlk8YPy.mjs').then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-DDHYfkyu.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-CLs9AZ8p.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-Byim7p5A.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-BkzKKK07.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-D9iDMGP4.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-T764zgZ1.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-DqCaJoe6.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-DfTrKkE_.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-CK-W-ltG.mjs').then(m => m.MatChipListEditorComponent), import('./ngx-t-forms-chip-options-creator-editor.component-DJdo617E.mjs').then(m => m.ChipOptionsCreatorEditorComponent), import('./ngx-t-forms-data-source-picker.component-baq9XVW_.mjs').then(m => m.DataSourcePickerComponent), import('./ngx-t-forms-document-list-label-config-editor.component-O0z6NtqG.mjs').then(m => m.DocumentListLabelConfigEditorComponent), import('./ngx-t-forms-t-workflow-picker.component-DQA2XovD.mjs').then(m => m.TWorkflowPickerComponent)], resolveMetadata: (SelectionOptionsEditorComponent, FormInputSelectorComponent, RestApiCallSetupComponent, ApiValueAccessRulesComponent, RequiredInputsComponent, PipelineGeneratorComponent, CalculatedFieldRulesComponent, ValidatorsConfigComponent, ConfigMscoaAdditionalInputsComponent, MatSliderEditorComponent, MscoaSegmentConfigComponent, MatSliderToggleEditorComponent, MatChipListEditorComponent, ChipOptionsCreatorEditorComponent, DataSourcePickerComponent, DocumentListLabelConfigEditorComponent, TWorkflowPickerComponent) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'lib-t-dynamic-data-edit', standalone: true, imports: [CommonModule,
                             SelectionOptionsEditorComponent,
@@ -5906,8 +5907,9 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ng
                             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"] }]
+                            DocumentListLabelConfigEditorComponent,
+                            TWorkflowPickerComponent
+                        ], 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\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 [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [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 ||[]\"\r\n            [errors]=\"(validationErrors)||[]\" [value]=\"(vm.value) || []\" (change)=\"valueChanged($event)\">\r\n        </lib-form-input-selector>\r\n        }\r\n\r\n        @case (\r\n        elementEditorTypes.RequiredInputs\r\n        ){\r\n\r\n        <app-required-inputs [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n        </app-required-inputs>\r\n        }\r\n\r\n        @case(elementEditorTypes.CalculatedFieldRules){\r\n\r\n        <app-calculated-field-rules [formInputs]=\"formInputs ||[]\" [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\"\r\n            [mapToData]=\"vm.dataOptions\"></app-calculated-field-rules>\r\n        }\r\n\r\n        @case(elementEditorTypes.Validators){\r\n\r\n        <app-validators-config [disabled]=\"(vm.disabled)||false\"\r\n            [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\"\r\n            [mapToData]=\"vm.dataOptions\">\r\n        </app-validators-config>\r\n\r\n        }\r\n        @case(elementEditorTypes.ConfigMscoaSegments){\r\n\r\n        <app-mscoa-segment-config [disabled]=\"(vm.disabled)||false\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\" [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 [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 [disabled]=\"(vm.disabled)||false\" (valueChange)=\"valueChanged($event)\"\r\n            [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\">\r\n\r\n        </lib-chip-options-creator-editor>\r\n\r\n        }\r\n        @case (elementEditorTypes.DataSourcePicker) {\r\n        <lib-data-source-picker [disabled]=\"(vm.disabled)||false\" [editorConfig]=\"vm.  editorConfigValue\"\r\n            (valueChange)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\" [value]=\"(vm.value)\"\r\n            [errors]=\"(validationErrors)||[]\">\r\n        </lib-data-source-picker>\r\n        }\r\n        @case (elementEditorTypes.ListLabelConfigEditor) {\r\n        <lib-document-list-label-config-editor [disabled]=\"(vm.disabled)||false\" [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        @case(\r\n        elementEditorTypes.WorkflowPicker\r\n        ){\r\n        <lib-t-workflow-picker [disabled]=\"(vm.disabled)||false\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n            (valueChanged)=\"valueChanged($event)\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n            [value]=\"(vm.value)\"></lib-t-workflow-picker>\r\n        }\r\n        }\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: [{
@@ -6212,7 +6214,7 @@ class TDynamicDataViewComponent {
         return 'black';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TDynamicDataViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TDynamicDataViewComponent, isStandalone: true, selector: "lib-t-dynamic-data-view", inputs: { data: "data" }, usesOnChanges: true, ngImport: i0, template: "<mat-tree [dataSource]=\"treeClass.dataSource\" [treeControl]=\"treeClass.treeControl\">\r\n    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding>\r\n      <button disabled style=\"padding: 0px;    \r\n      width: 24px;\" mat-icon-button>\r\n\r\n      </button>\r\n      <div style=\"display: flex;align-items: center;\">\r\n        <span class=\"node-key\">{{ node.key }}</span>\r\n        <span>\r\n          :\r\n        </span>\r\n        <span \r\n        style=\"    white-space: nowrap;\"\r\n        [style.color]=\"getNodeValueColor(node.value)\"\r\n        class=\"node-value\" >\r\n          {{ node.value }}\r\n        </span>\r\n      </div>\r\n     \r\n    </mat-tree-node>\r\n\r\n    <mat-tree-node *matTreeNodeDef=\"let node; when: treeClass.hasChild\" matTreeNodePadding>\r\n      <button style=\"padding: 0px;    \r\n  width: 24px;\" mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.key\">\r\n        <mat-icon>\r\n          {{ treeClass.treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n        </mat-icon>\r\n      </button>\r\n      <span class=\"node-key\"> <strong>{{ node.key }}</strong></span>\r\n  \r\n    </mat-tree-node>\r\n  </mat-tree>", styles: ["mat-tree-node{min-height:28px!important;height:32px!important}mat-tree{background:none}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { 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: "directive", type: i3$3.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3$3.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i3$3.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: TDynamicDataViewComponent, isStandalone: true, selector: "lib-t-dynamic-data-view", inputs: { data: "data" }, usesOnChanges: true, ngImport: i0, template: "<mat-tree [dataSource]=\"treeClass.dataSource\" [treeControl]=\"treeClass.treeControl\">\r\n    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding>\r\n      <button disabled style=\"padding: 0px;    \r\n      width: 24px;\" mat-icon-button>\r\n\r\n      </button>\r\n      <div style=\"display: flex;align-items: center;\">\r\n        <span class=\"node-key\">{{ node.key }}</span>\r\n        <span>\r\n          :\r\n        </span>\r\n        <span \r\n        style=\"    white-space: nowrap;\"\r\n        [style.color]=\"getNodeValueColor(node.value)\"\r\n        class=\"node-value\" >\r\n          {{ node.value }}\r\n        </span>\r\n      </div>\r\n     \r\n    </mat-tree-node>\r\n\r\n    <mat-tree-node *matTreeNodeDef=\"let node; when: treeClass.hasChild\" matTreeNodePadding>\r\n      <button style=\"padding: 0px;    \r\n  width: 24px;\" mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.key\">\r\n        <mat-icon>\r\n          {{ treeClass.treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\r\n        </mat-icon>\r\n      </button>\r\n      <span class=\"node-key\"> <strong>{{ node.key }}</strong></span>\r\n  \r\n    </mat-tree-node>\r\n  </mat-tree>", styles: ["mat-tree-node{min-height:28px!important;height:32px!important}mat-tree{background:none}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$3.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3$3.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i3$3.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TDynamicDataViewComponent, decorators: [{
             type: Component,
@@ -6252,7 +6254,7 @@ class TFormInputStatusComponent {
         return Boolean(this.inputConfig?.readonly || false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TFormInputStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: TFormInputStatusComponent, isStandalone: true, selector: "lib-t-form-input-status", inputs: { inputConfig: "inputConfig" }, ngImport: i0, template: "\r\n\r\n  <mat-icon color=\"primary\" \r\n  matTooltip=\"recently updated\"\r\n  *ngIf=\"!busy && recentlyUpdated()\">update\r\n  </mat-icon>\r\n  @if (isReadOnly) {\r\n    <mat-icon \r\n    style=\"opacity:0.5;\" \r\n    matTooltip=\"Read only\"\r\n    >\r\n      edit_off\r\n    </mat-icon>\r\n  }\r\n  \r\n    @if(busy === true) { \r\n      <mat-spinner\r\n      [matTooltip]=\"busyMessage\"  \r\n      [diameter]=\"12\"\r\n      style=\"display: inline-block;\" > \r\n      </mat-spinner>\r\n     \r\n    }\r\n\r\n\r\n", styles: [".spinner{display:inline-block;position:absolute;height:10px!important;width:10px!important;--mdc-circular-progress-size: 10px;--mdc-circular-progress-active-indicator-width: 10px}\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: 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: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: TFormInputStatusComponent, isStandalone: true, selector: "lib-t-form-input-status", inputs: { inputConfig: "inputConfig" }, ngImport: i0, template: "\r\n\r\n  <mat-icon color=\"primary\" \r\n  matTooltip=\"recently updated\"\r\n  *ngIf=\"!busy && recentlyUpdated()\">update\r\n  </mat-icon>\r\n  @if (isReadOnly) {\r\n    <mat-icon \r\n    style=\"opacity:0.5;\" \r\n    matTooltip=\"Read only\"\r\n    >\r\n      edit_off\r\n    </mat-icon>\r\n  }\r\n  \r\n    @if(busy === true) { \r\n      <mat-spinner\r\n      [matTooltip]=\"busyMessage\"  \r\n      [diameter]=\"12\"\r\n      style=\"display: inline-block;\" > \r\n      </mat-spinner>\r\n     \r\n    }\r\n\r\n\r\n", styles: [".spinner{display:inline-block;position:absolute;height:10px!important;width:10px!important;--mdc-circular-progress-size: 10px;--mdc-circular-progress-active-indicator-width: 10px}\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: i5.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: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TFormInputStatusComponent, decorators: [{
             type: Component,
@@ -6423,20 +6425,13 @@ const initialMscoaState = {
 class MscoaComponentStore extends ComponentStore {
     constructor() {
         super(initialMscoaState);
+        //Add a resetStore method to allow resetting the store to its initial state.
         // Selectors
         this.selectors = mscoaStoreSelectors(this);
         // Updaters
         this.actions = mscoaStoreActions(this);
         // Effects
         this.effects = mscoaStoreEffects(this);
-        // if environment is development, setup dev tools
-        this.setupDevTools();
-    }
-    //Add a resetStore method to allow resetting the store to its initial state.
-    setupDevTools() {
-        this.state$.subscribe(state => {
-            console.log('MscoaComponentStore state:', state);
-        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MscoaComponentStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: MscoaComponentStore, providedIn: 'root' }); }
@@ -6663,11 +6658,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$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5.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: [{
@@ -6772,7 +6767,7 @@ class ScoaAccountTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScoaAccountTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: ScoaAccountTableComponent, isStandalone: true, selector: "app-scoa-account-table", inputs: { data: "data", selectedAccount: "selectedAccount", segment: "segment" }, outputs: { accountSelected: "accountSelected" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div >\r\n    <mat-toolbar class=\"search\">\r\n        <mat-form-field>\r\n            <mat-label>Search Accounts</mat-label>\r\n            <input matInput [formControl]=\"searchControl\" placeholder=\"Enter SCOA ID, Account Number, or Description\">\r\n            @if (  !!this.searchControl.value) {\r\n                <button matSuffix mat-icon-button (click)=\"clearSearch()\">\r\n                    <mat-icon>\r\n                        close\r\n                    </mat-icon>\r\n                </button>\r\n            }\r\n        </mat-form-field>\r\n\r\n  \r\n        <span class=\"spacer\"></span>\r\n        <button mat-flat-button [matMenuTriggerFor]=\"menu\">\r\n            <mat-icon>\r\n                view_column\r\n            </mat-icon>\r\n            Columns\r\n\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n            <div style=\"                padding-left: 16px;\r\n    margin-top: 8px;\" mat-subheader>Account list headers</div>\r\n            <br>\r\n\r\n            <section style=\"padding-left: 16px; padding-right:16px\">\r\n                <button style=\"width: 100%;\" (click)=\"toogleDetails()\" class=\"cols\" color=\"primary\" mat-flat-button>\r\n                    {{showMinMal ? 'show all details' : 'Show less details'}}\r\n                </button>\r\n            </section>\r\n            <p style=\"\r\n            padding-left: 16px;\r\n            padding-right:16px;\r\n            \r\n            font-size:14px\">Only selected headers will be shown.</p>\r\n            @for (col of scoaAccountColumns; track $index) {\r\n            <button (click)=\"$event.stopPropagation()\" class=\"cols\" mat-menu-item>\r\n\r\n                <mat-checkbox [checked]=\"colIsChecked(col.key)\" (change)=\"colDisplayChanged($event,col.key)\"\r\n                    class=\"cols\">\r\n                    {{col.label}}</mat-checkbox>\r\n            </button>\r\n            }\r\n        </mat-menu>\r\n    </mat-toolbar>\r\n\r\n    @if (dataSource.filteredData.length === 0) {\r\n    <div class=\"no-results\">\r\n        No accounts match your search criteria.\r\n    </div>\r\n    }@else {\r\n\r\n    <table mat-table [dataSource]=\"dataSource||[]\" matSort>\r\n        <ng-container *ngFor=\"let column of scoaAccountColumns\" [matColumnDef]=\"column.key\">\r\n            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.label }}</th>\r\n            <td mat-cell *matCellDef=\"let element\">{{ element[column.key] }}</td>\r\n        </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayColumns;\" class=\"account-row\" (click)=\"selectAccount(row)\"\r\n            [class.deactivated-row]=\"rowIsActivated(row) === false\" [class.selected-row]=\"selectedAccount === row\"></tr>\r\n    </table>\r\n    <mat-paginator [pageSizeOptions]=\"[5, 10, 20]\" showFirstLastButtons></mat-paginator>\r\n\r\n    }\r\n</div>", styles: [".search-container{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem}.mat-form-field{flex-grow:1;margin-right:1rem}.selected-row{background-color:#243d91!important;color:#fff}.no-results{text-align:center;padding:2rem;color:#0000008a}.no-results mat-icon{font-size:3rem;height:3rem;width:3rem;margin-bottom:1rem}.selected-account{margin-top:1rem}.cols{font-size:14px;min-height:28px}.account-row{cursor:pointer}.deactivated-row{opacity:.6;cursor:not-allowed!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$1.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { 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.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$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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 }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: ScoaAccountTableComponent, isStandalone: true, selector: "app-scoa-account-table", inputs: { data: "data", selectedAccount: "selectedAccount", segment: "segment" }, outputs: { accountSelected: "accountSelected" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div >\r\n    <mat-toolbar class=\"search\">\r\n        <mat-form-field>\r\n            <mat-label>Search Accounts</mat-label>\r\n            <input matInput [formControl]=\"searchControl\" placeholder=\"Enter SCOA ID, Account Number, or Description\">\r\n            @if (  !!this.searchControl.value) {\r\n                <button matSuffix mat-icon-button (click)=\"clearSearch()\">\r\n                    <mat-icon>\r\n                        close\r\n                    </mat-icon>\r\n                </button>\r\n            }\r\n        </mat-form-field>\r\n\r\n  \r\n        <span class=\"spacer\"></span>\r\n        <button mat-flat-button [matMenuTriggerFor]=\"menu\">\r\n            <mat-icon>\r\n                view_column\r\n            </mat-icon>\r\n            Columns\r\n\r\n        </button>\r\n        <mat-menu #menu=\"matMenu\">\r\n            <div style=\"                padding-left: 16px;\r\n    margin-top: 8px;\" mat-subheader>Account list headers</div>\r\n            <br>\r\n\r\n            <section style=\"padding-left: 16px; padding-right:16px\">\r\n                <button style=\"width: 100%;\" (click)=\"toogleDetails()\" class=\"cols\" color=\"primary\" mat-flat-button>\r\n                    {{showMinMal ? 'show all details' : 'Show less details'}}\r\n                </button>\r\n            </section>\r\n            <p style=\"\r\n            padding-left: 16px;\r\n            padding-right:16px;\r\n            \r\n            font-size:14px\">Only selected headers will be shown.</p>\r\n            @for (col of scoaAccountColumns; track $index) {\r\n            <button (click)=\"$event.stopPropagation()\" class=\"cols\" mat-menu-item>\r\n\r\n                <mat-checkbox [checked]=\"colIsChecked(col.key)\" (change)=\"colDisplayChanged($event,col.key)\"\r\n                    class=\"cols\">\r\n                    {{col.label}}</mat-checkbox>\r\n            </button>\r\n            }\r\n        </mat-menu>\r\n    </mat-toolbar>\r\n\r\n    @if (dataSource.filteredData.length === 0) {\r\n    <div class=\"no-results\">\r\n        No accounts match your search criteria.\r\n    </div>\r\n    }@else {\r\n\r\n    <table mat-table [dataSource]=\"dataSource||[]\" matSort>\r\n        <ng-container *ngFor=\"let column of scoaAccountColumns\" [matColumnDef]=\"column.key\">\r\n            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.label }}</th>\r\n            <td mat-cell *matCellDef=\"let element\">{{ element[column.key] }}</td>\r\n        </ng-container>\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayColumns;\" class=\"account-row\" (click)=\"selectAccount(row)\"\r\n            [class.deactivated-row]=\"rowIsActivated(row) === false\" [class.selected-row]=\"selectedAccount === row\"></tr>\r\n    </table>\r\n    <mat-paginator [pageSizeOptions]=\"[5, 10, 20]\" showFirstLastButtons></mat-paginator>\r\n\r\n    }\r\n</div>", styles: [".search-container{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem}.mat-form-field{flex-grow:1;margin-right:1rem}.selected-row{background-color:#243d91!important;color:#fff}.no-results{text-align:center;padding:2rem;color:#0000008a}.no-results mat-icon{font-size:3rem;height:3rem;width:3rem;margin-bottom:1rem}.selected-account{margin-top:1rem}.cols{font-size:14px;min-height:28px}.account-row{cursor:pointer}.deactivated-row{opacity:.6;cursor:not-allowed!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i6$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.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$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i9$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { 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 }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScoaAccountTableComponent, decorators: [{
             type: Component,
@@ -6942,7 +6937,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: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5.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.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i8.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,
@@ -6950,7 +6945,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 }] });
 
 ;
@@ -7011,7 +7006,6 @@ class MscoaChartComponent {
         }
         // Generate form group
         try {
-            console.error('Generated form:', this.formGroup);
             // Dynamically import the component
             Promise.resolve().then(function () { return tFormInput_component; }).then(module => {
                 // Filter and create portals for each input
@@ -7289,6 +7283,9 @@ class MscoaChartComponent {
         this.formBuilderFunctions?.editInput(input);
     }
     selectionDisabled(row, col) {
+        if (this.inputConfig?.readonly || row['readOnly']) {
+            return true;
+        }
         const isVatCol = col === 'vatCredit' || col === 'vatDebit';
         // Case 1: Credit column with singleSelect enabled
         if (row['singleSelect'] && col === 'credit' && !isVatCol) {
@@ -7311,11 +7308,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: "\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-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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.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$1.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: i4.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, i5.MatIcon, i6$1.MatMenuTrigger, i10.MatTable, i10.MatHeaderCellDef, i10.MatHeaderRowDef, i10.MatColumnDef, i10.MatCellDef, i10.MatRowDef, i10.MatHeaderCell, i10.MatCell, i10.MatHeaderRow, i10.MatRow, i4.MatTooltip, i9$2.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: "\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-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: [{
@@ -7704,12 +7701,14 @@ function getInputErrorMessage(inputConfig, formGroup) {
 class MscoaFormInputComponent {
     constructor() {
         this.editorMode = false;
+        this.canReload = false;
+        this.reload = new EventEmitter();
     }
     get errorMessage() {
         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 \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", canReload: "canReload" }, outputs: { reload: "reload" }, 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: i5.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,
@@ -7728,6 +7727,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], formBuilderFunctions: [{
                 type: Input
+            }], canReload: [{
+                type: Input
+            }], reload: [{
+                type: Output
             }] } });
 
 const SignatureConfigOptions = {
@@ -8063,7 +8066,7 @@ class SignaturePadInputComponent extends BaseCustomInput {
                 provide: MatFormFieldControl,
                 useExisting: SignaturePadInputComponent
             }
-        ], viewQueries: [{ propertyName: "signatureElement", first: true, predicate: ["signature"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [style.opacity]=\"canApplySignature?'0.1':'1'\" #signature class=\"signature-container\">\r\n  \r\n   \r\n</div>\r\n@if (canSaveSignature) {\r\n\r\n<mat-toolbar>\r\n\r\n    <button style=\"    width: 100%;\" \r\n    matTooltip=\"You can save this signature for quick use in future documents\" \r\n    mat-flat-button\r\n    color=\"accent\"\r\n        (click)=\"saveUserSignature()\">\r\n        <mat-icon>save</mat-icon>\r\n        Save for future use\r\n    </button>\r\n</mat-toolbar>\r\n}\r\n@if (canApplySignature) {\r\n\r\n    <mat-card appearance=\"outlined\" class=\"signature-card\">\r\n      <mat-card-header>\r\n        <img \r\n            class=\"userAvatar\"\r\n          mat-card-avatar \r\n          [src]=\"getUserUrl()\" \r\n          [attr.aria-label]=\"'Profile picture of ' + userStoredSignature?.userName\"\r\n          >\r\n        \r\n        \r\n        <mat-card-title class=\"existingTitle\">Found an existing signature</mat-card-title>\r\n        \r\n        <mat-card-subtitle class=\"signature-metadata\">\r\n          <span class=\"metadata-item\">\r\n            <mat-icon aria-hidden=\"true\">person</mat-icon>\r\n            <span class=\"metadata-text\">{{userStoredSignature?.userName}}</span>\r\n          </span>\r\n          \r\n          <span class=\"metadata-item\">\r\n            <mat-icon aria-hidden=\"true\">calendar_month</mat-icon>\r\n            <span class=\"metadata-text\">{{userStoredSignature?.signatureDate | date: 'mediumDate'}}</span>\r\n          </span>\r\n        </mat-card-subtitle>\r\n      </mat-card-header>\r\n  \r\n      <mat-card-content>\r\n        <p class=\"signature-description\">\r\n          You can apply your saved signature or clear to draw a new one\r\n        </p>\r\n      </mat-card-content>\r\n  \r\n      <mat-card-actions align=\"end\">\r\n        <button \r\n          mat-flat-button\r\n          color=\"primary\" \r\n          class=\"apply-signature-btn\"\r\n          (click)=\"saveSignature()\"\r\n          [matTooltip]=\"'Apply your saved signature from ' + (userStoredSignature?.signatureDate | date: 'mediumDate')\">\r\n          <mat-icon>done</mat-icon>\r\n          <span>Apply Existing Signature</span>\r\n        </button>\r\n      </mat-card-actions>\r\n    </mat-card>\r\n  }\r\n<mat-toolbar style=\"max-width: 100%; overflow:auto\">\r\n    <span>\r\n        <div style=\"font-size:14px;line-height:normal;font-weight:500\">\r\n            Signature:\r\n        </div>\r\n        <div style=\"font-size:12px;font-weight:400;line-height:1.5\">\r\n            Secured and Encrypted.\r\n        </div>\r\n\r\n    </span>\r\n    <span class=\"spacer\"></span>\r\n\r\n@if(!inputConfig.readonly){\r\n  <button mat-stroked-button color=\"warn\" (click)=\"clearSignature()\">\r\n    Clear\r\n\r\n</button>\r\n}\r\n\r\n</mat-toolbar>\r\n@if(loading){\r\n<div class=\"signature-pad-container\">\r\n    <mat-spinner diameter=\"50\">\r\n    </mat-spinner>\r\n    <span>\r\n        {{loading}}\r\n    </span>\r\n\r\n</div>\r\n}", styles: [".signature-container{border:solid 1px var(--mat-divider-color, var(--mat-app-outline))}.signature-container canvas{width:100%;height:200px}.signature-container .controls{padding:10px;text-align:center}.signature-pad-container{position:absolute;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background:#3f51b51a;gap:12px;top:0}.userAvatar{height:50px;width:50px}.existingTitle{font-size:14px}.metadata-item{display:flex;align-items:center;gap:8px}.metadata-item mat-icon{font-size:12px;height:12px;width:12px}.metadata-item .metadata-text,.signature-description{font-size:12px}.apply-signature-btn{width:100%}.signature-metadata{margin-top:4px}.canApply{position:absolute}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.DatePipe, name: "date" }, { 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: 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.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { 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: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "signatureElement", first: true, predicate: ["signature"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [style.opacity]=\"canApplySignature?'0.1':'1'\" #signature class=\"signature-container\">\r\n  \r\n   \r\n</div>\r\n@if (canSaveSignature) {\r\n\r\n<mat-toolbar>\r\n\r\n    <button style=\"    width: 100%;\" \r\n    matTooltip=\"You can save this signature for quick use in future documents\" \r\n    mat-flat-button\r\n    color=\"accent\"\r\n        (click)=\"saveUserSignature()\">\r\n        <mat-icon>save</mat-icon>\r\n        Save for future use\r\n    </button>\r\n</mat-toolbar>\r\n}\r\n@if (canApplySignature) {\r\n\r\n    <mat-card appearance=\"outlined\" class=\"signature-card\">\r\n      <mat-card-header>\r\n        <img \r\n            class=\"userAvatar\"\r\n          mat-card-avatar \r\n          [src]=\"getUserUrl()\" \r\n          [attr.aria-label]=\"'Profile picture of ' + userStoredSignature?.userName\"\r\n          >\r\n        \r\n        \r\n        <mat-card-title class=\"existingTitle\">Found an existing signature</mat-card-title>\r\n        \r\n        <mat-card-subtitle class=\"signature-metadata\">\r\n          <span class=\"metadata-item\">\r\n            <mat-icon aria-hidden=\"true\">person</mat-icon>\r\n            <span class=\"metadata-text\">{{userStoredSignature?.userName}}</span>\r\n          </span>\r\n          \r\n          <span class=\"metadata-item\">\r\n            <mat-icon aria-hidden=\"true\">calendar_month</mat-icon>\r\n            <span class=\"metadata-text\">{{userStoredSignature?.signatureDate | date: 'mediumDate'}}</span>\r\n          </span>\r\n        </mat-card-subtitle>\r\n      </mat-card-header>\r\n  \r\n      <mat-card-content>\r\n        <p class=\"signature-description\">\r\n          You can apply your saved signature or clear to draw a new one\r\n        </p>\r\n      </mat-card-content>\r\n  \r\n      <mat-card-actions align=\"end\">\r\n        <button \r\n          mat-flat-button\r\n          color=\"primary\" \r\n          class=\"apply-signature-btn\"\r\n          (click)=\"saveSignature()\"\r\n          [matTooltip]=\"'Apply your saved signature from ' + (userStoredSignature?.signatureDate | date: 'mediumDate')\">\r\n          <mat-icon>done</mat-icon>\r\n          <span>Apply Existing Signature</span>\r\n        </button>\r\n      </mat-card-actions>\r\n    </mat-card>\r\n  }\r\n<mat-toolbar style=\"max-width: 100%; overflow:auto\">\r\n    <span>\r\n        <div style=\"font-size:14px;line-height:normal;font-weight:500\">\r\n            Signature:\r\n        </div>\r\n        <div style=\"font-size:12px;font-weight:400;line-height:1.5\">\r\n            Secured and Encrypted.\r\n        </div>\r\n\r\n    </span>\r\n    <span class=\"spacer\"></span>\r\n\r\n@if(!inputConfig.readonly){\r\n  <button mat-stroked-button color=\"warn\" (click)=\"clearSignature()\">\r\n    Clear\r\n\r\n</button>\r\n}\r\n\r\n</mat-toolbar>\r\n@if(loading){\r\n<div class=\"signature-pad-container\">\r\n    <mat-spinner diameter=\"50\">\r\n    </mat-spinner>\r\n    <span>\r\n        {{loading}}\r\n    </span>\r\n\r\n</div>\r\n}", styles: [".signature-container{border:solid 1px var(--mat-divider-color, var(--mat-app-outline))}.signature-container canvas{width:100%;height:200px}.signature-container .controls{padding:10px;text-align:center}.signature-pad-container{position:absolute;display:flex;width:100%;height:100%;justify-content:center;align-items:center;background:#3f51b51a;gap:12px;top:0}.userAvatar{height:50px;width:50px}.existingTitle{font-size:14px}.metadata-item{display:flex;align-items:center;gap:8px}.metadata-item mat-icon{font-size:12px;height:12px;width:12px}.metadata-item .metadata-text,.signature-description{font-size:12px}.apply-signature-btn{width:100%}.signature-metadata{margin-top:4px}.canApply{position:absolute}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.DatePipe, name: "date" }, { 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: 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.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i5.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: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SignaturePadInputComponent, decorators: [{
             type: Component,
@@ -8085,11 +8088,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }] } });
 
 class SignatureInputElementComponent {
+    constructor() {
+        this.canReload = false;
+        this.reload = new EventEmitter();
+    }
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SignatureInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SignatureInputElementComponent, isStandalone: true, selector: "lib-signature-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n    <mat-form-field \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 [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n        </mat-label>\r\n        <lib-signature-pad-input  [inputConfig]=\"this.inputConfig\"\r\n        [required]=\"this.inputConfig.required\"\r\n        [formControlName]=\"inputConfig.id\"></lib-signature-pad-input>\r\n        <!-- <app-signature-input  [inputConfig]=\"this.inputConfig\"\r\n            [formControlName]=\"inputConfig.id\"></app-signature-input>\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\r\n    </mat-form-field>\r\n</form>", styles: ["mat-form-field{width:100%}\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: SignaturePadInputComponent, selector: "lib-signature-pad-input", inputs: ["inputConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SignatureInputElementComponent, isStandalone: true, selector: "lib-signature-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", canReload: "canReload" }, outputs: { reload: "reload" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n    <mat-form-field \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 [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n        </mat-label>\r\n        <lib-signature-pad-input  [inputConfig]=\"this.inputConfig\"\r\n        [required]=\"this.inputConfig.required\"\r\n        [formControlName]=\"inputConfig.id\"></lib-signature-pad-input>\r\n        <!-- <app-signature-input  [inputConfig]=\"this.inputConfig\"\r\n            [formControlName]=\"inputConfig.id\"></app-signature-input>\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\r\n    </mat-form-field>\r\n</form>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i5.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: SignaturePadInputComponent, selector: "lib-signature-pad-input", inputs: ["inputConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SignatureInputElementComponent, decorators: [{
             type: Component,
@@ -8101,6 +8108,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], formGroup: [{
                 type: Input
+            }], canReload: [{
+                type: Input
+            }], reload: [{
+                type: Output
             }] } });
 
 class SectionTitleComponent {
@@ -8163,11 +8174,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }] } });
 
 class AutoCompleteInputElementComponent {
+    constructor() {
+        this.canReload = false;
+        this.reload = new EventEmitter();
+    }
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AutoCompleteInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: AutoCompleteInputElementComponent, isStandalone: true, selector: "lib-auto-complete-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", options: "options" }, ngImport: i0, template: "\r\n<form [formGroup]=\"formGroup\">\r\n\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-auto-complet-reactive-input\r\n    [inputConfig]=\"this.inputConfig\"\r\n    [required]=\"this.inputConfig.required\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n        [auto]=\"auto\"\r\n    ></lib-auto-complet-reactive-input>\r\n \r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n      @for (option of options ; track option.id) {\r\n        <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n      }\r\n      \r\n    </mat-autocomplete>\r\n\r\n\r\n    @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n      <mat-hint [matTooltip]=\"inputConfig.hintLabel ||''\" 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     \r\n      </ng-container>\r\n  \r\n      <!-- Prefix & Suffix Text -->\r\n      <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n      <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n        }}</span>\r\n  \r\n      <!-- Character Count Hint -->\r\n      <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n        {{ (formGroup.controls[inputConfig.id]?.value.length || 0) + '/' + inputConfig.maxLength\r\n        }}\r\n      </mat-hint>\r\n  \r\n  \r\n    \r\n    \r\n    </mat-form-field>\r\n</form>\r\n\r\n", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "component", type: AutoCompletReactiveInputComponent, selector: "lib-auto-complet-reactive-input", inputs: ["auto", "inputConfig"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: AutoCompleteInputElementComponent, isStandalone: true, selector: "lib-auto-complete-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", options: "options", canReload: "canReload" }, outputs: { reload: "reload" }, ngImport: i0, template: "\r\n<form [formGroup]=\"formGroup\">\r\n\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-auto-complet-reactive-input\r\n    [inputConfig]=\"this.inputConfig\"\r\n    [required]=\"this.inputConfig.required\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n        [auto]=\"auto\"\r\n    ></lib-auto-complet-reactive-input>\r\n \r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n      @for (option of options ; track option.id) {\r\n        <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n      }\r\n      \r\n    </mat-autocomplete>\r\n\r\n\r\n    @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n      <mat-hint [matTooltip]=\"inputConfig.hintLabel ||''\" 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     \r\n      </ng-container>\r\n  \r\n      <!-- Prefix & Suffix Text -->\r\n      <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n      <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n        }}</span>\r\n  \r\n      <!-- Character Count Hint -->\r\n      <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n        {{ (formGroup.controls[inputConfig.id]?.value.length || 0) + '/' + inputConfig.maxLength\r\n        }}\r\n      </mat-hint>\r\n  \r\n  \r\n    \r\n    \r\n    </mat-form-field>\r\n</form>\r\n\r\n", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.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: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "component", type: AutoCompletReactiveInputComponent, selector: "lib-auto-complet-reactive-input", inputs: ["auto", "inputConfig"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: AutoCompleteInputElementComponent, decorators: [{
             type: Component,
@@ -8180,6 +8195,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], options: [{
                 type: Input
+            }], canReload: [{
+                type: Input
+            }], reload: [{
+                type: Output
             }] } });
 
 ;
@@ -8210,7 +8229,7 @@ class ToggleComponent extends BaseCustomInput {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: ToggleComponent, isStandalone: true, selector: "lib-toggle", inputs: { inputConfig: "inputConfig", changed: "changed" }, providers: [{
                 provide: MatFormFieldControl,
                 useExisting: forwardRef(() => ToggleComponent)
-            }], usesInheritance: true, ngImport: i0, template: "\r\n<mat-slide-toggle \r\n\r\nstyle=\"display: block\" \r\n[required]=\"this.inputConfig.required\" \r\n[labelPosition]=\"this.inputConfig.labelPosition || 'after'\"\r\n(change)=\"this.changed($event)\"\r\n[checked]=\"isChecked\"\r\n[ariaReadOnly]=\"this.inputConfig.disabled\"\r\n[disabled]=\"this.inputConfig.disabled\"\r\n>\r\n{{this.inputConfig.label | titlecase }}</mat-slide-toggle>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i9$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.TitleCasePipe, name: "titlecase" }] }); }
+            }], usesInheritance: true, ngImport: i0, template: "\r\n<mat-slide-toggle \r\n\r\nstyle=\"display: block\" \r\n[required]=\"this.inputConfig.required\" \r\n[labelPosition]=\"this.inputConfig.labelPosition || 'after'\"\r\n(change)=\"this.changed($event)\"\r\n[checked]=\"isChecked\"\r\n[ariaReadOnly]=\"this.inputConfig.disabled\"\r\n[disabled]=\"this.inputConfig.disabled\"\r\n>\r\n{{this.inputConfig.label | titlecase }}</mat-slide-toggle>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i9$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
@@ -8229,11 +8248,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }] } });
 
 class ToggleInputElementComponent {
+    constructor() {
+        this.canReload = false;
+        this.reload = new EventEmitter();
+    }
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: ToggleInputElementComponent, isStandalone: true, selector: "lib-toggle-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, ngImport: i0, template: "\r\n<form [formGroup]=\"formGroup\"  >\r\n    <mat-form-field \r\n    [appearance]=\"this.inputConfig.appearance ||'fill' \"\r\n    floatLabel=\"always\"\r\n    subscriptSizing=\"dynamic\"\r\n    *ngIf=\"this.inputConfig as inputConfig\">\r\n        <mat-label>\r\n          toggle to select\r\n           \r\n          <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n        </mat-label>\r\n<lib-toggle [inputConfig]=\"this.inputConfig\"\r\n[required]=\"this.inputConfig.required\"\r\n[formControlName]=\"inputConfig.id\" ></lib-toggle>\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>\r\n", 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: "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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["inputConfig", "changed"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: ToggleInputElementComponent, isStandalone: true, selector: "lib-toggle-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", canReload: "canReload" }, outputs: { reload: "reload" }, ngImport: i0, template: "\r\n<form [formGroup]=\"formGroup\"  >\r\n    <mat-form-field \r\n    [appearance]=\"this.inputConfig.appearance ||'fill' \"\r\n    floatLabel=\"always\"\r\n    subscriptSizing=\"dynamic\"\r\n    *ngIf=\"this.inputConfig as inputConfig\">\r\n        <mat-label>\r\n          toggle to select\r\n           \r\n          <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n        </mat-label>\r\n<lib-toggle [inputConfig]=\"this.inputConfig\"\r\n[required]=\"this.inputConfig.required\"\r\n[formControlName]=\"inputConfig.id\" ></lib-toggle>\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>\r\n", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$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: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["inputConfig", "changed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ToggleInputElementComponent, decorators: [{
             type: Component,
@@ -8245,6 +8268,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], formGroup: [{
                 type: Input
+            }], canReload: [{
+                type: Input
+            }], reload: [{
+                type: Output
             }] } });
 
 const customInputConfig$a = {
@@ -8288,7 +8315,7 @@ class SelectInputComponent extends BaseCustomInput {
         return this.ngControl?.control;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectInputComponent, 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: SelectInputComponent, isStandalone: true, selector: "lib-select-input", inputs: { inputConfig: "inputConfig" }, host: { properties: { "lib-select-input.floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: SelectInputComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select #sele \r\n\r\n(selectionChange)=\"onSelectionChange($event)\"\r\n[value]=\"value\"\r\n \r\n>\r\n\r\n\r\n\r\n@for (option of  getSelectOptions(); track option.value) {\r\n    <mat-option  [value]=\"option.value\" [disabled]=\"this.inputConfig?.readonly\" >\r\n      @switch (this.inputConfig?.matOptions?.optionType) {\r\n        @case ('user') {\r\n          <mat-list-item style=\"padding: 0px;\">\r\n            <img matListItemAvatar [src]=\"getAvatar(option.username)\" />\r\n            <div matListItemTitle>{{ option.username | titlecase }}</div>\r\n            <div matListItemLine> {{ option.email }}</div>\r\n          </mat-list-item>\r\n  \r\n        }\r\n        @default {\r\n          {{ option.label }}\r\n        }\r\n      }\r\n    \r\n    </mat-option>\r\n}\r\n \r\n</mat-select>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i6$1.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i6$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i6$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SelectInputComponent, isStandalone: true, selector: "lib-select-input", inputs: { inputConfig: "inputConfig" }, host: { properties: { "lib-select-input.floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: SelectInputComponent }], usesInheritance: true, ngImport: i0, template: "<mat-select #sele \r\n\r\n(selectionChange)=\"onSelectionChange($event)\"\r\n[value]=\"value\"\r\n \r\n>\r\n\r\n\r\n\r\n@for (option of  getSelectOptions(); track option.value) {\r\n    <mat-option  [value]=\"option.value\" [disabled]=\"this.inputConfig?.readonly\" >\r\n      @switch (this.inputConfig?.matOptions?.optionType) {\r\n        @case ('user') {\r\n          <mat-list-item style=\"padding: 0px;\">\r\n            <img matListItemAvatar [src]=\"getAvatar(option.username)\" />\r\n            <div matListItemTitle>{{ option.username | titlecase }}</div>\r\n            <div matListItemLine> {{ option.email }}</div>\r\n          </mat-list-item>\r\n  \r\n        }\r\n        @default {\r\n          {{ option.label }}\r\n        }\r\n      }\r\n    \r\n    </mat-option>\r\n}\r\n \r\n</mat-select>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i6.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i6.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i6.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectInputComponent, decorators: [{
             type: Component,
@@ -8307,6 +8334,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 // Add this to your component
 class SelectInputElementComponent {
     constructor() {
+        this.canReload = false;
+        this.reload = new EventEmitter();
         this.errorStateMatcher = new class {
             isErrorState(control, form) {
                 return !!(control && control.invalid && (control.dirty || control.touched));
@@ -8328,7 +8357,7 @@ class SelectInputElementComponent {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SelectInputElementComponent, isStandalone: true, selector: "lib-select-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\r\n  <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\"\r\n    *ngIf=\"this.inputConfig as inputConfig\">\r\n    <mat-label>\r\n      {{this.inputConfig.label }}\r\n      <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n    </mat-label>\r\n\r\n    <lib-select-input      [inputConfig]=\"this.inputConfig\"\r\n\r\n    [required]=\"this.inputConfig.required\"\r\n    [formControlName]=\"this.inputConfig.id\"  >\r\n\r\n    </lib-select-input>\r\n    @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n    <mat-hint class=\"inputHint\">\r\n      {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n    </mat-hint>\r\n    }\r\n\r\n\r\n    <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n\r\n    <!-- Prefix Icon -->\r\n    <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n\r\n    <!-- Suffix Icon or Password Visibility Toggle -->\r\n    <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n      <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n        }}</mat-icon>\r\n      <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"inputConfig.togglePasswordVisibility()\"\r\n      mat-icon-button matSuffix>\r\n      <mat-icon>{{ inputConfig.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n    </button> -->\r\n    </ng-container>\r\n\r\n    <!-- Prefix & Suffix Text -->\r\n    <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n    <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n      }}</span>\r\n\r\n    <!-- Character Count Hint -->\r\n    <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n      {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n      }}\r\n    </mat-hint>\r\n\r\n\r\n\r\n  </mat-form-field>\r\n</ng-container>\r\n", styles: ["mat-form-field{width:100%!important}\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: 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: ReactiveFormsModule }, { 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: SelectInputComponent, selector: "lib-select-input", inputs: ["inputConfig"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SelectInputElementComponent, isStandalone: true, selector: "lib-select-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", canReload: "canReload" }, outputs: { reload: "reload" }, ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\r\n  <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\"\r\n    *ngIf=\"this.inputConfig as inputConfig\">\r\n    <mat-label>\r\n      {{this.inputConfig.label }}\r\n      <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n    </mat-label>\r\n\r\n    <lib-select-input      [inputConfig]=\"this.inputConfig\"\r\n\r\n    [required]=\"this.inputConfig.required\"\r\n    [formControlName]=\"this.inputConfig.id\"  >\r\n\r\n    </lib-select-input>\r\n    @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n    <mat-hint class=\"inputHint\">\r\n      {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n    </mat-hint>\r\n    }\r\n\r\n\r\n    <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n\r\n    <!-- Prefix Icon -->\r\n    <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n\r\n    <!-- Suffix Icon or Password Visibility Toggle -->\r\n    <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n      <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n        }}</mat-icon>\r\n      <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"inputConfig.togglePasswordVisibility()\"\r\n      mat-icon-button matSuffix>\r\n      <mat-icon>{{ inputConfig.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n    </button> -->\r\n    </ng-container>\r\n\r\n    <!-- Prefix & Suffix Text -->\r\n    <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n    <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n      }}</span>\r\n\r\n    <!-- Character Count Hint -->\r\n    <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n      {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n      }}\r\n    </mat-hint>\r\n\r\n\r\n\r\n  </mat-form-field>\r\n</ng-container>\r\n", styles: ["mat-form-field{width:100%!important}\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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$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: SelectInputComponent, selector: "lib-select-input", inputs: ["inputConfig"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectInputElementComponent, decorators: [{
             type: Component,
@@ -8337,6 +8366,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], formGroup: [{
                 type: Input
+            }], canReload: [{
+                type: Input
+            }], reload: [{
+                type: Output
             }] } });
 
 const customInputConfig$9 = {
@@ -8385,11 +8418,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }] } });
 
 class TextareaInputElementComponent {
+    constructor() {
+        this.canReload = false;
+        this.reload = new EventEmitter();
+    }
     get errorMessage() {
         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 \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"] }] }); }
+    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", canReload: "canReload" }, outputs: { reload: "reload" }, 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: i5.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,
@@ -8398,6 +8435,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], formGroup: [{
                 type: Input
+            }], canReload: [{
+                type: Input
+            }], reload: [{
+                type: Output
             }] } });
 
 const customInputConfig$8 = {
@@ -8463,6 +8504,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }] } });
 
 class DateRangePickerInputElementComponent {
+    constructor() {
+        this.canReload = false;
+        this.reload = new EventEmitter();
+    }
     /**
      * Get the appropriate error message for this input
      */
@@ -8510,7 +8555,7 @@ class DateRangePickerInputElementComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DateRangePickerInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: DateRangePickerInputElementComponent, isStandalone: true, selector: "lib-date-range-picker-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "<!-- <mat-form-field [appearance]=\"this.inputConfig.appearance || 'fill'\" floatLabel=\"auto\">\r\n  <mat-label></mat-label>\r\n  @if(inputConfig.startDateControl && inputConfig.endDateControl) {\r\n    <ng-container>\r\n      <mat-date-range-input [formGroup]=\"formGroup\" [rangePicker]=\"picker\">\r\n        <input matStartDate [formControlName]=\"inputConfig.startDateControl\" placeholder=\"Start date\">\r\n        <input matEndDate [formControlName]=\"inputConfig.endDateControl\" placeholder=\"End date\">\r\n      </mat-date-range-input>\r\n      <mat-hint>{{inputConfig.hintLabel}}</mat-hint>\r\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n      <mat-date-range-picker #picker></mat-date-range-picker>\r\n\r\n      @if (formGroup.controls[inputConfig.startDateControl]?.hasError('matStartDateInvalid')) {\r\n        <mat-error>Invalid start date</mat-error>\r\n      }\r\n      @if (formGroup.controls[inputConfig.endDateControl]?.hasError('matEndDateInvalid')) {\r\n        <mat-error>Invalid end date</mat-error>\r\n      }\r\n      \r\n      @if(!!errorMessage) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n      }\r\n    </ng-container>\r\n  }\r\n</mat-form-field> -->\r\n<form [formGroup]=\"formGroup\">\r\n\r\n\r\n<mat-form-field  [appearance]=\"this.inputConfig.appearance || 'fill'\"   subscriptSizing=\"dynamic\">\r\n  <mat-label>{{inputConfig.label}}  <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status></mat-label>\r\n  <lib-date-range-picker-reactive-input\r\n  [inputConfig]=\"this.inputConfig\"\r\n  [required]=\"this.inputConfig.required\"\r\n  [formControlName]=\"inputConfig.id+'.'+inputConfig.endDateControl\" \r\n  ></lib-date-range-picker-reactive-input>\r\n\r\n  <mat-date-range-input       [required]=\"inputConfig.required\"   [formGroup]=\"formGroup\"  [rangePicker]=\"picker\">\r\n    @if (inputConfig.startDateControl) {\r\n      <input matStartDate \r\n      [formControlName]=\"inputConfig.id+'.'+inputConfig.startDateControl\"\r\n      [min]=\"inputConfig.startMinDate\"\r\n      [max]=\"inputConfig.startMaxDate\"\r\n      [value]=\"formGroup.controls[inputConfig.id+'.'+inputConfig.startDateControl]?.value\"\r\n      (dateChange)=\"dateChanged($event, inputConfig.startDateControl)\"\r\n      placeholder=\"Start date\">\r\n    }\r\n    @if (inputConfig.endDateControl) {\r\n      <input matEndDate \r\n      [formControlName]=\"inputConfig.id+'.'+inputConfig.endDateControl\" \r\n      [value]=\"formGroup.controls[inputConfig.id+'.'+inputConfig.endDateControl]?.value\"\r\n      placeholder=\"End date\"\r\n      [min]=\"inputConfig.endMinDate\" \r\n      [max]=\"inputConfig.endMaxDate\"\r\n      (dateChange)=\"dateChanged($event, inputConfig.endDateControl)\"\r\n      >\r\n    }\r\n  </mat-date-range-input>\r\n\r\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n  <mat-date-range-picker   #picker >\r\n    <mat-datepicker-actions>\r\n      <button mat-button matDatepickerCancel>Cancel</button>\r\n      <button mat-raised-button color=\"primary\" matDatepickerApply>Apply</button>\r\n    </mat-datepicker-actions>\r\n  </mat-date-range-picker>\r\n\r\n\r\n\r\n    @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n    <mat-hint [matTooltip]=\"inputConfig.hintLabel ||''\" 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\r\n    </ng-container>\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    <!-- Character Count Hint -->\r\n    <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" >\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\r\n</form>", styles: ["mat-form-field{width:100%!important}\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: i3$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$5.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$5.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$5.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$5.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i3$5.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3$5.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i3$5.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { 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: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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: DateRangePickerReactiveInputComponent, selector: "lib-date-range-picker-reactive-input", inputs: ["inputConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: DateRangePickerInputElementComponent, isStandalone: true, selector: "lib-date-range-picker-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", canReload: "canReload" }, outputs: { reload: "reload" }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "<!-- <mat-form-field [appearance]=\"this.inputConfig.appearance || 'fill'\" floatLabel=\"auto\">\r\n  <mat-label></mat-label>\r\n  @if(inputConfig.startDateControl && inputConfig.endDateControl) {\r\n    <ng-container>\r\n      <mat-date-range-input [formGroup]=\"formGroup\" [rangePicker]=\"picker\">\r\n        <input matStartDate [formControlName]=\"inputConfig.startDateControl\" placeholder=\"Start date\">\r\n        <input matEndDate [formControlName]=\"inputConfig.endDateControl\" placeholder=\"End date\">\r\n      </mat-date-range-input>\r\n      <mat-hint>{{inputConfig.hintLabel}}</mat-hint>\r\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n      <mat-date-range-picker #picker></mat-date-range-picker>\r\n\r\n      @if (formGroup.controls[inputConfig.startDateControl]?.hasError('matStartDateInvalid')) {\r\n        <mat-error>Invalid start date</mat-error>\r\n      }\r\n      @if (formGroup.controls[inputConfig.endDateControl]?.hasError('matEndDateInvalid')) {\r\n        <mat-error>Invalid end date</mat-error>\r\n      }\r\n      \r\n      @if(!!errorMessage) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n      }\r\n    </ng-container>\r\n  }\r\n</mat-form-field> -->\r\n<form [formGroup]=\"formGroup\">\r\n\r\n\r\n<mat-form-field  [appearance]=\"this.inputConfig.appearance || 'fill'\"   subscriptSizing=\"dynamic\">\r\n  <mat-label>{{inputConfig.label}}  <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status></mat-label>\r\n  <lib-date-range-picker-reactive-input\r\n  [inputConfig]=\"this.inputConfig\"\r\n  [required]=\"this.inputConfig.required\"\r\n  [formControlName]=\"inputConfig.id+'.'+inputConfig.endDateControl\" \r\n  ></lib-date-range-picker-reactive-input>\r\n\r\n  <mat-date-range-input       [required]=\"inputConfig.required\"   [formGroup]=\"formGroup\"  [rangePicker]=\"picker\">\r\n    @if (inputConfig.startDateControl) {\r\n      <input matStartDate \r\n      [formControlName]=\"inputConfig.id+'.'+inputConfig.startDateControl\"\r\n      [min]=\"inputConfig.startMinDate\"\r\n      [max]=\"inputConfig.startMaxDate\"\r\n      [value]=\"formGroup.controls[inputConfig.id+'.'+inputConfig.startDateControl]?.value\"\r\n      (dateChange)=\"dateChanged($event, inputConfig.startDateControl)\"\r\n      placeholder=\"Start date\">\r\n    }\r\n    @if (inputConfig.endDateControl) {\r\n      <input matEndDate \r\n      [formControlName]=\"inputConfig.id+'.'+inputConfig.endDateControl\" \r\n      [value]=\"formGroup.controls[inputConfig.id+'.'+inputConfig.endDateControl]?.value\"\r\n      placeholder=\"End date\"\r\n      [min]=\"inputConfig.endMinDate\" \r\n      [max]=\"inputConfig.endMaxDate\"\r\n      (dateChange)=\"dateChanged($event, inputConfig.endDateControl)\"\r\n      >\r\n    }\r\n  </mat-date-range-input>\r\n\r\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n  <mat-date-range-picker   #picker >\r\n    <mat-datepicker-actions>\r\n      <button mat-button matDatepickerCancel>Cancel</button>\r\n      <button mat-raised-button color=\"primary\" matDatepickerApply>Apply</button>\r\n    </mat-datepicker-actions>\r\n  </mat-date-range-picker>\r\n\r\n\r\n\r\n    @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n    <mat-hint [matTooltip]=\"inputConfig.hintLabel ||''\" 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\r\n    </ng-container>\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    <!-- Character Count Hint -->\r\n    <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" >\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\r\n</form>", styles: ["mat-form-field{width:100%!important}\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: i3$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i3$4.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i3$4.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i3$4.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "component", type: i5.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: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.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: DateRangePickerReactiveInputComponent, selector: "lib-date-range-picker-reactive-input", inputs: ["inputConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DateRangePickerInputElementComponent, decorators: [{
             type: Component,
@@ -8519,6 +8564,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], formGroup: [{
                 type: Input
+            }], canReload: [{
+                type: Input
+            }], reload: [{
+                type: Output
             }] } });
 
 const customInputConfig$7 = {
@@ -8541,7 +8590,7 @@ class DatePickerReactiveInputComponent extends BaseCustomInput {
         this.onChange(this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DatePickerReactiveInputComponent, 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: DatePickerReactiveInputComponent, isStandalone: true, selector: "lib-date-picker-reactive-input", inputs: { picker: "picker", inputConfig: "inputConfig" }, host: { properties: { "lib-date-picker-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: DatePickerReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "<input \r\n[required]=\"inputConfig?.required\" \r\n\r\n[min]=\"inputConfig?.min\" \r\n(dateChange)=\"changed($event)\"\r\n[value]=\"value\"\r\n[max]=\"inputConfig?.max\" matInput \r\n[matDatepicker]=\"picker\" />", styles: [""], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i3$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { 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: DatePickerReactiveInputComponent, isStandalone: true, selector: "lib-date-picker-reactive-input", inputs: { picker: "picker", inputConfig: "inputConfig" }, host: { properties: { "lib-date-picker-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: DatePickerReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "<input \r\n[required]=\"inputConfig?.required\" \r\n\r\n[min]=\"inputConfig?.min\" \r\n(dateChange)=\"changed($event)\"\r\n[value]=\"value\"\r\n[max]=\"inputConfig?.max\" matInput \r\n[matDatepicker]=\"picker\" />", styles: [""], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i3$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { 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: DatePickerReactiveInputComponent, decorators: [{
             type: Component,
@@ -8563,11 +8612,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }] } });
 
 class DatePickerInputElementComponent {
+    constructor() {
+        this.canReload = false;
+        this.reload = new EventEmitter();
+    }
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DatePickerInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: DatePickerInputElementComponent, isStandalone: true, selector: "lib-date-picker-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "\r\n\r\n<form [formGroup]=\"formGroup\">\r\n\r\n    <mat-form-field \r\n    [appearance]=\"this.inputConfig.appearance ||'fill' \" \r\n    subscriptSizing=\"dynamic\">\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-date-picker-reactive-input\r\n    [inputConfig]=\"this.inputConfig\"\r\n    [required]=\"this.inputConfig.required\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n    [picker]=\"picker\"\r\n    \r\n    ></lib-date-picker-reactive-input>\r\n    <mat-datepicker-toggle matIconSuffix  [for]=\"picker\"></mat-datepicker-toggle>\r\n    <mat-datepicker   #picker>\r\n      <button mat-button matDatepickerCancel>Cancel</button>\r\n      <button mat-raised-button color=\"primary\" matDatepickerApply>Apply</button>\r\n    </mat-datepicker>\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\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 \r\n         matSuffix>{{ inputConfig.suffixIcon\r\n          }}</mat-icon>\r\n      \r\n          \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    </mat-form-field>\r\n</form>", styles: ["mat-form-field{width:100%!important}\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: i3$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: i3$5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i3$5.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i3$5.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { 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: 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: DatePickerReactiveInputComponent, selector: "lib-date-picker-reactive-input", inputs: ["picker", "inputConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: DatePickerInputElementComponent, isStandalone: true, selector: "lib-date-picker-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", canReload: "canReload" }, outputs: { reload: "reload" }, providers: [provideNativeDateAdapter()], ngImport: i0, template: "\r\n\r\n<form [formGroup]=\"formGroup\">\r\n\r\n    <mat-form-field \r\n    [appearance]=\"this.inputConfig.appearance ||'fill' \" \r\n    subscriptSizing=\"dynamic\">\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-date-picker-reactive-input\r\n    [inputConfig]=\"this.inputConfig\"\r\n    [required]=\"this.inputConfig.required\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n    [picker]=\"picker\"\r\n    \r\n    ></lib-date-picker-reactive-input>\r\n    <mat-datepicker-toggle matIconSuffix  [for]=\"picker\"></mat-datepicker-toggle>\r\n    <mat-datepicker   #picker>\r\n      <button mat-button matDatepickerCancel>Cancel</button>\r\n      <button mat-raised-button color=\"primary\" matDatepickerApply>Apply</button>\r\n    </mat-datepicker>\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\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 \r\n         matSuffix>{{ inputConfig.suffixIcon\r\n          }}</mat-icon>\r\n      \r\n          \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    </mat-form-field>\r\n</form>", styles: ["mat-form-field{width:100%!important}\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: i3$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "component", type: i3$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i3$4.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i3$4.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$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: DatePickerReactiveInputComponent, selector: "lib-date-picker-reactive-input", inputs: ["picker", "inputConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DatePickerInputElementComponent, decorators: [{
             type: Component,
@@ -8576,6 +8629,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], formGroup: [{
                 type: Input
+            }], canReload: [{
+                type: Input
+            }], reload: [{
+                type: Output
             }] } });
 
 ;
@@ -8721,7 +8778,7 @@ class FileUploaderComponent extends BaseCustomInput {
         this.stateChanges.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FileUploaderComponent, 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: FileUploaderComponent, isStandalone: true, selector: "app-file-uploader", inputs: { inputConfig: "inputConfig" }, host: { properties: { "fileUploader.floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: FileUploaderComponent }], viewQueries: [{ propertyName: "uploader", first: true, predicate: ["uploader"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n  <mat-progress-bar   *ngIf=\"loading\" mode=\"indeterminate\"></mat-progress-bar>\r\n\r\n\r\n\r\n\r\n<section   *ngIf=\"!shouldLabelFloat\">\r\n <br>\r\n    <div  \r\n    [style.border-color]=\"dragOver ? ' var(--mat-stepper-header-selected-state-icon-background-color)' : '#ccc;'\"\r\n(dragover)=\"onDragOver($event)\" \r\n(drop)=\"onDrop($event)\" \r\n(dragleave)=\"onDragLeave($event)\"\r\n    class=\"drop-zone\" >\r\n    <div>\r\n        <mat-icon>\r\n            cloud_upload\r\n        </mat-icon>\r\n    </div>\r\n    <div>\r\n        @if (!!errorMessage\r\n\r\n        ) {\r\n            <span class=\"mat-mdc-form-field-error\" >\r\n                {{errorMessage}}\r\n            </span>\r\n        }@else {\r\n            Drag and drop files or click to upload\r\n        }\r\n       \r\n        \r\n           \r\n    </div>\r\n       \r\n    </div>\r\n</section>\r\n\r\n<input\r\nstyle=\"display: none\"\r\nhidden\r\n[readonly]=\"!!this.inputConfig?.readonly\"\r\n[type]=\"this.inputConfig?.type|| 'file'\"\r\n[accept]=\"uploadType()\"\r\n(change)=\"onFileSelected($event)\"\r\n#uploader\r\n/>\r\n<div \r\n[style.border-color]=\"dragOver ? 'var(--mat-stepper-header-selected-state-icon-background-color)' : '#ccc;'\"\r\n*ngIf=\"!!shouldLabelFloat\" \r\nclass=\"drop-zone\"\r\n\r\n(dragover)=\"onDragOver($event)\" \r\n(drop)=\"onDrop($event)\" \r\n(dragleave)=\"onDragLeave($event)\">\r\n<img style=\"width: 100%;\" [src]=\"returnPreview()\" alt=\"\">\r\n<mat-toolbar style=\"    height: min-content !important;\">\r\n    <mat-icon\r\n    [style.color]=\"dragOver ? 'var(--mat-stepper-header-selected-state-icon-background-color)' : ''\"\r\n    >\r\n        cloud_upload\r\n    </mat-icon>\r\n    <span class=\"spacer\"></span>\r\n    <div style=\"padding: 8px;\" >\r\n        <div style=\"\r\n        line-height: normal;width: 100%;\r\n        white-space:normal;overflow: hidden;text-overflow: ellipsis;\r\n        font-size: 12px;color:var(--mat-stepper-header-selected-state-icon-background-color);\"\r\n         *ngIf=\"!!this.fileName\">\r\n            {{ this.fileName}}\r\n        </div>\r\n        <div style=\"font-size: 14px;\">\r\n            \r\n            Drag and drop files or click to upload\r\n         \r\n        </div>\r\n    </div>\r\n \r\n   \r\n    <span class=\"spacer\"></span>\r\n    <button (click)=\"clearFile($event)\" mat-icon-button>\r\n        <mat-icon>close</mat-icon>\r\n    </button>\r\n</mat-toolbar>\r\n</div>\r\n", styles: [".fileUploader{opacity:0;display:none;transition:opacity .2s;height:50px}:host.floating .fileUploader{opacity:1}.drop-zone{border:2px dashed #ccc;padding:20px;text-align:center;cursor:pointer}.drop-zone:hover{border-color:var(--mat-stepper-header-selected-state-icon-background-color)}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { 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: i4$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: FileUploaderComponent, isStandalone: true, selector: "app-file-uploader", inputs: { inputConfig: "inputConfig" }, host: { properties: { "fileUploader.floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: FileUploaderComponent }], viewQueries: [{ propertyName: "uploader", first: true, predicate: ["uploader"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\r\n  <mat-progress-bar   *ngIf=\"loading\" mode=\"indeterminate\"></mat-progress-bar>\r\n\r\n\r\n\r\n\r\n<section   *ngIf=\"!shouldLabelFloat\">\r\n <br>\r\n    <div  \r\n    [style.border-color]=\"dragOver ? ' var(--mat-stepper-header-selected-state-icon-background-color)' : '#ccc;'\"\r\n(dragover)=\"onDragOver($event)\" \r\n(drop)=\"onDrop($event)\" \r\n(dragleave)=\"onDragLeave($event)\"\r\n    class=\"drop-zone\" >\r\n    <div>\r\n        <mat-icon>\r\n            cloud_upload\r\n        </mat-icon>\r\n    </div>\r\n    <div>\r\n        @if (!!errorMessage\r\n\r\n        ) {\r\n            <span class=\"mat-mdc-form-field-error\" >\r\n                {{errorMessage}}\r\n            </span>\r\n        }@else {\r\n            Drag and drop files or click to upload\r\n        }\r\n       \r\n        \r\n           \r\n    </div>\r\n       \r\n    </div>\r\n</section>\r\n\r\n<input\r\nstyle=\"display: none\"\r\nhidden\r\n[readonly]=\"!!this.inputConfig?.readonly\"\r\n[type]=\"this.inputConfig?.type|| 'file'\"\r\n[accept]=\"uploadType()\"\r\n(change)=\"onFileSelected($event)\"\r\n#uploader\r\n/>\r\n<div \r\n[style.border-color]=\"dragOver ? 'var(--mat-stepper-header-selected-state-icon-background-color)' : '#ccc;'\"\r\n*ngIf=\"!!shouldLabelFloat\" \r\nclass=\"drop-zone\"\r\n\r\n(dragover)=\"onDragOver($event)\" \r\n(drop)=\"onDrop($event)\" \r\n(dragleave)=\"onDragLeave($event)\">\r\n<img style=\"width: 100%;\" [src]=\"returnPreview()\" alt=\"\">\r\n<mat-toolbar style=\"    height: min-content !important;\">\r\n    <mat-icon\r\n    [style.color]=\"dragOver ? 'var(--mat-stepper-header-selected-state-icon-background-color)' : ''\"\r\n    >\r\n        cloud_upload\r\n    </mat-icon>\r\n    <span class=\"spacer\"></span>\r\n    <div style=\"padding: 8px;\" >\r\n        <div style=\"\r\n        line-height: normal;width: 100%;\r\n        white-space:normal;overflow: hidden;text-overflow: ellipsis;\r\n        font-size: 12px;color:var(--mat-stepper-header-selected-state-icon-background-color);\"\r\n         *ngIf=\"!!this.fileName\">\r\n            {{ this.fileName}}\r\n        </div>\r\n        <div style=\"font-size: 14px;\">\r\n            \r\n            Drag and drop files or click to upload\r\n         \r\n        </div>\r\n    </div>\r\n \r\n   \r\n    <span class=\"spacer\"></span>\r\n    <button (click)=\"clearFile($event)\" mat-icon-button>\r\n        <mat-icon>close</mat-icon>\r\n    </button>\r\n</mat-toolbar>\r\n</div>\r\n", styles: [".fileUploader{opacity:0;display:none;transition:opacity .2s;height:50px}:host.floating .fileUploader{opacity:1}.drop-zone{border:2px dashed #ccc;padding:20px;text-align:center;cursor:pointer}.drop-zone:hover{border-color:var(--mat-stepper-header-selected-state-icon-background-color)}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FileUploaderComponent, decorators: [{
             type: Component,
@@ -8744,6 +8801,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }] } });
 
 class FileUploadInputElementComponent {
+    constructor() {
+        this.canReload = false;
+        this.reload = new EventEmitter();
+    }
     getErrors() {
         return this.formGroup.controls[this.inputConfig.id]?.errors;
     }
@@ -8751,7 +8812,7 @@ class FileUploadInputElementComponent {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FileUploadInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: FileUploadInputElementComponent, isStandalone: true, selector: "lib-file-upload-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 classInput\">\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    <app-file-uploader\r\n    [inputConfig]=\"inputConfig\"\r\n    [formControlName]=\"inputConfig.id\"\r\n    [required]=\"this.inputConfig.required\"\r\n    ></app-file-uploader>\r\n\r\n\r\n    @if(inputConfig.hintLabel || classInput.temporaryHint ){\r\n      <mat-hint  class=\"inputHint\">\r\n        {{ classInput.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)=\"classInput.togglePasswordVisibility()\"\r\n          mat-icon-button matSuffix>\r\n          <mat-icon>{{ classInput.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n        </button> -->\r\n      </ng-container>\r\n  \r\n      <!-- Prefix & Suffix Text -->\r\n      <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n      <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n        }}</span>\r\n  \r\n      <!-- Character Count Hint -->\r\n      <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n        {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n        }}\r\n      </mat-hint>\r\n  \r\n   \r\n    \r\n    </mat-form-field>\r\n</form>\r\n\r\n", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "component", type: FileUploaderComponent, selector: "app-file-uploader", 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: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: FileUploadInputElementComponent, isStandalone: true, selector: "lib-file-upload-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", canReload: "canReload" }, outputs: { reload: "reload" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n    <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as classInput\">\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    <app-file-uploader\r\n    [inputConfig]=\"inputConfig\"\r\n    [formControlName]=\"inputConfig.id\"\r\n    [required]=\"this.inputConfig.required\"\r\n    ></app-file-uploader>\r\n\r\n\r\n    @if(inputConfig.hintLabel || classInput.temporaryHint ){\r\n      <mat-hint  class=\"inputHint\">\r\n        {{ classInput.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)=\"classInput.togglePasswordVisibility()\"\r\n          mat-icon-button matSuffix>\r\n          <mat-icon>{{ classInput.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n        </button> -->\r\n      </ng-container>\r\n  \r\n      <!-- Prefix & Suffix Text -->\r\n      <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n      <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n        }}</span>\r\n  \r\n      <!-- Character Count Hint -->\r\n      <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n        {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n        }}\r\n      </mat-hint>\r\n  \r\n   \r\n    \r\n    </mat-form-field>\r\n</form>\r\n\r\n", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "component", type: FileUploaderComponent, selector: "app-file-uploader", 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: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i5.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FileUploadInputElementComponent, decorators: [{
             type: Component,
@@ -8760,6 +8821,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], formGroup: [{
                 type: Input
+            }], canReload: [{
+                type: Input
+            }], reload: [{
+                type: Output
             }] } });
 
 const editorConfig = (payload) => {
@@ -8938,12 +9003,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 
 class EditorInputElementComponent {
     constructor() {
+        this.canReload = false;
+        this.reload = new EventEmitter();
     }
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: EditorInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: EditorInputElementComponent, isStandalone: true, selector: "lib-editor-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, ngImport: i0, template: "\r\n@if (inputConfig.richTextEditorLibrary === 'EditorJS') {\r\n  <form [formGroup]=\"formGroup\">\r\n    <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as classInput\">\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-editor-js-input \r\n        [inputConfig]=\"inputConfig\"\r\n        [formControlName]=\"inputConfig.id\"\r\n        [required]=\"this.inputConfig.required\"\r\n        ></lib-editor-js-input>\r\n    <!-- <app-form-input-rich-text-editor\r\n    [inputConfig]=\"inputConfig\"\r\n    [formControlName]=\"inputConfig.id\"\r\n    (change)=\"changed($event)\"\r\n    >\r\n    </app-form-input-rich-text-editor> -->\r\n\r\n\r\n  @if(inputConfig.hintLabel || classInput.temporaryHint ){\r\n      <mat-hint  class=\"inputHint\">\r\n        {{ classInput.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)=\"classInput.togglePasswordVisibility()\"\r\n          mat-icon-button matSuffix>\r\n          <mat-icon>{{ classInput.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n        </button> -->\r\n      </ng-container>\r\n  \r\n      <!-- Prefix & Suffix Text -->\r\n      <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n      <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n        }}</span>\r\n  \r\n      <!-- Character Count Hint -->\r\n      <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n        {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n        }}\r\n      </mat-hint>\r\n  \r\n\r\n     \r\n    </mat-form-field>\r\n \r\n</form>\r\n\r\n}\r\n\r\n\r\n\r\n\r\n", 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: EditorJsInputComponent, selector: "lib-editor-js-input", inputs: ["inputConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: EditorInputElementComponent, isStandalone: true, selector: "lib-editor-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", canReload: "canReload" }, outputs: { reload: "reload" }, ngImport: i0, template: "\r\n@if (inputConfig.richTextEditorLibrary === 'EditorJS') {\r\n  <form [formGroup]=\"formGroup\">\r\n    <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as classInput\">\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-editor-js-input \r\n        [inputConfig]=\"inputConfig\"\r\n        [formControlName]=\"inputConfig.id\"\r\n        [required]=\"this.inputConfig.required\"\r\n        ></lib-editor-js-input>\r\n    <!-- <app-form-input-rich-text-editor\r\n    [inputConfig]=\"inputConfig\"\r\n    [formControlName]=\"inputConfig.id\"\r\n    (change)=\"changed($event)\"\r\n    >\r\n    </app-form-input-rich-text-editor> -->\r\n\r\n\r\n  @if(inputConfig.hintLabel || classInput.temporaryHint ){\r\n      <mat-hint  class=\"inputHint\">\r\n        {{ classInput.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)=\"classInput.togglePasswordVisibility()\"\r\n          mat-icon-button matSuffix>\r\n          <mat-icon>{{ classInput.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n        </button> -->\r\n      </ng-container>\r\n  \r\n      <!-- Prefix & Suffix Text -->\r\n      <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n      <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n        }}</span>\r\n  \r\n      <!-- Character Count Hint -->\r\n      <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n        {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n        }}\r\n      </mat-hint>\r\n  \r\n\r\n     \r\n    </mat-form-field>\r\n \r\n</form>\r\n\r\n}\r\n\r\n\r\n\r\n\r\n", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i5.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: EditorJsInputComponent, selector: "lib-editor-js-input", inputs: ["inputConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: EditorInputElementComponent, decorators: [{
             type: Component,
@@ -8958,6 +9025,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], formGroup: [{
                 type: Input
+            }], canReload: [{
+                type: Input
+            }], reload: [{
+                type: Output
             }] } });
 
 const customInputConfig$4 = {
@@ -9004,6 +9075,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }] } });
 
 class BasicInputInputElementComponent {
+    constructor() {
+        this.canReload = false;
+        this.reload = new EventEmitter();
+    }
     get formControl() {
         return this.formGroup.controls[this.inputConfig.id];
     }
@@ -9046,7 +9121,7 @@ class BasicInputInputElementComponent {
         return control?.invalid && (control?.touched || control?.dirty);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BasicInputInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: BasicInputInputElementComponent, isStandalone: true, selector: "lib-basic-input-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, ngImport: i0, template: "\r\n  <ng-container [formGroup]=\"formGroup\">\r\n  <mat-form-field \r\n\r\n  [appearance]=\"this.inputConfig.appearance ||'fill'\" subscriptSizing=\"dynamic\"\r\n    *ngIf=\"this.inputConfig as classInput\">\r\n    <mat-label>\r\n      {{inputConfig.label }}\r\n      <lib-t-form-input-status \r\n     \r\n      [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n    </mat-label>\r\n    <lib-input-custom\r\n    [inputConfig]=\"this.inputConfig\"\r\n    [required]=\"this.inputConfig.required\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n  \r\n    ></lib-input-custom>\r\n\r\n    @if(errorMessage) {\r\n    <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n    }\r\n    <!--     [type]=\"this.inputConfig.showPassword ? 'text' : this.inputConfig.type||'text'\"-->\r\n    <!-- @if(classInput.canRefresh){\r\n        <button\r\n        (click)=\"classInput.refresh()\"\r\n        style=\"  min-width: 1%;\"\r\n          [matTooltip]=\"'Click to refresh this field. This will update any calculated values, fetch latest data from services, or reload available options'\"\r\n          color=\"primary\" matSuffix mat-icon-button>\r\n          <mat-icon>\r\n            sync\r\n          </mat-icon>\r\n        </button>\r\n      } -->\r\n\r\n\r\n    @if(inputConfig.hintLabel || classInput.temporaryHint ){\r\n    <mat-hint class=\"inputHint\">\r\n      {{ classInput.temporaryHint || inputConfig.hintLabel}}\r\n    </mat-hint>\r\n    }\r\n\r\n \r\n    <!-- Prefix Icon -->\r\n    <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n\r\n    <!-- Suffix Icon or Password Visibility Toggle -->\r\n    <!-- <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n      <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n        }}</mat-icon>\r\n      <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"classInput.togglePasswordVisibility()\"\r\n        mat-icon-button matSuffix>\r\n        <mat-icon>{{ classInput.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    <!-- Password Strength Hint -->\r\n    <mat-hint *ngIf=\"inputConfig.type === 'password'\" [style.color]=\"passwordStrengthColor(inputConfig.id)\"\r\n      matTooltip=\"The password should be at least 8 characters long. Have at least one uppercase letter, one lowercase, one digit, one special character.\"\r\n      align=\"end\">\r\n      {{ checkPasswordStrength(inputConfig.id) }} password\r\n    </mat-hint>\r\n\r\n  </mat-form-field>\r\n\r\n  \r\n\r\n\r\n</ng-container>\r\n", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "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: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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.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: InputCustomComponent, selector: "lib-input-custom", inputs: ["inputConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: BasicInputInputElementComponent, isStandalone: true, selector: "lib-basic-input-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", canReload: "canReload" }, outputs: { reload: "reload" }, ngImport: i0, template: "\r\n  <ng-container [formGroup]=\"formGroup\">\r\n  <mat-form-field \r\n\r\n  [appearance]=\"this.inputConfig.appearance ||'fill'\" subscriptSizing=\"dynamic\"\r\n    *ngIf=\"this.inputConfig as classInput\">\r\n    <mat-label>\r\n      {{inputConfig.label }}\r\n      <lib-t-form-input-status \r\n     \r\n      [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n    </mat-label>\r\n    <lib-input-custom\r\n    [inputConfig]=\"this.inputConfig\"\r\n    [required]=\"this.inputConfig.required\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n  \r\n    ></lib-input-custom>\r\n\r\n    @if(errorMessage) {\r\n    <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n    }\r\n    <!--     [type]=\"this.inputConfig.showPassword ? 'text' : this.inputConfig.type||'text'\"-->\r\n    <!-- @if(classInput.canRefresh){\r\n        <button\r\n        (click)=\"classInput.refresh()\"\r\n        style=\"  min-width: 1%;\"\r\n          [matTooltip]=\"'Click to refresh this field. This will update any calculated values, fetch latest data from services, or reload available options'\"\r\n          color=\"primary\" matSuffix mat-icon-button>\r\n          <mat-icon>\r\n            sync\r\n          </mat-icon>\r\n        </button>\r\n      } -->\r\n\r\n\r\n    @if(inputConfig.hintLabel || classInput.temporaryHint ){\r\n    <mat-hint class=\"inputHint\">\r\n      {{ classInput.temporaryHint || inputConfig.hintLabel}}\r\n    </mat-hint>\r\n    }\r\n\r\n \r\n    <!-- Prefix Icon -->\r\n    <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n\r\n    <!-- Suffix Icon or Password Visibility Toggle -->\r\n    <!-- <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n      <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n        }}</mat-icon>\r\n      <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"classInput.togglePasswordVisibility()\"\r\n        mat-icon-button matSuffix>\r\n        <mat-icon>{{ classInput.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    <!-- Password Strength Hint -->\r\n    <mat-hint *ngIf=\"inputConfig.type === 'password'\" [style.color]=\"passwordStrengthColor(inputConfig.id)\"\r\n      matTooltip=\"The password should be at least 8 characters long. Have at least one uppercase letter, one lowercase, one digit, one special character.\"\r\n      align=\"end\">\r\n      {{ checkPasswordStrength(inputConfig.id) }} password\r\n    </mat-hint>\r\n\r\n  </mat-form-field>\r\n\r\n  \r\n\r\n\r\n</ng-container>\r\n", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: MatModulesModule }, { kind: "component", type: i5.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: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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.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: InputCustomComponent, selector: "lib-input-custom", inputs: ["inputConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: BasicInputInputElementComponent, decorators: [{
             type: Component,
@@ -9062,6 +9137,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], formGroup: [{
                 type: Input
+            }], canReload: [{
+                type: Input
+            }], reload: [{
+                type: Output
             }] } });
 
 class ColorScale {
@@ -9177,9 +9256,9 @@ class Color {
     }
 }
 
-function configureCols(inputConfig) {
+function configureCols(inputConfig, tempLabels) {
     try {
-        const labelInputs = (inputConfig?.formInputs || []).filter(input => input.showAsLabel);
+        const labelInputs = (inputConfig?.formInputs || []).filter(input => input.showAsLabel || tempLabels.includes(input.formControlName));
         const cols = [];
         let colConfigs = {};
         for (let index = 0; index < (labelInputs).length; index++) {
@@ -9192,7 +9271,8 @@ function configureCols(inputConfig) {
             colConfigs[`${inputConfig.id}.${col.id}`] = {
                 'property': `${inputConfig.id}.${col.id}`,
                 'formControlName': col.formControlName,
-                'label': col.label
+                'label': col.label,
+                dataType: getDataType(col)
             };
         }
         //add remove section config
@@ -9213,6 +9293,32 @@ function configureCols(inputConfig) {
         throw new Error(message);
     }
 }
+function getDataType(input) {
+    try {
+        if (input.pipe?.pipeType) {
+            return input.pipe.pipeType;
+        }
+        const inputDataType = input.dataType;
+        switch (inputDataType) {
+            case InputDataTypes.Number:
+                return DocumentLitsLabelConfigInterfaceValueType.number;
+            case InputDataTypes.Date:
+                return DocumentLitsLabelConfigInterfaceValueType.date;
+            case InputDataTypes.Array:
+                return InputDataTypes.Array;
+            case InputDataTypes.Boolean:
+                return InputDataTypes.Boolean;
+            case InputDataTypes.Object:
+                return InputDataTypes.Object;
+            default:
+                return DocumentLitsLabelConfigInterfaceValueType.string;
+        }
+    }
+    catch (error) {
+        const msg = error instanceof Error ? error.message : 'Failed to get data type';
+        throw new Error(msg);
+    }
+}
 
 class MultipleInputTableViewComponent {
     constructor() {
@@ -9225,6 +9331,7 @@ class MultipleInputTableViewComponent {
         this.areYouSureYouWantToDeleteRow = {};
         this.countDownDate = new Date();
         this.deletionTimers = {}; // Store timeout IDs by row ID
+        this.tempLabels = [];
         this.SYSTEM_KEY_IN_EDIT = null;
     }
     ;
@@ -9305,9 +9412,6 @@ class MultipleInputTableViewComponent {
         }
         return background;
     }
-    isNumber(v) {
-        return typeof v === 'number';
-    }
     hasTopBorder(row) {
         const input = this.inputConfig;
         const inputIsGrouped = input.groupBy;
@@ -9342,40 +9446,60 @@ class MultipleInputTableViewComponent {
                 return func;
         }
     }
-    get configureCols() {
+    toggleTepLabel(event, label) {
+        if (this.tempLabels.includes(label)) {
+            this.tempLabels = this.tempLabels.filter(l => l !== label);
+        }
+        else {
+            this.tempLabels.push(label);
+        }
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    get getColConfig() {
         if (!this.inputConfig)
             return {
                 columnsConfig: [],
                 displayedColumnsInOrder: []
             };
-        return configureCols(this.inputConfig);
+        return configureCols(this.inputConfig, this.tempLabels);
+    }
+    get displayedColumnsInOrder() {
+        return this.getColConfig.displayedColumnsInOrder;
+    }
+    get allPossibleLabels() {
+        return this.inputConfig?.formInputs?.map(inp => ({
+            label: inp.label,
+            selected: this.displayedColumnsInOrder.includes(`${this.inputConfig?.id}.${inp.id}`),
+            formControlName: inp.formControlName
+        })) || [];
     }
     rowIsInEdit(row) {
         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      \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 (getColConfig.displayedColumnsInOrder.length===0) {\r\n<div style=\"\r\n      padding-left: 16px;\r\n      padding-right: 16px;\r\n      padding-top: 16px;\r\n      padding-bottom: 16px;\r\n\r\n      display: flex;\r\n      justify-content: center;\r\n      opacity: 0.6;\r\n      font-size: 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 (displayedColumnsInOrder||[]); track col) {\r\n    <ng-container [matColumnDef]=\"col\">\r\n      <th mat-header-cell  *matHeaderCellDef>\r\n        <span style=\"text-align: start; line-height: normal; font-size: 13px\">\r\n          {{ getColConfig.columnsConfig?.[col]?.[\"label\"] }}\r\n        </span>\r\n        @if($last){\r\n          <button  matTooltip=\"Show other values\"  [matMenuTriggerFor]=\"colOptions\" \r\n            [matMenuTriggerData]=\"{}\"  mat-icon-button>\r\n            <mat-icon>\r\n              label\r\n            </mat-icon>\r\n          </button>\r\n        }\r\n      </th>\r\n      <td [class.functionClass]=\"row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION']\"\r\n      \r\n        [style.background]=\"\r\n          returnBackground(row,  getColConfig.columnsConfig?.[col])\r\n        \" mat-cell *matCellDef=\"let row\">\r\n        <div *ngIf=\" getColConfig.columnsConfig?.[col]?.['type'] === 'removal'\" class=\"cellClass\">\r\n          <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' && !inputConfig?.readonly  \r\n               \r\n            \" \r\n            [matMenuTriggerFor]=\"rowOptions\" \r\n            [matMenuTriggerData]=\"{row:row}\" \r\n            #t=\"matMenuTrigger\" (click)=\"applyOptionsToFn(row)\"\r\n            expand=\"block\" fill=\"clear\" style=\"margin-left: auto;margin-right:0px;display:block\">\r\n          @if (rowIsInEdit(row)) {\r\n            <mat-icon color=\"primary\">\r\n              edit\r\n            </mat-icon>   \r\n\r\n          }@else {\r\n            <mat-icon >\r\n              {{\r\n                t.menuOpen  ? 'close' : 'more_horiz'\r\n              }}\r\n            \r\n            </mat-icon>\r\n          }\r\n        \r\n\r\n          </button>\r\n\r\n\r\n          <mat-chip *ngIf=\"\r\n       row['SYSTEM_KEY_IN_EDIT']\r\n            \r\n        \">\r\n            In {{ inputConfig?.readonly ? 'View' : 'Edit' }}\r\n\r\n          </mat-chip>\r\n\r\n        </div>\r\n        <div *ngIf=\"getColConfig.columnsConfig && getColConfig.columnsConfig?.[col]?.type !== 'removal'\"\r\n          class=\"cellClass\">\r\n          <span >\r\n            {{ row[col] |formatData: getColConfig.columnsConfig?.[col].dataType }}\r\n\r\n          </span>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n    }\r\n\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"getColConfig.displayedColumnsInOrder \"></tr>\r\n    <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n      \r\n      *matRowDef=\"let row; columns: getColConfig.displayedColumnsInOrder\"></tr>\r\n  </table>\r\n  \r\n  <div *ngIf=\"!(dataSource?.data)||(dataSource?.data)?.length === 0\">\r\n    <div style=\"\r\n          padding-left: 16px;\r\n          padding-right: 16px;\r\n          padding-top: 16px;\r\n          padding-bottom: 16px;\r\n\r\n          display: flex;\r\n          justify-content: center;\r\n          opacity: 0.6;\r\n          font-size: 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 #colOptions=\"matMenu\">\r\n  <ng-template matMenuContent >\r\n        @for (label of allPossibleLabels; track label.label) {\r\n        <button mat-menu-item  (click)=\"toggleTepLabel($event,label.formControlName);\">\r\n          <mat-icon>\r\n             {{ label.selected?'check_circle':'radio_button_unchecked'}}\r\n          </mat-icon>\r\n           {{label.label}}\r\n           \r\n        </button>\r\n      \r\n        }\r\n\r\n  </ng-template>\r\n</mat-menu>\r\n<mat-menu #rowOptions=\"matMenu\">\r\n  <ng-template matMenuContent let-row=\"row\">\r\n    @if(!inputConfig?.readonly){\r\n    <button mat-menu-item (click)=\"editItem(row)\">\r\n      <mat-icon>\r\n        {{'edit'}}\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          {{ 'Edit'}}\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          {{inputConfig?.readonly ? 'View item properties' : 'Modify item properties'}}\r\n        </div>\r\n      </div>\r\n    </button>\r\n\r\n    <button mat-menu-item (click)=\"copy(row)\">\r\n      <mat-icon>\r\n        content_copy\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          Duplicate\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          Create a copy with same values\r\n        </div>\r\n      </div>\r\n    </button>\r\n    @if(isAboutToDeleteRow(row)){\r\n      <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n        <mat-icon color=\"accent\">\r\n          cancel\r\n        </mat-icon>\r\n        <div class=\"option-text\">\r\n          <div class=\"option-main-text\" style=\"color: #2196F3;\">\r\n            Cancel Deletion\r\n          </div>\r\n          <div class=\"option-sub-text\">\r\n            Auto-deleting in {{ secondsCountDown()}} seconds...\r\n          </div>\r\n        </div>\r\n      </button>\r\n      <div class=\"deletion-progress-container\">\r\n        <mat-progress-bar color=\"warn\" mode=\"determinate\" [value]=\"getCountdownSeconds()\"></mat-progress-bar>\r\n        <div class=\"deletion-message\" *ngIf=\"getCountdownSeconds() > 75\">\r\n          Deleting soon...\r\n        </div>\r\n      </div>\r\n    }@else {\r\n      <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n        <mat-icon color=\"warn\">\r\n          delete_outline\r\n        </mat-icon>\r\n        <div class=\"option-text\">\r\n          <div class=\"option-main-text\">\r\n            Delete \r\n          </div>\r\n          <div class=\"option-sub-text\">\r\n            Will delete after 3 seconds (click to cancel)\r\n          </div>\r\n        </div>\r\n      </button>\r\n    }\r\n    }\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".functionClass{background:var(--mat-sys-surface-container, var(--mat-app-surface));font-weight:500}.option-text{display:flex;flex-direction:column;margin-left:8px}.option-main-text{font-size: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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: i4$3.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$4.MatChip, i5.MatIcon, i6$1.MatMenuTrigger, i9$1.MatSort, i10.MatTable, i10.MatHeaderCellDef, i10.MatHeaderRowDef, i10.MatColumnDef, i10.MatCellDef, i10.MatRowDef, i10.MatHeaderCell, i10.MatCell, i10.MatHeaderRow, i10.MatRow, i4.MatTooltip, i2$2.NgIf, Promise.resolve().then(function () { return formatData_pipe; }).then(m => m.FormatDataPipe)]] }); }
 }
-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      \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"] }]
-        }], propDecorators: { inputConfig: [{
-                type: Input
-            }], dataSource: [{
-                type: Input
-            }], applyOptionsTo: [{
-                type: Input
-            }], formGroup: [{
-                type: Input
-            }], onEditItem: [{
-                type: Output
-            }], onDeleteItem: [{
-                type: Output
-            }], onCopy: [{
-                type: Output
-            }], onApplyOptionsTo: [{
-                type: Output
-            }] } });
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: MultipleInputTableViewComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return formatData_pipe; }).then(m => m.FormatDataPipe)], resolveMetadata: FormatDataPipe => ({ decorators: [{
+                type: Component,
+                args: [{ selector: 'lib-multiple-input-table-view', standalone: true, imports: [MatModulesModule, CommonModule, MatTableModule, FormatDataPipe], template: "@defer (on viewport) {\r\n\r\n@if (getColConfig.displayedColumnsInOrder.length===0) {\r\n<div style=\"\r\n      padding-left: 16px;\r\n      padding-right: 16px;\r\n      padding-top: 16px;\r\n      padding-bottom: 16px;\r\n\r\n      display: flex;\r\n      justify-content: center;\r\n      opacity: 0.6;\r\n      font-size: 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 (displayedColumnsInOrder||[]); track col) {\r\n    <ng-container [matColumnDef]=\"col\">\r\n      <th mat-header-cell  *matHeaderCellDef>\r\n        <span style=\"text-align: start; line-height: normal; font-size: 13px\">\r\n          {{ getColConfig.columnsConfig?.[col]?.[\"label\"] }}\r\n        </span>\r\n        @if($last){\r\n          <button  matTooltip=\"Show other values\"  [matMenuTriggerFor]=\"colOptions\" \r\n            [matMenuTriggerData]=\"{}\"  mat-icon-button>\r\n            <mat-icon>\r\n              label\r\n            </mat-icon>\r\n          </button>\r\n        }\r\n      </th>\r\n      <td [class.functionClass]=\"row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION']\"\r\n      \r\n        [style.background]=\"\r\n          returnBackground(row,  getColConfig.columnsConfig?.[col])\r\n        \" mat-cell *matCellDef=\"let row\">\r\n        <div *ngIf=\" getColConfig.columnsConfig?.[col]?.['type'] === 'removal'\" class=\"cellClass\">\r\n          <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' && !inputConfig?.readonly  \r\n               \r\n            \" \r\n            [matMenuTriggerFor]=\"rowOptions\" \r\n            [matMenuTriggerData]=\"{row:row}\" \r\n            #t=\"matMenuTrigger\" (click)=\"applyOptionsToFn(row)\"\r\n            expand=\"block\" fill=\"clear\" style=\"margin-left: auto;margin-right:0px;display:block\">\r\n          @if (rowIsInEdit(row)) {\r\n            <mat-icon color=\"primary\">\r\n              edit\r\n            </mat-icon>   \r\n\r\n          }@else {\r\n            <mat-icon >\r\n              {{\r\n                t.menuOpen  ? 'close' : 'more_horiz'\r\n              }}\r\n            \r\n            </mat-icon>\r\n          }\r\n        \r\n\r\n          </button>\r\n\r\n\r\n          <mat-chip *ngIf=\"\r\n       row['SYSTEM_KEY_IN_EDIT']\r\n            \r\n        \">\r\n            In {{ inputConfig?.readonly ? 'View' : 'Edit' }}\r\n\r\n          </mat-chip>\r\n\r\n        </div>\r\n        <div *ngIf=\"getColConfig.columnsConfig && getColConfig.columnsConfig?.[col]?.type !== 'removal'\"\r\n          class=\"cellClass\">\r\n          <span >\r\n            {{ row[col] |formatData: getColConfig.columnsConfig?.[col].dataType }}\r\n\r\n          </span>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n    }\r\n\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"getColConfig.displayedColumnsInOrder \"></tr>\r\n    <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n      \r\n      *matRowDef=\"let row; columns: getColConfig.displayedColumnsInOrder\"></tr>\r\n  </table>\r\n  \r\n  <div *ngIf=\"!(dataSource?.data)||(dataSource?.data)?.length === 0\">\r\n    <div style=\"\r\n          padding-left: 16px;\r\n          padding-right: 16px;\r\n          padding-top: 16px;\r\n          padding-bottom: 16px;\r\n\r\n          display: flex;\r\n          justify-content: center;\r\n          opacity: 0.6;\r\n          font-size: 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 #colOptions=\"matMenu\">\r\n  <ng-template matMenuContent >\r\n        @for (label of allPossibleLabels; track label.label) {\r\n        <button mat-menu-item  (click)=\"toggleTepLabel($event,label.formControlName);\">\r\n          <mat-icon>\r\n             {{ label.selected?'check_circle':'radio_button_unchecked'}}\r\n          </mat-icon>\r\n           {{label.label}}\r\n           \r\n        </button>\r\n      \r\n        }\r\n\r\n  </ng-template>\r\n</mat-menu>\r\n<mat-menu #rowOptions=\"matMenu\">\r\n  <ng-template matMenuContent let-row=\"row\">\r\n    @if(!inputConfig?.readonly){\r\n    <button mat-menu-item (click)=\"editItem(row)\">\r\n      <mat-icon>\r\n        {{'edit'}}\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          {{ 'Edit'}}\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          {{inputConfig?.readonly ? 'View item properties' : 'Modify item properties'}}\r\n        </div>\r\n      </div>\r\n    </button>\r\n\r\n    <button mat-menu-item (click)=\"copy(row)\">\r\n      <mat-icon>\r\n        content_copy\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          Duplicate\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          Create a copy with same values\r\n        </div>\r\n      </div>\r\n    </button>\r\n    @if(isAboutToDeleteRow(row)){\r\n      <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n        <mat-icon color=\"accent\">\r\n          cancel\r\n        </mat-icon>\r\n        <div class=\"option-text\">\r\n          <div class=\"option-main-text\" style=\"color: #2196F3;\">\r\n            Cancel Deletion\r\n          </div>\r\n          <div class=\"option-sub-text\">\r\n            Auto-deleting in {{ secondsCountDown()}} seconds...\r\n          </div>\r\n        </div>\r\n      </button>\r\n      <div class=\"deletion-progress-container\">\r\n        <mat-progress-bar color=\"warn\" mode=\"determinate\" [value]=\"getCountdownSeconds()\"></mat-progress-bar>\r\n        <div class=\"deletion-message\" *ngIf=\"getCountdownSeconds() > 75\">\r\n          Deleting soon...\r\n        </div>\r\n      </div>\r\n    }@else {\r\n      <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n        <mat-icon color=\"warn\">\r\n          delete_outline\r\n        </mat-icon>\r\n        <div class=\"option-text\">\r\n          <div class=\"option-main-text\">\r\n            Delete \r\n          </div>\r\n          <div class=\"option-sub-text\">\r\n            Will delete after 3 seconds (click to cancel)\r\n          </div>\r\n        </div>\r\n      </button>\r\n    }\r\n    }\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".functionClass{background:var(--mat-sys-surface-container, var(--mat-app-surface));font-weight:500}.option-text{display:flex;flex-direction:column;margin-left:8px}.option-main-text{font-size: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"] }]
+            }], ctorParameters: null, propDecorators: { inputConfig: [{
+                    type: Input
+                }], dataSource: [{
+                    type: Input
+                }], applyOptionsTo: [{
+                    type: Input
+                }], formGroup: [{
+                    type: Input
+                }], onEditItem: [{
+                    type: Output
+                }], onDeleteItem: [{
+                    type: Output
+                }], onCopy: [{
+                    type: Output
+                }], onApplyOptionsTo: [{
+                    type: Output
+                }] } }) });
 
 class MultipleInputTableEditComponent {
     constructor() {
@@ -9502,11 +9626,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 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-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$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.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$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$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 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-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: [{
@@ -9571,6 +9695,7 @@ class MultipleInputTableComponent extends BaseCustomInput {
     constructor(ngControl, elementRef) {
         super(ngControl, elementRef, customInputConfig$3);
         this.editorMode = false;
+        this.rowInViewOnly = undefined;
         this.listenToValueChanges();
     }
     set inputConfig(config) {
@@ -9600,14 +9725,12 @@ class MultipleInputTableComponent extends BaseCustomInput {
                     ? addGroups(this.value, this.inputConfig.groupBy)
                     : this.value;
                 const data = getCaluculatedTableData(this.inputConfig, TableData);
-                console.error('Table data is not equal to value', data, this.value);
                 if (!this.dataSource) {
                     this.dataSource = new MatTableDataSource(data);
                     this.dataSource;
                 }
                 else {
                     this.dataSource.data = data;
-                    console.error('Table data is not equal to value', data, this.value);
                 }
             }
             return true;
@@ -9722,7 +9845,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\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"] }] }); }
+    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 || !!rowInViewOnly){\r\n<lib-multiple-input-table-edit \r\n[editorMode]=\"editorMode\"\r\n(editMultipleInput)=\"editInput($event)\"\r\n(deleteInput)=\"  deleteItemInput($event)\"\r\n(addFunction)=\"addFunction($event)\"\r\n(showItemAsLabel)=\"showItemAsLabel($event)\"\r\n(onSaveMultipleInputForm)=\"saveMultipleInputForm()\"\r\n(reorderItems)=\"reorderItems($event)\"\r\n[formBuilderFunctions]=\"formBuilderFunctions\"\r\n[formGroup]=\"parentFormGroup\"\r\n[inputConfig]=\"inputConfig\"\r\n></lib-multiple-input-table-edit>\r\n\r\n}\r\n\r\n@if (\r\n  !inputConfig?.readonly &&\r\n  !inputConfig?.formIsOpen\r\n) {\r\n  <section >\r\n    <button \r\n    color=\"primary\" \r\n    style=\"    display: block;\r\n    margin-top: 8px;\r\n    width: 100%;\"  (click)=\"generateMultipleInputForm()\"  mat-flat-button>\r\n  \r\n        {{handleLabel}}\r\n          <mat-icon  matPrefix>{{\r\n            handleIcon()\r\n          }}</mat-icon>\r\n  \r\n        \r\n        </button>\r\n  </section>\r\n  \r\n}\r\n", styles: [".table-container{position:relative;max-height:400px;overflow:auto}table{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.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,
@@ -9731,7 +9854,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\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 || !!rowInViewOnly){\r\n<lib-multiple-input-table-edit \r\n[editorMode]=\"editorMode\"\r\n(editMultipleInput)=\"editInput($event)\"\r\n(deleteInput)=\"  deleteItemInput($event)\"\r\n(addFunction)=\"addFunction($event)\"\r\n(showItemAsLabel)=\"showItemAsLabel($event)\"\r\n(onSaveMultipleInputForm)=\"saveMultipleInputForm()\"\r\n(reorderItems)=\"reorderItems($event)\"\r\n[formBuilderFunctions]=\"formBuilderFunctions\"\r\n[formGroup]=\"parentFormGroup\"\r\n[inputConfig]=\"inputConfig\"\r\n></lib-multiple-input-table-edit>\r\n\r\n}\r\n\r\n@if (\r\n  !inputConfig?.readonly &&\r\n  !inputConfig?.formIsOpen\r\n) {\r\n  <section >\r\n    <button \r\n    color=\"primary\" \r\n    style=\"    display: block;\r\n    margin-top: 8px;\r\n    width: 100%;\"  (click)=\"generateMultipleInputForm()\"  mat-flat-button>\r\n  \r\n        {{handleLabel}}\r\n          <mat-icon  matPrefix>{{\r\n            handleIcon()\r\n          }}</mat-icon>\r\n  \r\n        \r\n        </button>\r\n  </section>\r\n  \r\n}\r\n", styles: [".table-container{position:relative;max-height:400px;overflow:auto}table{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -9752,19 +9875,21 @@ function addGroups(tableValue, groupBy) {
 class MultipleInputInputElementComponent {
     constructor() {
         this.editorMode = false;
+        this.canReload = false;
+        this.reload = new EventEmitter();
     }
     get errorMessage() {
         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", canReload: "canReload" }, outputs: { reload: "reload" }, 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 @if(canReload){\r\n  <mat-hint  align=\"end\">\r\n      \r\n     <button  click=\" canReload.emit()\" style=\"    height: 28px;\r\n    width: 28px;\r\n    padding: 0px;\r\n    font-size: 16px;\" [matTooltip]=\"'Reload ' + inputConfig.label +' resources'\" mat-icon-button>\r\n    <mat-icon>\r\n     sync\r\n    </mat-icon>\r\n\r\n  </button>\r\n  </mat-hint>\r\n \r\n\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: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.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: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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 @if(canReload){\r\n  <mat-hint  align=\"end\">\r\n      \r\n     <button  click=\" canReload.emit()\" style=\"    height: 28px;\r\n    width: 28px;\r\n    padding: 0px;\r\n    font-size: 16px;\" [matTooltip]=\"'Reload ' + inputConfig.label +' resources'\" mat-icon-button>\r\n    <mat-icon>\r\n     sync\r\n    </mat-icon>\r\n\r\n  </button>\r\n  </mat-hint>\r\n \r\n\r\n }\r\n  </mat-form-field>\r\n</form>", styles: ["mat-form-field{width:100%!important}\n"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
@@ -9773,6 +9898,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], formBuilderFunctions: [{
                 type: Input
+            }], canReload: [{
+                type: Input
+            }], reload: [{
+                type: Output
             }] } });
 
 const DEFAULT_OPTIONS = {
@@ -9838,7 +9967,7 @@ class GeoLocationFormInputComponent extends BaseCustomInput {
                 provide: MatFormFieldControl,
                 useExisting: GeoLocationFormInputComponent
             }
-        ], usesInheritance: true, ngImport: i0, template: "@if(!!empty){\r\n\r\n<p class=\"empty-state\">\r\n    Click icon to get your location\r\n\r\n</p>\r\n\r\n\r\n}\r\n<div class=\"coordinates-section\">\r\n    @if(!empty){\r\n    <div class=\"coordinate-item\">\r\n        <mat-icon color=\"primary\">map</mat-icon>\r\n        <span class=\"value\">\r\n            <div class=\"inner-value\">\r\n                {{value?.coords?.latitude || 'N/A'}} <span class=\"unit\">\u00B0N</span>\r\n            </div>\r\n            <div class=\"inner-value label\">\r\n                latitude\r\n            </div>\r\n        </span>\r\n\r\n\r\n    </div>\r\n    <div class=\"coordinate-item\">\r\n        <mat-icon color=\"primary\">map</mat-icon>\r\n\r\n        <span class=\"value\">\r\n            <div class=\"inner-value\">\r\n                {{value?.coords?.longitude || 'N/A'}}\r\n                <span class=\"unit\">\u00B0E</span>\r\n            </div>\r\n            <div class=\"inner-value label\">\r\n                longitude\r\n            </div>\r\n        </span>\r\n\r\n    </div>\r\n\r\n\r\n    <div class=\"coordinate-item\">\r\n        <mat-icon color=\"primary\">zoom_in_map</mat-icon>\r\n        <span class=\"value\">\r\n            <div class=\"inner-value\">\r\n                {{value?.coords?.accuracy | number:'1.0-0'}}\r\n                <span class=\"unit\">m</span>\r\n            </div>\r\n            <div class=\"inner-value label\">\r\n                accuracy\r\n            </div>\r\n        </span>\r\n\r\n\r\n    </div>\r\n    }\r\n    <button  mat-flat-button  (click)=\"getLocation()\">\r\n        {{empty ? 'Get Location' : 'Update Location'}}\r\n        <mat-icon>my_location</mat-icon>\r\n    </button>\r\n</div>", styles: [".coordinates-section{display:flex;padding:0;flex-direction:row;flex-wrap:wrap;gap:8px;justify-content:flex-start;align-items:center}.coordinate-item{flex:0 1 auto;width:fit-content;min-width:100px;display:flex;flex-direction:row;align-items:center;gap:8px;padding:4px;background:#f0f8ff;border-radius:8px;white-space:nowrap;font-size:small;border:solid 1px #daedfd}.empty-state{padding-left:16px;padding-right:16px;font-size:small;font-weight:500;line-height:normal;white-space:normal}mat-toolbar{max-width:100%;padding:0}.inner-value{line-height:normal;font-weight:500}.label{opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.DecimalPipe, name: "number" }, { 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"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "@if(!!empty){\r\n\r\n<p class=\"empty-state\">\r\n    Click icon to get your location\r\n\r\n</p>\r\n\r\n\r\n}\r\n<div class=\"coordinates-section\">\r\n    @if(!empty){\r\n    <div class=\"coordinate-item\">\r\n        <mat-icon color=\"primary\">map</mat-icon>\r\n        <span class=\"value\">\r\n            <div class=\"inner-value\">\r\n                {{value?.coords?.latitude || 'N/A'}} <span class=\"unit\">\u00B0N</span>\r\n            </div>\r\n            <div class=\"inner-value label\">\r\n                latitude\r\n            </div>\r\n        </span>\r\n\r\n\r\n    </div>\r\n    <div class=\"coordinate-item\">\r\n        <mat-icon color=\"primary\">map</mat-icon>\r\n\r\n        <span class=\"value\">\r\n            <div class=\"inner-value\">\r\n                {{value?.coords?.longitude || 'N/A'}}\r\n                <span class=\"unit\">\u00B0E</span>\r\n            </div>\r\n            <div class=\"inner-value label\">\r\n                longitude\r\n            </div>\r\n        </span>\r\n\r\n    </div>\r\n\r\n\r\n    <div class=\"coordinate-item\">\r\n        <mat-icon color=\"primary\">zoom_in_map</mat-icon>\r\n        <span class=\"value\">\r\n            <div class=\"inner-value\">\r\n                {{value?.coords?.accuracy | number:'1.0-0'}}\r\n                <span class=\"unit\">m</span>\r\n            </div>\r\n            <div class=\"inner-value label\">\r\n                accuracy\r\n            </div>\r\n        </span>\r\n\r\n\r\n    </div>\r\n    }\r\n    <button  mat-flat-button  (click)=\"getLocation()\">\r\n        {{empty ? 'Get Location' : 'Update Location'}}\r\n        <mat-icon>my_location</mat-icon>\r\n    </button>\r\n</div>", styles: [".coordinates-section{display:flex;padding:0;flex-direction:row;flex-wrap:wrap;gap:8px;justify-content:flex-start;align-items:center}.coordinate-item{flex:0 1 auto;width:fit-content;min-width:100px;display:flex;flex-direction:row;align-items:center;gap:8px;padding:4px;background:#f0f8ff;border-radius:8px;white-space:nowrap;font-size:small;border:solid 1px #daedfd}.empty-state{padding-left:16px;padding-right:16px;font-size:small;font-weight:500;line-height:normal;white-space:normal}mat-toolbar{max-width:100%;padding:0}.inner-value{line-height:normal;font-weight:500}.label{opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.DecimalPipe, name: "number" }, { 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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GeoLocationFormInputComponent, decorators: [{
             type: Component,
@@ -9861,16 +9990,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
 class GeoLocationComponent {
     constructor() {
         this.editorMode = false;
+        this.canReload = false;
+        this.reload = new EventEmitter();
     }
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GeoLocationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: GeoLocationComponent, isStandalone: true, selector: "lib-geo-location", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", editorMode: "editorMode", formBuilderFunctions: "formBuilderFunctions" }, ngImport: i0, template: "\r\n\r\n<form [formGroup]=\"formGroup\">\r\n    <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as classInput\">\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    <lib-geo-location-form-input\r\n    [inputConfig]=\"this.inputConfig\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n    [required]=\"this.inputConfig.required\"\r\n    ></lib-geo-location-form-input>\r\n    \r\nL\r\n   @if(inputConfig.hintLabel || classInput.temporaryHint ){\r\n      <mat-hint  class=\"inputHint\">\r\n        {{ classInput.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)=\"classInput.togglePasswordVisibility()\"\r\n          mat-icon-button matSuffix>\r\n          <mat-icon>{{ classInput.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>", styles: ["mat-form-field{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: 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: 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: GeoLocationFormInputComponent, selector: "lib-geo-location-form-input", inputs: ["formBuilderFunctions", "inputConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: GeoLocationComponent, isStandalone: true, selector: "lib-geo-location", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", editorMode: "editorMode", formBuilderFunctions: "formBuilderFunctions", canReload: "canReload" }, outputs: { reload: "reload" }, ngImport: i0, template: "\r\n\r\n<form [formGroup]=\"formGroup\">\r\n    <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as classInput\">\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    <lib-geo-location-form-input\r\n    [inputConfig]=\"this.inputConfig\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n    [required]=\"this.inputConfig.required\"\r\n    ></lib-geo-location-form-input>\r\n    \r\n   @if(inputConfig.hintLabel || classInput.temporaryHint ){\r\n      <mat-hint  class=\"inputHint\">\r\n        {{ classInput.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)=\"classInput.togglePasswordVisibility()\"\r\n          mat-icon-button matSuffix>\r\n          <mat-icon>{{ classInput.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>", styles: ["mat-form-field{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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$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: GeoLocationFormInputComponent, selector: "lib-geo-location-form-input", inputs: ["formBuilderFunctions", "inputConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: GeoLocationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-geo-location', standalone: true, imports: [CommonModule, MatModulesModule, ReactiveFormsModule, TFormInputStatusComponent, GeoLocationFormInputComponent], template: "\r\n\r\n<form [formGroup]=\"formGroup\">\r\n    <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as classInput\">\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    <lib-geo-location-form-input\r\n    [inputConfig]=\"this.inputConfig\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n    [required]=\"this.inputConfig.required\"\r\n    ></lib-geo-location-form-input>\r\n    \r\nL\r\n   @if(inputConfig.hintLabel || classInput.temporaryHint ){\r\n      <mat-hint  class=\"inputHint\">\r\n        {{ classInput.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)=\"classInput.togglePasswordVisibility()\"\r\n          mat-icon-button matSuffix>\r\n          <mat-icon>{{ classInput.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>", styles: ["mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'lib-geo-location', standalone: true, imports: [CommonModule, MatModulesModule, ReactiveFormsModule, TFormInputStatusComponent, GeoLocationFormInputComponent], template: "\r\n\r\n<form [formGroup]=\"formGroup\">\r\n    <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as classInput\">\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    <lib-geo-location-form-input\r\n    [inputConfig]=\"this.inputConfig\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n    [required]=\"this.inputConfig.required\"\r\n    ></lib-geo-location-form-input>\r\n    \r\n   @if(inputConfig.hintLabel || classInput.temporaryHint ){\r\n      <mat-hint  class=\"inputHint\">\r\n        {{ classInput.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)=\"classInput.togglePasswordVisibility()\"\r\n          mat-icon-button matSuffix>\r\n          <mat-icon>{{ classInput.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>", styles: ["mat-form-field{width:100%}\n"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
@@ -9879,6 +10010,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], formBuilderFunctions: [{
                 type: Input
+            }], canReload: [{
+                type: Input
+            }], reload: [{
+                type: Output
             }] } });
 
 // Image capture
@@ -9985,7 +10120,7 @@ class CameraCaptureComponent extends BaseCustomInput {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.6", type: CameraCaptureComponent, isStandalone: true, selector: "app-camera-capture", inputs: { inputConfig: "inputConfig" }, providers: [{
                 provide: MatFormFieldControl,
                 useExisting: CameraCaptureComponent
-            }], viewQueries: [{ propertyName: "video", first: true, predicate: ["video"], descendants: true }, { propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<br>\r\n<div class=\"video-container\">\r\n  <video\r\n  style=\"margin: auto;\"\r\n    [style.display]=\"!isCaptured ? 'block' : 'none'\"\r\n    #video\r\n    id=\"video\"\r\n    [width]=\"WIDTH\"\r\n    [height]=\"HEIGHT\"\r\n    autoplay\r\n  ></video>\r\n  <canvas\r\n    [style.display]=\"isCaptured ? 'block' : 'none'\"\r\n    #canvas\r\n    id=\"canvas\"\r\n    [width]=\"WIDTH\"\r\n    [height]=\"HEIGHT\"\r\n  ></canvas>\r\n</div>\r\n<mat-toolbar style=\"background: none;\">\r\n  <span class=\"spacer\"></span>\r\n  <button (click)=\"isCaptured ? recapture() : capture()\" [color]=\"isCaptured?'primary':'warn'\"  mat-icon-button>\r\n    <mat-icon>\r\n      photo_camera\r\n    </mat-icon>\r\n\r\n  </button>\r\n  <button   (click)=\"stopVideo()\" *ngIf=\"!isCaptured\"  mat-icon-button>\r\n    <mat-icon>\r\n      stop\r\n    </mat-icon>\r\n\r\n  </button>\r\n  <span class=\"spacer\"></span>\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [""], 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.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: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] }); }
+            }], viewQueries: [{ propertyName: "video", first: true, predicate: ["video"], descendants: true }, { propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<br>\r\n<div class=\"video-container\">\r\n  <video\r\n  style=\"margin: auto;\"\r\n    [style.display]=\"!isCaptured ? 'block' : 'none'\"\r\n    #video\r\n    id=\"video\"\r\n    [width]=\"WIDTH\"\r\n    [height]=\"HEIGHT\"\r\n    autoplay\r\n  ></video>\r\n  <canvas\r\n    [style.display]=\"isCaptured ? 'block' : 'none'\"\r\n    #canvas\r\n    id=\"canvas\"\r\n    [width]=\"WIDTH\"\r\n    [height]=\"HEIGHT\"\r\n  ></canvas>\r\n</div>\r\n<mat-toolbar style=\"background: none;\">\r\n  <span class=\"spacer\"></span>\r\n  <button (click)=\"isCaptured ? recapture() : capture()\" [color]=\"isCaptured?'primary':'warn'\"  mat-icon-button>\r\n    <mat-icon>\r\n      photo_camera\r\n    </mat-icon>\r\n\r\n  </button>\r\n  <button   (click)=\"stopVideo()\" *ngIf=\"!isCaptured\"  mat-icon-button>\r\n    <mat-icon>\r\n      stop\r\n    </mat-icon>\r\n\r\n  </button>\r\n  <span class=\"spacer\"></span>\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n\r\n", styles: [""], 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.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.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: CameraCaptureComponent, decorators: [{
             type: Component,
@@ -10008,11 +10143,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
             }] } });
 
 class ImageCaptureInputElementComponent {
+    constructor() {
+        this.canReload = false;
+        this.reload = new EventEmitter();
+    }
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ImageCaptureInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: ImageCaptureInputElementComponent, isStandalone: true, selector: "lib-image-capture-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, ngImport: i0, template: "\r\n\r\n<ng-container [formGroup]=\"formGroup\">\r\n  <mat-form-field [appearance]=\"inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as inputConfig\">\r\n    <mat-label>\r\n      {{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-camera-capture\r\n  [required]=\"this.inputConfig.required\"\r\n  [inputConfig]=\"inputConfig\"\r\n  [formControlName]=\"inputConfig.id\"\r\n  \r\n  ></app-camera-capture> \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</ng-container>\r\n", styles: ["mat-form-field{width:100%!important}\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: 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: CameraCaptureComponent, selector: "app-camera-capture", inputs: ["inputConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: ImageCaptureInputElementComponent, isStandalone: true, selector: "lib-image-capture-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", canReload: "canReload" }, outputs: { reload: "reload" }, ngImport: i0, template: "\r\n\r\n<ng-container [formGroup]=\"formGroup\">\r\n  <mat-form-field [appearance]=\"inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as inputConfig\">\r\n    <mat-label>\r\n      {{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-camera-capture\r\n  [required]=\"this.inputConfig.required\"\r\n  [inputConfig]=\"inputConfig\"\r\n  [formControlName]=\"inputConfig.id\"\r\n  \r\n  ></app-camera-capture> \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</ng-container>\r\n", styles: ["mat-form-field{width:100%!important}\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: i5.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: CameraCaptureComponent, selector: "app-camera-capture", inputs: ["inputConfig"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ImageCaptureInputElementComponent, decorators: [{
             type: Component,
@@ -10022,148 +10161,366 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                 type: Input
             }], formGroup: [{
                 type: Input
+            }], canReload: [{
+                type: Input
+            }], reload: [{
+                type: Output
             }] } });
 
+class FormatDataPipe {
+    transform(value, dataType, pipeConfig) {
+        try {
+            switch (dataType) {
+                case 'date':
+                    const datePipe = new DatePipe('en-US'); // You might want to inject this or make locale configurable
+                    return datePipe.transform(value, 'mediumDate');
+                case 'currency':
+                    // The 'R' for ZAR is hardcoded here as per the original function.
+                    // Consider making the currency code and locale configurable if needed.
+                    const currencyPipeForCurrencyType = new CurrencyPipe('en-US', pipeConfig?.param || 'ZAR');
+                    const numberValueForCurrency = parseFloat(value);
+                    return currencyPipeForCurrencyType.transform(numberValueForCurrency, pipeConfig?.param);
+                case 'number':
+                    if (pipeConfig?.pipeType === 'currency') {
+                        const currencyPipeForNumberType = new CurrencyPipe('en-US'); // Locale hardcoded
+                        const currencyCode = pipeConfig?.param;
+                        const numberValueForNumber = parseFloat(value);
+                        return currencyPipeForNumberType.transform(numberValueForNumber, currencyCode);
+                    }
+                    else {
+                        return value;
+                    }
+                case InputDataTypes.Array:
+                    return value.length + ' items';
+                case InputDataTypes.Object:
+                    return `{item}`;
+                case InputDataTypes.Boolean:
+                    return value ? 'Yes' : 'No';
+                case 'daysAgo':
+                    if (value) {
+                        const seconds = Math.floor((+new Date() - +new Date(value)) / 1000);
+                        if (seconds < 15)
+                            // less than 30 seconds ago will show as 'Just now'
+                            return 'Just now';
+                        const intervals = {
+                            year: 31536000,
+                            month: 2592000,
+                            week: 604800,
+                            day: 86400,
+                            hr: 3600,
+                            min: 60,
+                            sec: 1,
+                        };
+                        let counter;
+                        for (const i in intervals) {
+                            counter = Math.floor(seconds / intervals[i]);
+                            if (counter > 0)
+                                if (counter === 1) {
+                                    return counter + ' ' + i + ' ago'; // singular (1 day ago)
+                                }
+                                else {
+                                    return counter + ' ' + i + 's ago'; // plural (2 days ago)
+                                }
+                        }
+                    }
+                    return value;
+                default:
+                    return value;
+            }
+        }
+        catch (error) {
+            console.error('Error in FormatDataPipe:', error);
+            return value; // Return original value in case of an error
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FormatDataPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.6", ngImport: i0, type: FormatDataPipe, isStandalone: true, name: "formatData" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: FormatDataPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'formatData',
+                    standalone: true, // For Angular 14+ standalone components/pipes. Remove if not applicable.
+                }]
+        }] });
+
+var formatData_pipe = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    FormatDataPipe: FormatDataPipe
+});
+
 const customInputConfig = {
-    controlType: 'app-input-table',
+    controlType: 'lib-document-picker-reactive-input',
     nextId: 0
 };
-class InputTableComponent extends BaseCustomInput {
-    constructor(ngControl, elementRef) {
-        super(ngControl, elementRef, customInputConfig);
-        this.dataSource = new MatTableDataSource([]);
-    }
+class DocumentPickerReactiveInputComponent extends BaseCustomInput {
     get empty() {
-        return !this.dataSource || this.dataSource.data.length === 0;
+        return !this.value;
     }
     get shouldLabelFloat() {
-        return true; // Always float label for table input
+        return true;
     }
-    set paginator(value) {
-        this.paginatorDOMInstance = value;
-        this.dataSource['paginator'] = this.paginatorDOMInstance;
+    set inputConfig(value) {
+        if (_isEqual(this._inputConfig, value))
+            return;
+        this._inputConfig = value;
+        this.loadCols();
+        this.loadDocumentOptions();
     }
-    set value(value) {
-        if (!_.isEqual(this._value, value)) {
-            this._value = value;
-            this.onChange(value);
-            this.stateChanges.next();
-            this.dataSource.data = value;
-        }
+    get inputConfig() {
+        return this._inputConfig;
     }
-    ngOnInit() {
-        this.markAsTouched();
+    constructor(ngControl, elementRef) {
+        super(ngControl, elementRef, customInputConfig);
+        this.FORMS_CONFIG = inject(NGX_T_FORMS_CONFIG_TOKEN);
+        this.searchFormControl = new FormControl('');
+        this._cols = [];
+        this._loadingCols = false;
+        this.documentOptions = [];
+        this.pageIndex = 0;
+        this.pageSize = 5;
+        this.showButton = false;
+        this.loadingData = false;
+        this.selectedDocument = undefined;
     }
-    getColor(columnConfig, value, property) {
-        //FIXME: find interfaces here
-        const table = this.dataSource;
-        const isANumber = !isNaN(Number(value));
-        if (columnConfig['colorScale'] && isANumber) {
-            const lowestNumber = Math.min(...table.map((v) => Number(v[property])));
-            const highesNumber = Math.max(...table.map((v) => Number(v[property])));
-            let perc = (value - lowestNumber) / highesNumber;
-            if (columnConfig['colorScale'] === 'lowToHigh') {
-                return this.percentageToColor(perc, 120, 0);
+    ngOnInit() {
+        this.stateChanges.asObservable().pipe(takeUntil(this.destroy$), tap(() => {
+            if (this.selectedDocument?.['_id'] !== this.value && !!this.value) {
+                this.loadSelectedDocument();
             }
-            else {
-                let inves = 1 / perc;
-                return `solid ${this.percentageToColor(inves, 120, 0)}`;
+            if (this.selectedDocument?.['_id'] !== this.value && !this.value) {
+                this.loadDocumentOptions();
             }
+        }))
+            .subscribe();
+    }
+    get parentFormGroup() {
+        return this.ngControl?.control?.parent;
+    }
+    get displayedColumns() {
+        return this._cols.map(col => col.formControlName);
+    }
+    loadCols() {
+        const newConfig = this._inputConfig?.workflowPickerConfig;
+        if (_isEqual(this._pickerConfig, newConfig) || !newConfig?.workflowId)
+            return;
+        this._pickerConfig = newConfig;
+        this._loadingCols = true;
+        this.FORMS_CONFIG.formBuilder.getWorkflowCols(newConfig?.workflowId).pipe(take(1), tap(cols => {
+            this._cols = [{
+                    label: '',
+                    formControlName: "icons"
+                }, {
+                    label: 'reference',
+                    formControlName: "reference"
+                }, ...cols, {
+                    label: "",
+                    formControlName: "actions"
+                }];
+            this._loadingCols = false;
+        }), catchError(err => {
+            this._loadingCols = false;
+            this._cols = [];
+            return [];
+        })).subscribe();
+    }
+    get docLength() {
+        if (this.selectedDocument) {
+            return 1;
         }
-        else {
-            return 'none';
+        if (!this.searchKey) {
+            return this.documentOptions.length;
         }
+        return this.searchedData.length;
     }
-    percentageToColor(percentage, maxHue = 120, minHue = 0) {
-        const hue = percentage * (maxHue - minHue) + minHue;
-        return `hsl(${hue}, 100%, 50%)`;
+    get searchedData() {
+        const currentSearchKey = this.searchKey?.trim(); // Handles null, undefined, and trims whitespace
+        if (!currentSearchKey) {
+            return this.documentOptions; // No search key, return all documents
+        }
+        // Create a case-insensitive regular expression from the searchKey.
+        // Special regex characters in the searchKey are escaped to ensure they are treated literally.
+        const regex = new RegExp(currentSearchKey.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'i');
+        return this.documentOptions.filter(doc => {
+            // Ensure doc is a non-null object before attempting to iterate over its values.
+            if (typeof doc !== 'object' || doc === null) {
+                return false;
+            }
+            // Check if any string property value within the document matches the regex.
+            return Object.values(doc).some(value => typeof value === 'string' && regex.test(value));
+        });
     }
-    checklistIsDisabled(columnConfig, col) {
-        if (columnConfig['checkUpto']) {
-            const limitTo = Number(columnConfig['checkUpto']);
-            const numberOfTrue = this.dataSource.filter((v) => !!v[col]).length;
-            return numberOfTrue == limitTo;
+    get paginatedData() {
+        if (this.selectedDocument) {
+            return [this.selectedDocument];
         }
-        else {
-            return false;
+        const dataToPaginate = this.searchedData; // Use the filtered (or all) documents
+        const startIndex = this.pageIndex * this.pageSize;
+        // The 'end' parameter for slice is exclusive, so (pageIndex + 1) * pageSize is correct.
+        const endIndex = startIndex + this.pageSize;
+        return dataToPaginate.slice(startIndex, endIndex);
+    }
+    loadDocumentOptions() {
+        const newSource = this.inputConfig?.workflowPickerConfig.documentsSource;
+        if (_isEqual(this.documentsSource, newSource))
+            return;
+        this.documentsSource = newSource;
+        if (this.inputConfig?.workflowPickerConfig.documentSourceType === DataSources.Api) {
+            this.loadApiData(newSource);
+        }
+        if (this.inputConfig?.workflowPickerConfig.documentSourceType === DataSources.MongoDb) {
+            this.loadMongoData(newSource);
         }
     }
-    checkedCell(event, row, col) {
-        const updatedTable = this.dataSource.map((r) => {
-            if (r === row) {
-                let updatedRow = { ...r };
-                updatedRow[col] = event.detail.checked;
-                return updatedRow;
+    loadApiData(config) {
+        const missingInputs = [];
+        const postData = config.backEndConfig.minimumInputRequired.reduce((acc, curr) => {
+            if (curr.type === "default") {
+                acc[curr.name] = curr.defaultValue;
+                return acc;
             }
-            return r;
-        });
-        this.dataSource = updatedTable;
-        this.onChange(this.dataSource);
-        this.onTouched(); // Manually trigger the "touched" state
+            if (curr.type === "mapto" && this.parentFormGroup?.value[curr.name]) {
+                acc[curr.name] = this.parentFormGroup?.value[curr.name];
+                return acc;
+            }
+            missingInputs.push(curr.name);
+            return acc;
+        }, {});
+        postData['workflowId'] = this.inputConfig?.workflowPickerConfig.workflowId;
+        if (missingInputs.length > 0) {
+            this.dataLoadingError = `Missing inputs: ${missingInputs.join(", ")}`;
+            return;
+        }
+        this.loadingData = true;
+        this.FORMS_CONFIG.formBuilder.httpPostDataFunction(config.httpEndPoint, postData).pipe(take(1), tap((response) => {
+            this.documentOptions = response;
+            this.dataLoadingError = undefined;
+            this.loadingData = false;
+        }), catchError((error) => {
+            const msg = !error.error.message && error instanceof Error ? error.message : error.error.message;
+            this.dataLoadingError = msg;
+            this.loadingData = false;
+            return error;
+        })).subscribe();
+        /*************  ✨ Windsurf Command ⭐  *************/
+        /**
+         * Loads data from an API based on the provided configuration.
+         *
+         * @param config - The configuration object specifying the API endpoint, method, and other parameters
+         * required for fetching the data.
+         */
+        /*******  f6089262-9e73-4765-b244-aec461c2f1be  *******/ console.log("API Data Loading", config);
     }
-    getDeepProperty(path, item) {
-        return returnDeepProperty(item, path);
+    loadMongoData(config) {
+        if (!config.pipeline || config.pipeline.length === 0) {
+            this.dataLoadingError = 'No pipeline found';
+            return;
+        }
+        if (!config.workflowId) {
+            this.dataLoadingError = 'No workflow id found';
+            return;
+        }
+        this.loadingData = true;
+        this.FORMS_CONFIG.formBuilder.runMongoDbPipeLine(config.pipeline, config.workflowId).pipe(take(1), tap((data) => {
+            this.documentOptions = data.results,
+                this.loadingData = false;
+            this.dataLoadingError = undefined;
+        }), catchError((error) => {
+            console.error("Error", error);
+            const msg = error instanceof Error ? error.message : "Unknown error";
+            this.dataLoadingError = msg;
+            this.loadingData = false;
+            return error;
+        })).subscribe();
     }
-    identify(index, item) {
-        return item;
+    get searchKey() {
+        return this.searchFormControl.value;
     }
-    getTableCol() {
-        const input = this.inputConfig;
-        const displayedColumnsInOrder = input.tableConfig?.displayedColumnsInOrder;
-        return displayedColumnsInOrder
-            ? displayedColumnsInOrder.filter((v) => v !== undefined)
-            : [];
+    inputSearch(event) {
+        console.error(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: InputTableComponent, 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: InputTableComponent, isStandalone: true, selector: "app-input-table", inputs: { inputConfig: "inputConfig" }, providers: [{
-                provide: MatFormFieldControl,
-                useExisting: InputTableComponent
-            }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"example-container\">\r\n    <div style=\"    min-height: 50px;\r\n    max-height: 400px;\r\n    overflow: auto;\" class=\"example-table-container\">\r\n      <table\r\n        matSort\r\n        mat-table\r\n        [dataSource]=\"this.dataSource\"\r\n        class=\"example-table\"\r\n      >\r\n        <ng-container\r\n          class=\"borderBottomL\"\r\n          *ngFor=\"let col of getTableCol(); trackBy: identify\"\r\n          [matColumnDef]=\"col\"\r\n        >\r\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>\r\n            <span style=\"text-align: start\">\r\n              {{ this.inputConfig.tableConfig?.columnsConfig?.[col][\"label\"] }}\r\n            </span>\r\n          </th>\r\n  \r\n          <td\r\n            mat-cell\r\n            [style.background]=\"\r\n              getColor(\r\n                this.inputConfig.tableConfig?.columnsConfig?.[col],\r\n                row[col],\r\n                col\r\n              )\r\n            \"\r\n            *matCellDef=\"let row\"\r\n          >\r\n            <div\r\n              [ngSwitch]=\"\r\n                this.inputConfig.tableConfig?.columnsConfig?.[col]['type']\r\n              \"\r\n            >\r\n              <div class=\"cellClass\" *ngSwitchCase=\"'checkBox'\">\r\n                <mat-checkbox\r\n                  [disabled]=\"\r\n                    row[col]\r\n                      ? false\r\n                      : checklistIsDisabled(\r\n                          this.inputConfig.tableConfig?.columnsConfig?.[col],\r\n                          col\r\n                        )\r\n                  \"\r\n                  ngDefaultControl\r\n                  [(ngModel)]=\"row[col]\"\r\n                  (ionChange)=\"checkedCell($event, row, col)\"\r\n                  [checked]=\"row[col]\"\r\n                ></mat-checkbox>\r\n              </div>\r\n              <div class=\"cellClass\" *ngSwitchCase=\"'priceCheckImages'\">\r\n          \r\n                  <img\r\n                    [src]=\"\r\n                      getDeepProperty(\r\n                        this.inputConfig.tableConfig?.columnsConfig?.[col][\r\n                          'deepBind'\r\n                        ],\r\n                        row\r\n                      )\r\n                    \"\r\n                  />\r\n  \r\n              </div>\r\n              <div *ngSwitchDefault class=\"cellClass\">\r\n                <div [innerHTML]=\"row[col]\"> </div>\r\n              </div>\r\n            </div>\r\n          </td>\r\n        </ng-container>\r\n  \r\n        <tr\r\n          mat-header-row\r\n          *matHeaderRowDef=\"\r\n            this.inputConfig.tableConfig?.displayedColumnsInOrder\r\n          \"\r\n        ></tr>\r\n        <tr\r\n          mat-row\r\n          *matRowDef=\"\r\n            let row;\r\n            columns: this.inputConfig.tableConfig?.displayedColumnsInOrder\r\n          \"\r\n        ></tr>\r\n      </table>\r\n      <div\r\n        style=\"min-height: 140px; background: rgb(234 234 234 / 12%)\"\r\n        *ngIf=\"!this.dataSource\"\r\n        class=\"center\"\r\n      >\r\n        <label style=\"opacity: 0.6; font-size: 10.5px\">\r\n          Nothing yet\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  ", styles: [""], 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: "directive", type: i2$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: MatModulesModule }, { 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: "directive", type: i4$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { 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"] }] }); }
+    applyPagination(event) {
+        const { pageIndex, pageSize } = event;
+        this.pageIndex = pageIndex;
+        this.pageSize = pageSize;
+    }
+    selectRow(row) {
+        const id = row['_id'] || row['id'];
+        this.selectedDocument = undefined;
+        this.value = id === this.value ? undefined : id;
+        this.onChange(this.value);
+        this.onTouched();
+    }
+    loadSelectedDocument() {
+        if (!this.value)
+            return;
+        if (this.loadingSelected === this.value)
+            return;
+        this.loadingSelected = this.value;
+        this.FORMS_CONFIG.formBuilder.getSelectedDocument(this.value).pipe(take(1), tap(doc => {
+            this.selectedDocument = doc;
+            this.loadingSelected = undefined;
+        }), catchError(err => {
+            this.loadingSelected = undefined;
+            return [];
+        })).subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DocumentPickerReactiveInputComponent, 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: DocumentPickerReactiveInputComponent, isStandalone: true, selector: "lib-document-picker-reactive-input", inputs: { formBuilderFunctions: "formBuilderFunctions", inputConfig: "inputConfig" }, host: { properties: { "lib-document-picker-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: DocumentPickerReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "<mat-card>\r\n\r\n    @if(_loadingCols || loadingData || loadingSelected ){\r\n    <div style=\"display: flex; justify-content: center; align-items: center;padding:28px \">\r\n        <mat-spinner [diameter]=\"50\"></mat-spinner>\r\n    </div>\r\n\r\n    }@else if (this.dataLoadingError ) {\r\n    <mat-toolbar color=\"warn\">\r\n        <mat-icon>error</mat-icon>\r\n        <span>{{this.dataLoadingError}}</span>\r\n    </mat-toolbar>\r\n    }@else {\r\n    <div class=\"table-container\">\r\n        <div class=\"search-container\">\r\n\r\n            <mat-form-field subscriptSizing=\"dynamic\" class=\"search-field\">\r\n                <input matInput placeholder=\"search\" [formControl]=\"searchFormControl\" (change)=\"inputSearch($event)\"\r\n                    value=\"Sushi\">\r\n                <mat-icon matSuffix>\r\n                    search\r\n\r\n                </mat-icon>\r\n            </mat-form-field>\r\n\r\n\r\n        </div>\r\n        <table mat-table [dataSource]=\"paginatedData||[]\" class=\"example-table\" matSort matSortActive=\"created\"\r\n            matSortDisableClear matSortDirection=\"desc\">\r\n            @for (col of _cols; track col.formControlName) {\r\n            <ng-container [matColumnDef]=\"col.formControlName\" [stickyEnd]=\"$last\">\r\n                <th mat-header-cell *matHeaderCellDef\r\n                    [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n                    [class.project-name-col]=\"col.formControlName === 'projectName'\">\r\n\r\n\r\n                    {{col.label}}\r\n\r\n\r\n                </th>\r\n                <td mat-cell *matCellDef=\"let row\"\r\n                    [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n                    [class.project-name-col]=\"col.formControlName === 'projectName'\">\r\n                    @if(col.formControlName ==='icons'){\r\n                    <mat-icon style=\"color:var(--mat-sys-primary)\">description</mat-icon>\r\n                    }@else if(col.formControlName ==='actions'){\r\n                    @if((row['_id'] === value || row['id'] === value)&&!!value){\r\n                    <button (click)=\"selectRow(row)\" [matTooltip]=\"'Click to clear ' + row['reference'] + ' selection'\"\r\n                        matTooltipPosition=\"after\" class=\"selection-button\" mat-flat-button color=\"primary\">\r\n\r\n                        selected\r\n                        <mat-icon> check_circle </mat-icon>\r\n                    </button>\r\n\r\n                    }@else{\r\n\r\n                    <button (click)=\"selectRow(row)\" [matTooltip]=\"'Click to select ' + row['reference']\"\r\n                        matTooltipPosition=\"after\" class=\"selection-button\" mat-raised-button color=\"primary\">\r\n\r\n                        select\r\n                        <mat-icon>\r\n                            radio_button_unchecked\r\n                        </mat-icon>\r\n                    </button>\r\n                    }\r\n\r\n                    }@else {\r\n                    <span [style.color]=\"(row['_id'] === value || row['id'] === value) && !!value?'var(--mat-sys-primary)':''\">\r\n                        {{row[col.formControlName]|formatData:col.type}}\r\n                    </span>\r\n\r\n                    }\r\n                </td>\r\n            </ng-container>\r\n            }\r\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n            <tr mat-row class=\"data-row\" *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n        </table>\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n    <mat-paginator [length]=\"docLength\" (page)=\"applyPagination($event)\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\"\r\n        [pageSizeOptions]=\"[5,10, 30, 50, 100]\" aria-label=\"Select workflow document\"></mat-paginator>\r\n    }\r\n</mat-card>", styles: [".table-container{position:relative;overflow:auto}mat-form-field.search-field{width:100%;--mdc-filled-text-field-container-color:none}table{width:fit-content}td{white-space:pre}.selection-button{height:28px}.search-container{display:flex!important;align-items:center!important}\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: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i9$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "pipe", type: FormatDataPipe, name: "formatData" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: InputTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DocumentPickerReactiveInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-input-table', providers: [{
-                            provide: MatFormFieldControl,
-                            useExisting: InputTableComponent
-                        }], standalone: true, imports: [CommonModule, MatModulesModule, FormsModule], template: "<div class=\"example-container\">\r\n    <div style=\"    min-height: 50px;\r\n    max-height: 400px;\r\n    overflow: auto;\" class=\"example-table-container\">\r\n      <table\r\n        matSort\r\n        mat-table\r\n        [dataSource]=\"this.dataSource\"\r\n        class=\"example-table\"\r\n      >\r\n        <ng-container\r\n          class=\"borderBottomL\"\r\n          *ngFor=\"let col of getTableCol(); trackBy: identify\"\r\n          [matColumnDef]=\"col\"\r\n        >\r\n          <th mat-header-cell mat-sort-header *matHeaderCellDef>\r\n            <span style=\"text-align: start\">\r\n              {{ this.inputConfig.tableConfig?.columnsConfig?.[col][\"label\"] }}\r\n            </span>\r\n          </th>\r\n  \r\n          <td\r\n            mat-cell\r\n            [style.background]=\"\r\n              getColor(\r\n                this.inputConfig.tableConfig?.columnsConfig?.[col],\r\n                row[col],\r\n                col\r\n              )\r\n            \"\r\n            *matCellDef=\"let row\"\r\n          >\r\n            <div\r\n              [ngSwitch]=\"\r\n                this.inputConfig.tableConfig?.columnsConfig?.[col]['type']\r\n              \"\r\n            >\r\n              <div class=\"cellClass\" *ngSwitchCase=\"'checkBox'\">\r\n                <mat-checkbox\r\n                  [disabled]=\"\r\n                    row[col]\r\n                      ? false\r\n                      : checklistIsDisabled(\r\n                          this.inputConfig.tableConfig?.columnsConfig?.[col],\r\n                          col\r\n                        )\r\n                  \"\r\n                  ngDefaultControl\r\n                  [(ngModel)]=\"row[col]\"\r\n                  (ionChange)=\"checkedCell($event, row, col)\"\r\n                  [checked]=\"row[col]\"\r\n                ></mat-checkbox>\r\n              </div>\r\n              <div class=\"cellClass\" *ngSwitchCase=\"'priceCheckImages'\">\r\n          \r\n                  <img\r\n                    [src]=\"\r\n                      getDeepProperty(\r\n                        this.inputConfig.tableConfig?.columnsConfig?.[col][\r\n                          'deepBind'\r\n                        ],\r\n                        row\r\n                      )\r\n                    \"\r\n                  />\r\n  \r\n              </div>\r\n              <div *ngSwitchDefault class=\"cellClass\">\r\n                <div [innerHTML]=\"row[col]\"> </div>\r\n              </div>\r\n            </div>\r\n          </td>\r\n        </ng-container>\r\n  \r\n        <tr\r\n          mat-header-row\r\n          *matHeaderRowDef=\"\r\n            this.inputConfig.tableConfig?.displayedColumnsInOrder\r\n          \"\r\n        ></tr>\r\n        <tr\r\n          mat-row\r\n          *matRowDef=\"\r\n            let row;\r\n            columns: this.inputConfig.tableConfig?.displayedColumnsInOrder\r\n          \"\r\n        ></tr>\r\n      </table>\r\n      <div\r\n        style=\"min-height: 140px; background: rgb(234 234 234 / 12%)\"\r\n        *ngIf=\"!this.dataSource\"\r\n        class=\"center\"\r\n      >\r\n        <label style=\"opacity: 0.6; font-size: 10.5px\">\r\n          Nothing yet\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  " }]
+            args: [{ selector: 'lib-document-picker-reactive-input', imports: [CommonModule, MatModulesModule, FormatDataPipe, ReactiveFormsModule], host: {
+                        '[lib-document-picker-reactive-input]': 'shouldLabelFloat',
+                        '[id]': 'id',
+                    }, providers: [{ provide: MatFormFieldControl, useExisting: DocumentPickerReactiveInputComponent }], template: "<mat-card>\r\n\r\n    @if(_loadingCols || loadingData || loadingSelected ){\r\n    <div style=\"display: flex; justify-content: center; align-items: center;padding:28px \">\r\n        <mat-spinner [diameter]=\"50\"></mat-spinner>\r\n    </div>\r\n\r\n    }@else if (this.dataLoadingError ) {\r\n    <mat-toolbar color=\"warn\">\r\n        <mat-icon>error</mat-icon>\r\n        <span>{{this.dataLoadingError}}</span>\r\n    </mat-toolbar>\r\n    }@else {\r\n    <div class=\"table-container\">\r\n        <div class=\"search-container\">\r\n\r\n            <mat-form-field subscriptSizing=\"dynamic\" class=\"search-field\">\r\n                <input matInput placeholder=\"search\" [formControl]=\"searchFormControl\" (change)=\"inputSearch($event)\"\r\n                    value=\"Sushi\">\r\n                <mat-icon matSuffix>\r\n                    search\r\n\r\n                </mat-icon>\r\n            </mat-form-field>\r\n\r\n\r\n        </div>\r\n        <table mat-table [dataSource]=\"paginatedData||[]\" class=\"example-table\" matSort matSortActive=\"created\"\r\n            matSortDisableClear matSortDirection=\"desc\">\r\n            @for (col of _cols; track col.formControlName) {\r\n            <ng-container [matColumnDef]=\"col.formControlName\" [stickyEnd]=\"$last\">\r\n                <th mat-header-cell *matHeaderCellDef\r\n                    [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n                    [class.project-name-col]=\"col.formControlName === 'projectName'\">\r\n\r\n\r\n                    {{col.label}}\r\n\r\n\r\n                </th>\r\n                <td mat-cell *matCellDef=\"let row\"\r\n                    [class.text-right-align]=\"col.type === 'currency' || col.type === 'number'\"\r\n                    [class.project-name-col]=\"col.formControlName === 'projectName'\">\r\n                    @if(col.formControlName ==='icons'){\r\n                    <mat-icon style=\"color:var(--mat-sys-primary)\">description</mat-icon>\r\n                    }@else if(col.formControlName ==='actions'){\r\n                    @if((row['_id'] === value || row['id'] === value)&&!!value){\r\n                    <button (click)=\"selectRow(row)\" [matTooltip]=\"'Click to clear ' + row['reference'] + ' selection'\"\r\n                        matTooltipPosition=\"after\" class=\"selection-button\" mat-flat-button color=\"primary\">\r\n\r\n                        selected\r\n                        <mat-icon> check_circle </mat-icon>\r\n                    </button>\r\n\r\n                    }@else{\r\n\r\n                    <button (click)=\"selectRow(row)\" [matTooltip]=\"'Click to select ' + row['reference']\"\r\n                        matTooltipPosition=\"after\" class=\"selection-button\" mat-raised-button color=\"primary\">\r\n\r\n                        select\r\n                        <mat-icon>\r\n                            radio_button_unchecked\r\n                        </mat-icon>\r\n                    </button>\r\n                    }\r\n\r\n                    }@else {\r\n                    <span [style.color]=\"(row['_id'] === value || row['id'] === value) && !!value?'var(--mat-sys-primary)':''\">\r\n                        {{row[col.formControlName]|formatData:col.type}}\r\n                    </span>\r\n\r\n                    }\r\n                </td>\r\n            </ng-container>\r\n            }\r\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n            <tr mat-row class=\"data-row\" *matRowDef=\"let row; columns: displayedColumns;\"></tr>\r\n        </table>\r\n    </div>\r\n    <mat-divider></mat-divider>\r\n    <mat-paginator [length]=\"docLength\" (page)=\"applyPagination($event)\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\"\r\n        [pageSizeOptions]=\"[5,10, 30, 50, 100]\" aria-label=\"Select workflow document\"></mat-paginator>\r\n    }\r\n</mat-card>", styles: [".table-container{position:relative;overflow:auto}mat-form-field.search-field{width:100%;--mdc-filled-text-field-container-color:none}table{width:fit-content}td{white-space:pre}.selection-button{height:28px}.search-container{display:flex!important;align-items:center!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i0.ElementRef }], propDecorators: { inputConfig: [{
+                }] }, { type: i0.ElementRef }], propDecorators: { formBuilderFunctions: [{
+                type: Input
+            }], inputConfig: [{
                 type: Input
-            }], paginator: [{
-                type: ViewChild,
-                args: [MatPaginator, { static: false }]
-            }], sort: [{
-                type: ViewChild,
-                args: [MatSort, { static: false }]
             }] } });
 
-class SelectTableInputComponent {
+class DocumentPickerComponent {
+    constructor() {
+        this.editorMode = false;
+        this.canReload = false;
+        this.reload = new EventEmitter();
+    }
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectTableInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: SelectTableInputComponent, isStandalone: true, selector: "lib-select-table-input", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, ngImport: i0, template: "<p>select-table-input works!</p>\r\n\r\n\r\n<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    \r\n    <app-input-table\r\n    [required]=\"this.inputConfig.required\"\r\n    [inputConfig]=\"inputConfig\"\r\n    [formControlName]=\"inputConfig.id\"\r\n    ></app-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  \r\n    </mat-form-field>\r\n  </form>\r\n  ", styles: [""], dependencies: [{ 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: "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: InputTableComponent, selector: "app-input-table", inputs: ["inputConfig"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DocumentPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: DocumentPickerComponent, isStandalone: true, selector: "lib-document-picker", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", editorMode: "editorMode", formBuilderFunctions: "formBuilderFunctions", canReload: "canReload" }, outputs: { reload: "reload" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n    <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\"\r\n        *ngIf=\"this.inputConfig as classInput\">\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\r\n        <lib-document-picker-reactive-input [inputConfig]=\"inputConfig\" [formBuilderFunctions]=\"formBuilderFunctions\"\r\n            [required]=\"this.inputConfig.required\" [formControlName]=\"this.inputConfig.id\">\r\n\r\n        </lib-document-picker-reactive-input>\r\n\r\n        @if(inputConfig.hintLabel || classInput.temporaryHint ){\r\n        <mat-hint class=\"inputHint\">\r\n            {{ classInput.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)=\"classInput.togglePasswordVisibility()\"\r\n          mat-icon-button matSuffix>\r\n          <mat-icon>{{ classInput.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n        </button> -->\r\n        </ng-container>\r\n\r\n        <!-- Prefix & Suffix Text -->\r\n        <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n        <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n            }}</span>\r\n\r\n        <!-- Character Count Hint -->\r\n        <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n            {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n            }}\r\n        </mat-hint>\r\n\r\n\r\n\r\n    </mat-form-field>\r\n</form>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ 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: DocumentPickerReactiveInputComponent, selector: "lib-document-picker-reactive-input", inputs: ["formBuilderFunctions", "inputConfig"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i5.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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: SelectTableInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: DocumentPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-select-table-input', standalone: true, imports: [CommonModule, MatModulesModule, ReactiveFormsModule, InputTableComponent, TFormInputStatusComponent], template: "<p>select-table-input works!</p>\r\n\r\n\r\n<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    \r\n    <app-input-table\r\n    [required]=\"this.inputConfig.required\"\r\n    [inputConfig]=\"inputConfig\"\r\n    [formControlName]=\"inputConfig.id\"\r\n    ></app-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  \r\n    </mat-form-field>\r\n  </form>\r\n  " }]
+            args: [{ selector: 'lib-document-picker', imports: [CommonModule, ReactiveFormsModule, DocumentPickerReactiveInputComponent, TFormInputStatusComponent, MatModulesModule], template: "<form [formGroup]=\"formGroup\">\r\n    <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\"\r\n        *ngIf=\"this.inputConfig as classInput\">\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\r\n        <lib-document-picker-reactive-input [inputConfig]=\"inputConfig\" [formBuilderFunctions]=\"formBuilderFunctions\"\r\n            [required]=\"this.inputConfig.required\" [formControlName]=\"this.inputConfig.id\">\r\n\r\n        </lib-document-picker-reactive-input>\r\n\r\n        @if(inputConfig.hintLabel || classInput.temporaryHint ){\r\n        <mat-hint class=\"inputHint\">\r\n            {{ classInput.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)=\"classInput.togglePasswordVisibility()\"\r\n          mat-icon-button matSuffix>\r\n          <mat-icon>{{ classInput.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n        </button> -->\r\n        </ng-container>\r\n\r\n        <!-- Prefix & Suffix Text -->\r\n        <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n        <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n            }}</span>\r\n\r\n        <!-- Character Count Hint -->\r\n        <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n            {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n            }}\r\n        </mat-hint>\r\n\r\n\r\n\r\n    </mat-form-field>\r\n</form>", styles: ["mat-form-field{width:100%}\n"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
                 type: Input
+            }], editorMode: [{
+                type: Input
+            }], formBuilderFunctions: [{
+                type: Input
+            }], canReload: [{
+                type: Input
+            }], reload: [{
+                type: Output
             }] } });
 
 class TFormInputComponent {
     constructor(props) {
         this.props = props;
+        this.canReload = false;
         this.editorMode = false;
         this.elementTypes = ElementTypes;
         // Apply props from portal injection if available
         if (this.props) {
-            console.error('Received props via portal:', this.props);
             Object.keys(this.props).forEach(key => {
                 this[key] = this.props[key];
             });
@@ -10182,10 +10539,10 @@ 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   \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: { canReload: "canReload", 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  \r\n    [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    [canReload]=\"canReload\"\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 [canReload]=\"canReload\"\r\n    [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    [canReload]=\"canReload\"\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    [canReload]=\"canReload\"\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    [canReload]=\"canReload\"\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    [canReload]=\"canReload\"\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    [canReload]=\"canReload\"\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    [canReload]=\"canReload\"\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    [canReload]=\"canReload\"\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 [canReload]=\"canReload\"\r\n    [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    [canReload]=\"canReload\"\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    [canReload]=\"canReload\"\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    [canReload]=\"canReload\"\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      [canReload]=\"canReload\"\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.WorkflowDocumentPicker){\r\n      <lib-document-picker \r\n      [canReload]=\"canReload\"\r\n    [inputConfig]=\"inputConfig\"\r\n      [formGroup]=\"formGroup\"\r\n      [formBuilderFunctions]=\"formBuilderFunctions\"></lib-document-picker>\r\n    }\r\n  \r\n    @default {\r\n   \r\n      <lib-basic-input-input-element \r\n      [canReload]=\"canReload\"\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", "canReload"], outputs: ["reload"] }, { 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", "canReload"], outputs: ["reload"] }, { kind: "component", type: AutoCompleteInputElementComponent, selector: "lib-auto-complete-input-element", inputs: ["inputConfig", "formGroup", "options", "canReload"], outputs: ["reload"] }, { kind: "component", type: ToggleInputElementComponent, selector: "lib-toggle-input-element", inputs: ["inputConfig", "formGroup", "canReload"], outputs: ["reload"] }, { kind: "component", type: SelectInputElementComponent, selector: "lib-select-input-element", inputs: ["inputConfig", "formGroup", "canReload"], outputs: ["reload"] }, { kind: "component", type: TextareaInputElementComponent, selector: "lib-textarea-input-element", inputs: ["inputConfig", "formGroup", "canReload"], outputs: ["reload"] }, { kind: "component", type: DateRangePickerInputElementComponent, selector: "lib-date-range-picker-input-element", inputs: ["inputConfig", "formGroup", "canReload"], outputs: ["reload"] }, { kind: "component", type: DatePickerInputElementComponent, selector: "lib-date-picker-input-element", inputs: ["inputConfig", "formGroup", "canReload"], outputs: ["reload"] }, { kind: "component", type: FileUploadInputElementComponent, selector: "lib-file-upload-input-element", inputs: ["inputConfig", "formGroup", "canReload"], outputs: ["reload"] }, { 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"] }] }); }
+                EditorInputElementComponent, selector: "lib-editor-input-element", inputs: ["inputConfig", "formGroup", "canReload"], outputs: ["reload"] }, { kind: "component", type: SignatureInputElementComponent, selector: "lib-signature-input-element", inputs: ["inputConfig", "formGroup", "canReload"], outputs: ["reload"] }, { kind: "component", type: MultipleInputInputElementComponent, selector: "lib-multiple-input-input-element", inputs: ["inputConfig", "formGroup", "editorMode", "formBuilderFunctions", "canReload"], outputs: ["reload"] }, { kind: "component", type: BasicInputInputElementComponent, selector: "lib-basic-input-input-element", inputs: ["inputConfig", "formGroup", "canReload"], outputs: ["reload"] }, { kind: "component", type: ImageCaptureInputElementComponent, selector: "lib-image-capture-input-element", inputs: ["inputConfig", "formGroup", "canReload"], outputs: ["reload"] }, { kind: "component", type: DocumentPickerComponent, selector: "lib-document-picker", inputs: ["inputConfig", "formGroup", "editorMode", "formBuilderFunctions", "canReload"], outputs: ["reload"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TFormInputComponent, decorators: [{
             type: Component,
@@ -10210,14 +10567,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
                         MultipleInputInputElementComponent,
                         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   \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"] }]
+                        DocumentPickerComponent
+                    ], template: "\r\n@if(inputConfig ){\r\n\r\n@if(inputConfig.element === elementTypes.SectionTitle){\r\n<lib-section-title  \r\n    [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    [canReload]=\"canReload\"\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 [canReload]=\"canReload\"\r\n    [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    [canReload]=\"canReload\"\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    [canReload]=\"canReload\"\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    [canReload]=\"canReload\"\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    [canReload]=\"canReload\"\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    [canReload]=\"canReload\"\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    [canReload]=\"canReload\"\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    [canReload]=\"canReload\"\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 [canReload]=\"canReload\"\r\n    [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    [canReload]=\"canReload\"\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    [canReload]=\"canReload\"\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    [canReload]=\"canReload\"\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      [canReload]=\"canReload\"\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.WorkflowDocumentPicker){\r\n      <lib-document-picker \r\n      [canReload]=\"canReload\"\r\n    [inputConfig]=\"inputConfig\"\r\n      [formGroup]=\"formGroup\"\r\n      [formBuilderFunctions]=\"formBuilderFunctions\"></lib-document-picker>\r\n    }\r\n  \r\n    @default {\r\n   \r\n      <lib-basic-input-input-element \r\n      [canReload]=\"canReload\"\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
                 }, {
                     type: Inject,
                     args: ['COMPONENT_PROPS']
-                }] }], propDecorators: { inputConfig: [{
+                }] }], propDecorators: { canReload: [{
+                type: Input
+            }], inputConfig: [{
                 type: Input
             }], formGroup: [{
                 type: Input
@@ -10249,7 +10608,7 @@ class UserFormStepperComponent extends FormTowerControllerService {
         }
     }
     set formId(value) {
-        if (!value)
+        if (_isEqual(this._form, value))
             return;
         this.loadForm(value);
     }
@@ -10275,7 +10634,8 @@ class UserFormStepperComponent extends FormTowerControllerService {
         })).subscribe();
     }
     set initialValues(initialFormValues) {
-        if (!!initialFormValues && typeof initialFormValues === 'object') {
+        if (!!initialFormValues && typeof initialFormValues === 'object' && !_isEqual(this._initialFormValuesLocal, initialFormValues)) {
+            this._initialFormValuesLocal = initialFormValues;
             this.initializeFormValues(initialFormValues);
         }
     }
@@ -10344,7 +10704,7 @@ class UserFormStepperComponent extends FormTowerControllerService {
         this.submitForm(this.passParamsOnSubmit);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: UserFormStepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: UserFormStepperComponent, isStandalone: true, selector: "lib-user-form-stepper", inputs: { formId: "formId", initialValues: "initialValues", passParamsOnSubmit: "passParamsOnSubmit" }, host: { listeners: { "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (loading) {\r\n<div class=\"loading-container\">\r\n  <mat-spinner diameter=\"48\" aria-label=\"Loading form\" />\r\n</div>\r\n}\r\n<mat-stepper [style.display]=\"loading?'none':'block'\" #stepper class=\"form-stepper\" orientation=\"vertical\"\r\n  [linear]=\"!isEditable\" aria-label=\"Form sections stepper\" [animationDuration]=\"'300'\"\r\n  (selectionChange)=\"handleStepChange($event)\">\r\n\r\n  @for (step of selectFormSteps(); track step.sectionId) {\r\n  @if (!!step.sectionForm ) {\r\n  <mat-step [stepControl]=\"step.sectionForm\" [completed]=\"step.sectionIsSeen && !step.sectionIsInvalid\"\r\n    [editable]=\"isEditable\" [errorMessage]=\"step.sectionFormErrorMessage||''\" [state]=\"getStepState(step,$index)\"\r\n    [hasError]=\"!step.sectionForm.valid && !!step.sectionForm.touched\">\r\n    <ng-template matStepLabel>\r\n      <div class=\"step-label-container\" [attr.aria-label]=\"'Section ' + step.label\">\r\n        <span class=\"step-label-text\">{{step.label|titlecase}}</span>\r\n        @if (step.sectionIsSeen) {\r\n        <mat-icon [class.error]=\"step.sectionIsInvalid\"\r\n          [attr.aria-label]=\"step.sectionIsInvalid ? 'Section has errors' : 'Section completed'\">\r\n          {{step.sectionIsSeen}}\r\n        </mat-icon>\r\n        }\r\n\r\n        <span class=\"tour-trigger \" *ngIf=\"(step)?.activeSectionHasTour&&!!step.isActive \">\r\n          <button tourAnchor=\"Form-Tour-trigger\" matTooltip=\"Start section tour\" mat-flat-button>\r\n            <mat-icon>tour</mat-icon>\r\n          </button>\r\n        </span>\r\n      </div>\r\n    </ng-template>\r\n    @if(!!step.isActive){\r\n    @defer (on viewport; prefetch on idle) {\r\n    <div class=\"step-content\">\r\n      <div class=\"row form-section\">\r\n        @for (col of step.columns; track col.id) {\r\n        <div [class]=\"'col-md-'+col.colSize +  ' box'\">\r\n          <lib-t-form-input [tourAnchor]=\"col.id\" (valueChange)=\"updateValue(col.id,$event)\" [editorMode]=\"false\"\r\n            [formBuilderFunctions]=\"formBuilderFunctions\" [inputConfig]=\"col\" [formGroup]=\"step.sectionForm\"\r\n            [attr.aria-label]=\"col?.label || ''\">\r\n          </lib-t-form-input>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"step-actions\">\r\n        @if(!$first) {\r\n        <button mat-button matStepperPrevious type=\"button\" class=\"navigation-button\"\r\n          [attr.aria-label]=\"'Go back to ' + getPreviousStepLabel()\">\r\n\r\n          Back\r\n        </button>\r\n        }\r\n        @if (!$last) {\r\n        <button mat-flat-button matStepperNext color=\"primary\" type=\"button\" class=\"navigation-button\"\r\n          [attr.aria-label]=\"'Continue to ' + getNextStepLabel()\">\r\n          Next\r\n        </button>\r\n        }\r\n        @if (!!$last) {\r\n        <button mat-button (click)=\"stepper.reset();reset()\">Reset</button>\r\n        }\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=\"24\" />\r\n    </div>\r\n    }\r\n\r\n    }\r\n\r\n  </mat-step>\r\n  }\r\n  }\r\n</mat-stepper>\r\n\r\n<!-- Defer the footer toolbar until after the main form is loaded -->\r\n@defer (on idle; prefetch on viewport) {\r\n<footer><mat-toolbar class=\"submission-toolbar\" role=\"toolbar\" aria-label=\"Form submission actions\">\r\n    <span class=\"submission-status\" role=\"status\">\r\n      {{getSubmissionStatus}}\r\n    </span>\r\n    <button mat-raised-button color=\"primary\" [disabled]=\"mainForm?.invalid\" (click)=\"handleSubmit()\"\r\n      aria-label=\"Submit form\">\r\n      <span>\r\n        {{ formSubmissionMessage()}}\r\n      </span>\r\n      @if(submittingForm){\r\n      <mat-spinner diameter=\"10\"></mat-spinner>\r\n      }\r\n\r\n    </button>\r\n  </mat-toolbar>\r\n</footer>\r\n} @placeholder {\r\n<!-- Simple placeholder for the footer that maintains layout -->\r\n<footer>\r\n  <div class=\"submission-toolbar-placeholder\"></div>\r\n</footer>\r\n}", styles: [".form-stepper{min-height:400px}.step-label-container{display:flex;justify-content:space-between;align-items:center;width:100%;gap:16px}.step-error-message{font-size:12px;opacity:.9;margin-left:16px}.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-bottom:24px}.step-actions{display:flex;gap:16px;margin-top:24px}.navigation-button{display:flex;align-items:center;gap:8px}.loading-container{display:flex;justify-content:center;padding:32px}footer{position:sticky;bottom:0}.submission-toolbar{z-index:1000;background:#ffffff0d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:var(--mat-divider-width) solid var(--mat-divider-color);padding:8px 16px;display:flex;justify-content:flex-end;gap:16px}.submission-status{font-size:12px;opacity:.87;display:flex;align-items:center}.box{padding:8px 4px 4px}.tour-trigger{position:absolute;right:8px;font-size:12px;opacity:.6}.tour-trigger:hover{opacity:1}\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: i3$6.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i3$6.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i3$6.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { 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: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TourMatMenuModule }, { kind: "directive", type: i7$2.TourAnchorMatMenuDirective, selector: "[tourAnchor]", inputs: ["tourAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }], deferBlockDependencies: [() => [i2.MatButton, i3$6.MatStepperNext, i3$6.MatStepperPrevious, Promise.resolve().then(function () { return tFormInput_component; }).then(m => m.TFormInputComponent), i7$2.TourAnchorMatMenuDirective, i1$2.NgControlStatusGroup, i1$2.FormGroupDirective], () => [i2.MatButton, i7.MatProgressSpinner, i9.MatToolbar]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.6", type: UserFormStepperComponent, isStandalone: true, selector: "lib-user-form-stepper", inputs: { formId: "formId", initialValues: "initialValues", passParamsOnSubmit: "passParamsOnSubmit" }, host: { listeners: { "document:keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (loading) {\r\n<div class=\"loading-container\">\r\n  <mat-spinner diameter=\"48\" aria-label=\"Loading form\" />\r\n</div>\r\n}\r\n<mat-stepper [style.display]=\"loading?'none':'block'\" #stepper class=\"form-stepper\" orientation=\"vertical\"\r\n  [linear]=\"!isEditable\" aria-label=\"Form sections stepper\" [animationDuration]=\"'300'\"\r\n  (selectionChange)=\"handleStepChange($event)\">\r\n\r\n  @for (step of selectFormSteps(); track step.sectionId) {\r\n  @if (!!step.sectionForm ) {\r\n  <mat-step [stepControl]=\"step.sectionForm\" [completed]=\"step.sectionIsSeen && !step.sectionIsInvalid\"\r\n    [editable]=\"isEditable\" [errorMessage]=\"step.sectionFormErrorMessage||''\" [state]=\"getStepState(step,$index)\"\r\n    [hasError]=\"!step.sectionForm.valid && !!step.sectionForm.touched\">\r\n    <ng-template matStepLabel>\r\n      <div class=\"step-label-container\" [attr.aria-label]=\"'Section ' + step.label\">\r\n        <span class=\"step-label-text\">{{step.label|titlecase}}</span>\r\n        @if (step.sectionIsSeen) {\r\n        <mat-icon [class.error]=\"step.sectionIsInvalid\"\r\n          [attr.aria-label]=\"step.sectionIsInvalid ? 'Section has errors' : 'Section completed'\">\r\n          {{step.sectionIsSeen}}\r\n        </mat-icon>\r\n        }\r\n\r\n        <span class=\"tour-trigger \" *ngIf=\"(step)?.activeSectionHasTour&&!!step.isActive \">\r\n          <button tourAnchor=\"Form-Tour-trigger\" matTooltip=\"Start section tour\" mat-flat-button>\r\n            <mat-icon>tour</mat-icon>\r\n          </button>\r\n        </span>\r\n      </div>\r\n    </ng-template>\r\n    @if(!!step.isActive){\r\n    @defer (on viewport; prefetch on idle) {\r\n    <div class=\"step-content\">\r\n      <div class=\"row form-section\">\r\n        @for (col of step.columns; track col.id) {\r\n        <div [class]=\"'col-md-'+col.colSize +  ' box'\">\r\n          <lib-t-form-input [tourAnchor]=\"col.id\" (valueChange)=\"updateValue(col.id,$event)\" [editorMode]=\"false\"\r\n            [formBuilderFunctions]=\"formBuilderFunctions\" [inputConfig]=\"col\" [formGroup]=\"step.sectionForm\"\r\n            [attr.aria-label]=\"col?.label || ''\">\r\n          </lib-t-form-input>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"step-actions\">\r\n        @if(!$first) {\r\n        <button mat-button matStepperPrevious type=\"button\" class=\"navigation-button\"\r\n          [attr.aria-label]=\"'Go back to ' + getPreviousStepLabel()\">\r\n\r\n          Back\r\n        </button>\r\n        }\r\n        @if (!$last) {\r\n        <button mat-flat-button matStepperNext color=\"primary\" type=\"button\" class=\"navigation-button\"\r\n          [attr.aria-label]=\"'Continue to ' + getNextStepLabel()\">\r\n          Next\r\n        </button>\r\n        }\r\n        @if (!!$last) {\r\n        <button mat-button (click)=\"stepper.reset();reset()\">Reset</button>\r\n        }\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=\"24\" />\r\n    </div>\r\n    }\r\n\r\n    }\r\n\r\n  </mat-step>\r\n  }\r\n  }\r\n</mat-stepper>\r\n\r\n<!-- Defer the footer toolbar until after the main form is loaded -->\r\n@defer (on idle; prefetch on viewport) {\r\n<footer><mat-toolbar class=\"submission-toolbar\" role=\"toolbar\" aria-label=\"Form submission actions\">\r\n    <span class=\"submission-status\" role=\"status\">\r\n      {{getSubmissionStatus}}\r\n    </span>\r\n    <button mat-raised-button color=\"primary\" [disabled]=\"mainForm?.invalid\" (click)=\"handleSubmit()\"\r\n      aria-label=\"Submit form\">\r\n      <span>\r\n        {{ formSubmissionMessage()}}\r\n      </span>\r\n      @if(submittingForm){\r\n      <mat-spinner diameter=\"10\"></mat-spinner>\r\n      }\r\n\r\n    </button>\r\n  </mat-toolbar>\r\n</footer>\r\n} @placeholder {\r\n<!-- Simple placeholder for the footer that maintains layout -->\r\n<footer>\r\n  <div class=\"submission-toolbar-placeholder\"></div>\r\n</footer>\r\n}", styles: [".form-stepper{min-height:400px}.step-label-container{display:flex;justify-content:space-between;align-items:center;width:100%;gap:16px}.step-error-message{font-size:12px;opacity:.9;margin-left:16px}.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-bottom:24px}.step-actions{display:flex;gap:16px;margin-top:24px}.navigation-button{display:flex;align-items:center;gap:8px}.loading-container{display:flex;justify-content:center;padding:32px}footer{position:sticky;bottom:0}.submission-toolbar{z-index:1000;background:#ffffff0d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:var(--mat-divider-width) solid var(--mat-divider-color);padding:8px 16px;display:flex;justify-content:flex-end;gap:16px}.submission-status{font-size:12px;opacity:.87;display:flex;align-items:center}.box{padding:8px 5px 5px}.tour-trigger{position:absolute;right:8px;font-size:12px;opacity:.6}.tour-trigger:hover{opacity:1}\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: i3$5.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i3$5.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i3$5.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "component", type: i5.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: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TourMatMenuModule }, { kind: "directive", type: i7$2.TourAnchorMatMenuDirective, selector: "[tourAnchor]", inputs: ["tourAnchor"] }, { kind: "ngmodule", type: ReactiveFormsModule }], deferBlockDependencies: [() => [i2.MatButton, i3$5.MatStepperNext, i3$5.MatStepperPrevious, Promise.resolve().then(function () { return tFormInput_component; }).then(m => m.TFormInputComponent), i7$2.TourAnchorMatMenuDirective, i1$2.NgControlStatusGroup, i1$2.FormGroupDirective], () => [i2.MatButton, i7.MatProgressSpinner, i9.MatToolbar]] }); }
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ngImport: i0, type: UserFormStepperComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return tFormInput_component; }).then(m => m.TFormInputComponent)], resolveMetadata: TFormInputComponent => ({ decorators: [{
                 type: Component,
@@ -10354,7 +10714,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.6", ng
                             TFormInputComponent,
                             TourMatMenuModule,
                             ReactiveFormsModule
-                        ], standalone: true, template: "@if (loading) {\r\n<div class=\"loading-container\">\r\n  <mat-spinner diameter=\"48\" aria-label=\"Loading form\" />\r\n</div>\r\n}\r\n<mat-stepper [style.display]=\"loading?'none':'block'\" #stepper class=\"form-stepper\" orientation=\"vertical\"\r\n  [linear]=\"!isEditable\" aria-label=\"Form sections stepper\" [animationDuration]=\"'300'\"\r\n  (selectionChange)=\"handleStepChange($event)\">\r\n\r\n  @for (step of selectFormSteps(); track step.sectionId) {\r\n  @if (!!step.sectionForm ) {\r\n  <mat-step [stepControl]=\"step.sectionForm\" [completed]=\"step.sectionIsSeen && !step.sectionIsInvalid\"\r\n    [editable]=\"isEditable\" [errorMessage]=\"step.sectionFormErrorMessage||''\" [state]=\"getStepState(step,$index)\"\r\n    [hasError]=\"!step.sectionForm.valid && !!step.sectionForm.touched\">\r\n    <ng-template matStepLabel>\r\n      <div class=\"step-label-container\" [attr.aria-label]=\"'Section ' + step.label\">\r\n        <span class=\"step-label-text\">{{step.label|titlecase}}</span>\r\n        @if (step.sectionIsSeen) {\r\n        <mat-icon [class.error]=\"step.sectionIsInvalid\"\r\n          [attr.aria-label]=\"step.sectionIsInvalid ? 'Section has errors' : 'Section completed'\">\r\n          {{step.sectionIsSeen}}\r\n        </mat-icon>\r\n        }\r\n\r\n        <span class=\"tour-trigger \" *ngIf=\"(step)?.activeSectionHasTour&&!!step.isActive \">\r\n          <button tourAnchor=\"Form-Tour-trigger\" matTooltip=\"Start section tour\" mat-flat-button>\r\n            <mat-icon>tour</mat-icon>\r\n          </button>\r\n        </span>\r\n      </div>\r\n    </ng-template>\r\n    @if(!!step.isActive){\r\n    @defer (on viewport; prefetch on idle) {\r\n    <div class=\"step-content\">\r\n      <div class=\"row form-section\">\r\n        @for (col of step.columns; track col.id) {\r\n        <div [class]=\"'col-md-'+col.colSize +  ' box'\">\r\n          <lib-t-form-input [tourAnchor]=\"col.id\" (valueChange)=\"updateValue(col.id,$event)\" [editorMode]=\"false\"\r\n            [formBuilderFunctions]=\"formBuilderFunctions\" [inputConfig]=\"col\" [formGroup]=\"step.sectionForm\"\r\n            [attr.aria-label]=\"col?.label || ''\">\r\n          </lib-t-form-input>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"step-actions\">\r\n        @if(!$first) {\r\n        <button mat-button matStepperPrevious type=\"button\" class=\"navigation-button\"\r\n          [attr.aria-label]=\"'Go back to ' + getPreviousStepLabel()\">\r\n\r\n          Back\r\n        </button>\r\n        }\r\n        @if (!$last) {\r\n        <button mat-flat-button matStepperNext color=\"primary\" type=\"button\" class=\"navigation-button\"\r\n          [attr.aria-label]=\"'Continue to ' + getNextStepLabel()\">\r\n          Next\r\n        </button>\r\n        }\r\n        @if (!!$last) {\r\n        <button mat-button (click)=\"stepper.reset();reset()\">Reset</button>\r\n        }\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=\"24\" />\r\n    </div>\r\n    }\r\n\r\n    }\r\n\r\n  </mat-step>\r\n  }\r\n  }\r\n</mat-stepper>\r\n\r\n<!-- Defer the footer toolbar until after the main form is loaded -->\r\n@defer (on idle; prefetch on viewport) {\r\n<footer><mat-toolbar class=\"submission-toolbar\" role=\"toolbar\" aria-label=\"Form submission actions\">\r\n    <span class=\"submission-status\" role=\"status\">\r\n      {{getSubmissionStatus}}\r\n    </span>\r\n    <button mat-raised-button color=\"primary\" [disabled]=\"mainForm?.invalid\" (click)=\"handleSubmit()\"\r\n      aria-label=\"Submit form\">\r\n      <span>\r\n        {{ formSubmissionMessage()}}\r\n      </span>\r\n      @if(submittingForm){\r\n      <mat-spinner diameter=\"10\"></mat-spinner>\r\n      }\r\n\r\n    </button>\r\n  </mat-toolbar>\r\n</footer>\r\n} @placeholder {\r\n<!-- Simple placeholder for the footer that maintains layout -->\r\n<footer>\r\n  <div class=\"submission-toolbar-placeholder\"></div>\r\n</footer>\r\n}", styles: [".form-stepper{min-height:400px}.step-label-container{display:flex;justify-content:space-between;align-items:center;width:100%;gap:16px}.step-error-message{font-size:12px;opacity:.9;margin-left:16px}.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-bottom:24px}.step-actions{display:flex;gap:16px;margin-top:24px}.navigation-button{display:flex;align-items:center;gap:8px}.loading-container{display:flex;justify-content:center;padding:32px}footer{position:sticky;bottom:0}.submission-toolbar{z-index:1000;background:#ffffff0d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:var(--mat-divider-width) solid var(--mat-divider-color);padding:8px 16px;display:flex;justify-content:flex-end;gap:16px}.submission-status{font-size:12px;opacity:.87;display:flex;align-items:center}.box{padding:8px 4px 4px}.tour-trigger{position:absolute;right:8px;font-size:12px;opacity:.6}.tour-trigger:hover{opacity:1}\n"] }]
+                        ], standalone: true, template: "@if (loading) {\r\n<div class=\"loading-container\">\r\n  <mat-spinner diameter=\"48\" aria-label=\"Loading form\" />\r\n</div>\r\n}\r\n<mat-stepper [style.display]=\"loading?'none':'block'\" #stepper class=\"form-stepper\" orientation=\"vertical\"\r\n  [linear]=\"!isEditable\" aria-label=\"Form sections stepper\" [animationDuration]=\"'300'\"\r\n  (selectionChange)=\"handleStepChange($event)\">\r\n\r\n  @for (step of selectFormSteps(); track step.sectionId) {\r\n  @if (!!step.sectionForm ) {\r\n  <mat-step [stepControl]=\"step.sectionForm\" [completed]=\"step.sectionIsSeen && !step.sectionIsInvalid\"\r\n    [editable]=\"isEditable\" [errorMessage]=\"step.sectionFormErrorMessage||''\" [state]=\"getStepState(step,$index)\"\r\n    [hasError]=\"!step.sectionForm.valid && !!step.sectionForm.touched\">\r\n    <ng-template matStepLabel>\r\n      <div class=\"step-label-container\" [attr.aria-label]=\"'Section ' + step.label\">\r\n        <span class=\"step-label-text\">{{step.label|titlecase}}</span>\r\n        @if (step.sectionIsSeen) {\r\n        <mat-icon [class.error]=\"step.sectionIsInvalid\"\r\n          [attr.aria-label]=\"step.sectionIsInvalid ? 'Section has errors' : 'Section completed'\">\r\n          {{step.sectionIsSeen}}\r\n        </mat-icon>\r\n        }\r\n\r\n        <span class=\"tour-trigger \" *ngIf=\"(step)?.activeSectionHasTour&&!!step.isActive \">\r\n          <button tourAnchor=\"Form-Tour-trigger\" matTooltip=\"Start section tour\" mat-flat-button>\r\n            <mat-icon>tour</mat-icon>\r\n          </button>\r\n        </span>\r\n      </div>\r\n    </ng-template>\r\n    @if(!!step.isActive){\r\n    @defer (on viewport; prefetch on idle) {\r\n    <div class=\"step-content\">\r\n      <div class=\"row form-section\">\r\n        @for (col of step.columns; track col.id) {\r\n        <div [class]=\"'col-md-'+col.colSize +  ' box'\">\r\n          <lib-t-form-input [tourAnchor]=\"col.id\" (valueChange)=\"updateValue(col.id,$event)\" [editorMode]=\"false\"\r\n            [formBuilderFunctions]=\"formBuilderFunctions\" [inputConfig]=\"col\" [formGroup]=\"step.sectionForm\"\r\n            [attr.aria-label]=\"col?.label || ''\">\r\n          </lib-t-form-input>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"step-actions\">\r\n        @if(!$first) {\r\n        <button mat-button matStepperPrevious type=\"button\" class=\"navigation-button\"\r\n          [attr.aria-label]=\"'Go back to ' + getPreviousStepLabel()\">\r\n\r\n          Back\r\n        </button>\r\n        }\r\n        @if (!$last) {\r\n        <button mat-flat-button matStepperNext color=\"primary\" type=\"button\" class=\"navigation-button\"\r\n          [attr.aria-label]=\"'Continue to ' + getNextStepLabel()\">\r\n          Next\r\n        </button>\r\n        }\r\n        @if (!!$last) {\r\n        <button mat-button (click)=\"stepper.reset();reset()\">Reset</button>\r\n        }\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=\"24\" />\r\n    </div>\r\n    }\r\n\r\n    }\r\n\r\n  </mat-step>\r\n  }\r\n  }\r\n</mat-stepper>\r\n\r\n<!-- Defer the footer toolbar until after the main form is loaded -->\r\n@defer (on idle; prefetch on viewport) {\r\n<footer><mat-toolbar class=\"submission-toolbar\" role=\"toolbar\" aria-label=\"Form submission actions\">\r\n    <span class=\"submission-status\" role=\"status\">\r\n      {{getSubmissionStatus}}\r\n    </span>\r\n    <button mat-raised-button color=\"primary\" [disabled]=\"mainForm?.invalid\" (click)=\"handleSubmit()\"\r\n      aria-label=\"Submit form\">\r\n      <span>\r\n        {{ formSubmissionMessage()}}\r\n      </span>\r\n      @if(submittingForm){\r\n      <mat-spinner diameter=\"10\"></mat-spinner>\r\n      }\r\n\r\n    </button>\r\n  </mat-toolbar>\r\n</footer>\r\n} @placeholder {\r\n<!-- Simple placeholder for the footer that maintains layout -->\r\n<footer>\r\n  <div class=\"submission-toolbar-placeholder\"></div>\r\n</footer>\r\n}", styles: [".form-stepper{min-height:400px}.step-label-container{display:flex;justify-content:space-between;align-items:center;width:100%;gap:16px}.step-error-message{font-size:12px;opacity:.9;margin-left:16px}.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin-bottom:24px}.step-actions{display:flex;gap:16px;margin-top:24px}.navigation-button{display:flex;align-items:center;gap:8px}.loading-container{display:flex;justify-content:center;padding:32px}footer{position:sticky;bottom:0}.submission-toolbar{z-index:1000;background:#ffffff0d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:var(--mat-divider-width) solid var(--mat-divider-color);padding:8px 16px;display:flex;justify-content:flex-end;gap:16px}.submission-status{font-size:12px;opacity:.87;display:flex;align-items:center}.box{padding:8px 5px 5px}.tour-trigger{position:absolute;right:8px;font-size:12px;opacity:.6}.tour-trigger:hover{opacity:1}\n"] }]
             }], ctorParameters: null, propDecorators: { 
             /**
              * Handles the key down event and opens the application log if the key combination is pressed.
@@ -10399,5 +10759,5 @@ console.debug = () => { };
  * Generated bundle index. Do not edit.
  */
 
-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-BX1gh-MK.mjs.map
+export { returnDeepProperty as A, safeReturnDeepProperty as B, validateObjectAgainstString as C, DaysAgoPipe as D, getUrl as E, FormsStoreService as F, textIconsForUserHints as G, index as H, 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, FormatDataPipe as z };
+//# sourceMappingURL=ngx-t-forms-ngx-t-forms-B4C0NbAb.mjs.map