@c10t/nice-component-library 0.0.21 → 0.0.22

package/fesm2022/c10t-nice-component-library.mjs

@@ -3,20 +3,20 @@ import { FormGroup, FormArray, FormControl, Validators, NgControl, NG_VALUE_ACCE
 import * as i1$3 from '@angular/common/http';
 import { HttpParams, HttpHeaders, HttpResponse, HttpResponseBase } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { InjectionToken, Self, Optional, Inject, Component, Injectable, Directive, EventEmitter, Output, Input, Host, Pipe, HostListener, forwardRef, ViewChild, HostBinding, ViewEncapsulation, NgModule, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { InjectionToken, Self, Optional, Inject, Component, Injectable, Directive, EventEmitter, Output, Input, Host, Pipe, HostListener, forwardRef, ViewChild, ViewChildren, HostBinding, ViewEncapsulation, NgModule, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { formatNumber, CommonModule } from '@angular/common';
 import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i6 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4 from '@angular/material/input';
+import * as i8 from '@angular/material/input';
 import { MAT_INPUT_VALUE_ACCESSOR, MatInputModule } from '@angular/material/input';
-import * as i8 from '@angular/flex-layout/flex';
+import * as i8$1 from '@angular/flex-layout/flex';
 import * as i3$1 from 'ngx-toastr';
 import { BehaviorSubject, Subject, of, forkJoin, debounceTime, distinctUntilChanged, filter, tap, switchMap, throwError } from 'rxjs';
 import * as i5 from '@angular/material/table';
@@ -27,20 +27,20 @@ import * as i2$1 from 'ngx-filesaver';
 import { catchError, map, finalize } from 'rxjs/operators';
 import * as i1$5 from '@angular/material/paginator';
 import { MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
-import * as i4$1 from '@angular/material/checkbox';
+import * as i4 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i7 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i8$1 from '@angular/material/tooltip';
+import * as i8$2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i9 from '@angular/flex-layout/extended';
 import * as i7$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i2$2 from '@angular/platform-browser';
-import * as i5$1 from '@angular/cdk/text-field';
-import * as i4$2 from '@angular/material/core';
+import * as i7$2 from '@angular/cdk/text-field';
+import * as i4$1 from '@angular/material/core';
 import { NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS, MatRippleModule, MatCommonModule } from '@angular/material/core';
-import * as i5$2 from '@angular/material/datepicker';
+import * as i5$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i10 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
@@ -57,10 +57,10 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { NestedTreeControl, FlatTreeControl, CdkTreeModule, CdkTree, CdkTreeNode } from '@angular/cdk/tree';
 import * as i6$1 from '@angular/material/tree';
 import { MatTreeNestedDataSource, MatTreeFlattener, MatTreeFlatDataSource, MatTreeModule } from '@angular/material/tree';
-import * as i4$3 from '@angular/material/radio';
+import * as i4$2 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import * as i6$2 from '@angular/material/divider';
-import * as i4$4 from 'ngx-quill';
+import * as i4$3 from 'ngx-quill';
 import { QuillModule } from 'ngx-quill';
 import * as i1$6 from 'jsog-typescript';
 import { OverlayModule } from '@angular/cdk/overlay';
@@ -143,6 +143,7 @@ var ColumnTypeEnum;
 (function (ColumnTypeEnum) {
     ColumnTypeEnum["VIEW"] = "VIEW";
     ColumnTypeEnum["INPUT_COUNTER"] = "INPUT_COUNTER";
+    ColumnTypeEnum["INPUT_CURRENCY"] = "INPUT_CURRENCY";
     ColumnTypeEnum["DATE_PICKER"] = "DATE_PICKER";
     ColumnTypeEnum["MULTI_SELECT_AUTOCOMPLETE"] = "MULTI_SELECT_AUTOCOMPLETE";
     ColumnTypeEnum["CHECKBOX"] = "CHECKBOX";
@@ -680,7 +681,7 @@ class CvaCustomDialogComponent {
       </button>
     </div>
 
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.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: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaCustomDialogComponent, decorators: [{
             type: Component,
@@ -1577,7 +1578,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
 
 class ValidatorService {
     static invalid(control) {
-        return !!control && control.dirty ? control.invalid : false;
+        if (!control || !control.dirty) {
+            return false;
+        }
+        return control.invalid || !!control.errors;
     }
     static getErrorMessage(control, errorMessages) {
         if (!control) {
@@ -1653,13 +1657,13 @@ class ValidatorService {
         if (conditions.required) {
             validationFns.push(Validators.required);
         }
-        if (conditions.min != undefined && conditions.min != null) {
+        if (conditions.min != undefined) {
             const validationMin = (control) => {
                 return ValidatorService.customMinValueNsCounterInput(control.value, ValidatorService.getMinMaxDynamic(conditions.min));
             };
             validationFns.push(validationMin);
         }
-        if (conditions.max != undefined && conditions.max != null) {
+        if (conditions.max != undefined) {
             const validationMax = (control) => {
                 return ValidatorService.customMaxValueNsCounterInput(control.value, ValidatorService.getMinMaxDynamic(conditions.max));
             };
@@ -1672,12 +1676,6 @@ class ValidatorService {
         if (conditions.required) {
             validationFns.push(Validators.required);
         }
-        // if (conditions.min) {
-        //     validationFns.push(new NsValidator({minDate: conditions.min}).customMinDateValidator());
-        // }
-        // if (conditions.max) {
-        //     validationFns.push(new NsValidator({maxDate: conditions.max}).customMaxDateValidator());
-        // }
         return validationFns;
     }
     static getRequiredDynamic(isRequired) {
@@ -1685,8 +1683,6 @@ class ValidatorService {
     }
     static generateNsDateRangePickerValidators(conditions) {
         const validationFns = [];
-        // if (NsValidator.getRequiredDynamic(conditions.requiredFromDate)
-        //     || NsValidator.getRequiredDynamic(conditions.requiredToDate)) {
         const validation = (control) => {
             const range = control.value;
             if (!range?.fromDate && ValidatorService.getRequiredDynamic(conditions.requiredFromDate)) {
@@ -1698,12 +1694,8 @@ class ValidatorService {
             return null;
         };
         validationFns.push(validation);
-        // }
         return validationFns;
     }
-    // customMinDateValidator(): ValidatorFn {
-    //     return this.customMinDateValidatorControl;
-    // }
     static customMinDateValidatorControl(value, minDate) {
         if (!minDate || !value) {
             return null;
@@ -1714,9 +1706,6 @@ class ValidatorService {
         }
         return null;
     }
-    // customMaxDateValidator(): ValidatorFn {
-    //     return this.customMaxDateValidatorControl;
-    // }
     static customMaxDateValidatorControl(value, maxDate) {
         if (!maxDate || !value) {
             return null;
@@ -1746,96 +1735,113 @@ class ValidatorService {
         return null;
     }
     static generateNsSmartTableValidators(conditions) {
-        const validator = (control) => {
+        return (control) => {
             let errors = null;
-            if (control) {
-                const controlValueLength = control.value ? control.value.length : 0;
-                if (conditions.minRow > controlValueLength) {
-                    return { minRow: { valid: false, min: conditions.minRow, actual: controlValueLength } };
-                }
-                if (conditions.maxRow < controlValueLength) {
-                    return { maxRow: { valid: false, max: conditions.maxRow, actual: controlValueLength } };
-                }
-                if (!control.value) {
-                    return null;
+            if (!control) {
+                return errors;
+            }
+            const controlValueLength = control.value ? control.value.length : 0;
+            if (conditions.minRow > controlValueLength) {
+                return { minRow: { valid: false, min: conditions.minRow, actual: controlValueLength } };
+            }
+            if (conditions.maxRow < controlValueLength) {
+                return { maxRow: { valid: false, max: conditions.maxRow, actual: controlValueLength } };
+            }
+            if (!control.value) {
+                return null;
+            }
+            control.value.forEach((row) => {
+                if (errors || !conditions.columns) {
+                    return;
                 }
-                control.value.forEach((row) => {
-                    if (errors || !conditions.columns) {
+                conditions.columns.forEach((column) => {
+                    if (errors) {
                         return;
                     }
-                    conditions.columns.forEach((column) => {
-                        if (errors) {
-                            return;
+                    const tempControl = new FormControl();
+                    tempControl.setValue(row[column.columnDef]);
+                    const columnType = TableService.getColumnType(column, row);
+                    if (columnType === ColumnTypeEnum.MULTI_SELECT_AUTOCOMPLETE) {
+                        if (ValidatorService.getRequired(column)) {
+                            tempControl.setValidators(Validators.required);
                         }
-                        const tempControl = new FormControl();
-                        tempControl.setValue(row[column.columnDef]);
-                        if (TableService.getColumnType(column, row) === ColumnTypeEnum.MULTI_SELECT_AUTOCOMPLETE) {
-                            if (ValidatorService.getRequired(column)) {
-                                tempControl.setValidators(Validators.required);
-                            }
+                    }
+                    else if (columnType === ColumnTypeEnum.INPUT_COUNTER) {
+                        tempControl.setValidators(ValidatorService.generateNsCounterInputValidators({
+                            required: ValidatorService.getRequired(column),
+                            min: null,
+                            max: null,
+                            isDecimal: ValidatorService.getIsDecimal(column),
+                        }));
+                    }
+                    else if (columnType === ColumnTypeEnum.INPUT_CURRENCY) {
+                        tempControl.setValidators(ValidatorService.generateNsCounterInputValidators({
+                            required: ValidatorService.getRequired(column),
+                            min: null,
+                            max: null,
+                            isDecimal: ValidatorService.getIsDecimal(column),
+                        }));
+                    }
+                    else if (columnType === ColumnTypeEnum.DATE_PICKER) {
+                        tempControl.setValidators(ValidatorService.generateNsDatePickerValidators({
+                            required: ValidatorService.getRequired(column),
+                            min: null,
+                            max: null,
+                        }));
+                    }
+                    else if (columnType === ColumnTypeEnum.INPUT) {
+                        tempControl.setValidators(ValidatorService.generateNsInputValidators({
+                            required: ValidatorService.getRequired(column),
+                            maxLength: column.max ? column.max(row) : undefined,
+                            minLength: column.min ? column.min(row) : undefined,
+                            pattern: undefined,
+                        }));
+                    }
+                    else if (columnType === ColumnTypeEnum.LIVE_SEARCHING) {
+                        tempControl.setValidators(ValidatorService.generateNsInputValidators({
+                            required: ValidatorService.getRequired(column),
+                            maxLength: column.max ? column.max(row) : undefined,
+                            minLength: column.min ? column.min(row) : undefined,
+                            pattern: undefined,
+                        }));
+                    }
+                    tempControl.updateValueAndValidity();
+                    if (columnType === ColumnTypeEnum.DATE_PICKER) {
+                        const errorsArr = [];
+                        if (tempControl.errors) {
+                            errorsArr.push(tempControl.errors);
                         }
-                        else if (TableService.getColumnType(column, row) === ColumnTypeEnum.INPUT_COUNTER) {
-                            tempControl.setValidators(ValidatorService.generateNsCounterInputValidators({
-                                required: ValidatorService.getRequired(column),
-                                min: null,
-                                max: null,
-                                isDecimal: ValidatorService.getIsDecimal(column),
-                            }));
+                        if (ValidatorService.customMinDateValidatorControl(tempControl.value, column.min ? column.min(row) : null)) {
+                            errorsArr.push(ValidatorService.customMinDateValidatorControl(tempControl.value, column.min ? column.min(row) : null));
                         }
-                        else if (TableService.getColumnType(column, row) === ColumnTypeEnum.DATE_PICKER) {
-                            tempControl.setValidators(ValidatorService.generateNsDatePickerValidators({
-                                required: ValidatorService.getRequired(column),
-                                min: null,
-                                max: null,
-                            }));
+                        if (ValidatorService.customMaxDateValidatorControl(tempControl.value, column.max ? column.max(row) : null)) {
+                            errorsArr.push(ValidatorService.customMaxDateValidatorControl(tempControl.value, column.max ? column.max(row) : null));
                         }
-                        else if (TableService.getColumnType(column, row) === ColumnTypeEnum.INPUT) {
-                            tempControl.setValidators(ValidatorService.generateNsInputValidators({
-                                required: ValidatorService.getRequired(column),
-                                maxLength: column.max ? column.max(row) : undefined,
-                                minLength: column.min ? column.min(row) : undefined,
-                                pattern: undefined,
-                            }));
+                        if (errorsArr.length > 0) {
+                            tempControl.setErrors(errorsArr);
                         }
-                        tempControl.updateValueAndValidity();
-                        if (TableService.getColumnType(column, row) === ColumnTypeEnum.DATE_PICKER) {
-                            const errorsArr = [];
-                            if (tempControl.errors) {
-                                errorsArr.push(tempControl.errors);
-                            }
-                            if (ValidatorService.customMinDateValidatorControl(tempControl.value, column.min ? column.min(row) : null)) {
-                                errorsArr.push(ValidatorService.customMinDateValidatorControl(tempControl.value, column.min ? column.min(row) : null));
-                            }
-                            if (ValidatorService.customMaxDateValidatorControl(tempControl.value, column.max ? column.max(row) : null)) {
-                                errorsArr.push(ValidatorService.customMaxDateValidatorControl(tempControl.value, column.max ? column.max(row) : null));
-                            }
-                            if (errorsArr.length > 0) {
-                                tempControl.setErrors(errorsArr);
-                            }
+                    }
+                    if (columnType === ColumnTypeEnum.INPUT_COUNTER || columnType === ColumnTypeEnum.INPUT_CURRENCY) {
+                        const errorsArr = [];
+                        if (tempControl.errors) {
+                            errorsArr.push(tempControl.errors);
                         }
-                        if (TableService.getColumnType(column, row) === ColumnTypeEnum.INPUT_COUNTER) {
-                            const errorsArr = [];
-                            if (tempControl.errors) {
-                                errorsArr.push(tempControl.errors);
-                            }
-                            if (ValidatorService.customMinValueNsCounterInput(tempControl.value, column.min ? column.min(row) : null)) {
-                                errorsArr.push(ValidatorService.customMinValueNsCounterInput(tempControl.value, column.min ? column.min(row) : null));
-                            }
-                            if (ValidatorService.customMaxValueNsCounterInput(tempControl.value, column.max ? column.max(row) : null)) {
-                                errorsArr.push(ValidatorService.customMaxValueNsCounterInput(tempControl.value, column.max ? column.max(row) : null));
-                            }
-                            if (errorsArr.length > 0) {
-                                tempControl.setErrors(errorsArr);
-                            }
+                        if (ValidatorService.customMinValueNsCounterInput(tempControl.value, column.min ? column.min(row) : null)) {
+                            errorsArr.push(ValidatorService.customMinValueNsCounterInput(tempControl.value, column.min ? column.min(row) : null));
                         }
-                        tempControl.markAllAsTouched();
-                        errors = tempControl.errors;
-                    });
+                        if (ValidatorService.customMaxValueNsCounterInput(tempControl.value, column.max ? column.max(row) : null)) {
+                            errorsArr.push(ValidatorService.customMaxValueNsCounterInput(tempControl.value, column.max ? column.max(row) : null));
+                        }
+                        if (errorsArr.length > 0) {
+                            tempControl.setErrors(errorsArr);
+                        }
+                    }
+                    tempControl.markAllAsTouched();
+                    errors = tempControl.errors;
                 });
-            }
+            });
             return errors;
         };
-        return validator;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ValidatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ValidatorService, providedIn: 'root' });
@@ -1869,7 +1875,7 @@ class CvaCounterInputComponent {
     onChange = new EventEmitter();
     onEnter = new EventEmitter();
     // Cái này là để gắn khi nó là FormControl trong 1 FormGroup
-    formControl;
+    formControl = null;
     config;
     constructor(injector, ngControl) {
         this.injector = injector;
@@ -1889,6 +1895,9 @@ class CvaCounterInputComponent {
     set counterValue(val) {
         this.writeValue(val);
     }
+    getFormControl() {
+        return this.formControl;
+    }
     ngOnChanges(changes) {
         if ('value' in changes) {
             this.value = changes.value.currentValue;
@@ -1910,7 +1919,7 @@ class CvaCounterInputComponent {
         if (ngControl && !this.formControl) {
             // Nếu là NsSmartTable thì phải tự new FormControl còn không thì cứ hóng parent FormControl về ^^
             if (this.isFormControl) {
-                this.formControl = ngControl.control ? ngControl.control : undefined;
+                this.formControl = ngControl.control ? ngControl.control : null;
             }
             else {
                 this.formControl = new FormControl();
@@ -1974,22 +1983,22 @@ class CvaCounterInputComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaCounterInputComponent, isStandalone: false, selector: "cva-counter-input", inputs: { label: "label", placeholder: "placeholder", suffixText: "suffixText", hint: "hint", value: "value", disabled: "disabled", required: "required", errorMessages: "errorMessages", min: "min", max: "max", error: "error", isDecimal: "isDecimal", isLabelOutside: "isLabelOutside", isFloatLabel: "isFloatLabel", percentOfLabelOutside: "percentOfLabelOutside", alignNumber: "alignNumber", isFormControl: "isFormControl" }, outputs: { onChange: "onChange", onEnter: "onEnter" }, usesOnChanges: true, ngImport: i0, template: `
     <!-- css labelOutside trong base.theme-->
     <div class="cva-counter-input"
-         [ngClass]="{'labelOutside': !!isLabelOutside, 'float_label': !!isFloatLabel && !isLabelOutside}"
+         [ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
          fxLayout="row" fxLayout.lt-sm="row wrap">
       <mat-label *ngIf="isLabelOutside" class="label_width"
                  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
         <div class="label">
           <div>
             {{ (label ? label : placeholder) | translate }}<span
-            class="required-label-outside">{{ !!required ? '*' : '' }}</span>
+            class="required-label-outside">{{ required ? '*' : '' }}</span>
           </div>
         </div>
       </mat-label>
       <mat-form-field *ngIf="isShowControl()"
-                      appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
+                      appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
                       [hideRequiredMarker]="!isFloatLabel"
                       fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
-        <mat-label *ngIf="!isLabelOutside && !!isFloatLabel">{{ (label ? label : placeholder) | translate }}</mat-label>
+        <mat-label *ngIf="!isLabelOutside && isFloatLabel">{{ (label ? label : placeholder) | translate }}</mat-label>
         <div class="input-area">
           <input matInput type="number" [(ngModel)]="counterValue" #nsCounterInput="ngModel"
                  [style.text-align]="alignNumber"
@@ -2005,7 +2014,7 @@ class CvaCounterInputComponent {
           {{ hint | translate }}
         </mat-hint>
         <mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
-          {{ NsValidator.getErrorMessage(formControl, errorMessages) | translate }}
+          {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
         </mat-hint>
       </mat-form-field>
 
@@ -2020,7 +2029,7 @@ class CvaCounterInputComponent {
         </div>
       </ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.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: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaCounterInputComponent, decorators: [{
             type: Component,
@@ -2030,22 +2039,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     template: `
     <!-- css labelOutside trong base.theme-->
     <div class="cva-counter-input"
-         [ngClass]="{'labelOutside': !!isLabelOutside, 'float_label': !!isFloatLabel && !isLabelOutside}"
+         [ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
          fxLayout="row" fxLayout.lt-sm="row wrap">
       <mat-label *ngIf="isLabelOutside" class="label_width"
                  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
         <div class="label">
           <div>
             {{ (label ? label : placeholder) | translate }}<span
-            class="required-label-outside">{{ !!required ? '*' : '' }}</span>
+            class="required-label-outside">{{ required ? '*' : '' }}</span>
           </div>
         </div>
       </mat-label>
       <mat-form-field *ngIf="isShowControl()"
-                      appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
+                      appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
                       [hideRequiredMarker]="!isFloatLabel"
                       fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
-        <mat-label *ngIf="!isLabelOutside && !!isFloatLabel">{{ (label ? label : placeholder) | translate }}</mat-label>
+        <mat-label *ngIf="!isLabelOutside && isFloatLabel">{{ (label ? label : placeholder) | translate }}</mat-label>
         <div class="input-area">
           <input matInput type="number" [(ngModel)]="counterValue" #nsCounterInput="ngModel"
                  [style.text-align]="alignNumber"
@@ -2061,7 +2070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
           {{ hint | translate }}
         </mat-hint>
         <mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
-          {{ NsValidator.getErrorMessage(formControl, errorMessages) | translate }}
+          {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
         </mat-hint>
       </mat-form-field>
 
@@ -2352,7 +2361,7 @@ class CvaHeaderExpandButtonComponent {
       </div>
     </mat-menu>
 
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaHeaderExpandButtonComponent, decorators: [{
             type: Component,
@@ -2789,7 +2798,7 @@ class CvaTableComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CvaCounterInputComponent, selector: "cva-counter-input", inputs: ["label", "placeholder", "suffixText", "hint", "value", "disabled", "required", "errorMessages", "min", "max", "error", "isDecimal", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "alignNumber", "isFormControl"], outputs: ["onChange", "onEnter"] }, { kind: "directive", type: StylePaginatorDirective, selector: "[style-paginator]", inputs: ["showTotalPages", "paging"], outputs: ["pagingChangeEvent"] }, { kind: "component", type: CvaHeaderExpandButtonComponent, selector: "cva-header-expand-button", inputs: ["expandHeaderButton", "columns", "moduleName"], outputs: ["onChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImgPipe, name: "secure" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i8$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CvaCounterInputComponent, selector: "cva-counter-input", inputs: ["label", "placeholder", "suffixText", "hint", "value", "disabled", "required", "errorMessages", "min", "max", "error", "isDecimal", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "alignNumber", "isFormControl"], outputs: ["onChange", "onEnter"] }, { kind: "directive", type: StylePaginatorDirective, selector: "[style-paginator]", inputs: ["showTotalPages", "paging"], outputs: ["pagingChangeEvent"] }, { kind: "component", type: CvaHeaderExpandButtonComponent, selector: "cva-header-expand-button", inputs: ["expandHeaderButton", "columns", "moduleName"], outputs: ["onChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImgPipe, name: "secure" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaTableComponent, decorators: [{
             type: Component,
@@ -3020,8 +3029,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }] } });
 
+class NumericInputFormat {
+    locale = 'en';
+    decimalMarker = '.';
+    constructor() {
+    }
+    unformatValue(value) {
+        const regExp = new RegExp(`[^\\d${this.decimalMarker}-]`, 'g');
+        // Separate value on before and after decimal marker
+        const [integer, decimal] = value.replace(regExp, '').split(this.decimalMarker);
+        // Send non localized value, with dot as decimalMarker to API
+        return decimal ? integer.concat('.', decimal) : integer;
+    }
+    formatValue(value) {
+        if (value === null || value === undefined) {
+            return '';
+        }
+        value += '';
+        const [thousandSeparator, decimalMarker] = formatNumber(1000.99, this.locale).replace(/\d/g, '');
+        this.decimalMarker = decimalMarker;
+        // Here value should always come with . as decimal marker thus any other behavior is bug
+        const [integer, decimal] = value.toString().split('.');
+        // console.log('4');
+        // Group every three elements, and add thousandSeparator after them
+        const v = (Number(integer) + '').replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator);
+        return Number(decimal) ? v.concat('.', decimal) : (integer === '' ? '' : v);
+    }
+}
+
 class PatternDirective {
     el;
+    $regPatternString = '';
+    $regPattern = new RegExp('');
+    inputElement;
     navigationKeys = [
         'Backspace',
         'Delete',
@@ -3034,21 +3074,18 @@ class PatternDirective {
         'ArrowRight',
         'Clear',
         'Copy',
-        'Paste'
+        'Paste',
     ];
+    constructor(el) {
+        this.el = el;
+        this.inputElement = el.nativeElement;
+    }
     set regPattern(reg) {
         if (reg) {
             this.$regPatternString = reg;
             this.$regPattern = new RegExp(reg);
         }
     }
-    $regPatternString = '';
-    $regPattern = new RegExp('');
-    inputElement;
-    constructor(el) {
-        this.el = el;
-        this.inputElement = el.nativeElement;
-    }
     // @Output() valueChange = new EventEmitter()
     // @HostListener('input', ['$event']) onInputChange(event: any) {
     //   const initalValue = this.el.nativeElement.value;
@@ -3080,7 +3117,7 @@ class PatternDirective {
         // ) {
         //   e.preventDefault();
         // }
-        if (!e.key.match(this.$regPattern)) {
+        if (!e.key?.match(this.$regPattern)) {
             e.preventDefault();
             return;
         }
@@ -3287,6 +3324,7 @@ class CvaInputComponent {
     isFloatLabel = true;
     minLength;
     maxLength;
+    alignText = AlignEnum.LEFT;
     onFocusStatus = false;
     /* hiển thị suffix thay maxlength */
     maxLengthDisplay;
@@ -3297,7 +3335,7 @@ class CvaInputComponent {
     // Chỉ bằng false khi trong NsSmartTable thôi nhé @@
     isFormControl = true;
     formatFunc;
-    control = undefined;
+    formControl = null;
     config;
     constructor(injector, ngControl) {
         this.injector = injector;
@@ -3316,13 +3354,8 @@ class CvaInputComponent {
     set textValue(val) {
         this.writeValue(val);
     }
-    // Vì không thể quất được NgControl ở constructor nên phải quất ở đây :(
-    ngAfterViewInit() {
-        //     const ngControl = this.injector.get(NgControl);
-        //     if (ngControl) {
-        //         this.control = ngControl.control;
-        //         this.callValidator();
-        //     }
+    getFormControl() {
+        return this.formControl;
     }
     ngOnInit() {
         this.callValidator();
@@ -3330,28 +3363,28 @@ class CvaInputComponent {
     callValidator() {
         const ngControl = this.injector.get(NgControl);
         // Nếu parent FormControl khởi tạo xong và formControl chưa có giá trị lưu
-        if (ngControl && !this.control) {
+        if (ngControl && !this.formControl) {
             // Nếu là NsSmartTable thì phải tự new FormControl còn không thì cứ hóng parent FormControl về ^^
             if (this.isFormControl) {
-                this.control = ngControl.control ? ngControl.control : undefined;
+                this.formControl = ngControl.control ? ngControl.control : null;
             }
             else {
-                this.control = new FormControl();
+                this.formControl = new FormControl();
             }
             // Hành động này gắn validator vào this.formControl
             // - Nếu this.formControl là parent FormControl thì sẽ show error lên FormGroup
             // - Nếu this.formControl là new FormControl thì sẽ quét QueryList để check {errors}
-            if (this.control) {
-                if (this.control.validator) {
-                    this.control.setValidators([...ValidatorService.generateNsInputValidators({
+            if (this.formControl) {
+                if (this.formControl.validator) {
+                    this.formControl.setValidators([...ValidatorService.generateNsInputValidators({
                             required: this.required,
                             minLength: this.minLength,
                             maxLength: this.maxLength,
                             pattern: this.pattern,
-                        }), this.control.validator]);
+                        }), this.formControl.validator]);
                 }
                 else {
-                    this.control.setValidators([...ValidatorService.generateNsInputValidators({
+                    this.formControl.setValidators([...ValidatorService.generateNsInputValidators({
                             required: this.required,
                             minLength: this.minLength,
                             maxLength: this.maxLength,
@@ -3360,13 +3393,13 @@ class CvaInputComponent {
                 }
             }
         }
-        if (this.control) {
+        if (this.formControl) {
             // Nếu this.formControl thuộc NsSmartTable thì setValue lại
             if (!this.isFormControl) {
-                this.control.setValue(this.text);
+                this.formControl.setValue(this.text);
             }
             // Nếu là parent FormControl rồi thì kệ
-            this.control.updateValueAndValidity();
+            this.formControl.updateValueAndValidity();
         }
     }
     propagateChange = (_) => {
@@ -3415,32 +3448,36 @@ class CvaInputComponent {
     isShowControl() {
         return !this.disabled || (this.disabled && this.config && this.config.STYLE_DISABLE === 'CONTROL');
     }
+    onClear() {
+        this.writeValue(null);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaInputComponent, deps: [{ token: i0.Injector }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaInputComponent, isStandalone: false, selector: "cva-input", inputs: { label: "label", name: "name", placeholder: "placeholder", hint: "hint", required: "required", disabled: "disabled", text: "text", type: "type", pattern: "pattern", errorMessages: "errorMessages", multiline: "multiline", isLabelOutside: "isLabelOutside", isFloatLabel: "isFloatLabel", minLength: "minLength", maxLength: "maxLength", maxLengthDisplay: "maxLengthDisplay", percentOfLabelOutside: "percentOfLabelOutside", suffixFontAwesomeClass: "suffixFontAwesomeClass", patternFilter: "patternFilter", isFormControl: "isFormControl", formatFunc: "formatFunc" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaInputComponent, isStandalone: false, selector: "cva-input", inputs: { label: "label", name: "name", placeholder: "placeholder", hint: "hint", required: "required", disabled: "disabled", text: "text", type: "type", pattern: "pattern", errorMessages: "errorMessages", multiline: "multiline", isLabelOutside: "isLabelOutside", isFloatLabel: "isFloatLabel", minLength: "minLength", maxLength: "maxLength", alignText: "alignText", maxLengthDisplay: "maxLengthDisplay", percentOfLabelOutside: "percentOfLabelOutside", suffixFontAwesomeClass: "suffixFontAwesomeClass", patternFilter: "patternFilter", isFormControl: "isFormControl", formatFunc: "formatFunc" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
     <!-- css labelOutside trong base.theme-->
     <div class="cva-input"
-         [ngClass]="{'labelOutside': !!isLabelOutside,
-            'float_label': !!isFloatLabel && !isLabelOutside,
-            'text_area': !!this.multiline}"
+         [ngClass]="{'labelOutside': isLabelOutside,
+            'float_label': isFloatLabel && !isLabelOutside,
+            'text_area': this.multiline}"
          fxLayout="row" fxLayout.lt-sm="row wrap">
       <mat-label *ngIf="isLabelOutside" class="label_width"
                  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
         <div class="label">
           <div>
             {{ (label ? label : placeholder) | translate }}<span
-            class="required-label-outside">{{ !!required ? '*' : '' }}</span>
+            class="required-label-outside">{{ required ? '*' : '' }}</span>
           </div>
         </div>
       </mat-label>
       <mat-form-field *ngIf="isShowControl()"
-                      appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
+                      appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
                       [ngClass]="{'cva-input-multiline': multiline}"
                       [hideRequiredMarker]="!isFloatLabel"
                       fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
-        <mat-label *ngIf="!isLabelOutside && !!isFloatLabel" [ngClass]="{'cva-input-multiline': multiline}">
+        <mat-label *ngIf="!isLabelOutside && isFloatLabel" [ngClass]="{'cva-input-multiline': multiline}">
           {{ (label ? label : placeholder) | translate }}
         </mat-label>
         <input matInput placeholder="{{placeholder|translate}}" [type]="type" [(ngModel)]="textValue"
+               [style.text-align]="alignText"
                [pattern]="pattern"
                minLength="{{minLength ? minLength : 0}}"
                maxLength="{{maxLength ? maxLength : 524288}}"
@@ -3455,6 +3492,7 @@ class CvaInputComponent {
                [regPattern]="patternFilter"
                autocomplete="off">
         <textarea matInput [(ngModel)]="textValue" placeholder="{{placeholder|translate}}"
+                  [style.text-align]="alignText"
                   [pattern]="pattern"
                   minLength="{{minLength ? minLength : 0}}"
                   maxLength="{{maxLength ? maxLength : 524288}}"
@@ -3469,9 +3507,13 @@ class CvaInputComponent {
         <i *ngIf="!!suffixFontAwesomeClass" class="input-suffix {{suffixFontAwesomeClass}}" matSuffix></i>
         <span *ngIf="onFocusStatus && (!!maxLength || !!maxLengthDisplay)" class="input-suffix"
               matSuffix>{{ displayLength() }}</span>
-        <mat-hint align="start" *ngIf="!NsValidator.invalid(control)">{{ hint | translate }}</mat-hint>
-        <mat-hint style="color: red" align="start" *ngIf="NsValidator.invalid(control)">
-          {{ NsValidator.getErrorMessageV1(control, errorMessages).msg | translate: NsValidator.getErrorMessageV1(control, errorMessages).params }}
+        <button mat-icon-button color="warn" class="btnTextClear" matSuffix (click)="onClear()" [disabled]="disabled"
+                type="button">
+          <mat-icon>clear</mat-icon>
+        </button>
+        <mat-hint align="start" *ngIf="!NsValidator.invalid(formControl)">{{ hint | translate }}</mat-hint>
+        <mat-hint style="color: red" align="start" *ngIf="NsValidator.invalid(formControl)">
+          {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
         </mat-hint>
       </mat-form-field>
 
@@ -3486,7 +3528,7 @@ class CvaInputComponent {
         </div>
       </ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: "directive", type: i5$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: PatternDirective, selector: "[pattern-directive]", inputs: ["regPattern"] }, { kind: "directive", type: FormatInputDirective, selector: "[inputDirective]", inputs: ["inputDirective", "value"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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: "directive", type: i7$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: PatternDirective, selector: "[pattern-directive]", inputs: ["regPattern"] }, { kind: "directive", type: FormatInputDirective, selector: "[inputDirective]", inputs: ["inputDirective", "value"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaInputComponent, decorators: [{
             type: Component,
@@ -3496,28 +3538,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     template: `
     <!-- css labelOutside trong base.theme-->
     <div class="cva-input"
-         [ngClass]="{'labelOutside': !!isLabelOutside,
-            'float_label': !!isFloatLabel && !isLabelOutside,
-            'text_area': !!this.multiline}"
+         [ngClass]="{'labelOutside': isLabelOutside,
+            'float_label': isFloatLabel && !isLabelOutside,
+            'text_area': this.multiline}"
          fxLayout="row" fxLayout.lt-sm="row wrap">
       <mat-label *ngIf="isLabelOutside" class="label_width"
                  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
         <div class="label">
           <div>
             {{ (label ? label : placeholder) | translate }}<span
-            class="required-label-outside">{{ !!required ? '*' : '' }}</span>
+            class="required-label-outside">{{ required ? '*' : '' }}</span>
           </div>
         </div>
       </mat-label>
       <mat-form-field *ngIf="isShowControl()"
-                      appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
+                      appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
                       [ngClass]="{'cva-input-multiline': multiline}"
                       [hideRequiredMarker]="!isFloatLabel"
                       fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
-        <mat-label *ngIf="!isLabelOutside && !!isFloatLabel" [ngClass]="{'cva-input-multiline': multiline}">
+        <mat-label *ngIf="!isLabelOutside && isFloatLabel" [ngClass]="{'cva-input-multiline': multiline}">
           {{ (label ? label : placeholder) | translate }}
         </mat-label>
         <input matInput placeholder="{{placeholder|translate}}" [type]="type" [(ngModel)]="textValue"
+               [style.text-align]="alignText"
                [pattern]="pattern"
                minLength="{{minLength ? minLength : 0}}"
                maxLength="{{maxLength ? maxLength : 524288}}"
@@ -3532,6 +3575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                [regPattern]="patternFilter"
                autocomplete="off">
         <textarea matInput [(ngModel)]="textValue" placeholder="{{placeholder|translate}}"
+                  [style.text-align]="alignText"
                   [pattern]="pattern"
                   minLength="{{minLength ? minLength : 0}}"
                   maxLength="{{maxLength ? maxLength : 524288}}"
@@ -3546,9 +3590,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
         <i *ngIf="!!suffixFontAwesomeClass" class="input-suffix {{suffixFontAwesomeClass}}" matSuffix></i>
         <span *ngIf="onFocusStatus && (!!maxLength || !!maxLengthDisplay)" class="input-suffix"
               matSuffix>{{ displayLength() }}</span>
-        <mat-hint align="start" *ngIf="!NsValidator.invalid(control)">{{ hint | translate }}</mat-hint>
-        <mat-hint style="color: red" align="start" *ngIf="NsValidator.invalid(control)">
-          {{ NsValidator.getErrorMessageV1(control, errorMessages).msg | translate: NsValidator.getErrorMessageV1(control, errorMessages).params }}
+        <button mat-icon-button color="warn" class="btnTextClear" matSuffix (click)="onClear()" [disabled]="disabled"
+                type="button">
+          <mat-icon>clear</mat-icon>
+        </button>
+        <mat-hint align="start" *ngIf="!NsValidator.invalid(formControl)">{{ hint | translate }}</mat-hint>
+        <mat-hint style="color: red" align="start" *ngIf="NsValidator.invalid(formControl)">
+          {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
         </mat-hint>
       </mat-form-field>
 
@@ -3601,6 +3649,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], maxLength: [{
                 type: Input
+            }], alignText: [{
+                type: Input
             }], maxLengthDisplay: [{
                 type: Input
             }], percentOfLabelOutside: [{
@@ -3724,7 +3774,8 @@ class CvaDatePickerComponent {
     config;
     // Chỉ bằng false khi trong NsSmartTable thôi @@
     isFormControl = true;
-    formControl;
+    formControl = null;
+    datepicker;
     constructor(dateServiceUtil, ngControl, injector) {
         this.dateServiceUtil = dateServiceUtil;
         this.injector = injector;
@@ -3749,6 +3800,9 @@ class CvaDatePickerComponent {
     set datepickerValue(val) {
         this.writeValue(val);
     }
+    getFormControl() {
+        return this.formControl;
+    }
     ngOnInit() {
         if (this.isShowControl()) {
             this.callValidator();
@@ -3760,7 +3814,7 @@ class CvaDatePickerComponent {
         if (ngControl && !this.formControl) {
             // Nếu là NsSmartTable thì phải tự new FormControl còn không thì cứ hóng parent FormControl về ^^
             if (this.isFormControl) {
-                this.formControl = ngControl.control ? ngControl.control : undefined;
+                this.formControl = ngControl.control ? ngControl.control : null;
             }
             else {
                 this.formControl = new FormControl();
@@ -3865,6 +3919,12 @@ class CvaDatePickerComponent {
     isShowControl() {
         return !this.disabled || (this.disabled && this.config && this.config.STYLE_DISABLE === 'CONTROL');
     }
+    openDatepicker(event) {
+        if (!this.disabled && this.datepicker) {
+            event.stopPropagation();
+            this.datepicker.open();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaDatePickerComponent, deps: [{ token: DateUtilService }, { token: i1$2.NgControl, optional: true, self: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaDatePickerComponent, isStandalone: false, selector: "cva-date-picker", inputs: { label: "label", placeholder: "placeholder", value: "value", disabled: "disabled", required: "required", minDate: "minDate", maxDate: "maxDate", errorMessages: "errorMessages", isLabelOutside: "isLabelOutside", isFloatLabel: "isFloatLabel", percentOfLabelOutside: "percentOfLabelOutside", isFormControl: "isFormControl" }, outputs: { onChange: "onChange" }, providers: [
             { provide: DateAdapter, useClass: NsDateAdapter },
@@ -3872,7 +3932,7 @@ class CvaDatePickerComponent {
                 provide: MAT_DATE_FORMATS,
                 useValue: APP_DATE_FORMATS,
             },
-        ], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["xDatepicker"], descendants: true }], ngImport: i0, template: `
     <!-- css labelOutside trong base.theme-->
     <div class="cva-date-picker"
          [ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
@@ -3894,19 +3954,20 @@ class CvaDatePickerComponent {
         <input matInput [matDatepicker]="xDatepicker"
                [placeholder]="placeholder|translate"
                [(ngModel)]="datepickerValue"
+               [disabled]="disabled"
                [readonly]="true"
                [required]="checkRequired(required)"
                [title]="title ? title : ''"
-               [min]="getMinDate()" [max]="getMaxDate()">
+               [min]="getMinDate()" [max]="getMaxDate()"
+               (click)="openDatepicker($event)">
         <mat-datepicker-toggle matPrefix [for]="xDatepicker" [disabled]="disabled"></mat-datepicker-toggle>
         <mat-datepicker #xDatepicker></mat-datepicker>
-        <button mat-icon-button color="warn" class="btnDatePicker" matSuffix (click)="onClear()"
-                [disabled]="disabled || checkRequired(required)">
+        <button mat-icon-button color="warn" class="btnDatePicker" matSuffix (click)="onClear()" [disabled]="disabled">
           <mat-icon>clear</mat-icon>
         </button>
 
         <mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
-          {{ NsValidator.getErrorMessage(formControl, errorMessages) | translate }}
+          {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
         </mat-hint>
 
       </mat-form-field>
@@ -3922,7 +3983,7 @@ class CvaDatePickerComponent {
         </div>
       </ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.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: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaDatePickerComponent, decorators: [{
             type: Component,
@@ -3951,19 +4012,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
         <input matInput [matDatepicker]="xDatepicker"
                [placeholder]="placeholder|translate"
                [(ngModel)]="datepickerValue"
+               [disabled]="disabled"
                [readonly]="true"
                [required]="checkRequired(required)"
                [title]="title ? title : ''"
-               [min]="getMinDate()" [max]="getMaxDate()">
+               [min]="getMinDate()" [max]="getMaxDate()"
+               (click)="openDatepicker($event)">
         <mat-datepicker-toggle matPrefix [for]="xDatepicker" [disabled]="disabled"></mat-datepicker-toggle>
         <mat-datepicker #xDatepicker></mat-datepicker>
-        <button mat-icon-button color="warn" class="btnDatePicker" matSuffix (click)="onClear()"
-                [disabled]="disabled || checkRequired(required)">
+        <button mat-icon-button color="warn" class="btnDatePicker" matSuffix (click)="onClear()" [disabled]="disabled">
           <mat-icon>clear</mat-icon>
         </button>
 
         <mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
-          {{ NsValidator.getErrorMessage(formControl, errorMessages) | translate }}
+          {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
         </mat-hint>
 
       </mat-form-field>
@@ -4018,6 +4080,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], isFormControl: [{
                 type: Input
+            }], datepicker: [{
+                type: ViewChild,
+                args: ['xDatepicker']
             }] } });
 
 class CvaMultiSelectAutocomplete {
@@ -4046,7 +4111,7 @@ class CvaMultiSelectAutocomplete {
     isFormControl = true;
     searchInputRef;
     // Cái này là để gắn khi nó là FormControl trong 1 FormGroup
-    formControl;
+    formControl = null;
     filteredOptions = [];
     selectAllChecked = false;
     labelCount = 1;
@@ -4077,6 +4142,9 @@ class CvaMultiSelectAutocomplete {
     set selectedValue(val) {
         // this.writeValue(val); // Đọc comment bên dưới matSelectionChange
     }
+    getFormControl() {
+        return this.formControl;
+    }
     ngOnInit() {
         this.callValidator();
     }
@@ -4088,7 +4156,7 @@ class CvaMultiSelectAutocomplete {
         if (ngControl && !this.formControl) {
             // Nếu là NsSmartTable thì phải tự new FormControl còn không thì cứ hóng parent FormControl về ^^
             if (this.isFormControl) {
-                this.formControl = ngControl.control ? ngControl.control : undefined;
+                this.formControl = ngControl.control ? ngControl.control : null;
             }
             else {
                 this.formControl = new FormControl();
@@ -4398,7 +4466,7 @@ class CvaMultiSelectAutocomplete {
         <mat-icon matSuffix>expand_more</mat-icon>
         <mat-hint *ngIf="!NsValidator.invalid(formControl)">{{ hint | translate }}</mat-hint>
         <mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
-          {{ NsValidator.getErrorMessage(formControl, errorMessages) | translate }}
+          {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
         </mat-hint>
       </mat-form-field>
       <ng-container *ngIf="!isShowControl()">
@@ -4412,7 +4480,7 @@ class CvaMultiSelectAutocomplete {
         </div>
       </ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$2.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$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: "directive", type: i9$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i10.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i10.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i10.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$1.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$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: "directive", type: i9$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i10.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i10.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i10.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiSelectAutocomplete, decorators: [{
             type: Component,
@@ -4495,7 +4563,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
         <mat-icon matSuffix>expand_more</mat-icon>
         <mat-hint *ngIf="!NsValidator.invalid(formControl)">{{ hint | translate }}</mat-hint>
         <mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
-          {{ NsValidator.getErrorMessage(formControl, errorMessages) | translate }}
+          {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
         </mat-hint>
       </mat-form-field>
       <ng-container *ngIf="!isShowControl()">
@@ -4579,7 +4647,7 @@ class CvaLiveSearchingComponent {
     isFormControl = true;
     row;
     columnDef;
-    control = undefined;
+    formControl = null;
     textControl = new FormControl('');
     filteredOptions = [];
     selected;
@@ -4597,6 +4665,9 @@ class CvaLiveSearchingComponent {
     get NsValidator() {
         return ValidatorService;
     }
+    getFormControl() {
+        return this.formControl;
+    }
     ngOnInit() {
         this.callValidator();
         this.textValueChangeSubscribe();
@@ -4607,37 +4678,37 @@ class CvaLiveSearchingComponent {
     callValidator() {
         const ngControl = this.injector.get(NgControl);
         // Nếu parent FormControl khởi tạo xong và formControl chưa có giá trị lưu
-        if (ngControl && !this.control) {
+        if (ngControl && !this.formControl) {
             // Nếu là NsSmartTable thì phải tự new FormControl còn không thì cứ hóng parent FormControl về ^^
             if (this.isFormControl) {
-                this.control = ngControl.control ? ngControl.control : undefined;
+                this.formControl = ngControl.control ? ngControl.control : null;
             }
             else {
-                this.control = new FormControl();
+                this.formControl = new FormControl();
             }
             // Hành động này gắn validator vào this.formControl
             // - Nếu this.formControl là parent FormControl thì sẽ show error lên FormGroup
             // - Nếu this.formControl là new FormControl thì sẽ quét QueryList để check {errors}
-            if (this.control) {
-                if (this.control.validator) {
-                    this.control.setValidators([...ValidatorService.generateNsAutocompleteValidators({
+            if (this.formControl) {
+                if (this.formControl.validator) {
+                    this.formControl.setValidators([...ValidatorService.generateNsAutocompleteValidators({
                             required: this.required,
-                        }), this.control.validator]);
+                        }), this.formControl.validator]);
                 }
                 else {
-                    this.control.setValidators([...ValidatorService.generateNsAutocompleteValidators({
+                    this.formControl.setValidators([...ValidatorService.generateNsAutocompleteValidators({
                             required: this.required,
                         })]);
                 }
             }
         }
-        if (this.control) {
+        if (this.formControl) {
             // Nếu this.formControl thuộc NsSmartTable thì setValue lại
             if (!this.isFormControl) {
-                this.control.setValue(this.selected);
+                this.formControl.setValue(this.selected);
             }
             // Nếu là parent FormControl rồi thì kệ
-            this.control.updateValueAndValidity();
+            this.formControl.updateValueAndValidity();
         }
     }
     propagateChange = (_) => {
@@ -4662,20 +4733,13 @@ class CvaLiveSearchingComponent {
      */
     writeValue(obj) {
         if (!obj || typeof obj !== 'string') {
-            this.selected = {};
             this.filteredOptions.length = 0;
             this.filteredOptions = [];
-            this.textControl.setValue('', { emitEvent: false });
-            this.updateRowOrFormGroup();
-            return;
         }
         const matched = this.filteredOptions.find(opt => {
             return JSON.stringify(opt[this.displayKey] ?? '') === JSON.stringify(obj ?? '');
         });
-        if (!matched) {
-            if (!this.searchFn) {
-                return;
-            }
+        if (!matched && this.searchFn && !!obj) {
             // Khi textValueChange chưa chạy không tìm thấy
             this.searchFn(obj).subscribe(values => {
                 if (values && values.length > 0) {
@@ -4685,8 +4749,9 @@ class CvaLiveSearchingComponent {
             });
             return;
         }
-        this.selected = matched;
-        this.textControl.setValue(matched[this.displayKey], { emitEvent: false });
+        this.selected = matched ?? null;
+        this.textControl.setValue(matched ? matched[this.displayKey] : '', { emitEvent: false });
+        this.callValidator();
         this.updateRowOrFormGroup();
     }
     onOptionSelect(displayValue) {
@@ -4715,22 +4780,22 @@ class CvaLiveSearchingComponent {
         if (!this.isFormControl && this.row) {
             for (const targetKey in this.mappingConfig) {
                 const sourceKey = this.mappingConfig[targetKey];
-                this.row[targetKey] = this.selected[sourceKey];
+                this.row[targetKey] = !!this.selected ? this.selected[sourceKey] : '';
             }
         }
-        if (this.isFormControl && this.control?.parent) {
+        if (this.isFormControl && this.formControl?.parent) {
             for (const targetKey in this.mappingConfig) {
                 const sourceKey = this.mappingConfig[targetKey];
-                const formControl = this.control.parent.get(targetKey);
+                const formControl = this.formControl.parent.get(targetKey);
                 if (formControl)
-                    formControl.setValue(this.selected[sourceKey]);
+                    formControl.setValue(!!this.selected ? this.selected[sourceKey] : '');
             }
         }
-        this.propagateChange(this.selected[this.displayKey]);
-        this.onChange.emit(this.selected[this.displayKey]);
+        this.propagateChange(!!this.selected ? this.selected[this.displayKey] : '');
+        this.onChange.emit(!!this.selected ? this.selected[this.displayKey] : '');
     }
     onClear() {
-        this.writeValue(null);
+        this.writeValue('');
     }
     isShowControl() {
         return !this.disabled || (this.disabled && this.config && this.config.STYLE_DISABLE === 'CONTROL');
@@ -4738,23 +4803,23 @@ class CvaLiveSearchingComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaLiveSearchingComponent, deps: [{ token: i0.Injector }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaLiveSearchingComponent, isStandalone: false, selector: "cva-live-searching", inputs: { label: "label", placeholder: "placeholder", hint: "hint", required: "required", disabled: "disabled", errorMessages: "errorMessages", isLabelOutside: "isLabelOutside", isFloatLabel: "isFloatLabel", percentOfLabelOutside: "percentOfLabelOutside", suffixFontAwesomeClass: "suffixFontAwesomeClass", displayKey: "displayKey", mappingConfig: "mappingConfig", searchFn: "searchFn", isFormControl: "isFormControl", row: "row", columnDef: "columnDef" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
     <div class="cva-live-searching"
-         [ngClass]="{'labelOutside': !!isLabelOutside,
-            'float_label': !!isFloatLabel && !isLabelOutside}"
+         [ngClass]="{'labelOutside': isLabelOutside,
+            'float_label': isFloatLabel && !isLabelOutside}"
          fxLayout="row" fxLayout.lt-sm="row wrap">
       <mat-label *ngIf="isLabelOutside" class="label_width"
                  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
         <div class="label">
           <div>
             {{ (label ? label : placeholder) | translate }}<span
-            class="required-label-outside">{{ !!required ? '*' : '' }}</span>
+            class="required-label-outside">{{ required ? '*' : '' }}</span>
           </div>
         </div>
       </mat-label>
       <mat-form-field *ngIf="isShowControl()"
-                      appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
+                      appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
                       [hideRequiredMarker]="!isFloatLabel"
                       fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
-        <mat-label *ngIf="!isLabelOutside && !!isFloatLabel">
+        <mat-label *ngIf="!isLabelOutside && isFloatLabel">
           {{ (label ? label : placeholder) | translate }}
         </mat-label>
         <input type="text"
@@ -4777,9 +4842,9 @@ class CvaLiveSearchingComponent {
           </mat-option>
         </mat-autocomplete>
         <i *ngIf="!!suffixFontAwesomeClass" class="input-suffix {{suffixFontAwesomeClass}}" matSuffix></i>
-        <mat-hint align="start" *ngIf="!NsValidator.invalid(control)">{{ hint | translate }}</mat-hint>
-        <mat-hint style="color: red" align="start" *ngIf="NsValidator.invalid(control)">
-          {{ NsValidator.getErrorMessageV1(control, errorMessages).msg | translate: NsValidator.getErrorMessageV1(control, errorMessages).params }}
+        <mat-hint align="start" *ngIf="!NsValidator.invalid(formControl)">{{ hint | translate }}</mat-hint>
+        <mat-hint style="color: red" align="start" *ngIf="NsValidator.invalid(formControl)">
+          {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
         </mat-hint>
       </mat-form-field>
 
@@ -4794,7 +4859,7 @@ class CvaLiveSearchingComponent {
         </div>
       </ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.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: i4$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.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: i9$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.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: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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: i9$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaLiveSearchingComponent, decorators: [{
             type: Component,
@@ -4803,23 +4868,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     standalone: false,
                     template: `
     <div class="cva-live-searching"
-         [ngClass]="{'labelOutside': !!isLabelOutside,
-            'float_label': !!isFloatLabel && !isLabelOutside}"
+         [ngClass]="{'labelOutside': isLabelOutside,
+            'float_label': isFloatLabel && !isLabelOutside}"
          fxLayout="row" fxLayout.lt-sm="row wrap">
       <mat-label *ngIf="isLabelOutside" class="label_width"
                  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
         <div class="label">
           <div>
             {{ (label ? label : placeholder) | translate }}<span
-            class="required-label-outside">{{ !!required ? '*' : '' }}</span>
+            class="required-label-outside">{{ required ? '*' : '' }}</span>
           </div>
         </div>
       </mat-label>
       <mat-form-field *ngIf="isShowControl()"
-                      appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
+                      appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
                       [hideRequiredMarker]="!isFloatLabel"
                       fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
-        <mat-label *ngIf="!isLabelOutside && !!isFloatLabel">
+        <mat-label *ngIf="!isLabelOutside && isFloatLabel">
           {{ (label ? label : placeholder) | translate }}
         </mat-label>
         <input type="text"
@@ -4842,9 +4907,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
           </mat-option>
         </mat-autocomplete>
         <i *ngIf="!!suffixFontAwesomeClass" class="input-suffix {{suffixFontAwesomeClass}}" matSuffix></i>
-        <mat-hint align="start" *ngIf="!NsValidator.invalid(control)">{{ hint | translate }}</mat-hint>
-        <mat-hint style="color: red" align="start" *ngIf="NsValidator.invalid(control)">
-          {{ NsValidator.getErrorMessageV1(control, errorMessages).msg | translate: NsValidator.getErrorMessageV1(control, errorMessages).params }}
+        <mat-hint align="start" *ngIf="!NsValidator.invalid(formControl)">{{ hint | translate }}</mat-hint>
+        <mat-hint style="color: red" align="start" *ngIf="NsValidator.invalid(formControl)">
+          {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
         </mat-hint>
       </mat-form-field>
 
@@ -4905,6 +4970,7 @@ class CvaSmartTableComponent {
     ref;
     config;
     injector;
+    cellComponents;
     moduleName = '';
     columns = [];
     buttons = [];
@@ -4927,6 +4993,7 @@ class CvaSmartTableComponent {
     formControl;
     selectAllChecked = false;
     buttonColspan = 0;
+    formatFunc = new NumericInputFormat();
     constructor(ref, config, injector, ngControl) {
         this.ref = ref;
         this.config = config;
@@ -5066,27 +5133,6 @@ class CvaSmartTableComponent {
     onDisplayFooter(footer, dataTable) {
         return typeof (footer.display) === 'function' ? footer.display(dataTable) : !!footer.display;
     }
-    // //Cái khúc này về sau mà có cái loại validate nào mà ngoài thì mới enable validate cột sau
-    // validate(control: AbstractControl): ValidationErrors | null {
-    //     let valid = null;
-    //
-    //     if (this.value) {
-    //         for (const row of this.value) {
-    //             for (const column of this.columns) {
-    //                 if (column.validate) {
-    //                     valid = column.validate(row);
-    //                     if (valid) {
-    //                         break;
-    //                     }
-    //                 }
-    //             }
-    //             if (valid) {
-    //                 break;
-    //             }
-    //         }
-    //     }
-    //     return valid;
-    // }
     callValidator() {
         const ngControl = this.injector.get(NgControl);
         if (ngControl && !this.formControl) {
@@ -5102,6 +5148,11 @@ class CvaSmartTableComponent {
                     minRow: this.minRow,
                     maxRow: this.maxRow,
                 }));
+                this.formControl.statusChanges.subscribe(status => {
+                    if (this.formControl?.touched && this.formControl?.dirty) {
+                        this.markAllControlsAsDirty();
+                    }
+                });
             }
         }
         if (this.formControl) {
@@ -5125,29 +5176,6 @@ class CvaSmartTableComponent {
         if (row.isChildRow) {
             return;
         }
-        // default not expand
-        // if (row.expanded) {
-        //   // remove the flag
-        //   row.expanded = false;
-        //
-        //   // remove the child rows
-        //   let childrenDetected = false;
-        //   const length = this.datasource.data.length;
-        //   for (let index = 0; index < length; index++) {
-        //     if (childrenDetected && !this.datasource.data[index].isChildRow) {
-        //       break;
-        //     }
-        //
-        //     if (index > i && this.datasource.data[index].isChildRow) {
-        //       this.datasource.data.splice(index, 1);
-        //       index--;
-        //       childrenDetected = true;
-        //     }
-        //   }
-        //
-        //   this.matTable?.renderRows();
-        //   return;
-        // }
         // set expanded to true so we don't expand this row again
         row.expanded = true;
         row.parentRowClassIndex = parentRowClassIndex;
@@ -5165,15 +5193,26 @@ class CvaSmartTableComponent {
         // rerender table
         this.matTable?.renderRows();
     }
-    getCounterImputAlign(column) {
+    getAlign(column) {
         return column.align ? column.align : AlignEnum.RIGHT;
     }
     getHeaderButtonColspan() {
         this.buttonColspan = TableService.getHeaderButtonColspan(this.buttons, this.datasource.data);
         return this.buttonColspan;
     }
+    markAllControlsAsDirty() {
+        if (this.cellComponents) {
+            this.cellComponents.forEach(cell => {
+                const control = cell.getFormControl();
+                if (control) {
+                    control.markAsDirty();
+                    control.updateValueAndValidity();
+                }
+            });
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaSmartTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: InjectTokenNextSolutionsConfig }, { token: i0.Injector }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaSmartTableComponent, isStandalone: false, selector: "cva-smart-table", inputs: { moduleName: "moduleName", columns: "columns", buttons: "buttons", value: "value", minRow: "minRow", maxRow: "maxRow", errorMessages: "errorMessages", isFormControl: "isFormControl", isSticky: "isSticky", isStickyHeader: "isStickyHeader", isStickyFooter: "isStickyFooter", isExpandRowTable: "isExpandRowTable", expandRowProperty: "expandRowProperty" }, outputs: { clickAction: "clickAction", onChange: "onChange" }, viewQueries: [{ propertyName: "matTable", first: true, predicate: ["matTable"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaSmartTableComponent, isStandalone: false, selector: "cva-smart-table", inputs: { moduleName: "moduleName", columns: "columns", buttons: "buttons", value: "value", minRow: "minRow", maxRow: "maxRow", errorMessages: "errorMessages", isFormControl: "isFormControl", isSticky: "isSticky", isStickyHeader: "isStickyHeader", isStickyFooter: "isStickyFooter", isExpandRowTable: "isExpandRowTable", expandRowProperty: "expandRowProperty" }, outputs: { clickAction: "clickAction", onChange: "onChange" }, viewQueries: [{ propertyName: "matTable", first: true, predicate: ["matTable"], descendants: true }, { propertyName: "cellComponents", predicate: ["cellComponentRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div class="table-responsive"
          [ngClass]="{'fixed_header': isSticky||isStickyHeader, 'fixed_footer': isSticky||isStickyFooter}">
       <table mat-table [dataSource]="datasource" #matTable class="mat-elevation-z8 cva-smart-table">
@@ -5243,7 +5282,7 @@ class CvaSmartTableComponent {
                      class="{{TableService.getColumnClassName(column, result)}}"
                      fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
                      (click)="$event.stopPropagation()">
-                  <button mat-icon-button
+                  <button mat-icon-button type="button"
                           color="{{column.button.color}}"
                           [ngClass]="column.button.className"
                           (click)="onClick(column.button.click, result, i)"
@@ -5256,9 +5295,10 @@ class CvaSmartTableComponent {
                 </div>
               </ng-container>
               <cva-counter-input *ngSwitchCase="ColumnTypes.INPUT_COUNTER"
+                                 #cellComponentRef
                                  class="inputNumber" #nsCounterInput
                                  [isFormControl]="false"
-                                 [alignNumber]="getCounterImputAlign(column)"
+                                 [alignNumber]="getAlign(column)"
                                  [disabled]="column.disabled ? column.disabled(result) : false"
                                  [value]="result[column.columnDef]"
                                  [required]="getRequired(column)"
@@ -5269,7 +5309,9 @@ class CvaSmartTableComponent {
                                  (onChange)="onCellValueChange(result, column, $event);">
               </cva-counter-input>
               <cva-input *ngSwitchCase="ColumnTypes.INPUT"
+                         #cellComponentRef
                          [isFormControl]="false"
+                         [alignText]="getAlign(column)"
                          [disabled]="column.disabled ? column.disabled(result) : false"
                          [text]="result[column.columnDef]"
                          [minLength]="column.min ? column.min(result) : undefined"
@@ -5278,7 +5320,22 @@ class CvaSmartTableComponent {
                          [errorMessages]="getErrorMessageMap(column)"
                          (onChange)="onCellValueChange(result, column, $event);">
               </cva-input>
+              <cva-input *ngSwitchCase="ColumnTypes.INPUT_CURRENCY"
+                         #cellComponentRef
+                         [isFormControl]="false"
+                         [alignText]="getAlign(column)"
+                         [disabled]="column.disabled ? column.disabled(result) : false"
+                         [text]="result[column.columnDef]"
+                         [minLength]="column.min ? column.min(result) : undefined"
+                         [maxLength]="column.max ? column.max(result) : undefined"
+                         [required]="getRequired(column)"
+                         [errorMessages]="getErrorMessageMap(column)"
+                         (onChange)="onCellValueChange(result, column, $event);"
+                         [pattern]="getIsDecimal(column) ? '^\\d{0,15}(\\.\\d*)?$' : '^\\d{0,15}$'"
+                         [formatFunc]="formatFunc">
+              </cva-input>
               <cva-date-picker *ngSwitchCase="ColumnTypes.DATE_PICKER"
+                               #cellComponentRef
                                [value]="result[column.columnDef]"
                                [isFormControl]="false"
                                [minDate]="column.min ? column.min(result) : null"
@@ -5289,6 +5346,7 @@ class CvaSmartTableComponent {
                                (onChange)="onCellValueChange(result, column, $event);">
               </cva-date-picker>
               <cva-multi-select-autocomplete [isFormControl]="false"
+                                             #cellComponentRef
                                              *ngSwitchCase="ColumnTypes.MULTI_SELECT_AUTOCOMPLETE"
                                              class="multiSelectAutocomplete"
                                              [isTree]="column.isTree??false"
@@ -5311,6 +5369,7 @@ class CvaSmartTableComponent {
                 </mat-checkbox>
               </div>
               <cva-live-searching *ngSwitchCase="ColumnTypes.LIVE_SEARCHING"
+                                  #cellComponentRef
                                   [isFormControl]="false" [required]="getRequired(column)"
                                   [row]="result" [columnDef]="column.columnDef"
                                   [searchFn]="column.searchFn"
@@ -5331,7 +5390,7 @@ class CvaSmartTableComponent {
                 [attr.colspan]="buttonColspan">
               <!--                        [fxFlex]="getHeaderButtonWidth(i) + 'px' "-->
               <ng-container *ngIf="TableService.getButtonHeader(button) as btnHeader">
-                <button mat-icon-button
+                <button mat-icon-button type="button"
                         class="{{button.className}}"
                         color="{{$any(btnHeader).color}}"
                         (click)="onClick($any(btnHeader).click, null, null)"
@@ -5357,7 +5416,7 @@ class CvaSmartTableComponent {
             <td mat-cell [ngClass]="button.className"
                 *ngIf="TableService.onDisplayButtonCell(button, cell)"
                 (click)="$event.stopPropagation()">
-              <button mat-icon-button
+              <button mat-icon-button type="button"
                       color="{{button.color}}"
                       [ngClass]="button.className"
                       (click)="onClick(button.click, cell, i)"
@@ -5399,7 +5458,7 @@ class CvaSmartTableComponent {
         </ng-container>
       </table>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i5.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CvaInputComponent, selector: "cva-input", inputs: ["label", "name", "placeholder", "hint", "required", "disabled", "text", "type", "pattern", "errorMessages", "multiline", "isLabelOutside", "isFloatLabel", "minLength", "maxLength", "maxLengthDisplay", "percentOfLabelOutside", "suffixFontAwesomeClass", "patternFilter", "isFormControl", "formatFunc"], outputs: ["onChange"] }, { kind: "component", type: CvaCounterInputComponent, selector: "cva-counter-input", inputs: ["label", "placeholder", "suffixText", "hint", "value", "disabled", "required", "errorMessages", "min", "max", "error", "isDecimal", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "alignNumber", "isFormControl"], outputs: ["onChange", "onEnter"] }, { kind: "component", type: CvaDatePickerComponent, selector: "cva-date-picker", inputs: ["label", "placeholder", "value", "disabled", "required", "minDate", "maxDate", "errorMessages", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "isFormControl"], outputs: ["onChange"] }, { kind: "component", type: CvaMultiSelectAutocomplete, selector: "cva-multi-select-autocomplete", inputs: ["placeholder", "label", "hint", "value", "options", "disabled", "errorMessages", "multiple", "required", "isTree", "treeSymbol", "sizeOfItemsInListByPixels", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "isFormControl"], outputs: ["selectionChange", "selectedOptionDataChange"] }, { kind: "component", type: CvaLiveSearchingComponent, selector: "cva-live-searching", inputs: ["label", "placeholder", "hint", "required", "disabled", "errorMessages", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "suffixFontAwesomeClass", "displayKey", "mappingConfig", "searchFn", "isFormControl", "row", "columnDef"], outputs: ["onChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImgPipe, name: "secure" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i5.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CvaInputComponent, selector: "cva-input", inputs: ["label", "name", "placeholder", "hint", "required", "disabled", "text", "type", "pattern", "errorMessages", "multiline", "isLabelOutside", "isFloatLabel", "minLength", "maxLength", "alignText", "maxLengthDisplay", "percentOfLabelOutside", "suffixFontAwesomeClass", "patternFilter", "isFormControl", "formatFunc"], outputs: ["onChange"] }, { kind: "component", type: CvaCounterInputComponent, selector: "cva-counter-input", inputs: ["label", "placeholder", "suffixText", "hint", "value", "disabled", "required", "errorMessages", "min", "max", "error", "isDecimal", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "alignNumber", "isFormControl"], outputs: ["onChange", "onEnter"] }, { kind: "component", type: CvaDatePickerComponent, selector: "cva-date-picker", inputs: ["label", "placeholder", "value", "disabled", "required", "minDate", "maxDate", "errorMessages", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "isFormControl"], outputs: ["onChange"] }, { kind: "component", type: CvaMultiSelectAutocomplete, selector: "cva-multi-select-autocomplete", inputs: ["placeholder", "label", "hint", "value", "options", "disabled", "errorMessages", "multiple", "required", "isTree", "treeSymbol", "sizeOfItemsInListByPixels", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "isFormControl"], outputs: ["selectionChange", "selectedOptionDataChange"] }, { kind: "component", type: CvaLiveSearchingComponent, selector: "cva-live-searching", inputs: ["label", "placeholder", "hint", "required", "disabled", "errorMessages", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "suffixFontAwesomeClass", "displayKey", "mappingConfig", "searchFn", "isFormControl", "row", "columnDef"], outputs: ["onChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImgPipe, name: "secure" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaSmartTableComponent, decorators: [{
             type: Component,
@@ -5476,7 +5535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                      class="{{TableService.getColumnClassName(column, result)}}"
                      fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
                      (click)="$event.stopPropagation()">
-                  <button mat-icon-button
+                  <button mat-icon-button type="button"
                           color="{{column.button.color}}"
                           [ngClass]="column.button.className"
                           (click)="onClick(column.button.click, result, i)"
@@ -5489,9 +5548,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 </div>
               </ng-container>
               <cva-counter-input *ngSwitchCase="ColumnTypes.INPUT_COUNTER"
+                                 #cellComponentRef
                                  class="inputNumber" #nsCounterInput
                                  [isFormControl]="false"
-                                 [alignNumber]="getCounterImputAlign(column)"
+                                 [alignNumber]="getAlign(column)"
                                  [disabled]="column.disabled ? column.disabled(result) : false"
                                  [value]="result[column.columnDef]"
                                  [required]="getRequired(column)"
@@ -5502,7 +5562,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                                  (onChange)="onCellValueChange(result, column, $event);">
               </cva-counter-input>
               <cva-input *ngSwitchCase="ColumnTypes.INPUT"
+                         #cellComponentRef
                          [isFormControl]="false"
+                         [alignText]="getAlign(column)"
                          [disabled]="column.disabled ? column.disabled(result) : false"
                          [text]="result[column.columnDef]"
                          [minLength]="column.min ? column.min(result) : undefined"
@@ -5511,7 +5573,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                          [errorMessages]="getErrorMessageMap(column)"
                          (onChange)="onCellValueChange(result, column, $event);">
               </cva-input>
+              <cva-input *ngSwitchCase="ColumnTypes.INPUT_CURRENCY"
+                         #cellComponentRef
+                         [isFormControl]="false"
+                         [alignText]="getAlign(column)"
+                         [disabled]="column.disabled ? column.disabled(result) : false"
+                         [text]="result[column.columnDef]"
+                         [minLength]="column.min ? column.min(result) : undefined"
+                         [maxLength]="column.max ? column.max(result) : undefined"
+                         [required]="getRequired(column)"
+                         [errorMessages]="getErrorMessageMap(column)"
+                         (onChange)="onCellValueChange(result, column, $event);"
+                         [pattern]="getIsDecimal(column) ? '^\\d{0,15}(\\.\\d*)?$' : '^\\d{0,15}$'"
+                         [formatFunc]="formatFunc">
+              </cva-input>
               <cva-date-picker *ngSwitchCase="ColumnTypes.DATE_PICKER"
+                               #cellComponentRef
                                [value]="result[column.columnDef]"
                                [isFormControl]="false"
                                [minDate]="column.min ? column.min(result) : null"
@@ -5522,6 +5599,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                                (onChange)="onCellValueChange(result, column, $event);">
               </cva-date-picker>
               <cva-multi-select-autocomplete [isFormControl]="false"
+                                             #cellComponentRef
                                              *ngSwitchCase="ColumnTypes.MULTI_SELECT_AUTOCOMPLETE"
                                              class="multiSelectAutocomplete"
                                              [isTree]="column.isTree??false"
@@ -5544,6 +5622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 </mat-checkbox>
               </div>
               <cva-live-searching *ngSwitchCase="ColumnTypes.LIVE_SEARCHING"
+                                  #cellComponentRef
                                   [isFormControl]="false" [required]="getRequired(column)"
                                   [row]="result" [columnDef]="column.columnDef"
                                   [searchFn]="column.searchFn"
@@ -5564,7 +5643,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 [attr.colspan]="buttonColspan">
               <!--                        [fxFlex]="getHeaderButtonWidth(i) + 'px' "-->
               <ng-container *ngIf="TableService.getButtonHeader(button) as btnHeader">
-                <button mat-icon-button
+                <button mat-icon-button type="button"
                         class="{{button.className}}"
                         color="{{$any(btnHeader).color}}"
                         (click)="onClick($any(btnHeader).click, null, null)"
@@ -5590,7 +5669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
             <td mat-cell [ngClass]="button.className"
                 *ngIf="TableService.onDisplayButtonCell(button, cell)"
                 (click)="$event.stopPropagation()">
-              <button mat-icon-button
+              <button mat-icon-button type="button"
                       color="{{button.color}}"
                       [ngClass]="button.className"
                       (click)="onClick(button.click, cell, i)"
@@ -5641,7 +5720,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     type: Self
                 }, {
                     type: Optional
-                }] }], propDecorators: { moduleName: [{
+                }] }], propDecorators: { cellComponents: [{
+                type: ViewChildren,
+                args: ['cellComponentRef']
+            }], moduleName: [{
                 type: Input
             }], columns: [{
                 type: Input
@@ -5714,8 +5796,9 @@ class CvaRangeDatePickerComponent {
     // config: NiceComponentLibraryConfig;
     // Chỉ bằng false khi trong NsSmartTable thôi @@
     isFormControl = true;
-    formControl;
+    formControl = null;
     defaultFromDate; // lưu giá trị khởi tạo ban đầu khi truyền từ bên ngoài vào
+    picker;
     constructor(dateServiceUtil, ngControl, injector) {
         this.dateServiceUtil = dateServiceUtil;
         this.injector = injector;
@@ -5753,6 +5836,9 @@ class CvaRangeDatePickerComponent {
         this.value.toDate = val;
         this.writeValue(this.value);
     }
+    getFormControl() {
+        return this.formControl;
+    }
     ngOnInit() {
         this.callValidator();
     }
@@ -5798,7 +5884,7 @@ class CvaRangeDatePickerComponent {
         if (ngControl && !this.formControl) {
             // Nếu là NsSmartTable thì phải tự new FormControl còn không thì cứ hóng parent FormControl về ^^
             if (this.isFormControl) {
-                this.formControl = ngControl.control ? ngControl.control : undefined;
+                this.formControl = ngControl.control ? ngControl.control : null;
                 if (this.formControl && !this.formControl.value) {
                     this.formControl.setValue(this.value);
                 }
@@ -5926,6 +6012,12 @@ class CvaRangeDatePickerComponent {
             this.onOpenPicker.emit(picker);
         }
     }
+    openRangePicker(event) {
+        if (!this.getDisabled(this.disabledAll) && this.picker) {
+            event.stopPropagation();
+            this.picker.open();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaRangeDatePickerComponent, deps: [{ token: DateUtilService }, { token: i1$2.NgControl, optional: true, self: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaRangeDatePickerComponent, isStandalone: false, selector: "cva-range-date-picker", inputs: { label: "label", placeholderFromDate: "placeholderFromDate", placeholderToDate: "placeholderToDate", disabledAll: "disabledAll", disabledFromDate: "disabledFromDate", value: "value", requiredFromDate: "requiredFromDate", requiredToDate: "requiredToDate", minDate: "minDate", maxDate: "maxDate", errorMessages: "errorMessages", isLabelOutside: "isLabelOutside", isFloatLabel: "isFloatLabel", percentOfLabelOutside: "percentOfLabelOutside", fromDateControlName: "fromDateControlName", toDateControlName: "toDateControlName", isFormControl: "isFormControl" }, outputs: { onChange: "onChange", onOpenPicker: "onOpenPicker" }, providers: [
             { provide: DateAdapter, useClass: NsDateAdapter },
@@ -5933,7 +6025,7 @@ class CvaRangeDatePickerComponent {
                 provide: MAT_DATE_FORMATS,
                 useValue: APP_DATE_FORMATS,
             },
-        ], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: `
     <div class="cva-range-date-picker"
          [ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
          fxLayout="row" fxLayout.lt-sm="row wrap">
@@ -5958,11 +6050,13 @@ class CvaRangeDatePickerComponent {
           <input matStartDate
                  [(ngModel)]="fromDateValue"
                  readonly="readonly"
-                 [placeholder]="placeholderFromDate|translate">
+                 [placeholder]="placeholderFromDate|translate"
+                 (click)="openRangePicker($event)">
           <input matEndDate
                  [(ngModel)]="toDateValue"
                  readOnly="true"
-                 [placeholder]="placeholderToDate|translate">
+                 [placeholder]="placeholderToDate|translate"
+                 (click)="openRangePicker($event)">
         </mat-date-range-input>
 
         <mat-datepicker-toggle matPrefix [for]="picker"
@@ -5978,11 +6072,11 @@ class CvaRangeDatePickerComponent {
 
         <mat-date-range-picker #picker (opened)="openPicker(picker)"></mat-date-range-picker>
         <mat-hint style="color: red" *ngIf="NsValiator.invalid(formControl)">
-          {{ NsValiator.getErrorMessage(formControl, errorMessages) | translate }}
+          {{ NsValiator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValiator.getErrorMessageV1(formControl, errorMessages).params }}
         </mat-hint>
       </mat-form-field>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i5$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i5$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i5$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i5$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaRangeDatePickerComponent, decorators: [{
             type: Component,
@@ -6014,11 +6108,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
           <input matStartDate
                  [(ngModel)]="fromDateValue"
                  readonly="readonly"
-                 [placeholder]="placeholderFromDate|translate">
+                 [placeholder]="placeholderFromDate|translate"
+                 (click)="openRangePicker($event)">
           <input matEndDate
                  [(ngModel)]="toDateValue"
                  readOnly="true"
-                 [placeholder]="placeholderToDate|translate">
+                 [placeholder]="placeholderToDate|translate"
+                 (click)="openRangePicker($event)">
         </mat-date-range-input>
 
         <mat-datepicker-toggle matPrefix [for]="picker"
@@ -6034,7 +6130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
 
         <mat-date-range-picker #picker (opened)="openPicker(picker)"></mat-date-range-picker>
         <mat-hint style="color: red" *ngIf="NsValiator.invalid(formControl)">
-          {{ NsValiator.getErrorMessage(formControl, errorMessages) | translate }}
+          {{ NsValiator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValiator.getErrorMessageV1(formControl, errorMessages).params }}
         </mat-hint>
       </mat-form-field>
     </div>
@@ -6089,6 +6185,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], isFormControl: [{
                 type: Input
+            }], picker: [{
+                type: ViewChild,
+                args: ['picker']
             }] } });
 
 class DragDropDirective {
@@ -6280,7 +6379,7 @@ class CvaMultiUploadComponent {
         <mat-error *ngIf="typeError!==null">{{ typeError + ' ' + ('common.is.not-accept' | translate) }}</mat-error>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: DragDropDirective, selector: "[appDragDrop]", outputs: ["onFileDropped"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: DragDropDirective, selector: "[appDragDrop]", outputs: ["onFileDropped"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiUploadComponent, decorators: [{
             type: Component,
@@ -6697,7 +6796,7 @@ class CvaUploadFileComponent {
                 <mat-error *ngIf="isRectangleError">{{ ('common.error.image.rectangle' | translate) }}</mat-error>
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: DragDropDirective, selector: "[appDragDrop]", outputs: ["onFileDropped"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImgPipe, name: "secure" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: DragDropDirective, selector: "[appDragDrop]", outputs: ["onFileDropped"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImgPipe, name: "secure" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaUploadFileComponent, decorators: [{
             type: Component,
@@ -6883,7 +6982,7 @@ class CvaMultiUploadImgComponent {
                 ></cva-upload-file>
             </ng-container>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "component", type: CvaUploadFileComponent, selector: "cva-upload-file", inputs: ["files", "maxSize", "height", "width", "isSquareImg", "isRectangleImg", "accept", "label", "placeholder", "required", "disabled", "percentOfLabelOutside", "value", "defaultUrl"], outputs: ["onFileChange", "onFileDelete"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "component", type: CvaUploadFileComponent, selector: "cva-upload-file", inputs: ["files", "maxSize", "height", "width", "isSquareImg", "isRectangleImg", "accept", "label", "placeholder", "required", "disabled", "percentOfLabelOutside", "value", "defaultUrl"], outputs: ["onFileChange", "onFileDelete"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiUploadImgComponent, decorators: [{
             type: Component,
@@ -7252,7 +7351,7 @@ class CvaTreeComponent {
               </mat-tree>
           </div>
       </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i6$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i6$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i6$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i6$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i6$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CvaMultiSelectAutocomplete, selector: "cva-multi-select-autocomplete", inputs: ["placeholder", "label", "hint", "value", "options", "disabled", "errorMessages", "multiple", "required", "isTree", "treeSymbol", "sizeOfItemsInListByPixels", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "isFormControl"], outputs: ["selectionChange", "selectedOptionDataChange"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i6$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i6$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i6$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i6$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i6$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CvaMultiSelectAutocomplete, selector: "cva-multi-select-autocomplete", inputs: ["placeholder", "label", "hint", "value", "options", "disabled", "errorMessages", "multiple", "required", "isTree", "treeSymbol", "sizeOfItemsInListByPixels", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "isFormControl"], outputs: ["selectionChange", "selectedOptionDataChange"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaTreeComponent, decorators: [{
             type: Component,
@@ -7473,7 +7572,7 @@ class CvaRadiobuttonComponent {
         <mat-hint align="start" *ngIf="NsValidator.invalid(control)">{{NsValidator.getErrorMessage(control, errorMessages) | translate}}</mat-hint>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaRadiobuttonComponent, decorators: [{
             type: Component,
@@ -7646,7 +7745,7 @@ class CvaFlatTreeNodeLeftComponent {
         </mat-checkbox>
       </ng-container>
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i8$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaFlatTreeNodeLeftComponent, decorators: [{
             type: Component,
@@ -7769,7 +7868,7 @@ class CvaFlatTreeNodeRightComponent {
         </div>
       </ng-container>
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaFlatTreeNodeRightComponent, decorators: [{
             type: Component,
@@ -8500,7 +8599,7 @@ class CvaFlatTreeComponent {
         </mat-hint>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.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: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i10.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i10.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i10.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: CvaFlatTreeNodeLeftComponent, selector: "cva-flat-tree-node-left", inputs: ["treeControl", "isHideCheckbox", "node", "nodeClicked"], outputs: ["toggle", "onParentNodeClick", "onLeafNodeClick", "ngModelParentChange", "ngModelLeafChange"] }, { kind: "component", type: CvaFlatTreeNodeRightComponent, selector: "cva-flat-tree-node-right", inputs: ["treeControl", "node", "isView"], outputs: ["toggle", "deSelectLeafNode", "deSelectParentNode"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.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: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i10.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i10.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i10.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: CvaFlatTreeNodeLeftComponent, selector: "cva-flat-tree-node-left", inputs: ["treeControl", "isHideCheckbox", "node", "nodeClicked"], outputs: ["toggle", "onParentNodeClick", "onLeafNodeClick", "ngModelParentChange", "ngModelLeafChange"] }, { kind: "component", type: CvaFlatTreeNodeRightComponent, selector: "cva-flat-tree-node-right", inputs: ["treeControl", "node", "isView"], outputs: ["toggle", "deSelectLeafNode", "deSelectParentNode"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaFlatTreeComponent, decorators: [{
             type: Component,
@@ -9043,7 +9142,7 @@ class CvaQuillEditorComponent {
         </mat-hint>
       </div>
     </div>
-  `, isInline: true, styles: [".cva-quill-editor{margin-bottom:1rem}.cva-quill-editor .required-label-outside{color:red}.cva-quill-editor .ql-container.ql-snow{height:100px;overflow-y:auto}.cva-quill-editor #counter{border:1px solid #ccc;border-width:0px 1px 1px 1px;color:#aaa;padding:5px 15px;text-align:right}.cva-quill-editor quill-editor{margin-bottom:0!important;word-break:break-word}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i4$4.QuillEditorComponent, selector: "quill-editor" }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i9.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".cva-quill-editor{margin-bottom:1rem}.cva-quill-editor .required-label-outside{color:red}.cva-quill-editor .ql-container.ql-snow{height:100px;overflow-y:auto}.cva-quill-editor #counter{border:1px solid #ccc;border-width:0px 1px 1px 1px;color:#aaa;padding:5px 15px;text-align:right}.cva-quill-editor quill-editor{margin-bottom:0!important;word-break:break-word}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i4$3.QuillEditorComponent, selector: "quill-editor" }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i9.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaQuillEditorComponent, decorators: [{
             type: Component,
@@ -9472,7 +9571,7 @@ class NiceComponentLibraryModule {
             CvaLiveSearchingComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
-            AngularMaterialModule, i1$4.RouterModule, i1.TranslateModule, i4$4.QuillModule, FlexLayoutModule], exports: [CvaTableComponent,
+            AngularMaterialModule, i1$4.RouterModule, i1.TranslateModule, i4$3.QuillModule, FlexLayoutModule], exports: [CvaTableComponent,
             CvaSmartTableComponent,
             CvaInputComponent,
             CvaCounterInputComponent,
@@ -9598,5 +9697,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionTypeEnum, AlignEnum, ApiService, AuthoritiesResolverService, AuthoritiesService, Authority, BaseAddEditComponent, BaseModel, BaseSearchComponent, BaseStatusEnum, BaseTableComponent, BreadCrumbModel, ButtonClickEvent, ButtonModel, CheckboxModel, ColumnModel, ColumnTypeEnum, CustomDialogDataConfigModel, CvaBreadcrumbComponent, CvaCounterInputComponent, CvaCustomDialogComponent, CvaDatePickerComponent, CvaDialogImportFileComponent, CvaFlatTreeComponent, CvaFlatTreeNodeLeftComponent, CvaFlatTreeNodeRightComponent, CvaInputComponent, CvaLiveSearchingComponent, CvaLoaderComponent, CvaMultiSelectAutocomplete, CvaMultiUploadComponent, CvaMultiUploadImgComponent, CvaQuillEditorComponent, CvaRadiobuttonComponent, CvaRangeDatePickerComponent, CvaSmartTableComponent, CvaTableComponent, CvaTreeComponent, CvaUploadFileComponent, DateUtilService, DialogImportFileConfigModel, DialogTypeEnum, DragDropDirective, FileTypeEnum, FlatTreeConfigModel, FlatTreeModel, FlatTreeNodeModel, FormStateService, FormatInputDirective, IconTypeEnum, InjectTokenNextSolutionsConfig, JsogHttpInterceptor, LoaderInterceptor, LoaderService, MenuModel, MultiTranslateHttpLoader, NavigatorModel, NiceComponentLibraryModule, OAuth2AuthenticationDto, PatternDirective, PermissionModel, Principal, RangeDatePickerModel, RoleModel, SecureImgPipe, SelectModel, SingletonTranslateService, StylePaginatorDirective, TableFooterModel, TablePagingRequestModel, TablePagingResponseModel, TableService, UIState, UploadModel, UtilsService, ValidatorService };
+export { ActionTypeEnum, AlignEnum, ApiService, AuthoritiesResolverService, AuthoritiesService, Authority, BaseAddEditComponent, BaseModel, BaseSearchComponent, BaseStatusEnum, BaseTableComponent, BreadCrumbModel, ButtonClickEvent, ButtonModel, CheckboxModel, ColumnModel, ColumnTypeEnum, CustomDialogDataConfigModel, CvaBreadcrumbComponent, CvaCounterInputComponent, CvaCustomDialogComponent, CvaDatePickerComponent, CvaDialogImportFileComponent, CvaFlatTreeComponent, CvaFlatTreeNodeLeftComponent, CvaFlatTreeNodeRightComponent, CvaInputComponent, CvaLiveSearchingComponent, CvaLoaderComponent, CvaMultiSelectAutocomplete, CvaMultiUploadComponent, CvaMultiUploadImgComponent, CvaQuillEditorComponent, CvaRadiobuttonComponent, CvaRangeDatePickerComponent, CvaSmartTableComponent, CvaTableComponent, CvaTreeComponent, CvaUploadFileComponent, DateUtilService, DialogImportFileConfigModel, DialogTypeEnum, DragDropDirective, FileTypeEnum, FlatTreeConfigModel, FlatTreeModel, FlatTreeNodeModel, FormStateService, FormatInputDirective, IconTypeEnum, InjectTokenNextSolutionsConfig, JsogHttpInterceptor, LoaderInterceptor, LoaderService, MenuModel, MultiTranslateHttpLoader, NavigatorModel, NiceComponentLibraryModule, NumericInputFormat, OAuth2AuthenticationDto, PatternDirective, PermissionModel, Principal, RangeDatePickerModel, RoleModel, SecureImgPipe, SelectModel, SingletonTranslateService, StylePaginatorDirective, TableFooterModel, TablePagingRequestModel, TablePagingResponseModel, TableService, UIState, UploadModel, UtilsService, ValidatorService };
 //# sourceMappingURL=c10t-nice-component-library.mjs.map