ngx-t-forms 2.0.9 → 2.0.11

package/fesm2022/{ngx-t-forms-ngx-t-forms-1Roar4qK.mjs → ngx-t-forms-ngx-t-forms-C6wZyKbR.mjs}

@@ -61,7 +61,7 @@ import { MatSelectModule } from '@angular/material/select';
 import * as i8$1 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatSliderModule } from '@angular/material/slider';
-import * as i2$3 from '@angular/material/slide-toggle';
+import * as i2$4 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';
@@ -78,7 +78,7 @@ import { MatTreeModule, MatTreeFlattener, MatTreeFlatDataSource } from '@angular
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i3$1 from '@angular/material/form-field';
 import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
-import * as i1$5 from '@angular/material/autocomplete';
+import * as i2$3 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i2$2 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
@@ -425,12 +425,12 @@ function compileInputValidators(input, getFormValue) {
     if (input.type === 'email' && !inputValidators.includes('email')) {
         inputValidators = [...inputValidators, 'email'];
     }
-    const formControlOptions = { validators: returnValidator(inputValidators, getFormValue) };
+    const formControlOptions = { validators: returnValidator(inputValidators, getFormValue, input) };
     // Set updateOn to 'change' if custom validation functions are present
     formControlOptions.updateOn = 'change';
     return formControlOptions;
 }
