@c10t/nice-component-library 0.0.21-e → 0.0.21-g

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

@@ -1578,7 +1578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
 
 class ValidatorService {
     static invalid(control) {
-        return !!control && control.dirty ? control.invalid : false;
+        return !!control ? (control?.invalid || !!control?.errors) : false;
     }
     static getErrorMessage(control, errorMessages) {
         if (!control) {
@@ -1654,13 +1654,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));
             };
@@ -1673,12 +1673,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) {
@@ -1686,8 +1680,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)) {
@@ -1699,12 +1691,8 @@ class ValidatorService {
             return null;
         };
         validationFns.push(validation);
-        // }
         return validationFns;
     }
-    // customMinDateValidator(): ValidatorFn {
-    //     return this.customMinDateValidatorControl;
-    // }
     static customMinDateValidatorControl(value, minDate) {
         if (!minDate || !value) {
             return null;
@@ -1715,9 +1703,6 @@ class ValidatorService {
         }
         return null;
     }
-    // customMaxDateValidator(): ValidatorFn {
-    //     return this.customMaxDateValidatorControl;
-    // }
     static customMaxDateValidatorControl(value, maxDate) {
         if (!maxDate || !value) {
             return null;
@@ -1747,96 +1732,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' });
@@ -2006,7 +2008,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>
 
@@ -2062,7 +2064,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>
 
@@ -3327,7 +3329,7 @@ class CvaInputComponent {
     // Chỉ bằng false khi trong NsSmartTable thôi nhé @@
     isFormControl = true;
     formatFunc;
-    control = undefined;
+    formControl = undefined;
     config;
     constructor(injector, ngControl) {
         this.injector = injector;
@@ -3346,42 +3348,34 @@ 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();
-        //     }
-    }
     ngOnInit() {
         this.callValidator();
     }
     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 : undefined;
             }
             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,
@@ -3390,13 +3384,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 = (_) => {
@@ -3452,25 +3446,25 @@ class CvaInputComponent {
     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"
@@ -3508,9 +3502,9 @@ class CvaInputComponent {
                 type="button">
           <mat-icon>clear</mat-icon>
         </button>
-        <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>
 
@@ -3535,25 +3529,25 @@ 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"
@@ -3591,9 +3585,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type="button">
           <mat-icon>clear</mat-icon>
         </button>
-        <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>
 
@@ -3772,6 +3766,7 @@ class CvaDatePickerComponent {
     // Chỉ bằng false khi trong NsSmartTable thôi @@
     isFormControl = true;
     formControl;
+    datepicker;
     constructor(dateServiceUtil, ngControl, injector) {
         this.dateServiceUtil = dateServiceUtil;
         this.injector = injector;
@@ -3912,6 +3907,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 },
@@ -3919,7 +3920,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}"
@@ -3945,7 +3946,8 @@ class CvaDatePickerComponent {
                [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">
@@ -3953,7 +3955,7 @@ class CvaDatePickerComponent {
         </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>
@@ -4002,7 +4004,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                [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">
@@ -4010,7 +4013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
         </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>
@@ -4065,6 +4068,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], isFormControl: [{
                 type: Input
+            }], datepicker: [{
+                type: ViewChild,
+                args: ['xDatepicker']
             }] } });
 
 class CvaMultiSelectAutocomplete {
@@ -4445,7 +4451,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()">
@@ -4542,7 +4548,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()">
@@ -4626,7 +4632,7 @@ class CvaLiveSearchingComponent {
     isFormControl = true;
     row;
     columnDef;
-    control = undefined;
+    formControl = undefined;
     textControl = new FormControl('');
     filteredOptions = [];
     selected;
@@ -4654,37 +4660,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 : undefined;
             }
             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 = (_) => {
@@ -4709,20 +4715,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) {
@@ -4732,8 +4731,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) {
@@ -4762,22 +4762,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');
@@ -4785,23 +4785,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"
@@ -4824,9 +4824,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>
 
@@ -4850,23 +4850,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"
@@ -4889,9 +4889,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>
 
@@ -5792,6 +5792,7 @@ class CvaRangeDatePickerComponent {
     isFormControl = true;
     formControl;
     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;
@@ -6002,6 +6003,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 },
@@ -6009,7 +6016,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">
@@ -6034,11 +6041,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"
@@ -6054,7 +6063,7 @@ 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>
@@ -6090,11 +6099,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"
@@ -6110,7 +6121,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>
@@ -6165,6 +6176,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], isFormControl: [{
                 type: Input
+            }], picker: [{
+                type: ViewChild,
+                args: ['picker']
             }] } });
 
 class DragDropDirective {