-function returnValidator(validators, formValue) {
+function returnValidator(validators, formValue, input) {
     const Val = [];
     validators.forEach(validate => {
         if (typeof validate === 'object') {
@@ -440,6 +440,17 @@ function returnValidator(validators, formValue) {
         else {
             switch (validate) {
                 case 'required':
+                    if (input.element === ElementTypes.Toggle) {
+                        Val.push(toggleRequiredValidator);
+                        break;
+                    }
+                    if (input.element === ElementTypes.MultipleInput) {
+                        Val.push(multipleInPutRequiredValidator);
+                        break;
+                    }
+                    if (input.element === ElementTypes.DateRangePicker) {
+                        console.error("Date Range Picker Validation is not implemented yet", input);
+                    }
                     Val.push(Validators.required);
                     break;
                 case 'email':
@@ -450,6 +461,26 @@ function returnValidator(validators, formValue) {
     });
     return Val;
 }
+const multipleInPutRequiredValidator = (control) => {
+    const value = control.value;
+    if (value === null || value === undefined || value === '') {
+        return { 'required': true };
+    }
+    if (Array.isArray(value) === false) {
+        return { 'required': true };
+    }
+    return value.length === 0 ? { 'required': true } : null;
+};
+const toggleRequiredValidator = (control) => {
+    const value = control.value;
+    if (value === null || value === undefined || value === '') {
+        return { 'required': true };
+    }
+    if (typeof value !== 'boolean') {
+        return { 'required': true };
+    }
+    return null;
+};
 function createCustomValidator(config, formValue) {
     return (control) => {
         const formGroup = control.parent;
@@ -520,8 +551,9 @@ function formGenerator(inputs, getFormValue) {
         // Create controls for each input in the section
         const controls = sectionInputs.reduce((formControls, input) => {
             // Create explicit FormControl with initial value, disabled state, and validators
+            const value = getDefaultValue(input);
             formControls[input.id] = new FormControl({
-                value: input.value || '',
+                value: value,
                 disabled: !!input.disabled
             }, compileInputValidators(input, getFormValue));
             return formControls;
@@ -559,7 +591,6 @@ function getSectionControl(form, sectionId, controlId) {
     if (!sectionForm) {
         return null;
     }
-    console.error(sectionForm, "************************************", controlId, sectionForm.controls[controlId]);
     return sectionForm.get(controlId) || sectionForm.controls[controlId];
 }
 function generateControlsForTheseInputs(inputs, getFormValue) {
@@ -567,14 +598,35 @@ function generateControlsForTheseInputs(inputs, getFormValue) {
     const controls = filteredInputs.reduce((formControls, input) => {
         const controlName = input.multipleInputInEditId ? `${input.multipleInputInEditId}.${input.id}` : input.id;
         // Create explicit FormControl with initial value, disabled state, and validators
+        const value = getDefaultValue(input);
         formControls[controlName] = new FormControl({
-            value: input.value,
+            value: value,
             disabled: !!input.disabled
         }, compileInputValidators(input, getFormValue()));
         return formControls;
     }, {});
     return controls;
 }
+const getDefaultValue = (input) => {
+    try {
+        const { value, element } = input;
+        if (element === ElementTypes.Toggle) {
+            return Boolean(value);
+        }
+        if (element === ElementTypes.MultipleInput) {
+            if (!Array.isArray(value)) {
+                return [];
+            }
+            return value;
+        }
+        return value || '';
+    }
+    catch (error) {
+        const msg = error instanceof Error ? error.message : 'Unknown error';
+        console.error('Error in getDefaultValue:', msg);
+        throw new Error('Error in getDefaultValue: ' + msg);
+    }
+};
 
 /**
  * Compares previous and current objects, returning only properties that changed.
@@ -1443,6 +1495,30 @@ const getValueFromValueAccessor = (valueAccessRules, data) => {
     }
 };
 
+function multipleFormInputMapValueToInputsId(input, value) {
+    try {
+        if (input.element !== ElementTypes.MultipleInput)
+            return value;
+        if (!Array.isArray(value))
+            return value;
+        return value.map((val) => Object.entries(val).reduce((acc, [key, value]) => {
+            const inputId = input.formInputs?.find((input) => input.formControlName === key)?.id;
+            if (!inputId)
+                return acc;
+            return {
+                ...acc,
+                [`${input.id}.${inputId}`]: value
+            };
+        }, {}));
+    }
+    catch (error) {
+        const msg = error instanceof Error ? error.message : "Error mapping value to input";
+        console
+            .error(msg);
+        throw new Error(msg);
+    }
+}
+
 /**
  * Retrieves the input data for a POST request.
  * @param minRequiredInputs - An array of TInputControllerService objects representing the minimum required inputs.
@@ -1494,10 +1570,12 @@ function inputGetApiPostData(inputConfig, formValues, dataFor, utils) {
         utils.setInputStatus(inputConfig.id, 'd19be9ca-ceda-4388-9f7b-3fcb5f12d921', 'Fetching data...');
         utils.setTemporaryHint(inputConfig.id, 'Fetching data...', HintType.LOADING);
         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);
             if (dataFor !== "options") {
-                utils.updateValue(inputConfig.id, results);
+                console.error(multipleFormInputMapValueToInputsId(inputConfig, results), "tttttttttttttttttttttttttttttttttttttzzz");
+                utils.updateValue(inputConfig.id, multipleFormInputMapValueToInputsId(inputConfig, results));
                 utils.setTemporaryHint(inputConfig.id, 'Data fetched successfully', HintType.SUCCESS);
                 return;
             }
@@ -1594,8 +1672,22 @@ function returnMappedData(formValues, minInputs, endpoint) {
 }
 
 const sectionFormErrorMessage = (self, sectionId) => {
-    const sectionInputs = self.allFormInputs()?.filter(input => input.sectionId === sectionId) || [];
-    const allInputsWithErrors = sectionInputs.filter(input => !!self.mainForm?.get(sectionId)?.get(input.id)?.invalid);
+    const sectionInputs = self.allFormInputs()?.filter(input => input.sectionId === sectionId && !input.multipleInputInEditId &&
+        input.element !== ElementTypes.SectionTitle) || [];
+    const sectionForm = getSectionForm(self.mainForm, sectionId);
+    const allInputsWithErrors = sectionInputs.filter(input => {
+        const control = sectionForm?.controls[input.id];
+        if (!control) {
+            return false;
+        }
+        return !!control?.invalid;
+    });
+    const firstError = allInputsWithErrors[0];
+    if (!firstError)
+        return '';
+    const numberOfAllOtherErrors = allInputsWithErrors.length - 1;
+    if (numberOfAllOtherErrors === 0)
+        return `${firstError?.label} is invalid`;
     return ` ${allInputsWithErrors[0]?.label} and ${allInputsWithErrors.length - 1} other are invalid`;
 };
 function selectFormSteps(self) {
@@ -1639,6 +1731,8 @@ const allFormInputs = (form) => {
                 label: `${column.label} Start Date`,
                 formControlName: column.startDateControl,
                 min: column.startMinDate,
+                value: !!column.value?.start ?
+                    new Date(column.value.start) : undefined,
                 max: column.startMaxDate,
             };
             const end = {
@@ -1647,6 +1741,7 @@ const allFormInputs = (form) => {
                 label: `${column.label} End Date`,
                 formControlName: column.endDateControl,
                 min: column.endMinDate,
+                value: !!column.value?.end ? new Date(column.value.end) : undefined,
                 max: column.endMaxDate,
             };
             return [start, end];
@@ -1666,18 +1761,13 @@ const allFormInputs = (form) => {
 
 function formProgress(self) {
     try {
-        const requiredInputs = self.allFormInputs()?.filter(c => c.required && !c.multipleInputInEditId) || [];
-        const allValidRequiredInputs = requiredInputs.flatMap(c => {
-            if (c.element === ElementTypes.DateRangePicker) {
-                const start = self.mainForm?.get(c.sectionId)?.get(`${c.id}.${c.startDateControl}`);
-                const end = self.mainForm?.get(c.sectionId)?.get(`${c.id}.${c.endDateControl}`);
-                return [!!start?.valid,
-                    !!end?.valid];
-            }
-            return [!!self.mainForm?.get(c.sectionId)?.get(c.id)?.valid];
+        const requiredInputs = self.allFormInputs()?.filter(c => c.required && !c.multipleInputInEditId && c.element !== ElementTypes.SectionTitle) || [];
+        const allValidRequiredInputs = requiredInputs.filter(c => {
+            return !!self.mainForm?.controls[c.sectionId]?.controls[c.id]?.valid === true ||
+                !!self.mainForm?.controls[c.sectionId]?.controls[c.id]?.invalid === false;
         });
-        const valid = allValidRequiredInputs.filter(inp => !!inp).length;
-        const total = allValidRequiredInputs.length;
+        const valid = allValidRequiredInputs.length;
+        const total = requiredInputs.length;
         return Math.round((valid / total) * 100);
     }
     catch (error) {
@@ -1955,6 +2045,14 @@ const returnAnyFormInputFromForm = (form, id) => {
         if (mainInput.element === ElementTypes.MultipleInput && nestedInputId) {
             return mainInput.formInputs?.find(input => input.id === nestedInputId);
         }
+        if (mainInput.element === ElementTypes.DateRangePicker && nestedInputId) {
+            const isStartDate = nestedInputId === mainInput.startDateControl;
+            return {
+                ...mainInput,
+                id,
+                value: isStartDate ? mainInput.value?.start : mainInput.value?.end,
+            };
+        }
         // If it's a mscoa input and we have a nested ID, find the nested input
         if (mainInput.element === ElementTypes.MscoaSelection && nestedInputId) {
             return mainInput.mscoaConfig.inputs?.find(input => input.id === nestedInputId);
@@ -1969,6 +2067,7 @@ const returnAnyFormInputFromForm = (form, id) => {
 
 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;
@@ -1981,17 +2080,24 @@ const updateValue = (self, inputId, value) => {
     const isDateRangePicker = input?.element === ElementTypes.DateRangePicker;
     if (isDateRangePicker) {
         const alreadyHasCompoundedKey = inputId.includes('.');
-        if (alreadyHasCompoundedKey) {
-            const sectionControl = (self.mainForm?.controls[sectionId]).controls[inputId];
-            sectionControl?.setValue(value?.value);
+        if (!alreadyHasCompoundedKey) {
+            throw new Error(`Input ID ${inputId} does not have a compounded key for date range picker`);
+        }
+        const sectionControl = (self.mainForm?.controls[sectionId]).controls[inputId];
+        const isStartDate = inputId.split('.')?.[1] === input.startDateControl;
+        const valueIsDate = !Number.isNaN(Date.parse(value));
+        if (valueIsDate) {
+            sectionControl?.setValue(value);
             return;
         }
-        const key = `${inputId}.${value.formControlName}`;
-        const sectionControl = (self.mainForm?.controls[sectionId]).controls[key];
-        sectionControl?.setValue(value.value);
+        sectionControl?.setValue(isStartDate ? value.start : value.end);
         return;
     }
     const sectionControl = getSectionControl(self.mainForm, sectionId, inputId);
+    if (!sectionControl) {
+        self.setInputTemporaryError(inputId, `Missing FormControl. Failed to set value `);
+        return;
+    }
     sectionControl?.setValue(value);
 };
 
@@ -2121,7 +2227,10 @@ const processMultipleInputValue = (input, value, allFormValues) => {
         const result = {};
         const itemId = item["id"] || '';
         // Process each form input within the multiple input
-        input.formInputs?.forEach(formInput => {
+        ([...(input.formInputs || []), {
+                id: "id",
+                formControlName: "id",
+            }])?.forEach(formInput => {
             if (!formInput?.id || !formInput.formControlName)
                 return;
             // Different possible key formats for the input value
@@ -2250,7 +2359,7 @@ function getApiDataFetching(inputConfig, dataFor, utils) {
             const valueAccessRules = fetchOptions?.valueAccessRules;
             const results = getValueFromValueAccessor(valueAccessRules || [], data);
             if (dataFor !== "options") {
-                utils.updateValue(inputConfig.id, results);
+                utils.updateValue(inputConfig.id, multipleFormInputMapValueToInputsId(inputConfig, results));
                 utils.setTemporaryHint(inputConfig.id, `Data fetched successfully`, HintType.SUCCESS);
                 return;
             }
@@ -2310,7 +2419,8 @@ const removeInputStatus = (self, inputId, statusId) => {
 
 const multipleInputRowIDControlInput = (value, multipleInputInEditId) => ({
     id: "id",
-    element: ElementTypes.Input, value,
+    element: ElementTypes.Input,
+    value,
     formControlName: "id",
     label: "ID",
     required: false,
@@ -2336,38 +2446,47 @@ const toggleMultipleInput = (self, mainForm, inputId, open, rowInEditId) => {
         return false;
     }
     try {
-        console.error(`Row ID before: ${rowInEditId}`, input, sectionGroup.value);
         // Generate controls from input's formInputs (defensive programming)
         const formInputs = input.formInputs || [];
         let controls = {};
-        try {
-            const idInput = multipleInputRowIDControlInput(rowInEditId, inputId);
-            controls = generateControlsForTheseInputs(idInput ? [...formInputs, idInput] : formInputs, self.getFormValue.bind(this));
+        if (open === true) {
+            try {
+                const idInput = multipleInputRowIDControlInput(rowInEditId, inputId);
+                controls = generateControlsForTheseInputs(idInput ? [...formInputs, idInput] : formInputs, self.getFormValue.bind(this));
+            }
+            catch (error) {
+                console.error(`Failed to generate controls for input ${inputId}:`, error);
+                self.setInputTemporaryError(inputId, 'Failed to generate controls');
+                return false;
+            }
+            Object.entries(controls).forEach(([key, control]) => {
+                const controlExists = !!sectionGroup.get(key);
+                if (open && !controlExists) {
+                    // Add control if we're opening and control doesn't exist
+                    sectionGroup.addControl(key, control);
+                }
+            });
         }
-        catch (error) {
-            console.error(`Failed to generate controls for input ${inputId}:`, error);
-            self.setInputTemporaryError(inputId, 'Failed to generate controls');
-            return false;
+        else {
+            const subFormControlNames = [...formInputs.map(i => `${inputId}.${i.id}`), `${inputId}.id`];
+            // Remove controls if we're closing and control exists
+            subFormControlNames.forEach(controlName => {
+                const control = sectionGroup.controls[controlName];
+                if (control) {
+                    sectionGroup.removeControl(controlName);
+                }
+                else {
+                    console.error(`Control ${controlName} not found in section group`);
+                }
+            });
+            // 
         }
-        // Determine new state (opposite of current state)
         // Toggle controls based on new state
-        Object.entries(controls).forEach(([key, control]) => {
-            const controlExists = !!sectionGroup.get(key);
-            if (open && !controlExists) {
-                // Add control if we're opening and control doesn't exist
-                sectionGroup.addControl(key, control);
-            }
-            else if (!open && controlExists) {
-                // Remove control if we're closing and control exists
-                sectionGroup.removeControl(key);
-            }
-        });
         // Update the input configuration with new state
         self.updateFormInputConfig(inputId, { ...input, formIsOpen: open });
         if (!!open && sectionGroup.controls[`${inputId}.id`] && rowInEditId) {
             sectionGroup.controls[`${inputId}.id`]?.setValue(rowInEditId);
         }
-        console.error(`Row ID before: ${rowInEditId}`, input, sectionGroup.value);
         if (open) {
             // Log if needed for debugging, but use appropriate log level
             console.log(`Opened multiple input for ${inputId}`);
@@ -2387,6 +2506,25 @@ const multipleInputEditRow = (self, mainForm, inputId, rowId) => {
         if (!toggled) {
             return false;
         }
+        const input = self.allFormInputs()?.find(input => input.id === inputId);
+        if (!input) {
+            console.warn(`Input with ID ${inputId} not found`);
+            return false;
+        }
+        const sectionGroup = mainForm?.get(input.sectionId);
+        if (!sectionGroup) {
+            self.setInputTemporaryError(inputId, 'Failed to find section group');
+            return false;
+        }
+        const row = sectionGroup.controls[inputId]?.value?.find((row) => row[`${inputId}.id`] === rowId);
+        if (!row) {
+            console.warn(`Row with ID ${rowId} not found in input ${inputId}`);
+            self.setInputTemporaryError(inputId, "Could not find row to duplicate");
+            return false;
+        }
+        Object.entries(row).forEach(([key, value]) => {
+            self.updateValue(key, value);
+        });
         return true;
     }
     catch (error) {
@@ -2398,7 +2536,7 @@ const multipleInputEditRow = (self, mainForm, inputId, rowId) => {
 };
 const multipleInputDuplicateRow = (self, mainForm, inputId, rowId) => {
     try {
-        const toggled = toggleMultipleInput(self, mainForm, inputId, true, rowId);
+        const toggled = toggleMultipleInput(self, mainForm, inputId, true);
         if (!toggled) {
             return false;
         }
@@ -2413,6 +2551,17 @@ const multipleInputDuplicateRow = (self, mainForm, inputId, rowId) => {
             return false;
         }
         sectionGroup.controls[`${inputId}.id`]?.setValue(undefined);
+        const row = sectionGroup.controls[inputId]?.value?.find((row) => row[`${inputId}.id`] === rowId);
+        if (!row) {
+            console.warn(`Row with ID ${rowId} not found in input ${inputId}`);
+            self.setInputTemporaryError(inputId, "Could not find row to duplicate");
+            return false;
+        }
+        const newRow = { ...row, id: undefined };
+        Object.entries(newRow).forEach(([key, value]) => {
+            self.updateValue(key, value);
+        });
+        console.error('New row:', sectionGroup.controls, row);
         return true;
     }
     catch (error) {
@@ -2558,7 +2707,9 @@ const updateExistingRow = (self, mainInput, rowInEditId, innerInputsValues, inpu
     // Set the updated value back to the main input
     mainInput.setValue(updatedValue);
     self.setTemporaryHint(inputId, 'Record updated successfully', HintType.DB_LOAD);
-    self.toggleMultipleInput(inputId, false);
+    //Ensure to pass the rowInEditId to the toggleMultipleInput function
+    // to close the edit mode for the row
+    self.toggleMultipleInput(inputId, false, rowInEditId);
     return true;
 };
 /**
@@ -2602,6 +2753,22 @@ const prepPopulateForm = (form, initValue) => {
                         if (column.element === ElementTypes.SectionTitle) {
                             return column;
                         }
+                        if (column.element === ElementTypes.Toggle) {
+                            return {
+                                ...column,
+                                value: Boolean(initValue[column.formControlName] || column.value || false)
+                            };
+                        }
+                        if (column.element === ElementTypes.DateRangePicker) {
+                            console.error('initValue[column.startDateControl!]', initValue[column.startDateControl], initValue, column);
+                            return {
+                                ...column,
+                                value: {
+                                    start: initValue[column.startDateControl],
+                                    end: initValue[column.endDateControl]
+                                }
+                            };
+                        }
                         if (column.element === ElementTypes.MultipleInput) {
                             const newM = {
                                 ...column,
@@ -2609,6 +2776,7 @@ const prepPopulateForm = (form, initValue) => {
                                     return Object.entries(item).reduce((acc, [key, value]) => {
                                         const inputId = column.formInputs?.find(input => input.formControlName === key)?.id;
                                         if (!inputId) {
+                                            console.error('inputId not found', key, value);
                                             return acc;
                                         }
                                         return {
@@ -2618,7 +2786,6 @@ const prepPopulateForm = (form, initValue) => {
                                     }, {});
                                 })
                             };
-                            console.error('newM', newM);
                             return newM;
                         }
                         return {
@@ -2762,6 +2929,26 @@ const makeApiCall = (api, formData, Utils) => {
         ? Utils.httpPostDataFunction(httpEndPoint, formData, {})
         : Utils.httpGetDataFunction(`${httpEndPoint}?${createQueryString(formData)}`, {});
 };
+/**
+ * Extracts specific properties from an object based on a comma-separated string of keys.
+ * Supports both direct key mapping and binding key notation for property renaming.
+ *
+ * @param obj - The source object to extract properties from
+ * @param keysString - A comma-separated string of keys to extract.
+ *                     Supports two formats:
+ *                     1. Direct key: "propName"
+ *                     2. Binding key: "newName:{originalName}"
+ *
+ * @returns A new object containing only the specified properties
+ *
+ * @example
+ * // Direct key usage
+ * destructureObject({a: 1, b: 2}, "a,b") // Returns {a: 1, b: 2}
+ *
+ * @example
+ * // Binding key usage
+ * destructureObject({orig: 1}, "new:{orig}") // Returns {new: 1}
+ */
 function destructureObject(obj, keysString) {
     // Split the keys string into an array of keys
     const keys = keysString.split(',').map(key => key.trim()) || [];
@@ -2785,6 +2972,22 @@ function destructureObject(obj, keysString) {
     });
     return result;
 }
+/**
+ * Projects and combines form data according to API configuration and additional passed data.
+ *
+ * @param api - The API configuration object containing projection settings
+ * @param formData - The form data to be processed
+ * @param passData - Additional data to be merged with the form data
+ * @returns {any} - The projected and combined data object
+ *
+ * If api.projectFormData is not present:
+ * - Returns merged formData and passData if passData is a non-null object
+ * - Returns formData as-is otherwise
+ *
+ * If api.projectFormData is present:
+ * - Destructures formData according to projection rules
+ * - Merges with passData if passData is a non-null object
+ */
 const projectApiData = (api, formData, passData) => {
     if (!api?.projectFormData) {
         if (typeof passData === 'object' && passData !== null) {
@@ -2902,8 +3105,8 @@ class FormTowerControllerService {
         this.changeMonitor = (newFormValue) => {
             // Find changed inputs by comparing with previous values
             updateChangeHistory(this, newFormValue).then();
+            this.NGX_T_FORMS_CONFIG.formBuilder.saveFormData(this.form?.formId, this.getFormValueNames());
             const changedInputIds = Object.keys(newFormValue);
-            console.error(changedInputIds);
             if (changedInputIds.length === 0) {
                 return of(null); // No changes detected
             }
@@ -2995,7 +3198,7 @@ class FormTowerControllerService {
         this.initializeFormValues = (initialValues) => {
             this._initialFormValue = initialValues;
             if (this._mainForm === undefined) {
-                console.error("Main form not initialized");
+                console.error("Could not initialize FormValues,Main form not initialized", initialValues, this._initialFormValue);
                 return;
             }
             const allInputs = this.allFormInputs();
@@ -3003,12 +3206,30 @@ class FormTowerControllerService {
                 return;
             for (const input of allInputs || []) {
                 const value = initialValues[input.formControlName];
-                if (value !== undefined) {
+                const isMultipleInput = input.element === ElementTypes.MultipleInput;
+                if (value !== undefined && !isMultipleInput) {
                     this.updateValue(input.id, value);
+                    continue;
                 }
-                else {
-                    this.updateValue(input.id, '');
+                if (isMultipleInput) {
+                    const v = (value || []).map((item) => {
+                        return Object.entries(item).reduce((acc, [key, val]) => {
+                            const inp = allInputs.find((i) => i.formControlName === key);
+                            if (key === 'id') {
+                                acc[`${input.id}.id`] = val;
+                            }
+                            else {
+                                acc[`${inp?.id}`] = val;
+                            }
+                            return acc;
+                        }, {});
+                    });
+                    v[`${input.id}.id`] = initialValues[input.id];
+                    console.error(`Setting multiple input value`, v);
+                    this.updateValue(input.id, v);
+                    continue;
                 }
+                this.updateValue(input.id, '');
             }
         };
         this.revertBackHistory = () => {
@@ -3071,7 +3292,7 @@ class FormTowerControllerService {
          * @param inputId The ID of the multiple input to toggle
          * @returns boolean indicating success or failure
          */
-        this.toggleMultipleInput = (inputId, open) => toggleMultipleInput(this, this._mainForm, inputId, open);
+        this.toggleMultipleInput = (inputId, open, rowInEditId) => toggleMultipleInput(this, this._mainForm, inputId, open, rowInEditId);
         this.saveMultipleInputForm = (inputId) => saveMultipleInputForm(this, this._mainForm, inputId);
         this.multipleInputEditRow = (inputId, rowId) => multipleInputEditRow(this, this._mainForm, inputId, rowId);
         this.multipleInputDuplicateRow = (inputId, rowId) => multipleInputDuplicateRow(this, this._mainForm, inputId, rowId);
@@ -3094,6 +3315,7 @@ class FormTowerControllerService {
     ngOnDestroy() {
         this._destroyed$.next();
         this._destroyed$.complete();
+        this.clearFormState();
     }
     // Build a reverse dependency map for efficient lookups
     buildReverseDependencyMap() {
@@ -4954,46 +5176,21 @@ function formBuilderStoreActions(store) {
         })).subscribe();
     };
     const applyFormTemplate = (form) => {
-        form$.pipe(take(1), tap((form) => {
+        form$.pipe(take(1), tap(() => {
             if (!form)
                 return;
-            const dialog = inject(MatDialog);
-            const snackBar = inject(MatSnackBar);
-            const hasForm = !!form?.form;
-            if (hasForm) {
-                const dialogRef = dialog.open(DialogTemplateComponent, {
-                    data: {
-                        title: 'Apply Form Template',
-                        message: 'Are you sure you want to apply this form template? This will replace the current form',
-                        noText: 'Cancel',
-                        yesText: 'Proceed'
-                    }
-                });
-                dialogRef.afterClosed().pipe(take(1)).subscribe(proceed => {
-                    if (proceed) {
-                        const newForm = {
-                            systemDefault: false,
-                            defaultDepartment: "",
-                            form: {
-                                ...form?.form,
-                                formId: undefined,
-                                formTitle: `${form?.form.formTitle} - Copy`,
-                            },
-                        };
-                        store.actions.loadFormSuccess(of({
-                            form: newForm
-                        }));
-                        snackBar.open('Form Template Applied', 'Dismiss', {
-                            duration: 2000,
-                        });
-                        return;
-                    }
-                });
-                return;
-            }
-            snackBar.open('Form Template Applied', 'Dismiss', {
-                duration: 2000,
-            });
+            const newForm = {
+                systemDefault: false,
+                defaultDepartment: "",
+                form: {
+                    formId: undefined,
+                    formTitle: `${form?.formTitle} - Copy`,
+                    slides: form.slides,
+                },
+            };
+            store.actions.loadFormSuccess(of({
+                form: newForm
+            }));
             return;
         })).subscribe();
     };
@@ -5290,9 +5487,9 @@ class FormBuilderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: FormBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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-CPIcPREp.mjs').then(m => m.FormsBuilderMenuComponent)], () => [i2$1.CdkDrag, i7.MatProgressSpinner, import('./ngx-t-forms-input-editor.component-__grERM8.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-C_dciQhe.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-Da3SdUn6.mjs').then(m => m.MissingFormConfigsComponent)]] }); }
+        ], ngImport: i0, template: "<header>\r\n    <mat-toolbar color=\"primary\">\r\n        @if (closeButton) {\r\n        <button mat-icon-button [style.color]=\"closeButton.color\" (click)=\"closeButton.onClick()\">\r\n            <mat-icon>{{closeButton.icon}}</mat-icon>\r\n        </button>\r\n        }\r\n\r\n        <!-- Navigation group -->\r\n        <div class=\"nav-group\">\r\n            <button mat-button routerLink=\"/\">Forms</button>\r\n            <mat-icon>navigate_next</mat-icon>\r\n        </div>\r\n\r\n        <!-- Title input with optimized binding -->\r\n        @if (selectHasFormId()) {\r\n        <input [(ngModel)]=\"titleValue\" class=\"section-title-input\" placeholder=\"Enter Form Title\">\r\n        }\r\n\r\n        <span class=\"spacer\"></span>\r\n\r\n        @defer (on viewport) {\r\n        <app-forms-builder-menu />\r\n        } @placeholder {\r\n            <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n                <mat-spinner diameter=\"20\" />\r\n              </div>\r\n\r\n        }\r\n\r\n        <span class=\"divider\">|</span>\r\n\r\n        <!-- Save/Update button with optimized reactive state -->\r\n        <button mat-raised-button color=\"accent\" class=\"save-button\" [disabled]=\"!(canSaveForm())\"\r\n            (click)=\"saveForm()\">\r\n\r\n            <mat-icon>\r\n                {{(isNewForm()) ? 'save' : 'update'}}\r\n            </mat-icon>\r\n\r\n            @if (selectFormBuilderIsBusy()) {\r\n            {{(isNewForm()) ? '..Saving new form' : '..Updating Form'}}\r\n            } @else {\r\n            {{(isNewForm()) ? 'Save' : 'Update'}}\r\n            }\r\n        </button>\r\n\r\n        <!-- Updated time info -->\r\n        @if (!(isNewForm())) {\r\n        <div class=\"updated-time\">\r\n            <mat-icon>update</mat-icon>\r\n            <span>Updated {{ selectFormUpdated() }}</span>\r\n        </div>\r\n        }\r\n    </mat-toolbar>\r\n</header>\r\n\r\n<!-- Main content with optimized loading -->\r\n@defer (on viewport) {\r\n<div class=\"container\">\r\n    <div class=\"middle\">\r\n        <br>\r\n        @if (selectLoadingForm()) {\r\n        <div class=\"loading-container\">\r\n            <mat-spinner />\r\n        </div>\r\n        } @else {\r\n        <app-form-section-stepper />\r\n        }\r\n        <br>\r\n        @if ((hasMissingConfigs()) && !(selectLoadingForm())) {\r\n            <app-missing-form-configs />\r\n            }\r\n    </div>\r\n\r\n    @if (elementEditorOpen()) {\r\n    <app-input-editor style=\"max-width:480px;height:calc(100vh - 64px);z-index:1\" cdkDrag cdkDragBoundary=\"container\" class=\"middle editor-container\" />\r\n    }\r\n    <!-- Missing fields section -->`\r\n\r\n\r\n</div>\r\n}@placeholder {\r\n    <div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n        <mat-spinner diameter=\"50\" />\r\n      </div>\r\n}", styles: [".container{display:flex;width:100%;height:calc(100% - 64px)}.side{width:100px;background-color:#f8d7da}.middle{flex-grow:1;height:100%;overflow:auto;background-color:none}.section-title-input{border:none;background-color:transparent;font-size:16px;font-weight:600;color:#fff;padding-top:12px;padding-bottom:12px;outline:none;min-width:268px;transition:border-bottom-color .3s ease-in-out}.section-title-input:focus{border-bottom:1px solid #ffffff}.missing-fields{position:fixed;bottom:0}.updated-time{display:flex;gap:8px;align-items:center;line-height:normal;font-size:14px;bottom:0;position:absolute;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px;border-radius:4px}.nav-group{display:flex;align-items:center;gap:8px}.save-button{margin-left:8px;min-width:168px}.loading-container{display:flex;height:calc(100% - 150px);justify-content:center;align-items:center}.editor-container{max-width:500px}.divider{margin:0 8px;opacity:.5}app-missing-form-configs{position:absolute;bottom:0;right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], deferBlockDependencies: [() => [import('./ngx-t-forms-forms-builder-menu.component-Coppm548.mjs').then(m => m.FormsBuilderMenuComponent)], () => [i2$1.CdkDrag, i7.MatProgressSpinner, import('./ngx-t-forms-input-editor.component-BuSjy9Xq.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-DYfPkzOO.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-me7NBrdO.mjs').then(m => m.MissingFormConfigsComponent)]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.2", ngImport: i0, type: FormBuilderComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-forms-builder-menu.component-CPIcPREp.mjs').then(m => m.FormsBuilderMenuComponent), import('./ngx-t-forms-input-editor.component-__grERM8.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-C_dciQhe.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-Da3SdUn6.mjs').then(m => m.MissingFormConfigsComponent)], resolveMetadata: (FormsBuilderMenuComponent, InputEditorComponent, FormSectionStepperComponent, MissingFormConfigsComponent) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.2", ngImport: i0, type: FormBuilderComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-forms-builder-menu.component-Coppm548.mjs').then(m => m.FormsBuilderMenuComponent), import('./ngx-t-forms-input-editor.component-BuSjy9Xq.mjs').then(m => m.InputEditorComponent), import('./ngx-t-forms-form-section-stepper.component-DYfPkzOO.mjs').then(m => m.FormSectionStepperComponent), import('./ngx-t-forms-missing-form-configs.component-me7NBrdO.mjs').then(m => m.MissingFormConfigsComponent)], resolveMetadata: (FormsBuilderMenuComponent, InputEditorComponent, FormSectionStepperComponent, MissingFormConfigsComponent) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'app-form-builder', standalone: true, imports: [CommonModule,
                             MatModulesModule,
@@ -5631,9 +5828,9 @@ class TDynamicDataEditComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TDynamicDataEditComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: TDynamicDataEditComponent, isStandalone: true, selector: "lib-t-dynamic-data-edit", inputs: { editorConfig: "editorConfig", formInputs: "formInputs", data: "data", validationErrors: "validationErrors" }, outputs: { valueChange: "valueChange", blur: "blur" }, ngImport: i0, template: "@defer {\r\n    <ng-container *ngIf=\"( vm$ |async) as vm\" >\r\n\r\n            <mat-form-field appearance=\"outline\"\r\n                 [color]=\"((validationErrors)||[]||[]).length>0 ? 'warn' : 'primary'\"\r\n                [floatLabel]=\"'always'\" [subscriptSizing]=\"'dynamic'\"\r\n                [hintLabel]=\"vm.editorConfigValue?.hint||''\">\r\n                <mat-label> {{ (vm.  editorConfigValue)?.label + ((vm.  editorConfigValue)?.required ? '*' : '')}} </mat-label>\r\n    \r\n                @switch ((vm.  editorConfigValue)?.editType) {\r\n                @default {\r\n                <input \r\n                (blur)=\"elementBlur($event)\" \r\n                (input)=\"inputChange($event)\" \r\n                [disabled]=\"(vm.disabled)\"\r\n                [value]=\"(vm.value)\" matInput \r\n                \r\n                [placeholder]=\"(vm.  editorConfigValue)?.placeholder ||'Enter value'\">\r\n    \r\n    \r\n                }\r\n                @case ( elementEditorTypes.Toggle) {\r\n                <lib-mat-slider-toggle-editor \r\n                [name]=\"((vm.  editorConfigValue)?.name||'') \" \r\n                [label]=\"((vm.  editorConfigValue)?.label||'')\"\r\n                \r\n                (valueChange)=\"valueChanged(!!$event)\" [value]=\"(vm.value)\" \r\n                [errors]=\"(validationErrors)||[]\">\r\n                </lib-mat-slider-toggle-editor>\r\n    \r\n                }\r\n    \r\n                @case (elementEditorTypes.Range) {\r\n    \r\n    \r\n                <lib-mat-slider-editor [format]=\"(  vm.editorConfigValue)?.format \" [formatLabel]=\" formatLabel\"\r\n                    [max]=\"(  vm.editorConfigValue)?.max || 100\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n                    [min]=\"(  vm.editorConfigValue)?.min || 0\" (valueChange)=\"inputChange($event)\"\r\n                    [step]=\"(  vm.editorConfigValue)?.step || 1\" tickInterval=\"(  vm.editorConfigValue)?.step || 1\">\r\n    \r\n    \r\n                </lib-mat-slider-editor>\r\n    \r\n    \r\n    \r\n                }\r\n    \r\n                @case (elementEditorTypes.ChipSelect) {\r\n                <lib-mat-chip-list-editor [options]=\"(vm.editorConfigValue)?.options\" [required]=\"!!( vm.editorConfigValue)?.required\"\r\n                    [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" (valueChange)=\"  valueChanged($event)\"></lib-mat-chip-list-editor>\r\n    \r\n                }\r\n    \r\n                @case (elementEditorTypes.OptionSelect) {\r\n    \r\n                <mat-select [value]=\"(vm.value)\" (selectionChange)=\"valueChanged($event.value)\">\r\n                    @for(option of ( vm.editorConfigValue)?.options;track option.value){\r\n                    <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n                    }\r\n                </mat-select>\r\n    \r\n                }\r\n                <!--\r\n            @case (elementEditorTypes.RichTextEditor) {\r\n                <p>\r\n                    Not implemented yet\r\n                </p>\r\n            }\r\n                --->\r\n    \r\n                @case (elementEditorTypes.SelectionOptions) {\r\n    \r\n                <app-selection-options-editor [errors]=\"(validationErrors)||[]\" [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n                    [options]=\"(vm.value) || []\" (valueChanged)=\"valueChanged($event)\"></app-selection-options-editor>\r\n                }\r\n    \r\n                @case (\r\n                elementEditorTypes.ApiCall) {\r\n    \r\n                <lib-rest-api-call-setup \r\n                    [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\r\n                    [httpGetDataFunction]=\"(vm.editorConfigValue)?.httpGetDataFunction\"\r\n                    [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n                    (valueChanged)=\"valueChanged($event)\">\r\n    \r\n                </lib-rest-api-call-setup>\r\n                }\r\n    \r\n                @case (elementEditorTypes.MongoPipelineBuilder) {\r\n    \r\n                <app-pipeline-generator [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n                    [errors]=\"(validationErrors)||[]\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n                    (valueChanged)=\"valueChanged($event)\"></app-pipeline-generator>\r\n    \r\n                }\r\n                @case (elementEditorTypes.ApiValueAccessRules) {\r\n    \r\n    \r\n    \r\n                <app-api-value-access-rules \r\n                    [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n                    [errors]=\"(validationErrors)||[]\" [formInputs]=\"formInputs ||[]\" \r\n                    [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\r\n            \r\n                    [mapToData]=\"vm.dataOptions\"\r\n                    (valueChanged)=\"valueChanged($event)\">\r\n                </app-api-value-access-rules>\r\n    \r\n                }\r\n    \r\n                @case (elementEditorTypes.FormInputSelector)\r\n                {\r\n    \r\n                <lib-form-input-selector [formInputs]=\"formInputs ||[]\" [errors]=\"(validationErrors)||[]\" [value]=\"(vm.value) || []\"\r\n                    (change)=\"valueChanged($event)\">\r\n                </lib-form-input-selector>\r\n                }\r\n    \r\n                @case (\r\n                elementEditorTypes.RequiredInputs\r\n                ){\r\n    \r\n                <app-required-inputs [formInputs]=\"formInputs ||[]\" [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n                    [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n                </app-required-inputs>\r\n                }\r\n    \r\n                @case(elementEditorTypes.CalculatedFieldRules){\r\n    \r\n                <app-calculated-field-rules [formInputs]=\"formInputs ||[]\"\r\n                    [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n                    (valueChanged)=\"valueChanged($event)\" [mapToData]=\"vm.dataOptions\"></app-calculated-field-rules>\r\n                }\r\n    \r\n                @case(elementEditorTypes.Validators){\r\n    \r\n                <app-validators-config [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n                    [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\"\r\n                    [mapToData]=\"vm.dataOptions\">\r\n                </app-validators-config>\r\n    \r\n                }\r\n                @case(elementEditorTypes.ConfigMscoaSegments){\r\n    \r\n                <app-mscoa-segment-config [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\"\r\n                    [showAllSegments]=\"vm.dataOptions\" (valueChanged)=\"valueChanged($event)\"></app-mscoa-segment-config>\r\n                }\r\n                @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\r\n    \r\n                <app-config-mscoa-additional-inputs [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n                    [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\"\r\n                    [mapToData]=\"vm.dataOptions\">\r\n                    (valueChanged)=\"valueChanged($event)\">\r\n                </app-config-mscoa-additional-inputs>\r\n    \r\n                }\r\n                }\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-cYkn1O48.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-CB03sPjA.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-CCaRUSVQ.mjs').then(m => m.RestApiCallSetupComponent), import('./ngx-t-forms-api-value-access-rules.component-DjZDnTHz.mjs').then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-BGK3DNu0.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-BQDykLNH.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-E3l7DQo7.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-CGXCCl45.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-sOC54w4T.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-C9rintm4.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-4hrEpLk3.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-CItK6kXf.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-DcdHYqhN.mjs').then(m => m.MatChipListEditorComponent), i3.MatOption, i2.MatIconButton, i6.MatIcon, i3$1.MatFormField, i3$1.MatLabel, i3$1.MatError, i3$1.MatSuffix, i7$1.MatSelect, i8.MatTooltip, i12.MatInput]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: TDynamicDataEditComponent, isStandalone: true, selector: "lib-t-dynamic-data-edit", inputs: { editorConfig: "editorConfig", formInputs: "formInputs", data: "data", validationErrors: "validationErrors" }, outputs: { valueChange: "valueChange", blur: "blur" }, ngImport: i0, template: "@defer {\r\n    <ng-container *ngIf=\"( vm$ |async) as vm\" >\r\n\r\n            <mat-form-field appearance=\"outline\"\r\n                 [color]=\"((validationErrors)||[]||[]).length>0 ? 'warn' : 'primary'\"\r\n                [floatLabel]=\"'always'\" [subscriptSizing]=\"'dynamic'\"\r\n                [hintLabel]=\"vm.editorConfigValue?.hint||''\">\r\n                <mat-label> {{ (vm.  editorConfigValue)?.label + ((vm.  editorConfigValue)?.required ? '*' : '')}} </mat-label>\r\n    \r\n                @switch ((vm.  editorConfigValue)?.editType) {\r\n                @default {\r\n                <input \r\n                (blur)=\"elementBlur($event)\" \r\n                (input)=\"inputChange($event)\" \r\n                [disabled]=\"(vm.disabled)\"\r\n                [value]=\"(vm.value)\" matInput \r\n                \r\n                [placeholder]=\"(vm.  editorConfigValue)?.placeholder ||'Enter value'\">\r\n    \r\n    \r\n                }\r\n                @case ( elementEditorTypes.Toggle) {\r\n                <lib-mat-slider-toggle-editor \r\n                [name]=\"((vm.  editorConfigValue)?.name||'') \" \r\n                [label]=\"((vm.  editorConfigValue)?.label||'')\"\r\n                \r\n                (valueChange)=\"valueChanged(!!$event)\" [value]=\"(vm.value)\" \r\n                [errors]=\"(validationErrors)||[]\">\r\n                </lib-mat-slider-toggle-editor>\r\n    \r\n                }\r\n    \r\n                @case (elementEditorTypes.Range) {\r\n    \r\n    \r\n                <lib-mat-slider-editor [format]=\"(  vm.editorConfigValue)?.format \" [formatLabel]=\" formatLabel\"\r\n                    [max]=\"(  vm.editorConfigValue)?.max || 100\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n                    [min]=\"(  vm.editorConfigValue)?.min || 0\" (valueChange)=\"inputChange($event)\"\r\n                    [step]=\"(  vm.editorConfigValue)?.step || 1\" tickInterval=\"(  vm.editorConfigValue)?.step || 1\">\r\n    \r\n    \r\n                </lib-mat-slider-editor>\r\n    \r\n    \r\n    \r\n                }\r\n    \r\n                @case (elementEditorTypes.ChipSelect) {\r\n                <lib-mat-chip-list-editor [options]=\"(vm.editorConfigValue)?.options\" [required]=\"!!( vm.editorConfigValue)?.required\"\r\n                    [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" (valueChange)=\"  valueChanged($event)\"></lib-mat-chip-list-editor>\r\n    \r\n                }\r\n    \r\n                @case (elementEditorTypes.OptionSelect) {\r\n    \r\n                <mat-select [value]=\"(vm.value)\" (selectionChange)=\"valueChanged($event.value)\">\r\n                    @for(option of ( vm.editorConfigValue)?.options;track option.value){\r\n                    <mat-option [value]=\"option.value\">{{option.label}}</mat-option>\r\n                    }\r\n                </mat-select>\r\n    \r\n                }\r\n                <!--\r\n            @case (elementEditorTypes.RichTextEditor) {\r\n                <p>\r\n                    Not implemented yet\r\n                </p>\r\n            }\r\n                --->\r\n    \r\n                @case (elementEditorTypes.SelectionOptions) {\r\n    \r\n                <app-selection-options-editor [errors]=\"(validationErrors)||[]\" [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n                    [options]=\"(vm.value) || []\" (valueChanged)=\"valueChanged($event)\"></app-selection-options-editor>\r\n                }\r\n    \r\n                @case (\r\n                elementEditorTypes.ApiCall) {\r\n    \r\n                <lib-rest-api-call-setup \r\n                    [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\r\n                    [httpGetDataFunction]=\"(vm.editorConfigValue)?.httpGetDataFunction\"\r\n                    [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n                    (valueChanged)=\"valueChanged($event)\">\r\n    \r\n                </lib-rest-api-call-setup>\r\n                }\r\n    \r\n                @case (elementEditorTypes.MongoPipelineBuilder) {\r\n    \r\n                <app-pipeline-generator [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n                    [errors]=\"(validationErrors)||[]\" [getWorkflowOptions]=\"getWorkflowOptions$\"\r\n                    (valueChanged)=\"valueChanged($event)\"></app-pipeline-generator>\r\n    \r\n                }\r\n                @case (elementEditorTypes.ApiValueAccessRules) {\r\n    \r\n    \r\n    \r\n                <app-api-value-access-rules \r\n                    [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n                    [errors]=\"(validationErrors)||[]\" [formInputs]=\"formInputs ||[]\" \r\n                    [postmanCollectionConfig]=\"(vm.editorConfigValue)?.postmanCollectionConfig\"\r\n            \r\n                    [mapToData]=\"vm.dataOptions\"\r\n                    (valueChanged)=\"valueChanged($event)\">\r\n                </app-api-value-access-rules>\r\n    \r\n                }\r\n    \r\n                @case (elementEditorTypes.FormInputSelector)\r\n                {\r\n    \r\n                <lib-form-input-selector [formInputs]=\"formInputs ||[]\" [errors]=\"(validationErrors)||[]\" [value]=\"(vm.value) || []\"\r\n                    (change)=\"valueChanged($event)\">\r\n                </lib-form-input-selector>\r\n                }\r\n    \r\n                @case (\r\n                elementEditorTypes.RequiredInputs\r\n                ){\r\n    \r\n                <app-required-inputs [formInputs]=\"formInputs ||[]\" [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n                    [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\">\r\n                </app-required-inputs>\r\n                }\r\n    \r\n                @case(elementEditorTypes.CalculatedFieldRules){\r\n    \r\n                <app-calculated-field-rules [formInputs]=\"formInputs ||[]\"\r\n                    [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\"\r\n                    (valueChanged)=\"valueChanged($event)\" [mapToData]=\"vm.dataOptions\"></app-calculated-field-rules>\r\n                }\r\n    \r\n                @case(elementEditorTypes.Validators){\r\n    \r\n                <app-validators-config [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\" [value]=\"(vm.value)\"\r\n                    [errors]=\"(validationErrors)||[]\" (valueChanged)=\"valueChanged($event)\" [formInputs]=\"formInputs ||[]\"\r\n                    [mapToData]=\"vm.dataOptions\">\r\n                </app-validators-config>\r\n    \r\n                }\r\n                @case(elementEditorTypes.ConfigMscoaSegments){\r\n    \r\n                <app-mscoa-segment-config [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\"\r\n                    [showAllSegments]=\"vm.dataOptions\" (valueChanged)=\"valueChanged($event)\"></app-mscoa-segment-config>\r\n                }\r\n                @case(elementEditorTypes.ConfigMscoaAdditionalInputs){\r\n    \r\n                <app-config-mscoa-additional-inputs [id]=\"((vm.editorConfigValue)?.label||'')+((vm.editorConfigValue)?.editType||'')\"\r\n                    [value]=\"(vm.value)\" [errors]=\"(validationErrors)||[]\" [getMscoaTree]=\"getMscoaTree$\"\r\n                    [mapToData]=\"vm.dataOptions\">\r\n                    (valueChanged)=\"valueChanged($event)\">\r\n                </app-config-mscoa-additional-inputs>\r\n    \r\n                }\r\n                }\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-B4LtSVfp.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-D8sg5JiD.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-59CnCXEt.mjs').then(m => m.RestApiCallSetupComponent), import('./ngx-t-forms-api-value-access-rules.component-Cz4ruucP.mjs').then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-BdKBo1bW.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-Bu94_5ji.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-DdAzjsV9.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-CehxpsPR.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-CZglpHAQ.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-B0Qcx6y9.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-BY67rkzl.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-B3N3mb8E.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-C1uQVrVP.mjs').then(m => m.MatChipListEditorComponent), i3.MatOption, i2.MatIconButton, i6.MatIcon, i3$1.MatFormField, i3$1.MatLabel, i3$1.MatError, i3$1.MatSuffix, i7$1.MatSelect, i8.MatTooltip, i12.MatInput]] }); }
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.2", ngImport: i0, type: TDynamicDataEditComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-selection-options-editor.component-cYkn1O48.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-CB03sPjA.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-CCaRUSVQ.mjs').then(m => m.RestApiCallSetupComponent), import('./ngx-t-forms-api-value-access-rules.component-DjZDnTHz.mjs').then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-BGK3DNu0.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-BQDykLNH.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-E3l7DQo7.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-CGXCCl45.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-sOC54w4T.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-C9rintm4.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-4hrEpLk3.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-CItK6kXf.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-DcdHYqhN.mjs').then(m => m.MatChipListEditorComponent)], resolveMetadata: (SelectionOptionsEditorComponent, FormInputSelectorComponent, RestApiCallSetupComponent, ApiValueAccessRulesComponent, RequiredInputsComponent, PipelineGeneratorComponent, CalculatedFieldRulesComponent, ValidatorsConfigComponent, ConfigMscoaAdditionalInputsComponent, MatSliderEditorComponent, MscoaSegmentConfigComponent, MatSliderToggleEditorComponent, MatChipListEditorComponent) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.2", ngImport: i0, type: TDynamicDataEditComponent, resolveDeferredDeps: () => [import('./ngx-t-forms-selection-options-editor.component-B4LtSVfp.mjs').then(m => m.SelectionOptionsEditorComponent), import('./ngx-t-forms-form-input-selector.component-D8sg5JiD.mjs').then(m => m.FormInputSelectorComponent), import('./ngx-t-forms-rest-api-call-setup.component-59CnCXEt.mjs').then(m => m.RestApiCallSetupComponent), import('./ngx-t-forms-api-value-access-rules.component-Cz4ruucP.mjs').then(m => m.ApiValueAccessRulesComponent), import('./ngx-t-forms-required-inputs.component-BdKBo1bW.mjs').then(m => m.RequiredInputsComponent), import('./ngx-t-forms-pipeline-generator.component-Bu94_5ji.mjs').then(m => m.PipelineGeneratorComponent), import('./ngx-t-forms-calculated-field-rules.component-DdAzjsV9.mjs').then(m => m.CalculatedFieldRulesComponent), import('./ngx-t-forms-validators-config.component-CehxpsPR.mjs').then(m => m.ValidatorsConfigComponent), import('./ngx-t-forms-config-mscoa-additional-inputs.component-CZglpHAQ.mjs').then(m => m.ConfigMscoaAdditionalInputsComponent), import('./ngx-t-forms-mat-slider-editor.component-B0Qcx6y9.mjs').then(m => m.MatSliderEditorComponent), import('./ngx-t-forms-mscoa-segment-config.component-BY67rkzl.mjs').then(m => m.MscoaSegmentConfigComponent), import('./ngx-t-forms-mat-slider-toggle-editor.component-B3N3mb8E.mjs').then(m => m.MatSliderToggleEditorComponent), import('./ngx-t-forms-mat-chip-list-editor.component-C1uQVrVP.mjs').then(m => m.MatChipListEditorComponent)], resolveMetadata: (SelectionOptionsEditorComponent, FormInputSelectorComponent, RestApiCallSetupComponent, ApiValueAccessRulesComponent, RequiredInputsComponent, PipelineGeneratorComponent, CalculatedFieldRulesComponent, ValidatorsConfigComponent, ConfigMscoaAdditionalInputsComponent, MatSliderEditorComponent, MscoaSegmentConfigComponent, MatSliderToggleEditorComponent, MatChipListEditorComponent) => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'lib-t-dynamic-data-edit', standalone: true, imports: [CommonModule,
                             SelectionOptionsEditorComponent,
@@ -6015,12 +6212,15 @@ class TFormInputStatusComponent {
             .map(([key, value]) => value);
         return busyMessages.join(', ');
     }
+    get isReadOnly() {
+        return Boolean(this.inputConfig?.readonly || false);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TFormInputStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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\nmatTooltip=\"recently updated\"\r\n*ngIf=\"!busy && recentlyUpdated()\">update\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  }", 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.2", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TFormInputStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-t-form-input-status', standalone: true, imports: [CommonModule, MatModulesModule], template: "\r\n\r\n<mat-icon color=\"primary\" \r\nmatTooltip=\"recently updated\"\r\n*ngIf=\"!busy && recentlyUpdated()\">update\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  }", 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"] }]
+            args: [{ selector: 'lib-t-form-input-status', standalone: true, imports: [CommonModule, MatModulesModule], 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"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }] } });
@@ -6111,7 +6311,6 @@ function mscoaStoreActions(store) {
                 ...state,
                 segmentValues: { ...state.segmentValues, [segment.toUpperCase()]: newSegmentValue }
             };
-            console.error(newState, "'''''''----------------------------");
             return newState;
         })
     };
@@ -6654,7 +6853,7 @@ class MscoaComputationComponent {
         return !this.segmentConfig?.readOnly;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", 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.2", 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 \r\n        [accountInputs]=\"accountInputs\" \r\n        [userCanClearAccount]=\"userCanClearAccount\"\r\n        [mscoaAccount]=\"_selectedAccount\" \r\n        (updateAccount)=\"updateAccount($event)\"\r\n        (clearSelectedAccount)=\"clearSelectedAccount()\">\r\n    </app-account-value> \r\n</div>\r\n\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    <button *ngIf=\"userCanClearAccount\" mat-raised-button color=\"primary\" [disabled]=\"!saveSelection\"\r\n        (click)=\"saveAccount()\">Save</button>\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.2", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MscoaComputationComponent, decorators: [{
             type: Component,
@@ -6662,7 +6861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", 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 \r\n        [accountInputs]=\"accountInputs\" \r\n        [userCanClearAccount]=\"userCanClearAccount\"\r\n        [mscoaAccount]=\"_selectedAccount\" \r\n        (updateAccount)=\"updateAccount($event)\"\r\n        (clearSelectedAccount)=\"clearSelectedAccount()\">\r\n    </app-account-value> \r\n</div>\r\n\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    <button *ngIf=\"userCanClearAccount\" mat-raised-button color=\"primary\" [disabled]=\"!saveSelection\"\r\n        (click)=\"saveAccount()\">Save</button>\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-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"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialogRef }] });
 
 ;
@@ -6678,6 +6877,7 @@ class MscoaChartComponent {
         this.inputs$ = this.store.selectors.inputs$;
         this.destroy$ = new Subject();
         this._formBuilderFunctions = undefined;
+        this.onContainerClick = new EventEmitter();
         // Create portal properties
         this.inputPortals = {};
         this.editorMode = false;
@@ -6703,6 +6903,9 @@ class MscoaChartComponent {
         this.countdownSeconds = {};
         this.overId = null;
     }
+    setAsTouched(ev) {
+        this.onContainerClick.emit(ev);
+    }
     // Improved setupPortals method for MscoaChartComponent
     setupPortals(inputs) {
         // Reset portals
@@ -6950,12 +7153,14 @@ class MscoaChartComponent {
         this.formBuilderFunctions?.editInput(input);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", 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.2", type: MscoaChartComponent, isStandalone: true, selector: "app-mscoa-chart", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formBuilderFunctions: "formBuilderFunctions", segmentValues: "segmentValues", readonly: "readonly", config: "config", formGroup: "formGroup" }, outputs: { segmentValuesChanged: "segmentValuesChanged", interaction: "interaction" }, providers: [MscoaComponentStore,], ngImport: i0, template: "<section 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}}\r\n            } @else if (col === 'debit') {\r\n            Debit / 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(); selectAccount(row, col);\" color=\"primary\"\r\n              mat-button class=\"cell-button\">\r\n              <div class=\"content\">\r\n\r\n                {{row[col]}}\r\n              </div>\r\n            </button>\r\n            } @else {\r\n            <button [disabled]=\"!!row['singleSelect'] === true && col === 'credit'\"\r\n              (click)=\"selectAccount(row, col); $event.stopPropagation()\" 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'}}\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>", 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]] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MscoaChartComponent, isStandalone: true, selector: "app-mscoa-chart", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formBuilderFunctions: "formBuilderFunctions", segmentValues: "segmentValues", readonly: "readonly", config: "config", formGroup: "formGroup" }, outputs: { onContainerClick: "onContainerClick", segmentValuesChanged: "segmentValuesChanged", interaction: "interaction" }, providers: [MscoaComponentStore,], ngImport: i0, template: "<section (click)=\"setAsTouched($event)\" class=\"p-4\" *ngIf=\"(viewData$ | async) as viewData\">\r\n\r\n  @if (viewData.loading) {\r\n  <div style=\"padding: 24px; display: flex; align-items: center; justify-content: center;\">\r\n    <mat-spinner></mat-spinner>\r\n  </div>\r\n  } @else {\r\n  @defer (on viewport) {\r\n  <ng-container *ngIf=\"viewData.accountTreeKeys\">\r\n    <div class=\"table-container\">\r\n      <table mat-table [dataSource]=\"viewData.tableData\" class=\"table\">\r\n        @for (col of viewData.cols; track col; let i = $index) {\r\n        <ng-container [matColumnDef]=\"col\">\r\n          <th [style.text-align]=\"i === 0 ? 'right' : 'center'\"\r\n            style=\"background: var(--mat-toolbar-container-background-color);\" mat-header-cell *matHeaderCellDef>\r\n            @if (viewData.hasMultiSelect || i === 0) {\r\n            {{col | titlecase}}\r\n            } @else if (col === 'debit') {\r\n            Debit / 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]}}\r\n              </div>\r\n            </button>\r\n            } @else {\r\n            <button [disabled]=\"!!row['singleSelect'] === true && col === 'credit'\"\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'}}\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>", 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]] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MscoaChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-mscoa-chart', standalone: true, imports: [MatModulesModule, CommonModule, PortalModule], providers: [MscoaComponentStore,], template: "<section 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}}\r\n            } @else if (col === 'debit') {\r\n            Debit / 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(); selectAccount(row, col);\" color=\"primary\"\r\n              mat-button class=\"cell-button\">\r\n              <div class=\"content\">\r\n\r\n                {{row[col]}}\r\n              </div>\r\n            </button>\r\n            } @else {\r\n            <button [disabled]=\"!!row['singleSelect'] === true && col === 'credit'\"\r\n              (click)=\"selectAccount(row, col); $event.stopPropagation()\" 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'}}\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>", 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: { inputConfig: [{
+            args: [{ selector: 'app-mscoa-chart', standalone: true, imports: [MatModulesModule, CommonModule, PortalModule], providers: [MscoaComponentStore,], template: "<section (click)=\"setAsTouched($event)\" class=\"p-4\" *ngIf=\"(viewData$ | async) as viewData\">\r\n\r\n  @if (viewData.loading) {\r\n  <div style=\"padding: 24px; display: flex; align-items: center; justify-content: center;\">\r\n    <mat-spinner></mat-spinner>\r\n  </div>\r\n  } @else {\r\n  @defer (on viewport) {\r\n  <ng-container *ngIf=\"viewData.accountTreeKeys\">\r\n    <div class=\"table-container\">\r\n      <table mat-table [dataSource]=\"viewData.tableData\" class=\"table\">\r\n        @for (col of viewData.cols; track col; let i = $index) {\r\n        <ng-container [matColumnDef]=\"col\">\r\n          <th [style.text-align]=\"i === 0 ? 'right' : 'center'\"\r\n            style=\"background: var(--mat-toolbar-container-background-color);\" mat-header-cell *matHeaderCellDef>\r\n            @if (viewData.hasMultiSelect || i === 0) {\r\n            {{col | titlecase}}\r\n            } @else if (col === 'debit') {\r\n            Debit / 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]}}\r\n              </div>\r\n            </button>\r\n            } @else {\r\n            <button [disabled]=\"!!row['singleSelect'] === true && col === 'credit'\"\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'}}\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>", 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: [{
                 type: Input
             }], editorMode: [{
                 type: Input
@@ -7078,7 +7283,8 @@ class BaseCustomInput {
         }
     }
     get errorState() {
-        return ((!this.value && this.required) || !!this.ngControl?.errors) && this.touched;
+        const invalidValue = this.value === null || this.value === undefined || this.value === '';
+        return ((invalidValue && this.required) || !!this.ngControl?.errors) && this.touched;
     }
     get errors() { return this._errors; }
     set errors(err) {
@@ -7132,28 +7338,6 @@ class BaseCustomInput {
             this.stateChanges.next();
         }
     }
-    checkValidationsAndErrors() {
-        const control = this.ngControl?.control;
-        if (!control || !this.touched)
-            return;
-        const errors = { ...control.errors };
-        if (_isEqual(this.errors, errors))
-            return;
-        this.errors = errors;
-        if (this.value && 'required' in errors) {
-            const hasOtherErrors = Object.keys(errors).length > 1;
-            if (!hasOtherErrors) {
-                control.setErrors(null);
-            }
-            else {
-                delete errors['required'];
-                control.setErrors(errors);
-            }
-        }
-        else if (!('required' in errors) && this.required && !this.value) {
-            control.setErrors({ required: true, ...errors });
-        }
-    }
     temporaryError(msg) {
         // Set the error message
         this.errorMessage = msg;
@@ -7182,7 +7366,7 @@ class BaseCustomInput {
             return;
         this.errors = errors;
         const hasIsRequiredError = 'required' in errors;
-        const valueValid = value && control.touched;
+        const valueValid = value !== undefined && value !== '' && value !== null && control.touched;
         const hasOtherErrors = Object.keys(errors).length > 1;
         if (valueValid) {
             if (hasIsRequiredError) {
@@ -7231,16 +7415,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
 
 ;
 ;
-const customInputConfig$b = {
+const customInputConfig$f = {
     controlType: 'lib-mscoa-reactive-form-field',
     nextId: 0
 };
 class MscoaReactiveFormFieldComponent extends BaseCustomInput {
     get empty() {
-        return !this.value;
+        return this.value === null || this.value === undefined || Object.keys(this.value).length === 0;
     }
     constructor(ngControl, elementRef) {
-        super(ngControl, elementRef, customInputConfig$b);
+        super(ngControl, elementRef, customInputConfig$f);
         this.editorMode = false;
         this.mscoaInputConfig$ = new BehaviorSubject(undefined);
     }
@@ -7262,12 +7446,48 @@ class MscoaReactiveFormFieldComponent extends BaseCustomInput {
     get parentFormGroup() {
         return this.ngControl?.control?.parent;
     }
+    checkValidationsAnErrors() {
+        const { control } = this.ngControl || {};
+        // Early exit if conditions are not met
+        if (!this.required || !control) {
+            return;
+        }
+        const errors = control.errors ?? {};
+        this.errors = errors;
+        const hasIsRequiredError = 'required' in errors;
+        const requiredSegments = this._inputConfig.mscoaConfig.segments;
+        const allSegmentsValid = requiredSegments?.every((segment) => {
+            const key = segment.customSegment || segment.segment;
+            const segmentValue = this.value && key ? this.value[key] : undefined;
+            return segmentValue !== undefined && segmentValue !== null;
+        });
+        const valueValid = Boolean(allSegmentsValid);
+        const hasOtherErrors = Object.keys(errors).length > 1;
+        if (valueValid === true && hasIsRequiredError) {
+            // Only update errors if there are other errors besides 'required'
+            if (hasOtherErrors) {
+                delete errors['required'];
+                control.setErrors(errors);
+            }
+            else {
+                control.setErrors(null);
+            }
+        }
+        else if (!hasIsRequiredError && valueValid === false) {
+            // Only add 'required' error if it's not already present
+            console.error("Required was set to true but the value is not valid", valueValid, this.value, errors);
+            control.setErrors({ required: true, ...errors });
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MscoaReactiveFormFieldComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: MscoaReactiveFormFieldComponent, isStandalone: true, selector: "lib-mscoa-reactive-form-field", inputs: { formBuilderFunctions: "formBuilderFunctions", editorMode: "editorMode", inputConfig: "inputConfig" }, providers: [{ provide: MatFormFieldControl, useExisting: MscoaReactiveFormFieldComponent }], usesInheritance: true, ngImport: i0, template: "\r\n<div (click)=\"onContainerClick($event)\">\r\n    <app-mscoa-chart \r\n        (segmentValuesChanged)=\"segmentValuesChanged($event)\" \r\n         [config]=\"mscoaInputConfig$|async\"\r\n         [inputConfig]=\"_inputConfig \"\r\n         [readonly]=\"readonly\"\r\n         [editorMode]=\"editorMode\"\r\n         [formGroup]=\"parentFormGroup\"\r\n         [formBuilderFunctions]=\"formBuilderFunctions\"\r\n        [segmentValues]=\"value\"></app-mscoa-chart>\r\n    \r\n\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: MscoaChartComponent, selector: "app-mscoa-chart", inputs: ["inputConfig", "editorMode", "formBuilderFunctions", "segmentValues", "readonly", "config", "formGroup"], outputs: ["segmentValuesChanged", "interaction"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: MscoaReactiveFormFieldComponent, isStandalone: true, selector: "lib-mscoa-reactive-form-field", inputs: { formBuilderFunctions: "formBuilderFunctions", editorMode: "editorMode", inputConfig: "inputConfig" }, host: { properties: { "lib-mscoa-reactive-form-field.floating": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: MscoaReactiveFormFieldComponent }], usesInheritance: true, ngImport: i0, template: "\r\n<div (click)=\"onContainerClick($event)\">\r\n    <app-mscoa-chart \r\n        (onContainerClick)=\"onContainerClick($event)\"\r\n        (segmentValuesChanged)=\"segmentValuesChanged($event)\" \r\n         [config]=\"mscoaInputConfig$|async\"\r\n         [inputConfig]=\"_inputConfig \"\r\n         [readonly]=\"readonly\"\r\n         [editorMode]=\"editorMode\"\r\n         [formGroup]=\"parentFormGroup\"\r\n         [formBuilderFunctions]=\"formBuilderFunctions\"\r\n        [segmentValues]=\"value\"></app-mscoa-chart>\r\n    \r\n\r\n</div>\r\n\r\n", styles: [""], dependencies: [{ kind: "component", type: MscoaChartComponent, selector: "app-mscoa-chart", inputs: ["inputConfig", "editorMode", "formBuilderFunctions", "segmentValues", "readonly", "config", "formGroup"], outputs: ["onContainerClick", "segmentValuesChanged", "interaction"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2$2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MscoaReactiveFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-mscoa-reactive-form-field', standalone: true, imports: [MscoaChartComponent, CommonModule], providers: [{ provide: MatFormFieldControl, useExisting: MscoaReactiveFormFieldComponent }], template: "\r\n<div (click)=\"onContainerClick($event)\">\r\n    <app-mscoa-chart \r\n        (segmentValuesChanged)=\"segmentValuesChanged($event)\" \r\n         [config]=\"mscoaInputConfig$|async\"\r\n         [inputConfig]=\"_inputConfig \"\r\n         [readonly]=\"readonly\"\r\n         [editorMode]=\"editorMode\"\r\n         [formGroup]=\"parentFormGroup\"\r\n         [formBuilderFunctions]=\"formBuilderFunctions\"\r\n        [segmentValues]=\"value\"></app-mscoa-chart>\r\n    \r\n\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-mscoa-reactive-form-field', standalone: true, imports: [MscoaChartComponent, CommonModule], host: {
+                        '[lib-mscoa-reactive-form-field.floating]': 'shouldLabelFloat',
+                        '[id]': 'id',
+                    }, providers: [{ provide: MatFormFieldControl, useExisting: MscoaReactiveFormFieldComponent }], template: "\r\n<div (click)=\"onContainerClick($event)\">\r\n    <app-mscoa-chart \r\n        (onContainerClick)=\"onContainerClick($event)\"\r\n        (segmentValuesChanged)=\"segmentValuesChanged($event)\" \r\n         [config]=\"mscoaInputConfig$|async\"\r\n         [inputConfig]=\"_inputConfig \"\r\n         [readonly]=\"readonly\"\r\n         [editorMode]=\"editorMode\"\r\n         [formGroup]=\"parentFormGroup\"\r\n         [formBuilderFunctions]=\"formBuilderFunctions\"\r\n        [segmentValues]=\"value\"></app-mscoa-chart>\r\n    \r\n\r\n</div>\r\n\r\n" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -7288,8 +7508,8 @@ function getInputErrorMessage(inputConfig, formGroup) {
         if (!startDateControl || !endDateControl) {
             return `Start/End Form control is not found`;
         }
-        const startControl = formGroup.controls[startDateControl];
-        const endControl = formGroup.controls[endDateControl];
+        const startControl = formGroup.controls[`${inputConfig.id}.${startDateControl}`] || formGroup.controls[startDateControl];
+        const endControl = formGroup.controls[`${inputConfig.id}.${endDateControl}`] || formGroup.controls[endDateControl];
         return returnError({
             ...startControl?.errors,
             ...endControl?.errors
@@ -7326,18 +7546,12 @@ function getInputErrorMessage(inputConfig, formGroup) {
 class MscoaFormInputComponent {
     constructor() {
         this.editorMode = false;
-        this.valueChange = new EventEmitter();
-    }
-    segmentValuesChanged(event) {
-        if (this.inputConfig.readonly)
-            return;
-        this.valueChange.emit(event);
     }
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MscoaFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MscoaFormInputComponent, isStandalone: true, selector: "lib-mscoa-form-input", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formGroup: "formGroup", formBuilderFunctions: "formBuilderFunctions" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n    <mat-form-field \r\n\r\n    [appearance]=\"this.inputConfig.appearance ||'fill' \"\r\n    [floatLabel]=\"'always'\"\r\n    subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as inputConfig\">\r\n        <mat-label>\r\n            {{this.inputConfig.label }}  \r\n            <lib-t-form-input-status \r\n            [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n        </mat-label>\r\n    <mat-card      style=\"overflow:auto\">\r\n           <lib-mscoa-reactive-form-field \r\n            [inputConfig]=\"this.inputConfig\"\r\n            [formControlName]=\"this.inputConfig.id\"\r\n            [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.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.2", type: MscoaFormInputComponent, isStandalone: true, selector: "lib-mscoa-form-input", inputs: { inputConfig: "inputConfig", editorMode: "editorMode", formGroup: "formGroup", formBuilderFunctions: "formBuilderFunctions" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n    <mat-form-field \r\n\r\n    [appearance]=\"this.inputConfig.appearance ||'fill' \"\r\n    [floatLabel]=\"'always'\"\r\n    subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as inputConfig\">\r\n        <mat-label>\r\n            {{this.inputConfig.label }}  \r\n            <lib-t-form-input-status \r\n            [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n        </mat-label>\r\n    <mat-card      style=\"overflow:auto\">\r\n           <lib-mscoa-reactive-form-field \r\n            [inputConfig]=\"this.inputConfig\"\r\n            [formControlName]=\"this.inputConfig.id\"\r\n            [required]=\"this.inputConfig.required\"\r\n            [formGroup]=\"formGroup\"\r\n            [editorMode]=\"editorMode\"\r\n            [formBuilderFunctions]=\"formBuilderFunctions\"\r\n           ></lib-mscoa-reactive-form-field>\r\n      \r\n    </mat-card>\r\n   \r\n\r\n   @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n        <mat-hint  class=\"inputHint\">\r\n          {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n        </mat-hint>\r\n        }\r\n     \r\n        @if (!!errorMessage) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n        }\r\n        <!-- Prefix Icon -->\r\n        <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n    \r\n        <!-- Suffix Icon or Password Visibility Toggle -->\r\n        <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n          <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n            }}</mat-icon>\r\n          <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"inputConfig.togglePasswordVisibility()\"\r\n            mat-icon-button matSuffix>\r\n            <mat-icon>{{ inputConfig.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n          </button> -->\r\n        </ng-container>\r\n    \r\n        <!-- Prefix & Suffix Text -->\r\n        <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n        <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n          }}</span>\r\n    \r\n        <!-- Character Count Hint -->\r\n        <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n          {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n          }}\r\n        </mat-hint>\r\n    \r\n     \r\n    </mat-form-field>\r\n\r\n\r\n  \r\n   \r\n    \r\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "component", type: MscoaReactiveFormFieldComponent, selector: "lib-mscoa-reactive-form-field", inputs: ["formBuilderFunctions", "editorMode", "inputConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MscoaFormInputComponent, decorators: [{
             type: Component,
@@ -7347,7 +7561,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                         ReactiveFormsModule,
                         TFormInputStatusComponent,
                         MscoaReactiveFormFieldComponent
-                    ], template: "<form [formGroup]=\"formGroup\">\r\n    <mat-form-field \r\n\r\n    [appearance]=\"this.inputConfig.appearance ||'fill' \"\r\n    [floatLabel]=\"'always'\"\r\n    subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as inputConfig\">\r\n        <mat-label>\r\n            {{this.inputConfig.label }}  \r\n            <lib-t-form-input-status \r\n            [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n        </mat-label>\r\n    <mat-card      style=\"overflow:auto\">\r\n           <lib-mscoa-reactive-form-field \r\n            [inputConfig]=\"this.inputConfig\"\r\n            [formControlName]=\"this.inputConfig.id\"\r\n            [formGroup]=\"formGroup\"\r\n            [editorMode]=\"editorMode\"\r\n            [formBuilderFunctions]=\"formBuilderFunctions\"\r\n           ></lib-mscoa-reactive-form-field>\r\n      \r\n    </mat-card>\r\n   \r\n\r\n   @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n        <mat-hint  class=\"inputHint\">\r\n          {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n        </mat-hint>\r\n        }\r\n     \r\n        @if (!!errorMessage) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n        }\r\n        <!-- Prefix Icon -->\r\n        <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n    \r\n        <!-- Suffix Icon or Password Visibility Toggle -->\r\n        <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n          <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n            }}</mat-icon>\r\n          <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"inputConfig.togglePasswordVisibility()\"\r\n            mat-icon-button matSuffix>\r\n            <mat-icon>{{ inputConfig.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n          </button> -->\r\n        </ng-container>\r\n    \r\n        <!-- Prefix & Suffix Text -->\r\n        <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n        <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n          }}</span>\r\n    \r\n        <!-- Character Count Hint -->\r\n        <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n          {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n          }}\r\n        </mat-hint>\r\n    \r\n     \r\n    </mat-form-field>\r\n\r\n\r\n  \r\n   \r\n    \r\n", styles: ["mat-form-field{width:100%}\n"] }]
+                    ], template: "<form [formGroup]=\"formGroup\">\r\n    <mat-form-field \r\n\r\n    [appearance]=\"this.inputConfig.appearance ||'fill' \"\r\n    [floatLabel]=\"'always'\"\r\n    subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as inputConfig\">\r\n        <mat-label>\r\n            {{this.inputConfig.label }}  \r\n            <lib-t-form-input-status \r\n            [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n        </mat-label>\r\n    <mat-card      style=\"overflow:auto\">\r\n           <lib-mscoa-reactive-form-field \r\n            [inputConfig]=\"this.inputConfig\"\r\n            [formControlName]=\"this.inputConfig.id\"\r\n            [required]=\"this.inputConfig.required\"\r\n            [formGroup]=\"formGroup\"\r\n            [editorMode]=\"editorMode\"\r\n            [formBuilderFunctions]=\"formBuilderFunctions\"\r\n           ></lib-mscoa-reactive-form-field>\r\n      \r\n    </mat-card>\r\n   \r\n\r\n   @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n        <mat-hint  class=\"inputHint\">\r\n          {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n        </mat-hint>\r\n        }\r\n     \r\n        @if (!!errorMessage) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n        }\r\n        <!-- Prefix Icon -->\r\n        <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n    \r\n        <!-- Suffix Icon or Password Visibility Toggle -->\r\n        <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n          <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n            }}</mat-icon>\r\n          <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"inputConfig.togglePasswordVisibility()\"\r\n            mat-icon-button matSuffix>\r\n            <mat-icon>{{ inputConfig.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n          </button> -->\r\n        </ng-container>\r\n    \r\n        <!-- Prefix & Suffix Text -->\r\n        <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n        <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n          }}</span>\r\n    \r\n        <!-- Character Count Hint -->\r\n        <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n          {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n          }}\r\n        </mat-hint>\r\n    \r\n     \r\n    </mat-form-field>\r\n\r\n\r\n  \r\n   \r\n    \r\n", styles: ["mat-form-field{width:100%}\n"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], editorMode: [{
@@ -7356,8 +7570,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                 type: Input
             }], formBuilderFunctions: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
 const SignatureConfigOptions = {
@@ -7476,7 +7688,7 @@ const generateSecretKey = async (input) => {
 
 ;
 ;
-const customInputConfig$a = {
+const customInputConfig$e = {
     controlType: 'lib-signature-pad-input',
     nextId: 0
 };
@@ -7488,7 +7700,7 @@ class SignaturePadInputComponent extends BaseCustomInput {
         return true;
     }
     constructor(ngControl, elementRef, cdr, ngZone) {
-        super(ngControl, elementRef, customInputConfig$a);
+        super(ngControl, elementRef, customInputConfig$e);
         this.cdr = cdr;
         this.ngZone = ngZone;
         this.NGX_T_FORMS_CONFIG = inject(NGX_T_FORMS_CONFIG_TOKEN);
@@ -7715,30 +7927,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class SignatureInputElementComponent {
-    constructor() {
-        this.valueChange = new EventEmitter();
-    }
-    changed($event) {
-        this.valueChange.emit($event);
-    }
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SignatureInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: SignatureInputElementComponent, isStandalone: true, selector: "lib-signature-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { valueChange: "valueChange" }, 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        [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.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.2", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SignatureInputElementComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-signature-input-element', standalone: true, imports: [MatModulesModule,
                         TFormInputStatusComponent,
                         CommonModule,
-                        ReactiveFormsModule, SignaturePadInputComponent], 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        [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"] }]
+                        ReactiveFormsModule, SignaturePadInputComponent], 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"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
 class SectionTitleComponent {
@@ -7752,41 +7956,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                 type: Input
             }] } });
 
-class AutoCompleteInputElementComponent {
-    constructor() {
-        this.valueChange = new EventEmitter();
+const customInputConfig$d = {
+    controlType: 'lib-auto-complet-reactive-input',
+    nextId: 0
+};
+class AutoCompletReactiveInputComponent extends BaseCustomInput {
+    get empty() {
+        return !this.value;
     }
-    changed($event) {
-        this.valueChange.emit($event);
+    get shouldLabelFloat() {
+        return true;
+    }
+    constructor(ngControl, elementRef) {
+        super(ngControl, elementRef, customInputConfig$d);
+        this.debounceTime = 300;
+        this.valueSubject = new Subject();
+    }
+    ngOnInit() {
+        this.valueSubject.pipe(debounceTime(this.debounceTime), takeUntil(this.destroy$)).subscribe(event => {
+            this.value = event.target.value;
+            this.stateChanges.next();
+            this.onChange(this.value);
+        });
     }
+    onInputChange($event) {
+        this.valueSubject.next($event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: AutoCompletReactiveInputComponent, 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.2", type: AutoCompletReactiveInputComponent, isStandalone: true, selector: "lib-auto-complet-reactive-input", inputs: { auto: "auto", inputConfig: "inputConfig" }, host: { properties: { "lib-auto-complet-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: AutoCompletReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "<input [readonly]=\"this.inputConfig?.readonly\" [pattern]=\"this.inputConfig?.pattern || ''\"\r\n    [required]=\"!!this.inputConfig?.required\" [attr.maxlength]=\"this.inputConfig?.maxLength\"\r\n     [attr.minlength]=\"this.inputConfig?.minLength\"\r\n    [type]=\"this.inputConfig?.type||'text'\" \r\n        (input)=\"onInputChange($event)\"\r\n     [value]=\"value\"\r\n\r\n    [min]=\"this.inputConfig?.min\" [max]=\"this.inputConfig?.max\" autocomplete=\"on\"\r\n    [matAutocomplete]=\"auto\"\r\n    matInput />", styles: [""], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i2$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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.2", ngImport: i0, type: AutoCompletReactiveInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-auto-complet-reactive-input', imports: [
+                        MatModulesModule,
+                        ReactiveFormsModule,
+                    ], host: {
+                        '[lib-auto-complet-reactive-input]': 'shouldLabelFloat',
+                        '[id]': 'id',
+                    }, providers: [{ provide: MatFormFieldControl, useExisting: AutoCompletReactiveInputComponent }], template: "<input [readonly]=\"this.inputConfig?.readonly\" [pattern]=\"this.inputConfig?.pattern || ''\"\r\n    [required]=\"!!this.inputConfig?.required\" [attr.maxlength]=\"this.inputConfig?.maxLength\"\r\n     [attr.minlength]=\"this.inputConfig?.minLength\"\r\n    [type]=\"this.inputConfig?.type||'text'\" \r\n        (input)=\"onInputChange($event)\"\r\n     [value]=\"value\"\r\n\r\n    [min]=\"this.inputConfig?.min\" [max]=\"this.inputConfig?.max\" autocomplete=\"on\"\r\n    [matAutocomplete]=\"auto\"\r\n    matInput />" }]
+        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i0.ElementRef }], propDecorators: { auto: [{
+                type: Input
+            }], inputConfig: [{
+                type: Input
+            }] } });
+
+class AutoCompleteInputElementComponent {
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: AutoCompleteInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: AutoCompleteInputElementComponent, isStandalone: true, selector: "lib-auto-complete-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", options: "options" }, outputs: { valueChange: "valueChange" }, 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    <input [readonly]=\"this.inputConfig.readonly\" [pattern]=\"this.inputConfig.pattern || ''\"\r\n    [required]=\"this.inputConfig.required\" [attr.maxlength]=\"this.inputConfig.maxLength\"\r\n    [formControlName]=\"this.inputConfig.id\" [attr.minlength]=\"this.inputConfig.minLength\"\r\n    [type]=\"this.inputConfig.type||'text'\" \r\n    [min]=\"this.inputConfig.min\" [max]=\"this.inputConfig.max\" autocomplete=\"on\"\r\n    [matAutocomplete]=\"auto\"\r\n    matInput />\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    </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: i1$5.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: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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: "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.ɵ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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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: i2$3.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: AutoCompleteInputElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-auto-complete-input-element', standalone: true, imports: [MatModulesModule, ReactiveFormsModule, CommonModule, TFormInputStatusComponent], 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    <input [readonly]=\"this.inputConfig.readonly\" [pattern]=\"this.inputConfig.pattern || ''\"\r\n    [required]=\"this.inputConfig.required\" [attr.maxlength]=\"this.inputConfig.maxLength\"\r\n    [formControlName]=\"this.inputConfig.id\" [attr.minlength]=\"this.inputConfig.minLength\"\r\n    [type]=\"this.inputConfig.type||'text'\" \r\n    [min]=\"this.inputConfig.min\" [max]=\"this.inputConfig.max\" autocomplete=\"on\"\r\n    [matAutocomplete]=\"auto\"\r\n    matInput />\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    </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"] }]
+            args: [{ selector: 'lib-auto-complete-input-element', standalone: true, imports: [MatModulesModule, ReactiveFormsModule, CommonModule,
+                        AutoCompletReactiveInputComponent,
+                        TFormInputStatusComponent], 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"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
                 type: Input
             }], options: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
 ;
 ;
-const customInputConfig$9 = {
+const customInputConfig$c = {
     controlType: 'lib-geo-location-form-input',
     nextId: 0
 };
 class ToggleComponent extends BaseCustomInput {
     constructor(ngControl, elementRef) {
-        super(ngControl, elementRef, customInputConfig$9);
+        super(ngControl, elementRef, customInputConfig$c);
     }
     get empty() {
         return !this.value;
@@ -7799,18 +8045,21 @@ class ToggleComponent extends BaseCustomInput {
         this.onChange(event.checked);
         this.stateChanges.next();
     }
+    get isChecked() {
+        return Boolean(this.value);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ToggleComponent, 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.2", 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]=\"this.value\"\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: i2$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" }] }); }
+            }], 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: i2$4.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.2", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-toggle', standalone: true, imports: [MatModulesModule, CommonModule], providers: [{
                             provide: MatFormFieldControl,
                             useExisting: forwardRef(() => ToggleComponent)
-                        }], 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]=\"this.value\"\r\n[ariaReadOnly]=\"this.inputConfig.disabled\"\r\n[disabled]=\"this.inputConfig.disabled\"\r\n>\r\n{{this.inputConfig.label | titlecase }}</mat-slide-toggle>" }]
+                        }], 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>" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -7822,39 +8071,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class ToggleInputElementComponent {
-    constructor() {
-        this.valueChange = new EventEmitter();
-    }
-    changed($event) {
-        this.valueChange.emit($event);
-    }
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ToggleInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ToggleInputElementComponent, isStandalone: true, selector: "lib-toggle-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { valueChange: "valueChange" }, 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[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.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.2", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ToggleInputElementComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-toggle-input-element', standalone: true, imports: [MatModulesModule, ReactiveFormsModule, TFormInputStatusComponent,
                         CommonModule,
                         ToggleComponent
-                    ], 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[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"] }]
+                    ], 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"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
-const customInputConfig$8 = {
+const customInputConfig$b = {
     controlType: 'lib-input-custom',
     nextId: 0
 };
 class SelectInputComponent extends BaseCustomInput {
     constructor(ngControl, elementRef) {
-        super(ngControl, elementRef, customInputConfig$8);
+        super(ngControl, elementRef, customInputConfig$b);
         this.valueSubject = new Subject();
     }
     get empty() {
@@ -7885,15 +8126,18 @@ class SelectInputComponent extends BaseCustomInput {
     getAvatar(userName) {
         return `https://ui-avatars.com/api/?color=EADDFF&font-size=0.36&bold=true&background=random&name=${userName}`;
     }
+    get inputControl() {
+        return this.ngControl?.control;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", 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.2", 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(selectionChange)=\"onSelectionChange($event)\"\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\">\r\n      <div [ngSwitch]=\"this.inputConfig?.matOptions?.optionType\">\r\n        <div *ngSwitchCase=\"'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        </div>\r\n        <div *ngSwitchDefault>{{ option.label }}</div>\r\n      </div>\r\n    </mat-option>\r\n}\r\n \r\n</mat-select>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "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: i7$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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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: i7$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.2", ngImport: i0, type: SelectInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-select-input', imports: [CommonModule, MatModulesModule], host: {
+            args: [{ selector: 'lib-select-input', imports: [CommonModule, MatModulesModule, ReactiveFormsModule], host: {
                         '[lib-select-input.floating]': 'shouldLabelFloat',
                         '[id]': 'id',
-                    }, providers: [{ provide: MatFormFieldControl, useExisting: SelectInputComponent }], template: "<mat-select #sele \r\n(selectionChange)=\"onSelectionChange($event)\"\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\">\r\n      <div [ngSwitch]=\"this.inputConfig?.matOptions?.optionType\">\r\n        <div *ngSwitchCase=\"'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        </div>\r\n        <div *ngSwitchDefault>{{ option.label }}</div>\r\n      </div>\r\n    </mat-option>\r\n}\r\n \r\n</mat-select>\r\n" }]
+                    }, providers: [{ provide: MatFormFieldControl, useExisting: SelectInputComponent }], 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" }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -7905,16 +8149,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
 // Add this to your component
 class SelectInputElementComponent {
     constructor() {
-        this.valueChange = new EventEmitter();
         this.errorStateMatcher = new class {
             isErrorState(control, form) {
                 return !!(control && control.invalid && (control.dirty || control.touched));
             }
         };
     }
-    changed($event) {
-        this.valueChange.emit($event);
-    }
     getSelectOptions() {
         if (!this.inputConfig.matOptions)
             return [];
@@ -7929,93 +8169,255 @@ class SelectInputElementComponent {
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
-    onSelectionChange(event) {
-        this.valueChange.emit(event.value);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SelectInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: SelectInputElementComponent, isStandalone: true, selector: "lib-select-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { valueChange: "valueChange" }, 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    [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.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.2", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SelectInputElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-select-input-element', standalone: true, imports: [CommonModule, MatModulesModule, ReactiveFormsModule, SelectInputComponent, TFormInputStatusComponent], 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    [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"] }]
+            args: [{ selector: 'lib-select-input-element', standalone: true, imports: [CommonModule, MatModulesModule, ReactiveFormsModule, SelectInputComponent, TFormInputStatusComponent], 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"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
-class TextareaInputElementComponent {
-    constructor() {
-        this.valueChange = new EventEmitter();
+const customInputConfig$a = {
+    controlType: 'lib-text-area-reactive-input',
+    nextId: 0
+};
+class TextAreaReactiveInputComponent extends BaseCustomInput {
+    get empty() {
+        return !this.value;
+    }
+    get shouldLabelFloat() {
+        return true;
+    }
+    constructor(ngControl, elementRef) {
+        super(ngControl, elementRef, customInputConfig$a);
+        this.debounceTime = 300;
+        this.valueSubject = new Subject();
     }
-    changed($event) {
-        this.valueChange.emit($event);
+    ngOnInit() {
+        this.valueSubject.pipe(debounceTime(this.debounceTime), takeUntil(this.destroy$)).subscribe(event => {
+            this.value = event.target.value;
+            this.stateChanges.next();
+            this.onChange(this.value);
+        });
     }
+    onInputChange($event) {
+        this.valueSubject.next($event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TextAreaReactiveInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.2", type: TextAreaReactiveInputComponent, isStandalone: true, selector: "lib-text-area-reactive-input", inputs: { auto: "auto", inputConfig: "inputConfig" }, host: { properties: { "lib-text-area-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: TextAreaReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "\r\n<textarea \r\n    [readonly]=\"this.inputConfig?.readonly\"\r\n      [required]=\"inputConfig?.required\" \r\n      [attr.maxlength]=\"inputConfig?.maxLength\" [attr.minlength]=\"inputConfig?.minLength\"\r\n      [rows]=\"inputConfig?.rows\" [spellcheck]=\"inputConfig?.spellcheck\"\r\n      [autocapitalize]=\"inputConfig?.autocapitalize\" [autocomplete]=\"inputConfig?.autocomplete\"\r\n      (input)=\"onInputChange($event)\" \r\n      [placeholder]=\"inputConfig?.placeholder||''\" [wrap]=\"inputConfig?.wrap\" matInput></textarea>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }, { kind: "directive", type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TextAreaReactiveInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-text-area-reactive-input', imports: [CommonModule, MatModulesModule, ReactiveFormsModule], host: {
+                        '[lib-text-area-reactive-input]': 'shouldLabelFloat',
+                        '[id]': 'id',
+                    }, providers: [{ provide: MatFormFieldControl, useExisting: TextAreaReactiveInputComponent }], template: "\r\n<textarea \r\n    [readonly]=\"this.inputConfig?.readonly\"\r\n      [required]=\"inputConfig?.required\" \r\n      [attr.maxlength]=\"inputConfig?.maxLength\" [attr.minlength]=\"inputConfig?.minLength\"\r\n      [rows]=\"inputConfig?.rows\" [spellcheck]=\"inputConfig?.spellcheck\"\r\n      [autocapitalize]=\"inputConfig?.autocapitalize\" [autocomplete]=\"inputConfig?.autocomplete\"\r\n      (input)=\"onInputChange($event)\" \r\n      [placeholder]=\"inputConfig?.placeholder||''\" [wrap]=\"inputConfig?.wrap\" matInput></textarea>\r\n" }]
+        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i0.ElementRef }], propDecorators: { auto: [{
+                type: Input
+            }], inputConfig: [{
+                type: Input
+            }] } });
+
+class TextareaInputElementComponent {
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TextareaInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: TextareaInputElementComponent, isStandalone: true, selector: "lib-textarea-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { valueChange: "valueChange" }, 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<textarea \r\n    [readonly]=\"this.inputConfig.readonly\"\r\n      [required]=\"inputConfig.required\" [formControlName]=\"inputConfig.id\"\r\n      [attr.maxlength]=\"inputConfig.maxLength\" [attr.minlength]=\"inputConfig.minLength\"\r\n      [rows]=\"inputConfig.rows\" [spellcheck]=\"inputConfig.spellcheck\"\r\n      [autocapitalize]=\"inputConfig.autocapitalize\" [autocomplete]=\"inputConfig.autocomplete\"\r\n      [placeholder]=\"inputConfig.placeholder||''\" [wrap]=\"inputConfig.wrap\" matInput></textarea>\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: ["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.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: "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: "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: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: TextareaInputElementComponent, isStandalone: true, selector: "lib-textarea-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n  <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as inputConfig\">\r\n    <mat-label>\r\n      {{this.inputConfig.label }}  \r\n      <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n    </mat-label>\r\n    <lib-text-area-reactive-input [inputConfig]=\"this.inputConfig\"\r\n    [required]=\"this.inputConfig.required\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n\r\n >\r\n\r\n    </lib-text-area-reactive-input>\r\n\r\n     @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n        <mat-hint  class=\"inputHint\">\r\n          {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n        </mat-hint>\r\n        }\r\n  \r\n        @if (!!errorMessage) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n        }\r\n        <!-- Prefix Icon -->\r\n        <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n    \r\n        <!-- Suffix Icon or Password Visibility Toggle -->\r\n        <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n          <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n            }}</mat-icon>\r\n          <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"inputConfig.togglePasswordVisibility()\"\r\n            mat-icon-button matSuffix>\r\n            <mat-icon>{{ inputConfig.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n          </button> -->\r\n        </ng-container>\r\n    \r\n        <!-- Prefix & Suffix Text -->\r\n        <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n        <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n          }}</span>\r\n    \r\n        <!-- Character Count Hint -->\r\n        <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n          {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n          }}\r\n        </mat-hint>\r\n    \r\n  \r\n    </mat-form-field>\r\n</form>\r\n", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "component", type: TextAreaReactiveInputComponent, selector: "lib-text-area-reactive-input", inputs: ["auto", "inputConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TextareaInputElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-textarea-input-element', standalone: true, imports: [ReactiveFormsModule, CommonModule, MatModulesModule, TFormInputStatusComponent], 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<textarea \r\n    [readonly]=\"this.inputConfig.readonly\"\r\n      [required]=\"inputConfig.required\" [formControlName]=\"inputConfig.id\"\r\n      [attr.maxlength]=\"inputConfig.maxLength\" [attr.minlength]=\"inputConfig.minLength\"\r\n      [rows]=\"inputConfig.rows\" [spellcheck]=\"inputConfig.spellcheck\"\r\n      [autocapitalize]=\"inputConfig.autocapitalize\" [autocomplete]=\"inputConfig.autocomplete\"\r\n      [placeholder]=\"inputConfig.placeholder||''\" [wrap]=\"inputConfig.wrap\" matInput></textarea>\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: ["mat-form-field{width:100%!important}\n"] }]
+            args: [{ selector: 'lib-textarea-input-element', standalone: true, imports: [ReactiveFormsModule, CommonModule, MatModulesModule, TFormInputStatusComponent, TextAreaReactiveInputComponent], template: "<form [formGroup]=\"formGroup\">\r\n  <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" *ngIf=\"this.inputConfig as inputConfig\">\r\n    <mat-label>\r\n      {{this.inputConfig.label }}  \r\n      <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n    </mat-label>\r\n    <lib-text-area-reactive-input [inputConfig]=\"this.inputConfig\"\r\n    [required]=\"this.inputConfig.required\"\r\n    [formControlName]=\"this.inputConfig.id\"\r\n\r\n >\r\n\r\n    </lib-text-area-reactive-input>\r\n\r\n     @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n        <mat-hint  class=\"inputHint\">\r\n          {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n        </mat-hint>\r\n        }\r\n  \r\n        @if (!!errorMessage) {\r\n        <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n        }\r\n        <!-- Prefix Icon -->\r\n        <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n    \r\n        <!-- Suffix Icon or Password Visibility Toggle -->\r\n        <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n          <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n            }}</mat-icon>\r\n          <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"inputConfig.togglePasswordVisibility()\"\r\n            mat-icon-button matSuffix>\r\n            <mat-icon>{{ inputConfig.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n          </button> -->\r\n        </ng-container>\r\n    \r\n        <!-- Prefix & Suffix Text -->\r\n        <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n        <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n          }}</span>\r\n    \r\n        <!-- Character Count Hint -->\r\n        <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n          {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n          }}\r\n        </mat-hint>\r\n    \r\n  \r\n    </mat-form-field>\r\n</form>\r\n", styles: ["mat-form-field{width:100%!important}\n"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
-class DateRangePickerInputElementComponent {
-    constructor() {
-        this.valueChange = new EventEmitter();
+const customInputConfig$9 = {
+    controlType: 'lib-date-range-picker-reactive-input',
+    nextId: 0
+};
+class DateRangePickerReactiveInputComponent extends BaseCustomInput {
+    get empty() {
+        return !this.value;
+    }
+    get shouldLabelFloat() {
+        return true;
+    }
+    constructor(ngControl, elementRef) {
+        super(ngControl, elementRef, customInputConfig$9);
+    }
+    get startDateControl() {
+        return this.parentFormGroup?.controls[`${this.inputConfig?.id}.${this.inputConfig?.startDateControl}`];
+    }
+    get endDateControl() {
+        return this.parentFormGroup?.controls[`${this.inputConfig?.id}.${this.inputConfig?.endDateControl}`];
     }
+    get parentFormGroup() {
+        return this.ngControl?.control?.parent;
+    }
+    checkValidationsAnErrors() {
+        const control = this.ngControl?.control;
+        if (!control || !this.touched)
+            return;
+        const errors = { ...control.errors };
+        this.errors = errors;
+        const validStartDate = this.startDateControl?.valid;
+        const validEndDate = this.endDateControl?.valid;
+        if (validStartDate && validEndDate && 'required' in errors) {
+            const hasOtherErrors = Object.keys(errors).length > 1;
+            if (!hasOtherErrors) {
+                control.setErrors(null);
+            }
+            else {
+                delete errors['required'];
+                control.setErrors(errors);
+            }
+        }
+        else if (!('required' in errors) && this.required && !validStartDate || !('required' in errors) && this.required && !validEndDate) {
+            control.setErrors({ required: true, ...errors });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DateRangePickerReactiveInputComponent, 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.2", type: DateRangePickerReactiveInputComponent, isStandalone: true, selector: "lib-date-range-picker-reactive-input", inputs: { inputConfig: "inputConfig" }, host: { properties: { "lib-date-picker-reactive-input": "shouldLabelFloat", "id": "id" } }, providers: [{ provide: MatFormFieldControl, useExisting: DateRangePickerReactiveInputComponent }], usesInheritance: true, ngImport: i0, template: "", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatModulesModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DateRangePickerReactiveInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-date-range-picker-reactive-input', imports: [CommonModule, MatModulesModule], standalone: true, host: {
+                        '[lib-date-picker-reactive-input]': 'shouldLabelFloat',
+                        '[id]': 'id',
+                    }, providers: [{ provide: MatFormFieldControl, useExisting: DateRangePickerReactiveInputComponent }], template: "" }]
+        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i0.ElementRef }], propDecorators: { inputConfig: [{
+                type: Input
+            }] } });
+
+class DateRangePickerInputElementComponent {
+    /**
+     * Get the appropriate error message for this input
+     */
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
+    /**
+     * Get the start date control name
+     */
+    get startControlName() {
+        return this.inputConfig.startDateControl
+            ? `${this.inputConfig.id}.${this.inputConfig.startDateControl}`
+            : `${this.inputConfig.id}.startDate`;
+    }
+    /**
+     * Get the end date control name
+     */
+    get endControlName() {
+        return this.inputConfig.endDateControl
+            ? `${this.inputConfig.id}.${this.inputConfig.endDateControl}`
+            : `${this.inputConfig.id}.endDate`;
+    }
+    /**
+     * Check if the start date control has a specific error
+     */
+    hasStartDateError(errorName) {
+        const control = this.formGroup.get(this.startControlName);
+        return control ? control.hasError(errorName) : false;
+    }
+    /**
+     * Check if the end date control has a specific error
+     */
+    hasEndDateError(errorName) {
+        const control = this.formGroup.get(this.endControlName);
+        return control ? control.hasError(errorName) : false;
+    }
     dateChanged(event, formControlName) {
-        this.valueChange.emit({ value: event.value, formControlName: formControlName });
+        // set touched and dirty on the form group
+        const control = this.formGroup.controls[`${this.inputConfig.id}.${formControlName}`];
+        if (control) {
+            control.setValue(event.value);
+            control.updateValueAndValidity();
+            control.markAsTouched();
+            control.markAsDirty();
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DateRangePickerInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: DateRangePickerInputElementComponent, isStandalone: true, selector: "lib-date-range-picker-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { valueChange: "valueChange" }, 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  <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\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      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  @if (formGroup.controls[inputConfig.startDateControl||'startDate']?.hasError('matStartDateInvalid')) {\r\n    <mat-error>Invalid start date</mat-error>\r\n  }\r\n  @if (formGroup.controls[inputConfig.endDateControl||'endDate']?.hasError('matEndDateInvalid')) {\r\n    <mat-error>Invalid end date</mat-error>\r\n  }\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.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DateRangePickerInputElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-date-range-picker-input-element', standalone: true, imports: [CommonModule, MatModulesModule, ReactiveFormsModule, TFormInputStatusComponent], providers: [provideNativeDateAdapter()], 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  <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\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      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  @if (formGroup.controls[inputConfig.startDateControl||'startDate']?.hasError('matStartDateInvalid')) {\r\n    <mat-error>Invalid start date</mat-error>\r\n  }\r\n  @if (formGroup.controls[inputConfig.endDateControl||'endDate']?.hasError('matEndDateInvalid')) {\r\n    <mat-error>Invalid end date</mat-error>\r\n  }\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"] }]
+            args: [{ selector: 'lib-date-range-picker-input-element', standalone: true, imports: [CommonModule, MatModulesModule, ReactiveFormsModule, TFormInputStatusComponent, DateRangePickerReactiveInputComponent], providers: [provideNativeDateAdapter()], 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"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
-class DatePickerInputElementComponent {
-    constructor() {
-        this.valueChange = new EventEmitter();
+const customInputConfig$8 = {
+    controlType: 'lib-auto-complet-reactive-input',
+    nextId: 0
+};
+class DatePickerReactiveInputComponent extends BaseCustomInput {
+    get empty() {
+        return !this.value;
+    }
+    get shouldLabelFloat() {
+        return true;
+    }
+    constructor(ngControl, elementRef) {
+        super(ngControl, elementRef, customInputConfig$8);
     }
     changed(event) {
-        this.valueChange.emit(event.value);
+        this.value = event.value;
+        this.stateChanges.next();
+        this.onChange(this.value);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", 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.2", 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 }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DatePickerReactiveInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-date-picker-reactive-input', imports: [
+                        MatModulesModule,
+                        ReactiveFormsModule
+                    ], host: {
+                        '[lib-date-picker-reactive-input]': 'shouldLabelFloat',
+                        '[id]': 'id',
+                    }, providers: [{ provide: MatFormFieldControl, useExisting: DatePickerReactiveInputComponent }], 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\" />" }]
+        }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i0.ElementRef }], propDecorators: { picker: [{
+                type: Input
+            }], inputConfig: [{
+                type: Input
+            }] } });
+
+class DatePickerInputElementComponent {
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DatePickerInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: DatePickerInputElementComponent, isStandalone: true, selector: "lib-date-picker-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { valueChange: "valueChange" }, 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    <input \r\n    [required]=\"inputConfig.required\" \r\n    [formControlName]=\"inputConfig.id\"\r\n    [min]=\"inputConfig.min\" \r\n    (dateChange)=\"changed($event)\"\r\n\r\n    [max]=\"inputConfig.max\" matInput \r\n    [matDatepicker]=\"picker\" />\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: "directive", type: i3$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { 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: "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.ɵ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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: DatePickerInputElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-date-picker-input-element', standalone: true, imports: [CommonModule, MatModulesModule, ReactiveFormsModule, TFormInputStatusComponent], providers: [provideNativeDateAdapter()], 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    <input \r\n    [required]=\"inputConfig.required\" \r\n    [formControlName]=\"inputConfig.id\"\r\n    [min]=\"inputConfig.min\" \r\n    (dateChange)=\"changed($event)\"\r\n\r\n    [max]=\"inputConfig.max\" matInput \r\n    [matDatepicker]=\"picker\" />\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"] }]
+            args: [{ selector: 'lib-date-picker-input-element', standalone: true, imports: [CommonModule, MatModulesModule, ReactiveFormsModule, TFormInputStatusComponent, DatePickerReactiveInputComponent], providers: [provideNativeDateAdapter()], 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"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
 ;
@@ -8184,12 +8586,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class FileUploadInputElementComponent {
-    constructor() {
-        this.valueChange = new EventEmitter();
-    }
-    changed($event) {
-        this.valueChange.emit($event);
-    }
     getErrors() {
         return this.formGroup.controls[this.inputConfig.id]?.errors;
     }
@@ -8197,17 +8593,15 @@ class FileUploadInputElementComponent {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: FileUploadInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: FileUploadInputElementComponent, isStandalone: true, selector: "lib-file-upload-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { valueChange: "valueChange" }, 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    ></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.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.2", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: FileUploadInputElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-file-upload-input-element', standalone: true, imports: [FileUploaderComponent, CommonModule, ReactiveFormsModule, TFormInputStatusComponent, MatModulesModule], 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    ></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"] }]
+            args: [{ selector: 'lib-file-upload-input-element', standalone: true, imports: [FileUploaderComponent, CommonModule, ReactiveFormsModule, TFormInputStatusComponent, MatModulesModule], 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"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
 ;
@@ -8331,7 +8725,7 @@ const editorConfig = (payload) => {
         defaultBlock: 'paragraph',
         hideToolbar: false,
         data: payload.data,
-        readOnly: false,
+        readOnly: payload.readOnly,
         logLevel: 'ERROR',
         minHeight: 400,
         onChange: (api, event) => {
@@ -8388,6 +8782,7 @@ class EditorJsInputComponent extends BaseCustomInput {
             holderId: this.inputConfig.id,
             imageFetchEndpoint: '',
             imageUploadEndpoint: '',
+            readOnly: this.inputConfig.readonly || false,
             data: this.value || undefined,
             onChangeFn: this.contentChangedSaveValue.bind(this)
         };
@@ -8418,17 +8813,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class EditorInputElementComponent {
-    changed($event) {
-        this.valueChange.emit($event);
-    }
     constructor() {
-        this.valueChange = new EventEmitter();
     }
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: EditorInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: EditorInputElementComponent, isStandalone: true, selector: "lib-editor-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { valueChange: "valueChange" }, 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        (change)=\"changed($event)\"\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@if (inputConfig.richTextEditorLibrary === 'CkEditor') {\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<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    <mat-hint *ngIf=\"inputConfig.hintLabel\" [matTooltip]=\"inputConfig.hintLabel\" class=\"inputHint\">\r\n      {{inputConfig.hintLabel}}\r\n      </mat-hint>\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)=\"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    </mat-form-field>\r\n \r\n</form>\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: "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.ɵ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.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: FormInputRichTextEditorComponent, selector: "app-form-input-rich-text-editor", inputs: ["inputConfig"] }, { kind: "component", type: EditorJsInputComponent, selector: "lib-editor-js-input", inputs: ["inputConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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@if (inputConfig.richTextEditorLibrary === 'CkEditor') {\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<app-form-input-rich-text-editor\r\n    [inputConfig]=\"inputConfig\"\r\n    [formControlName]=\"inputConfig.id\"\r\n  \r\n    >\r\n    </app-form-input-rich-text-editor>\r\n    \r\n    <mat-hint *ngIf=\"inputConfig.hintLabel\" [matTooltip]=\"inputConfig.hintLabel\" class=\"inputHint\">\r\n      {{inputConfig.hintLabel}}\r\n      </mat-hint>\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)=\"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    </mat-form-field>\r\n \r\n</form>\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: "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.ɵ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: FormInputRichTextEditorComponent, selector: "app-form-input-rich-text-editor", inputs: ["inputConfig"] }, { kind: "component", type: EditorJsInputComponent, selector: "lib-editor-js-input", inputs: ["inputConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: EditorInputElementComponent, decorators: [{
             type: Component,
@@ -8439,13 +8830,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                         ReactiveFormsModule,
                         FormInputRichTextEditorComponent,
                         EditorJsInputComponent
-                    ], 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        (change)=\"changed($event)\"\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@if (inputConfig.richTextEditorLibrary === 'CkEditor') {\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<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    <mat-hint *ngIf=\"inputConfig.hintLabel\" [matTooltip]=\"inputConfig.hintLabel\" class=\"inputHint\">\r\n      {{inputConfig.hintLabel}}\r\n      </mat-hint>\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)=\"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    </mat-form-field>\r\n \r\n</form>\r\n\r\n}\r\n", styles: ["mat-form-field{width:100%!important}\n"] }]
+                    ], 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@if (inputConfig.richTextEditorLibrary === 'CkEditor') {\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<app-form-input-rich-text-editor\r\n    [inputConfig]=\"inputConfig\"\r\n    [formControlName]=\"inputConfig.id\"\r\n  \r\n    >\r\n    </app-form-input-rich-text-editor>\r\n    \r\n    <mat-hint *ngIf=\"inputConfig.hintLabel\" [matTooltip]=\"inputConfig.hintLabel\" class=\"inputHint\">\r\n      {{inputConfig.hintLabel}}\r\n      </mat-hint>\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)=\"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    </mat-form-field>\r\n \r\n</form>\r\n\r\n}\r\n", styles: ["mat-form-field{width:100%!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
 const customInputConfig$4 = {
@@ -8492,15 +8881,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class BasicInputInputElementComponent {
-    constructor() {
-        this.valueChange = new EventEmitter();
-    }
     get formControl() {
         return this.formGroup.controls[this.inputConfig.id];
     }
-    changed($event) {
-        this.valueChange.emit($event);
-    }
     passwordStrengthColor(formControlName) {
         const form = this.formGroup;
         const value = form?.value[formControlName];
@@ -8540,7 +8923,7 @@ class BasicInputInputElementComponent {
         return control?.invalid && (control?.touched || control?.dirty);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BasicInputInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: BasicInputInputElementComponent, isStandalone: true, selector: "lib-basic-input-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "\r\n  <ng-container [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      {{inputConfig.label }}\r\n      <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n    </mat-label>\r\n    <lib-input-custom\r\n    [inputConfig]=\"this.inputConfig\"\r\n    [formControlName]=\"this.inputConfig.id\" \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: "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.2", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: BasicInputInputElementComponent, decorators: [{
             type: Component,
@@ -8551,13 +8934,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                         CommonModule,
                         ReactiveFormsModule,
                         InputCustomComponent
-                    ], template: "\r\n  <ng-container [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      {{inputConfig.label }}\r\n      <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n    </mat-label>\r\n    <lib-input-custom\r\n    [inputConfig]=\"this.inputConfig\"\r\n    [formControlName]=\"this.inputConfig.id\" \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"] }]
+                    ], 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"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
 class ColorScale {
@@ -8850,11 +9231,11 @@ class MultipleInputTableViewComponent {
         return !!this.inputConfig?.formIsOpen && this.formGroup?.controls[`${this.inputConfig?.id}.id`]?.value === row[`${this.inputConfig?.id}.id`];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MultipleInputTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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}\" \r\n            #t=\"matMenuTrigger\" (click)=\"applyOptionsToFn(row)\"\r\n            expand=\"block\" fill=\"clear\" style=\"margin-left: auto;margin-right:0px;display:block\">\r\n          @if (rowIsInEdit(row)) {\r\n            <mat-icon color=\"primary\">\r\n              edit\r\n            </mat-icon>   \r\n\r\n          }@else {\r\n            <mat-icon >\r\n              {{\r\n                t.menuOpen  ? 'close' : 'more_horiz'\r\n              }}\r\n            \r\n            </mat-icon>\r\n          }\r\n        \r\n\r\n          </button>\r\n\r\n\r\n          <mat-chip *ngIf=\"\r\n       row['SYSTEM_KEY_IN_EDIT']\r\n            \r\n        \">\r\n            In {{ inputConfig?.readonly ? 'View' : 'Edit' }}\r\n\r\n          </mat-chip>\r\n\r\n        </div>\r\n        <div *ngIf=\"configureCols.columnsConfig && configureCols.columnsConfig?.[col]?.type !== 'removal'\"\r\n          class=\"cellClass\">\r\n          <span *ngIf=\"isNumber(row[col])\">\r\n            {{ row[col] | number }}\r\n          </span>\r\n          <span *ngIf=\"!isNumber(row[col])\"> {{ row[col] }}\r\n\r\n          </span>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n    }\r\n\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"configureCols.displayedColumnsInOrder \"></tr>\r\n    <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n      *matRowDef=\"let row; columns: configureCols.displayedColumnsInOrder\"></tr>\r\n  </table>\r\n  <div *ngIf=\"(dataSource?._filterData)?.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 items\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>", 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}}\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.2", type: MultipleInputTableViewComponent, isStandalone: true, selector: "lib-multiple-input-table-view", inputs: { inputConfig: "inputConfig", dataSource: "dataSource", applyOptionsTo: "applyOptionsTo", formGroup: "formGroup" }, outputs: { onEditItem: "onEditItem", onDeleteItem: "onDeleteItem", onCopy: "onCopy", onApplyOptionsTo: "onApplyOptionsTo" }, ngImport: i0, template: "@defer (on viewport) {\r\n\r\n@if (configureCols.displayedColumnsInOrder.length===0) {\r\n<div style=\"\r\n      padding-left: 16px;\r\n      padding-right: 16px;\r\n      padding-top: 16px;\r\n      padding-bottom: 16px;\r\n\r\n      display: flex;\r\n      justify-content: center;\r\n      opacity: 0.6;\r\n      font-size: 13px;\r\n    \">\r\n  No columns\r\n</div>\r\n}\r\n<div class=\"table-container\">\r\n\r\n  <table mat-table [dataSource]=\"(dataSource || [])\" class=\"example-table\" matSort matSortActive=\"created\"\r\n    matSortDisableClear matSortDirection=\"desc\">\r\n    @for (col of (configureCols.displayedColumnsInOrder||[]); track col) {\r\n    <ng-container [matColumnDef]=\"col\">\r\n      <th mat-header-cell mat-sort-header *matHeaderCellDef>\r\n        <span style=\"text-align: start; line-height: normal; font-size: 13px\">\r\n          {{ configureCols.columnsConfig?.[col]?.[\"label\"] }}\r\n        </span>\r\n      </th>\r\n      <td [class.functionClass]=\"row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION']\"\r\n      \r\n        [style.background]=\"\r\n          returnBackground(row,  configureCols.columnsConfig?.[col])\r\n        \" mat-cell *matCellDef=\"let row\">\r\n        <div *ngIf=\" configureCols.columnsConfig?.[col]?.['type'] === 'removal'\" class=\"cellClass\">\r\n          <span *ngIf=\"\r\n          !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n          inputConfig?.multipleInputInEditId !== row['id']\">\r\n            <strong>\r\n\r\n              {{getCalculationFunction(row)}}\r\n            </strong>\r\n\r\n          </span>\r\n          <button mat-icon-button\r\n          [color]=\"t.menuOpen ? 'primary' : 'basic'\"\r\n          *ngIf=\"\r\n            !row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n            row['' ] !== 'true'\r\n               \r\n            \" \r\n            [matMenuTriggerFor]=\"rowOptions\" \r\n            [matMenuTriggerData]=\"{row:row}\" \r\n            #t=\"matMenuTrigger\" (click)=\"applyOptionsToFn(row)\"\r\n            expand=\"block\" fill=\"clear\" style=\"margin-left: auto;margin-right:0px;display:block\">\r\n          @if (rowIsInEdit(row)) {\r\n            <mat-icon color=\"primary\">\r\n              edit\r\n            </mat-icon>   \r\n\r\n          }@else {\r\n            <mat-icon >\r\n              {{\r\n                t.menuOpen  ? 'close' : 'more_horiz'\r\n              }}\r\n            \r\n            </mat-icon>\r\n          }\r\n        \r\n\r\n          </button>\r\n\r\n\r\n          <mat-chip *ngIf=\"\r\n       row['SYSTEM_KEY_IN_EDIT']\r\n            \r\n        \">\r\n            In {{ inputConfig?.readonly ? 'View' : 'Edit' }}\r\n\r\n          </mat-chip>\r\n\r\n        </div>\r\n        <div *ngIf=\"configureCols.columnsConfig && configureCols.columnsConfig?.[col]?.type !== 'removal'\"\r\n          class=\"cellClass\">\r\n          <span *ngIf=\"isNumber(row[col])\">\r\n            {{ row[col] | number }}\r\n          </span>\r\n          <span *ngIf=\"!isNumber(row[col])\"> {{ row[col] }}\r\n\r\n          </span>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n    }\r\n\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"configureCols.displayedColumnsInOrder \"></tr>\r\n    <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n      *matRowDef=\"let row; columns: configureCols.displayedColumnsInOrder\"></tr>\r\n  </table>\r\n  \r\n  <div *ngIf=\"!(dataSource?.data)||(dataSource?.data)?.length === 0\">\r\n    <div style=\"\r\n          padding-left: 16px;\r\n          padding-right: 16px;\r\n          padding-top: 16px;\r\n          padding-bottom: 16px;\r\n\r\n          display: flex;\r\n          justify-content: center;\r\n          opacity: 0.6;\r\n          font-size: 13px;\r\n        \">\r\n        <div style=\"\r\n        padding-left: 16px;\r\n        padding-right: 16px;\r\n        padding-top: 16px;\r\n        padding-bottom: 16px;\r\n\r\n        display: flex;\r\n        justify-content: center;\r\n        opacity: 0.6;\r\n        font-size: 13px;\r\n      \">\r\n   \r\n    <div style=\"margin-top: 8px; text-align: center;\">\r\n      <mat-icon style=\"font-size: 20px; vertical-align: middle; margin-right: 8px;\">list</mat-icon>\r\n      <div style=\"margin-top: 8px;\">\r\n        <strong>No items yet</strong>\r\n        <p style=\"margin-top: 4px; font-size: 13px;\">\r\n          <strong>Click the add button</strong> to create a new row. You'll be able to fill in details using a form.\r\n          Each saved entry will appear as a row in this table.\r\n        </p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n}@placeholder {\r\n<div style=\"padding: 50px;display:flex;justify-content:center;align-items:center; text-align: center;\">\r\n  <mat-spinner diameter=\"50\" />\r\n</div>\r\n}\r\n<mat-menu #rowOptions=\"matMenu\">\r\n  <ng-template matMenuContent let-row=\"row\">\r\n\r\n    <button mat-menu-item (click)=\"editItem(row)\">\r\n      <mat-icon>\r\n        {{inputConfig?.readonly ? 'visibility' : 'edit'}}\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          {{inputConfig?.readonly ? 'View details' : 'Edit'}}\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          {{inputConfig?.readonly ? 'View item properties' : 'Modify item properties'}}\r\n        </div>\r\n      </div>\r\n    </button>\r\n    @if(!inputConfig?.readonly){\r\n    <button mat-menu-item (click)=\"copy(row)\">\r\n      <mat-icon>\r\n        content_copy\r\n      </mat-icon>\r\n      <div class=\"option-text\">\r\n        <div class=\"option-main-text\">\r\n          Duplicate\r\n        </div>\r\n        <div class=\"option-sub-text\">\r\n          Create a copy with same values\r\n        </div>\r\n      </div>\r\n    </button>\r\n    @if(isAboutToDeleteRow(row)){\r\n      <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n        <mat-icon color=\"accent\">\r\n          cancel\r\n        </mat-icon>\r\n        <div class=\"option-text\">\r\n          <div class=\"option-main-text\" style=\"color: #2196F3;\">\r\n            Cancel Deletion\r\n          </div>\r\n          <div class=\"option-sub-text\">\r\n            Auto-deleting in {{ secondsCountDown()}} seconds...\r\n          </div>\r\n        </div>\r\n      </button>\r\n      <div class=\"deletion-progress-container\">\r\n        <mat-progress-bar color=\"warn\" mode=\"determinate\" [value]=\"getCountdownSeconds()\"></mat-progress-bar>\r\n        <div class=\"deletion-message\" *ngIf=\"getCountdownSeconds() > 75\">\r\n          Deleting soon...\r\n        </div>\r\n      </div>\r\n    }@else {\r\n      <button mat-menu-item (click)=\"multipleInputRemoveItem($event,row)\">\r\n        <mat-icon color=\"warn\">\r\n          delete_outline\r\n        </mat-icon>\r\n        <div class=\"option-text\">\r\n          <div class=\"option-main-text\">\r\n            Delete \r\n          </div>\r\n          <div class=\"option-sub-text\">\r\n            Will delete after 3 seconds (click to cancel)\r\n          </div>\r\n        </div>\r\n      </button>\r\n    }\r\n    }\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".functionClass{background:var(--mat-toolbar-container-background-color, var(--mat-app-surface));font-weight:500}.option-text{display:flex;flex-direction:column;margin-left:8px}.option-main-text{font-size:14px;font-weight:500;margin-bottom:2px;line-height:normal}.option-sub-text{line-height:normal;font-size:12px;color:#0000008a;font-weight:400;line-height:1.2}.deletion-progress-container{position:relative;padding:0 16px 8px}.deletion-message{position:absolute;right:16px;top:2px;font-size:11px;color:#f44336;font-weight:500;line-height:1.6;animation:pulse 1s infinite}button:has(+.deletion-progress-container){border-bottom:none!important;padding-bottom:4px!important}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}@media (max-width: 600px){.option-sub-text{max-width:180px;white-space:normal}}.table-container{max-width:100%!important;overflow:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: i4$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTableModule }], deferBlockDependencies: [() => [i2.MatIconButton, i4$3.MatChip, i6.MatIcon, i6$2.MatMenuTrigger, i4$1.MatSort, i4$1.MatSortHeader, i5.MatTable, i5.MatHeaderCellDef, i5.MatHeaderRowDef, i5.MatColumnDef, i5.MatCellDef, i5.MatRowDef, i5.MatHeaderCell, i5.MatCell, i5.MatHeaderRow, i5.MatRow, i2$2.NgIf, i2$2.DecimalPipe]] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", 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}\" \r\n            #t=\"matMenuTrigger\" (click)=\"applyOptionsToFn(row)\"\r\n            expand=\"block\" fill=\"clear\" style=\"margin-left: auto;margin-right:0px;display:block\">\r\n          @if (rowIsInEdit(row)) {\r\n            <mat-icon color=\"primary\">\r\n              edit\r\n            </mat-icon>   \r\n\r\n          }@else {\r\n            <mat-icon >\r\n              {{\r\n                t.menuOpen  ? 'close' : 'more_horiz'\r\n              }}\r\n            \r\n            </mat-icon>\r\n          }\r\n        \r\n\r\n          </button>\r\n\r\n\r\n          <mat-chip *ngIf=\"\r\n       row['SYSTEM_KEY_IN_EDIT']\r\n            \r\n        \">\r\n            In {{ inputConfig?.readonly ? 'View' : 'Edit' }}\r\n\r\n          </mat-chip>\r\n\r\n        </div>\r\n        <div *ngIf=\"configureCols.columnsConfig && configureCols.columnsConfig?.[col]?.type !== 'removal'\"\r\n          class=\"cellClass\">\r\n          <span *ngIf=\"isNumber(row[col])\">\r\n            {{ row[col] | number }}\r\n          </span>\r\n          <span *ngIf=\"!isNumber(row[col])\"> {{ row[col] }}\r\n\r\n          </span>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n    }\r\n\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"configureCols.displayedColumnsInOrder \"></tr>\r\n    <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n      *matRowDef=\"let row; columns: configureCols.displayedColumnsInOrder\"></tr>\r\n  </table>\r\n  <div *ngIf=\"(dataSource?._filterData)?.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 items\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>", 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}}\n"] }]
+            args: [{ selector: 'lib-multiple-input-table-view', standalone: true, imports: [MatModulesModule, CommonModule, MatTableModule], template: "@defer (on viewport) {\r\n\r\n@if (configureCols.displayedColumnsInOrder.length===0) {\r\n<div style=\"\r\n      padding-left: 16px;\r\n      padding-right: 16px;\r\n      padding-top: 16px;\r\n      padding-bottom: 16px;\r\n\r\n      display: flex;\r\n      justify-content: center;\r\n      opacity: 0.6;\r\n      font-size: 13px;\r\n    \">\r\n  No columns\r\n</div>\r\n}\r\n<div class=\"table-container\">\r\n\r\n  <table mat-table [dataSource]=\"(dataSource || [])\" class=\"example-table\" matSort matSortActive=\"created\"\r\n    matSortDisableClear matSortDirection=\"desc\">\r\n    @for (col of (configureCols.displayedColumnsInOrder||[]); track col) {\r\n    <ng-container [matColumnDef]=\"col\">\r\n      <th mat-header-cell mat-sort-header *matHeaderCellDef>\r\n        <span style=\"text-align: start; line-height: normal; font-size: 13px\">\r\n          {{ configureCols.columnsConfig?.[col]?.[\"label\"] }}\r\n        </span>\r\n      </th>\r\n      <td [class.functionClass]=\"row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION']\"\r\n      \r\n        [style.background]=\"\r\n          returnBackground(row,  configureCols.columnsConfig?.[col])\r\n        \" mat-cell *matCellDef=\"let row\">\r\n        <div *ngIf=\" configureCols.columnsConfig?.[col]?.['type'] === 'removal'\" class=\"cellClass\">\r\n          <span *ngIf=\"\r\n          !!row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n          inputConfig?.multipleInputInEditId !== row['id']\">\r\n            <strong>\r\n\r\n              {{getCalculationFunction(row)}}\r\n            </strong>\r\n\r\n          </span>\r\n          <button mat-icon-button\r\n          [color]=\"t.menuOpen ? 'primary' : 'basic'\"\r\n          *ngIf=\"\r\n            !row['SYSTEM_KEY_PROPERTY_FOR_MULTIPLE_INPUTS_CALCULATION_FUNCTION'] &&\r\n            row['' ] !== 'true'\r\n               \r\n            \" \r\n            [matMenuTriggerFor]=\"rowOptions\" \r\n            [matMenuTriggerData]=\"{row:row}\" \r\n            #t=\"matMenuTrigger\" (click)=\"applyOptionsToFn(row)\"\r\n            expand=\"block\" fill=\"clear\" style=\"margin-left: auto;margin-right:0px;display:block\">\r\n          @if (rowIsInEdit(row)) {\r\n            <mat-icon color=\"primary\">\r\n              edit\r\n            </mat-icon>   \r\n\r\n          }@else {\r\n            <mat-icon >\r\n              {{\r\n                t.menuOpen  ? 'close' : 'more_horiz'\r\n              }}\r\n            \r\n            </mat-icon>\r\n          }\r\n        \r\n\r\n          </button>\r\n\r\n\r\n          <mat-chip *ngIf=\"\r\n       row['SYSTEM_KEY_IN_EDIT']\r\n            \r\n        \">\r\n            In {{ inputConfig?.readonly ? 'View' : 'Edit' }}\r\n\r\n          </mat-chip>\r\n\r\n        </div>\r\n        <div *ngIf=\"configureCols.columnsConfig && configureCols.columnsConfig?.[col]?.type !== 'removal'\"\r\n          class=\"cellClass\">\r\n          <span *ngIf=\"isNumber(row[col])\">\r\n            {{ row[col] | number }}\r\n          </span>\r\n          <span *ngIf=\"!isNumber(row[col])\"> {{ row[col] }}\r\n\r\n          </span>\r\n        </div>\r\n      </td>\r\n    </ng-container>\r\n    }\r\n\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"configureCols.displayedColumnsInOrder \"></tr>\r\n    <tr [style.border-top]=\"hasTopBorder(row) ? 'solid 2px' : ''\" mat-row\r\n      *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: [{
@@ -8974,6 +9355,8 @@ class MultipleInputTableEditComponent {
             if (control) {
                 allControls.push(control);
             }
+            else {
+            }
         });
         return allControls.some((control) => control?.invalid || !control);
     }
@@ -9065,13 +9448,15 @@ class MultipleInputTableComponent extends BaseCustomInput {
     constructor(ngControl, elementRef) {
         super(ngControl, elementRef, customInputConfig$3);
         this.editorMode = false;
+        this._tableData = [];
     }
-    ngOnInit() {
-        this.configCol();
-        this.checkItemList(this.value || []);
-        this.ngControl.valueChanges?.pipe(takeUntil(this.destroy$)).subscribe((value) => {
-            this.checkItemList(value);
-        });
+    set inputConfig(config) {
+        if (_isEqual(this._inputConfig, config))
+            return;
+        this._inputConfig = config;
+    }
+    get inputConfig() {
+        return this._inputConfig;
     }
     get empty() {
         return !this.value;
@@ -9079,14 +9464,18 @@ class MultipleInputTableComponent extends BaseCustomInput {
     get shouldLabelFloat() {
         return this.focused || !this.empty;
     }
-    checkItemList(tableValue) {
+    checkItemList() {
         try {
-            if (tableValue) {
+            if (_isEqual(this._tableData, this.value))
+                return true;
+            this._tableData = this.value || [];
+            if (this.value) {
                 const TableData = this.inputConfig
                     .groupBy
-                    ? addGroups(tableValue, this.inputConfig.groupBy)
-                    : tableValue;
+                    ? 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;
@@ -9095,30 +9484,32 @@ class MultipleInputTableComponent extends BaseCustomInput {
                     this.dataSource.data = data;
                 }
             }
+            return true;
         }
         catch (error) {
             console.error(error);
+            return false;
         }
     }
     multipleInputRemoveItem(item) {
         if (!this.value)
             return;
         this.value.splice(this.value.indexOf(item), 1);
-        this.checkItemList(this.value);
         this.applyOptionsTo = undefined;
         this.onChange(this.value);
         this.stateChanges.next();
     }
-    configCol() {
-        // this.inputConfig?.configCol();
-    }
     generateMultipleInputForm() {
         const id = this.inputConfig?.id;
         if (!id)
             return;
         this.formBuilderFunctions?.multipleInputToggleForm(id, true);
     }
-    editItem(rowId) {
+    editRow(rowId) {
+        if (!rowId) {
+            console.error('Row id not provided');
+            throw new Error('Row id not provided');
+        }
         if (!this.formBuilderFunctions || !this.inputConfig)
             return;
         this.formBuilderFunctions?.multipleInputEditRow(this.inputConfig?.id, rowId);
@@ -9204,7 +9595,7 @@ class MultipleInputTableComponent extends BaseCustomInput {
         return this.ngControl?.control?.parent;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", 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.2", type: MultipleInputTableComponent, isStandalone: true, selector: "app-multiple-input-table", inputs: { editorMode: "editorMode", inputConfig: "inputConfig", formBuilderFunctions: "formBuilderFunctions" }, providers: [{ provide: MatFormFieldControl, useExisting: MultipleInputTableComponent }], usesInheritance: true, ngImport: i0, template: "\r\n<lib-multiple-input-table-view\r\n[inputConfig]=\"inputConfig\"\r\n[dataSource]=\"dataSource\"\r\n[applyOptionsTo]=\"applyOptionsTo\"\r\n[formGroup]=\"parentFormGroup\"\r\n(onEditItem)=\"editItem($event)\"\r\n(onDeleteItem)=\"multipleInputRemoveItem(applyOptionsTo)\"\r\n(onCopy)=\"copy($event)\"\r\n(onApplyOptionsTo)=\"applyOptionsTo = $event\"\r\n></lib-multiple-input-table-view>\r\n\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-stroked-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\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.2", type: MultipleInputTableComponent, isStandalone: true, selector: "app-multiple-input-table", inputs: { editorMode: "editorMode", formGroup: "formGroup", inputConfig: "inputConfig", formBuilderFunctions: "formBuilderFunctions" }, providers: [{ provide: MatFormFieldControl, useExisting: MultipleInputTableComponent }], usesInheritance: true, ngImport: i0, template: "\r\n<lib-multiple-input-table-view\r\n*ngIf=\"checkItemList()\"\r\n[inputConfig]=\"inputConfig\"\r\n[dataSource]=\"dataSource\"\r\n[applyOptionsTo]=\"applyOptionsTo\"\r\n[formGroup]=\"parentFormGroup\"\r\n(onEditItem)=\"editRow($event)\"\r\n\r\n(onDeleteItem)=\"multipleInputRemoveItem(applyOptionsTo)\"\r\n(onCopy)=\"copy($event)\"\r\n(onApplyOptionsTo)=\"applyOptionsTo = $event\"\r\n></lib-multiple-input-table-view>\r\n@if(!!inputConfig?.formIsOpen){\r\n<lib-multiple-input-table-edit \r\n[editorMode]=\"editorMode\"\r\n(editMultipleInput)=\"editInput($event)\"\r\n(deleteInput)=\"  deleteItemInput($event)\"\r\n(addFunction)=\"addFunction($event)\"\r\n(showItemAsLabel)=\"showItemAsLabel($event)\"\r\n(onSaveMultipleInputForm)=\"saveMultipleInputForm()\"\r\n(reorderItems)=\"reorderItems($event)\"\r\n[formBuilderFunctions]=\"formBuilderFunctions\"\r\n[formGroup]=\"parentFormGroup\"\r\n[inputConfig]=\"inputConfig\"\r\n></lib-multiple-input-table-edit>\r\n\r\n}\r\n\r\n@if (\r\n  !inputConfig?.readonly &&\r\n  !inputConfig?.formIsOpen\r\n) {\r\n  <section >\r\n    <button \r\n    color=\"primary\" \r\n    style=\"    display: block;\r\n    margin-top: 8px;\r\n    width: 100%;\"  (click)=\"generateMultipleInputForm()\"  mat-flat-button>\r\n  \r\n        {{handleLabel}}\r\n          <mat-icon  matPrefix>{{\r\n            handleIcon()\r\n          }}</mat-icon>\r\n  \r\n        \r\n        </button>\r\n  </section>\r\n  \r\n}\r\n", styles: [".table-container{position:relative;max-height:400px;overflow:auto}table{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MultipleInputTableEditComponent, selector: "lib-multiple-input-table-edit", inputs: ["inputConfig", "editorMode", "formGroup", "formBuilderFunctions"], outputs: ["onSaveMultipleInputForm", "editMultipleInput", "deleteInput", "showItemAsLabel", "addFunction", "reorderItems"] }, { kind: "component", type: MultipleInputTableViewComponent, selector: "lib-multiple-input-table-view", inputs: ["inputConfig", "dataSource", "applyOptionsTo", "formGroup"], outputs: ["onEditItem", "onDeleteItem", "onCopy", "onApplyOptionsTo"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MultipleInputTableComponent, decorators: [{
             type: Component,
@@ -9213,13 +9604,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                         MatModulesModule,
                         MultipleInputTableEditComponent,
                         MultipleInputTableViewComponent,
-                    ], providers: [{ provide: MatFormFieldControl, useExisting: MultipleInputTableComponent }], template: "\r\n<lib-multiple-input-table-view\r\n[inputConfig]=\"inputConfig\"\r\n[dataSource]=\"dataSource\"\r\n[applyOptionsTo]=\"applyOptionsTo\"\r\n[formGroup]=\"parentFormGroup\"\r\n(onEditItem)=\"editItem($event)\"\r\n(onDeleteItem)=\"multipleInputRemoveItem(applyOptionsTo)\"\r\n(onCopy)=\"copy($event)\"\r\n(onApplyOptionsTo)=\"applyOptionsTo = $event\"\r\n></lib-multiple-input-table-view>\r\n\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-stroked-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\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*ngIf=\"checkItemList()\"\r\n[inputConfig]=\"inputConfig\"\r\n[dataSource]=\"dataSource\"\r\n[applyOptionsTo]=\"applyOptionsTo\"\r\n[formGroup]=\"parentFormGroup\"\r\n(onEditItem)=\"editRow($event)\"\r\n\r\n(onDeleteItem)=\"multipleInputRemoveItem(applyOptionsTo)\"\r\n(onCopy)=\"copy($event)\"\r\n(onApplyOptionsTo)=\"applyOptionsTo = $event\"\r\n></lib-multiple-input-table-view>\r\n@if(!!inputConfig?.formIsOpen){\r\n<lib-multiple-input-table-edit \r\n[editorMode]=\"editorMode\"\r\n(editMultipleInput)=\"editInput($event)\"\r\n(deleteInput)=\"  deleteItemInput($event)\"\r\n(addFunction)=\"addFunction($event)\"\r\n(showItemAsLabel)=\"showItemAsLabel($event)\"\r\n(onSaveMultipleInputForm)=\"saveMultipleInputForm()\"\r\n(reorderItems)=\"reorderItems($event)\"\r\n[formBuilderFunctions]=\"formBuilderFunctions\"\r\n[formGroup]=\"parentFormGroup\"\r\n[inputConfig]=\"inputConfig\"\r\n></lib-multiple-input-table-edit>\r\n\r\n}\r\n\r\n@if (\r\n  !inputConfig?.readonly &&\r\n  !inputConfig?.formIsOpen\r\n) {\r\n  <section >\r\n    <button \r\n    color=\"primary\" \r\n    style=\"    display: block;\r\n    margin-top: 8px;\r\n    width: 100%;\"  (click)=\"generateMultipleInputForm()\"  mat-flat-button>\r\n  \r\n        {{handleLabel}}\r\n          <mat-icon  matPrefix>{{\r\n            handleIcon()\r\n          }}</mat-icon>\r\n  \r\n        \r\n        </button>\r\n  </section>\r\n  \r\n}\r\n", styles: [".table-container{position:relative;max-height:400px;overflow:auto}table{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
                 }] }, { type: i0.ElementRef }], propDecorators: { editorMode: [{
                 type: Input
+            }], formGroup: [{
+                type: Input
             }], inputConfig: [{
                 type: Input
             }], formBuilderFunctions: [{
@@ -9232,23 +9625,19 @@ function addGroups(tableValue, groupBy) {
 class MultipleInputInputElementComponent {
     constructor() {
         this.editorMode = false;
-        this.valueChange = new EventEmitter();
-    }
-    changed($event) {
-        this.valueChange.emit($event);
     }
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MultipleInputInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MultipleInputInputElementComponent, isStandalone: true, selector: "lib-multiple-input-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", editorMode: "editorMode", formBuilderFunctions: "formBuilderFunctions" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n  <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\"\r\n    floatLabel=\"always\" *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 \r\n    [editorMode]=\"editorMode\"\r\n    [formGroup]=\"formGroup\"\r\n     [formBuilderFunctions]=\"formBuilderFunctions\"\r\n      *ngIf=\"inputConfig.id\" [formControlName]=\"inputConfig.id\"\r\n      [inputConfig]=\"inputConfig\"></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.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", "inputConfig", "formBuilderFunctions"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MultipleInputInputElementComponent, isStandalone: true, selector: "lib-multiple-input-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", editorMode: "editorMode", formBuilderFunctions: "formBuilderFunctions" }, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\r\n  <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" floatLabel=\"always\"\r\n    *ngIf=\"this.inputConfig as inputConfig\">\r\n    <mat-label>\r\n      {{this.inputConfig.label }}\r\n      <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n    </mat-label>\r\n\r\n    <app-multiple-input-table [editorMode]=\"editorMode\" [required]=\"this.inputConfig.required\" [formGroup]=\"formGroup\"\r\n      [formBuilderFunctions]=\"formBuilderFunctions\" *ngIf=\"inputConfig.id\" [formControlName]=\"inputConfig.id\"\r\n      [inputConfig]=\"inputConfig\">\r\n    </app-multiple-input-table>\r\n\r\n\r\n    @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n    <mat-hint class=\"inputHint\">\r\n      {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n    </mat-hint>\r\n    }\r\n\r\n    @if (!!errorMessage) {\r\n    <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n    }\r\n    <!-- Prefix Icon -->\r\n    <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n\r\n    <!-- Suffix Icon or Password Visibility Toggle -->\r\n    <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n      <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n        }}</mat-icon>\r\n      <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"inputConfig.togglePasswordVisibility()\"\r\n        mat-icon-button matSuffix>\r\n        <mat-icon>{{ inputConfig.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n      </button> -->\r\n    </ng-container>\r\n\r\n    <!-- Prefix & Suffix Text -->\r\n    <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n    <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n      }}</span>\r\n\r\n    <!-- Character Count Hint -->\r\n    <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n      {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n      }}\r\n    </mat-hint>\r\n\r\n  </mat-form-field>\r\n</form>", styles: ["mat-form-field{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: TFormInputStatusComponent, selector: "lib-t-form-input-status", inputs: ["inputConfig"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MultipleInputTableComponent, selector: "app-multiple-input-table", inputs: ["editorMode", "formGroup", "inputConfig", "formBuilderFunctions"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", 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\"\r\n    floatLabel=\"always\" *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 \r\n    [editorMode]=\"editorMode\"\r\n    [formGroup]=\"formGroup\"\r\n     [formBuilderFunctions]=\"formBuilderFunctions\"\r\n      *ngIf=\"inputConfig.id\" [formControlName]=\"inputConfig.id\"\r\n      [inputConfig]=\"inputConfig\"></app-multiple-input-table>\r\n\r\n\r\n    @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n    <mat-hint  class=\"inputHint\">\r\n      {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n    </mat-hint>\r\n    } \r\n\r\n    @if (!!errorMessage) {\r\n    <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n    }\r\n    <!-- Prefix Icon -->\r\n    <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n\r\n    <!-- Suffix Icon or Password Visibility Toggle -->\r\n    <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n      <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n        }}</mat-icon>\r\n      <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"inputConfig.togglePasswordVisibility()\"\r\n        mat-icon-button matSuffix>\r\n        <mat-icon>{{ inputConfig.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n      </button> -->\r\n    </ng-container>\r\n\r\n    <!-- Prefix & Suffix Text -->\r\n    <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n    <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n      }}</span>\r\n\r\n    <!-- Character Count Hint -->\r\n    <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n      {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n      }}\r\n    </mat-hint>\r\n\r\n  </mat-form-field>\r\n</form>", styles: ["mat-form-field{width:100%!important}\n"] }]
+                        ReactiveFormsModule, MultipleInputTableComponent], template: "<form [formGroup]=\"formGroup\">\r\n  <mat-form-field [appearance]=\"this.inputConfig.appearance ||'fill' \" subscriptSizing=\"dynamic\" floatLabel=\"always\"\r\n    *ngIf=\"this.inputConfig as inputConfig\">\r\n    <mat-label>\r\n      {{this.inputConfig.label }}\r\n      <lib-t-form-input-status [inputConfig]=\"this.inputConfig\"></lib-t-form-input-status>\r\n    </mat-label>\r\n\r\n    <app-multiple-input-table [editorMode]=\"editorMode\" [required]=\"this.inputConfig.required\" [formGroup]=\"formGroup\"\r\n      [formBuilderFunctions]=\"formBuilderFunctions\" *ngIf=\"inputConfig.id\" [formControlName]=\"inputConfig.id\"\r\n      [inputConfig]=\"inputConfig\">\r\n    </app-multiple-input-table>\r\n\r\n\r\n    @if(inputConfig.hintLabel || inputConfig.temporaryHint ){\r\n    <mat-hint class=\"inputHint\">\r\n      {{ inputConfig.temporaryHint || inputConfig.hintLabel}}\r\n    </mat-hint>\r\n    }\r\n\r\n    @if (!!errorMessage) {\r\n    <mat-error class=\"oneLineTextEllipsis\" matTooltipClass=\"errorToolTip\">{{errorMessage}}</mat-error>\r\n    }\r\n    <!-- Prefix Icon -->\r\n    <mat-icon *ngIf=\"inputConfig.prefixIcon\" matPrefix>{{ inputConfig.prefixIcon }}</mat-icon>\r\n\r\n    <!-- Suffix Icon or Password Visibility Toggle -->\r\n    <ng-container *ngIf=\"inputConfig.suffixIcon\">\r\n      <mat-icon *ngIf=\"inputConfig.id !== 'password'\" matSuffix>{{ inputConfig.suffixIcon\r\n        }}</mat-icon>\r\n      <!-- <button *ngIf=\"inputConfig.id === 'password'\" (click)=\"inputConfig.togglePasswordVisibility()\"\r\n        mat-icon-button matSuffix>\r\n        <mat-icon>{{ inputConfig.showPassword ? 'remove_red_eye' : 'eye_off' }}</mat-icon>\r\n      </button> -->\r\n    </ng-container>\r\n\r\n    <!-- Prefix & Suffix Text -->\r\n    <span *ngIf=\"inputConfig.prefixText\" matPrefix style=\"top: 0\">{{ inputConfig.prefixText }}</span>\r\n    <span *ngIf=\"inputConfig.suffixText\" matSuffix style=\"padding-left: 5px\">{{ inputConfig.suffixText\r\n      }}</span>\r\n\r\n    <!-- Character Count Hint -->\r\n    <mat-hint *ngIf=\"inputConfig.maxLength && formGroup\" align=\"end\">\r\n      {{ (formGroup.controls[inputConfig.id]?.value?.length || 0) + '/' + inputConfig.maxLength\r\n      }}\r\n    </mat-hint>\r\n\r\n  </mat-form-field>\r\n</form>", styles: ["mat-form-field{width:100%!important}\n"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
@@ -9257,8 +9646,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                 type: Input
             }], formBuilderFunctions: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
 const DEFAULT_OPTIONS = {
@@ -9347,20 +9734,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
 class GeoLocationComponent {
     constructor() {
         this.editorMode = false;
-        this.valueChange = new EventEmitter();
-    }
-    changed($event) {
-        this.valueChange.emit($event);
     }
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: GeoLocationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: GeoLocationComponent, isStandalone: true, selector: "lib-geo-location", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", editorMode: "editorMode", formBuilderFunctions: "formBuilderFunctions" }, outputs: { valueChange: "valueChange" }, 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    ></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.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.2", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", 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    ></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\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"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
@@ -9369,8 +9752,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                 type: Input
             }], formBuilderFunctions: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
 // Image capture
@@ -9500,28 +9881,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class ImageCaptureInputElementComponent {
-    constructor() {
-        this.valueChange = new EventEmitter();
-    }
-    changed($event) {
-        this.valueChange.emit($event);
-    }
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ImageCaptureInputElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: ImageCaptureInputElementComponent, isStandalone: true, selector: "lib-image-capture-input-element", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { valueChange: "valueChange" }, 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  \r\n  [inputConfig]=\"inputConfig\"\r\n  [formControlName]=\"inputConfig.id\"\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.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.2", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: ImageCaptureInputElementComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-image-capture-input-element', standalone: true, imports: [CommonModule, MatModulesModule,
-                        TFormInputStatusComponent, CameraCaptureComponent, ReactiveFormsModule], 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  \r\n  [inputConfig]=\"inputConfig\"\r\n  [formControlName]=\"inputConfig.id\"\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"] }]
+                        TFormInputStatusComponent, CameraCaptureComponent, ReactiveFormsModule], 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"] }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
 const customInputConfig = {
@@ -9641,34 +10014,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
             }] } });
 
 class SelectTableInputComponent {
-    constructor() {
-        this.valueChange = new EventEmitter();
-    }
-    changed($event) {
-        this.valueChange.emit($event);
-    }
     get errorMessage() {
         return getInputErrorMessage(this.inputConfig, this.formGroup);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SelectTableInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: SelectTableInputComponent, isStandalone: true, selector: "lib-select-table-input", inputs: { inputConfig: "inputConfig", formGroup: "formGroup" }, outputs: { valueChange: "valueChange" }, 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    \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.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: SelectTableInputComponent, 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    \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-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  " }]
         }], propDecorators: { inputConfig: [{
                 type: Input
             }], formGroup: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
 class TFormInputComponent {
     constructor(props) {
         this.props = props;
         this.editorMode = false;
-        this.valueChange = new EventEmitter();
         this.elementTypes = ElementTypes;
         // Apply props from portal injection if available
         if (this.props) {
@@ -9690,14 +10054,11 @@ class TFormInputComponent {
         // Handle standard form control case
         return !!this.formGroup.controls[id];
     }
-    changed(event) {
-        this.valueChange.emit(event);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", 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.2", type: TFormInputComponent, isStandalone: true, selector: "lib-t-form-input", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", editorMode: "editorMode", formBuilderFunctions: "formBuilderFunctions" }, outputs: { valueChange: "valueChange" }, 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     \r\n    (valueChange)=\"changed($event)\"\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     \r\n    [options]=\"[]\"\r\n    (valueChange)=\"changed($event)\">\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    \r\n    (valueChange)=\"changed($event)\">\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    \r\n    (valueChange)=\"changed($event)\">\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    \r\n    (valueChange)=\"changed($event)\">\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     \r\n    (valueChange)=\"changed($event)\">\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    (valueChange)=\"changed($event)\">\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       (valueChange)=\"changed($event)\">\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       (valueChange)=\"changed($event)\"></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    (valueChange)=\"changed($event)\">\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    (valueChange)=\"changed($event)\">\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    (valueChange)=\"changed($event)\"\r\n    [formBuilderFunctions]=\"formBuilderFunctions\"\r\n    \r\n    >\r\n\r\n    </lib-multiple-input-input-element>\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      (valueChange)=\"changed($event)\">\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      (valueChange)=\"changed($event)\">\r\n\r\n      </lib-select-table-input>\r\n    }\r\n    @default {\r\n      <lib-basic-input-input-element \r\n      [inputConfig]=\"inputConfig\" \r\n      [formGroup]=\"formGroup\"\r\n       \r\n      (valueChange)=\"changed($event)\">\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"], outputs: ["valueChange"] }, { 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"], outputs: ["valueChange"] }, { kind: "component", type: AutoCompleteInputElementComponent, selector: "lib-auto-complete-input-element", inputs: ["inputConfig", "formGroup", "options"], outputs: ["valueChange"] }, { kind: "component", type: ToggleInputElementComponent, selector: "lib-toggle-input-element", inputs: ["inputConfig", "formGroup"], outputs: ["valueChange"] }, { kind: "component", type: SelectInputElementComponent, selector: "lib-select-input-element", inputs: ["inputConfig", "formGroup"], outputs: ["valueChange"] }, { kind: "component", type: TextareaInputElementComponent, selector: "lib-textarea-input-element", inputs: ["inputConfig", "formGroup"], outputs: ["valueChange"] }, { kind: "component", type: DateRangePickerInputElementComponent, selector: "lib-date-range-picker-input-element", inputs: ["inputConfig", "formGroup"], outputs: ["valueChange"] }, { kind: "component", type: DatePickerInputElementComponent, selector: "lib-date-picker-input-element", inputs: ["inputConfig", "formGroup"], outputs: ["valueChange"] }, { kind: "component", type: FileUploadInputElementComponent, selector: "lib-file-upload-input-element", inputs: ["inputConfig", "formGroup"], outputs: ["valueChange"] }, { kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: TFormInputComponent, isStandalone: true, selector: "lib-t-form-input", inputs: { inputConfig: "inputConfig", formGroup: "formGroup", editorMode: "editorMode", formBuilderFunctions: "formBuilderFunctions" }, ngImport: i0, template: "\r\n@if(inputConfig ){\r\n\r\n@if(inputConfig.element === elementTypes.SectionTitle){\r\n<lib-section-title  [inputConfig]=\"inputConfig\"></lib-section-title>\r\n}\r\n\r\n@if(inputConfig.element !== elementTypes.SectionTitle && !!formGroup && !!hasFormControlInstance){\r\n    @switch (inputConfig.element) {\r\n    @case (elementTypes.Location) {\r\n    <lib-geo-location\r\n    [editorMode]=\"editorMode\"\r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n    [formBuilderFunctions]=\"formBuilderFunctions\">\r\n    </lib-geo-location>\r\n    }\r\n    <!-- @case (elementTypes.QrCodeScanner) {\r\n    <lib-qr-code-scanner-element [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" \r\n    \r\n    (valueChange)=\"changed($event)\">\r\n    </lib-qr-code-scanner-element>\r\n    } -->\r\n    @case (elementTypes.AutoCompleteInput) {\r\n    <lib-auto-complete-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n    [options]=\"[]\">\r\n    </lib-auto-complete-input-element>\r\n    }\r\n    @case (elementTypes.Toggle) {\r\n    <lib-toggle-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" >\r\n    </lib-toggle-input-element>\r\n\r\n    \r\n    }\r\n    @case (elementTypes.Select) {\r\n    <lib-select-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" >\r\n    </lib-select-input-element>\r\n    }\r\n    @case (elementTypes.Textarea) {\r\n    <lib-textarea-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\">\r\n    </lib-textarea-input-element>\r\n    }\r\n    @case (elementTypes.DateRangePicker) {\r\n    <lib-date-range-picker-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\">\r\n    </lib-date-range-picker-input-element>\r\n    }\r\n    @case (elementTypes.DatePicker){\r\n    <lib-date-picker-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n     >\r\n    </lib-date-picker-input-element>\r\n    }\r\n    @case (elementTypes.FileUpload) {\r\n    <lib-file-upload-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\">\r\n    </lib-file-upload-input-element>\r\n\r\n    }\r\n    @case (elementTypes.ImageCapture) {\r\n    <lib-image-capture-input-element [inputConfig]=\"inputConfig\" [formGroup]=\"formGroup\"\r\n    ></lib-image-capture-input-element>\r\n\r\n    }\r\n    @case (elementTypes.Editor) {\r\n    <lib-editor-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" \r\n    >\r\n  </lib-editor-input-element>\r\n    }\r\n    @case (elementTypes.Signature) {\r\n    <lib-signature-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" \r\n    >\r\n    </lib-signature-input-element>\r\n    }\r\n  \r\n    @case (elementTypes.MultipleInput) {\r\n    <lib-multiple-input-input-element\r\n    [editorMode]=\"editorMode\"\r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n     \r\n    [formBuilderFunctions]=\"formBuilderFunctions\"\r\n    \r\n    >\r\n\r\n    </lib-multiple-input-input-element>\r\n\r\n    }\r\n    @case (elementTypes.MscoaSelection) {\r\n      <lib-mscoa-form-input\r\n      [inputConfig]=\"inputConfig\"\r\n      [formGroup]=\"formGroup\"\r\n      [editorMode]=\"editorMode\"\r\n      [formBuilderFunctions]=\"formBuilderFunctions\">\r\n      </lib-mscoa-form-input>\r\n\r\n    }\r\n    @case (elementTypes.TableSelection) {\r\n      <lib-select-table-input [inputConfig]=\"inputConfig\"\r\n      [formGroup]=\"formGroup\">\r\n\r\n      </lib-select-table-input>\r\n    }\r\n    @default {\r\n      <lib-basic-input-input-element \r\n      [inputConfig]=\"inputConfig\" \r\n      [formGroup]=\"formGroup\">\r\n      </lib-basic-input-input-element>\r\n      }\r\n    }\r\n}\r\n} \r\n\r\n\r\n<!-- \r\n<button mat-button (click)=\"externalError()\">error</button>\r\n<button mat-button (click)=\"externalErrorClear()\"> clear error</button>-->\r\n", styles: ["mat-form-field{width:100%!important}.description{font-size:.875rem;text-align:start;line-height:1.6;max-width:493px}.sectionHeading{text-align:start;font-weight:500;margin-bottom:2px;line-height:1.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MscoaFormInputComponent, selector: "lib-mscoa-form-input", inputs: ["inputConfig", "editorMode", "formGroup", "formBuilderFunctions"] }, { kind: "ngmodule", type: MatModulesModule }, { kind: "component", type: SectionTitleComponent, selector: "lib-section-title", inputs: ["inputConfig"] }, { kind: "component", type: GeoLocationComponent, selector: "lib-geo-location", inputs: ["inputConfig", "formGroup", "editorMode", "formBuilderFunctions"] }, { kind: "component", type: AutoCompleteInputElementComponent, selector: "lib-auto-complete-input-element", inputs: ["inputConfig", "formGroup", "options"] }, { kind: "component", type: ToggleInputElementComponent, selector: "lib-toggle-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: SelectInputElementComponent, selector: "lib-select-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: TextareaInputElementComponent, selector: "lib-textarea-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: DateRangePickerInputElementComponent, selector: "lib-date-range-picker-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: DatePickerInputElementComponent, selector: "lib-date-picker-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: FileUploadInputElementComponent, selector: "lib-file-upload-input-element", inputs: ["inputConfig", "formGroup"] }, { kind: "component", type: 
                 //REVIEW -  check circular dependency error for ImageCaptureInputElementComponent
                 // ImageCaptureInputElementComponent,
-                EditorInputElementComponent, selector: "lib-editor-input-element", inputs: ["inputConfig", "formGroup"], outputs: ["valueChange"] }, { kind: "component", type: SignatureInputElementComponent, selector: "lib-signature-input-element", inputs: ["inputConfig", "formGroup"], outputs: ["valueChange"] }, { kind: "component", type: MultipleInputInputElementComponent, selector: "lib-multiple-input-input-element", inputs: ["inputConfig", "formGroup", "editorMode", "formBuilderFunctions"], outputs: ["valueChange"] }, { kind: "component", type: BasicInputInputElementComponent, selector: "lib-basic-input-input-element", inputs: ["inputConfig", "formGroup"], outputs: ["valueChange"] }, { kind: "component", type: ImageCaptureInputElementComponent, selector: "lib-image-capture-input-element", inputs: ["inputConfig", "formGroup"], outputs: ["valueChange"] }, { kind: "component", type: SelectTableInputComponent, selector: "lib-select-table-input", inputs: ["inputConfig", "formGroup"], outputs: ["valueChange"] }] }); }
+                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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: TFormInputComponent, decorators: [{
             type: Component,
@@ -9723,7 +10084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                         BasicInputInputElementComponent,
                         ImageCaptureInputElementComponent,
                         SelectTableInputComponent
-                    ], template: "\r\n@if(inputConfig ){\r\n\r\n@if(inputConfig.element === elementTypes.SectionTitle){\r\n<lib-section-title  [inputConfig]=\"inputConfig\"></lib-section-title>\r\n}\r\n\r\n@if(inputConfig.element !== elementTypes.SectionTitle && !!formGroup && !!hasFormControlInstance){\r\n    @switch (inputConfig.element) {\r\n    @case (elementTypes.Location) {\r\n    <lib-geo-location\r\n    [editorMode]=\"editorMode\"\r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n     \r\n    (valueChange)=\"changed($event)\"\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     \r\n    [options]=\"[]\"\r\n    (valueChange)=\"changed($event)\">\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    \r\n    (valueChange)=\"changed($event)\">\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    \r\n    (valueChange)=\"changed($event)\">\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    \r\n    (valueChange)=\"changed($event)\">\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     \r\n    (valueChange)=\"changed($event)\">\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    (valueChange)=\"changed($event)\">\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       (valueChange)=\"changed($event)\">\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       (valueChange)=\"changed($event)\"></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    (valueChange)=\"changed($event)\">\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    (valueChange)=\"changed($event)\">\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    (valueChange)=\"changed($event)\"\r\n    [formBuilderFunctions]=\"formBuilderFunctions\"\r\n    \r\n    >\r\n\r\n    </lib-multiple-input-input-element>\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      (valueChange)=\"changed($event)\">\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      (valueChange)=\"changed($event)\">\r\n\r\n      </lib-select-table-input>\r\n    }\r\n    @default {\r\n      <lib-basic-input-input-element \r\n      [inputConfig]=\"inputConfig\" \r\n      [formGroup]=\"formGroup\"\r\n       \r\n      (valueChange)=\"changed($event)\">\r\n      </lib-basic-input-input-element>\r\n      }\r\n    }\r\n}\r\n} \r\n\r\n\r\n<!-- \r\n<button mat-button (click)=\"externalError()\">error</button>\r\n<button mat-button (click)=\"externalErrorClear()\"> clear error</button>-->\r\n", styles: ["mat-form-field{width:100%!important}.description{font-size:.875rem;text-align:start;line-height:1.6;max-width:493px}.sectionHeading{text-align:start;font-weight:500;margin-bottom:2px;line-height:1.5}\n"] }]
+                    ], template: "\r\n@if(inputConfig ){\r\n\r\n@if(inputConfig.element === elementTypes.SectionTitle){\r\n<lib-section-title  [inputConfig]=\"inputConfig\"></lib-section-title>\r\n}\r\n\r\n@if(inputConfig.element !== elementTypes.SectionTitle && !!formGroup && !!hasFormControlInstance){\r\n    @switch (inputConfig.element) {\r\n    @case (elementTypes.Location) {\r\n    <lib-geo-location\r\n    [editorMode]=\"editorMode\"\r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n    [formBuilderFunctions]=\"formBuilderFunctions\">\r\n    </lib-geo-location>\r\n    }\r\n    <!-- @case (elementTypes.QrCodeScanner) {\r\n    <lib-qr-code-scanner-element [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" \r\n    \r\n    (valueChange)=\"changed($event)\">\r\n    </lib-qr-code-scanner-element>\r\n    } -->\r\n    @case (elementTypes.AutoCompleteInput) {\r\n    <lib-auto-complete-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n    [options]=\"[]\">\r\n    </lib-auto-complete-input-element>\r\n    }\r\n    @case (elementTypes.Toggle) {\r\n    <lib-toggle-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" >\r\n    </lib-toggle-input-element>\r\n\r\n    \r\n    }\r\n    @case (elementTypes.Select) {\r\n    <lib-select-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" >\r\n    </lib-select-input-element>\r\n    }\r\n    @case (elementTypes.Textarea) {\r\n    <lib-textarea-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\">\r\n    </lib-textarea-input-element>\r\n    }\r\n    @case (elementTypes.DateRangePicker) {\r\n    <lib-date-range-picker-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\">\r\n    </lib-date-range-picker-input-element>\r\n    }\r\n    @case (elementTypes.DatePicker){\r\n    <lib-date-picker-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n     >\r\n    </lib-date-picker-input-element>\r\n    }\r\n    @case (elementTypes.FileUpload) {\r\n    <lib-file-upload-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\">\r\n    </lib-file-upload-input-element>\r\n\r\n    }\r\n    @case (elementTypes.ImageCapture) {\r\n    <lib-image-capture-input-element [inputConfig]=\"inputConfig\" [formGroup]=\"formGroup\"\r\n    ></lib-image-capture-input-element>\r\n\r\n    }\r\n    @case (elementTypes.Editor) {\r\n    <lib-editor-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" \r\n    >\r\n  </lib-editor-input-element>\r\n    }\r\n    @case (elementTypes.Signature) {\r\n    <lib-signature-input-element \r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\" \r\n    >\r\n    </lib-signature-input-element>\r\n    }\r\n  \r\n    @case (elementTypes.MultipleInput) {\r\n    <lib-multiple-input-input-element\r\n    [editorMode]=\"editorMode\"\r\n    [inputConfig]=\"inputConfig\" \r\n    [formGroup]=\"formGroup\"\r\n     \r\n    [formBuilderFunctions]=\"formBuilderFunctions\"\r\n    \r\n    >\r\n\r\n    </lib-multiple-input-input-element>\r\n\r\n    }\r\n    @case (elementTypes.MscoaSelection) {\r\n      <lib-mscoa-form-input\r\n      [inputConfig]=\"inputConfig\"\r\n      [formGroup]=\"formGroup\"\r\n      [editorMode]=\"editorMode\"\r\n      [formBuilderFunctions]=\"formBuilderFunctions\">\r\n      </lib-mscoa-form-input>\r\n\r\n    }\r\n    @case (elementTypes.TableSelection) {\r\n      <lib-select-table-input [inputConfig]=\"inputConfig\"\r\n      [formGroup]=\"formGroup\">\r\n\r\n      </lib-select-table-input>\r\n    }\r\n    @default {\r\n      <lib-basic-input-input-element \r\n      [inputConfig]=\"inputConfig\" \r\n      [formGroup]=\"formGroup\">\r\n      </lib-basic-input-input-element>\r\n      }\r\n    }\r\n}\r\n} \r\n\r\n\r\n<!-- \r\n<button mat-button (click)=\"externalError()\">error</button>\r\n<button mat-button (click)=\"externalErrorClear()\"> clear error</button>-->\r\n", styles: ["mat-form-field{width:100%!important}.description{font-size:.875rem;text-align:start;line-height:1.6;max-width:493px}.sectionHeading{text-align:start;font-weight:500;margin-bottom:2px;line-height:1.5}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -9737,8 +10098,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImpor
                 type: Input
             }], formBuilderFunctions: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
             }] } });
 
 var tFormInput_component = /*#__PURE__*/Object.freeze({
@@ -9776,7 +10135,7 @@ class UserFormStepperComponent extends FormTowerControllerService {
                 this.loading = false;
                 if (!form?._id)
                     return;
-                // this.initialize(TEST_FORM.form as any);
+                //  this.initialize(TEST_FORM.form as any);
                 this.initialize(form?.form);
             },
             error: (error) => {
@@ -9858,7 +10217,7 @@ class UserFormStepperComponent extends FormTowerControllerService {
         this.submitForm(this.passParamsOnSubmit);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: UserFormStepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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 \r\n    [stepControl]=\"step.sectionForm\" [completed]=\"step.sectionIsSeen && !step.sectionIsInvalid\"\r\n    [editable]=\"isEditable\" \r\n    [errorMessage]=\"step.sectionFormErrorMessage||''\" \r\n    [state]=\"getStepState(step,$index)\"\r\n    [hasError]=\"!step.sectionForm.valid && !!step.sectionForm.touched\"\r\n    >\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\" \r\n          (valueChange)=\"updateValue(col.id,$event)\"\r\n          [editorMode]=\"false\" \r\n          [formBuilderFunctions]=\"formBuilderFunctions\"\r\n            [inputConfig]=\"col\" [formGroup]=\"step.sectionForm\" [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  <!-- 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\" \r\n  (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}\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$3.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$3.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.2", 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$3.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$3.TourAnchorMatMenuDirective, i1$2.NgControlStatusGroup, i1$2.FormGroupDirective], () => [i2.MatButton, i7.MatProgressSpinner, i9.MatToolbar]] }); }
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.2", ngImport: i0, type: UserFormStepperComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return tFormInput_component; }).then(m => m.TFormInputComponent)], resolveMetadata: TFormInputComponent => ({ decorators: [{
                 type: Component,
@@ -9868,7 +10227,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.2", 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 \r\n    [stepControl]=\"step.sectionForm\" [completed]=\"step.sectionIsSeen && !step.sectionIsInvalid\"\r\n    [editable]=\"isEditable\" \r\n    [errorMessage]=\"step.sectionFormErrorMessage||''\" \r\n    [state]=\"getStepState(step,$index)\"\r\n    [hasError]=\"!step.sectionForm.valid && !!step.sectionForm.touched\"\r\n    >\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\" \r\n          (valueChange)=\"updateValue(col.id,$event)\"\r\n          [editorMode]=\"false\" \r\n          [formBuilderFunctions]=\"formBuilderFunctions\"\r\n            [inputConfig]=\"col\" [formGroup]=\"step.sectionForm\" [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  <!-- 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\" \r\n  (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}\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 4px 4px}.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.
@@ -9991,4 +10350,4 @@ console.debug = () => { };
  */
 
 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, SyncEditorComponent as S, TDynamicDataEditComponent as T, UTILS_OBJECT_TOKEN as U, WorkflowBuilderComponent as W, _isEqual as _, assignDeepPropertyToObject as a, TDynamicDataViewComponent as b, FormTowerControllerService as c, getSubmissionStatusFn as d, TreeComponent as e, NgxTFormsService as f, getAvatar as g, NgxTFormsComponent as h, initFormConfigToV2 as i, formGenerator as j, FORM_ACTIONS_TOKEN as k, FORM_CONFIG_TOKEN as l, FORM_SLIDES_TOKEN as m, FORM_INPUTS_TOKEN as n, MULTIPLE_FORM_INPUT_TOKEN as o, provideNgxTForms as p, MSCOA_TREE_PROVIDER as q, FormsComponent as r, FormBuilderComponent as s, testAgainstItem as t, MscoaFormInputComponent as u, UserFormStepperComponent as v, TFormInputComponent as w, DialogTemplateComponent as x, SignatureInputElementComponent as y, returnDeepProperty as z };
-//# sourceMappingURL=ngx-t-forms-ngx-t-forms-1Roar4qK.mjs.map
+//# sourceMappingURL=ngx-t-forms-ngx-t-forms-C6wZyKbR.mjs.map