@c10t/nice-component-library 0.0.20-f → 0.0.21

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

@@ -1870,8 +1870,10 @@ class CvaCounterInputComponent {
     onEnter = new EventEmitter();
     // Cái này là để gắn khi nó là FormControl trong 1 FormGroup
     formControl;
+    config;
     constructor(injector, ngControl) {
         this.injector = injector;
+        this.config = injector.get(InjectTokenNextSolutionsConfig);
         if (ngControl) {
             // ngControl là parent FormControl
             // Hành động này thay cho provide: NG_VALUE_ACCESSOR và gắn ControlValueAccessor này vào parent FormControl
@@ -1965,6 +1967,9 @@ class CvaCounterInputComponent {
     registerOnTouched() {
         /*NON-EMPTY FOR COMPILE*/
     }
+    isShowControl() {
+        return !this.disabled || (this.disabled && this.config && this.config.STYLE_DISABLE === 'CONTROL');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaCounterInputComponent, 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: 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-->
@@ -1980,18 +1985,19 @@ class CvaCounterInputComponent {
           </div>
         </div>
       </mat-label>
-      <mat-form-field appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
+      <mat-form-field *ngIf="isShowControl()"
+                      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>
         <div class="input-area">
           <input matInput type="number" [(ngModel)]="counterValue" #nsCounterInput="ngModel"
-                 style="text-align:{{alignNumber}}"
+                 [style.text-align]="alignNumber"
                  [disabled]="disabled" [required]="required"
                  (keydown.enter)="onEnter.emit()"
                  [placeholder]="placeholder|translate"
                  autocomplete="off"
-                 pattern="{{isDecimal ? '^[^-]?[0-9]+[.]?[0-9]*$' : '^[0-9]*$'}}" min="{{min}}" max="{{max}}" />
+                 [pattern]="isDecimal ? '^[^-]?[0-9]+[.]?[0-9]*$' : '^[0-9]*$'" min="{{min}}" max="{{max}}" />
           <span *ngIf="!!suffixText" class="input-suffix"
                 matSuffix>{{ suffixText }}</span>
         </div>
@@ -2002,6 +2008,17 @@ class CvaCounterInputComponent {
           {{ NsValidator.getErrorMessage(formControl, errorMessages) | translate }}
         </mat-hint>
       </mat-form-field>
+
+      <ng-container *ngIf="!isShowControl()">
+        <div class="cva-style-disable-text">
+          <mat-label *ngIf="!isLabelOutside && isFloatLabel">
+            {{ (label ? label : placeholder) | translate }}
+          </mat-label>
+          <div [title]="counterValue">
+            {{ counterValue }}
+          </div>
+        </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" }] });
 }
@@ -2024,18 +2041,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
           </div>
         </div>
       </mat-label>
-      <mat-form-field appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
+      <mat-form-field *ngIf="isShowControl()"
+                      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>
         <div class="input-area">
           <input matInput type="number" [(ngModel)]="counterValue" #nsCounterInput="ngModel"
-                 style="text-align:{{alignNumber}}"
+                 [style.text-align]="alignNumber"
                  [disabled]="disabled" [required]="required"
                  (keydown.enter)="onEnter.emit()"
                  [placeholder]="placeholder|translate"
                  autocomplete="off"
-                 pattern="{{isDecimal ? '^[^-]?[0-9]+[.]?[0-9]*$' : '^[0-9]*$'}}" min="{{min}}" max="{{max}}" />
+                 [pattern]="isDecimal ? '^[^-]?[0-9]+[.]?[0-9]*$' : '^[0-9]*$'" min="{{min}}" max="{{max}}" />
           <span *ngIf="!!suffixText" class="input-suffix"
                 matSuffix>{{ suffixText }}</span>
         </div>
@@ -2046,6 +2064,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
           {{ NsValidator.getErrorMessage(formControl, errorMessages) | translate }}
         </mat-hint>
       </mat-form-field>
+
+      <ng-container *ngIf="!isShowControl()">
+        <div class="cva-style-disable-text">
+          <mat-label *ngIf="!isLabelOutside && isFloatLabel">
+            {{ (label ? label : placeholder) | translate }}
+          </mat-label>
+          <div [title]="counterValue">
+            {{ counterValue }}
+          </div>
+        </div>
+      </ng-container>
     </div>
   `,
                 }]
@@ -3251,7 +3280,6 @@ class CvaInputComponent {
     text = '';
     type = 'text';
     pattern = null;
-    readonly = false;
     errorMessages = new Map();
     onChange = new EventEmitter();
     multiline = false;
@@ -3270,16 +3298,24 @@ class CvaInputComponent {
     isFormControl = true;
     formatFunc;
     control = undefined;
-    get NsValidator() {
-        return ValidatorService;
-    }
+    config;
     constructor(injector, ngControl) {
         this.injector = injector;
+        this.config = injector.get(InjectTokenNextSolutionsConfig);
         if (ngControl) {
             // Hành động này thay cho provide: NG_VALUE_ACCESSOR và gắn ControlValueAccessor này vào parent FormControl
             ngControl.valueAccessor = this;
         }
     }
+    get NsValidator() {
+        return ValidatorService;
+    }
+    get textValue() {
+        return this.text;
+    }
+    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);
@@ -3291,12 +3327,6 @@ class CvaInputComponent {
     ngOnInit() {
         this.callValidator();
     }
-    get textValue() {
-        return this.text;
-    }
-    set textValue(val) {
-        this.writeValue(val);
-    }
     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
@@ -3382,64 +3412,80 @@ class CvaInputComponent {
             this.onFocusStatus = false;
         }
     }
+    isShowControl() {
+        return !this.disabled || (this.disabled && this.config && this.config.STYLE_DISABLE === 'CONTROL');
+    }
     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", readonly: "readonly", 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: `
-      <!-- css labelOutside trong base.theme-->
-      <div class="cva-input"
-           [ngClass]="{'labelOutside': !!isLabelOutside,
+    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: `
+    <!-- css labelOutside trong base.theme-->
+    <div class="cva-input"
+         [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>
-                </div>
-              </div>
+         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>
+          </div>
+        </div>
+      </mat-label>
+      <mat-form-field *ngIf="isShowControl()"
+                      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}">
+          {{ (label ? label : placeholder) | translate }}
+        </mat-label>
+        <input matInput placeholder="{{placeholder|translate}}" [type]="type" [(ngModel)]="textValue"
+               [pattern]="pattern"
+               minLength="{{minLength ? minLength : 0}}"
+               maxLength="{{maxLength ? maxLength : 524288}}"
+               [required]="required"
+               [disabled]="disabled"
+               readonly="{{disabled}}"
+               [inputDirective]="formatFunc"
+               *ngIf="!multiline"
+               (focus)="onFocus()"
+               (blur)="onBlur()"
+               pattern-directive
+               [regPattern]="patternFilter"
+               autocomplete="off">
+        <textarea matInput [(ngModel)]="textValue" placeholder="{{placeholder|translate}}"
+                  [pattern]="pattern"
+                  minLength="{{minLength ? minLength : 0}}"
+                  maxLength="{{maxLength ? maxLength : 524288}}"
+                  [required]="required"
+                  [disabled]="disabled"
+                  readonly="{{disabled}}"
+                  (focus)="onFocus()"
+                  (blur)="onBlur()"
+                  *ngIf="multiline"
+                  cdkTextareaAutosize cdkAutosizeMinRows="3"
+                  autocomplete="off"></textarea>
+        <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 }}
+        </mat-hint>
+      </mat-form-field>
+
+      <ng-container *ngIf="!isShowControl()">
+        <div class="cva-style-disable-text">
+          <mat-label *ngIf="!isLabelOutside && isFloatLabel">
+            {{ (label ? label : placeholder) | translate }}
           </mat-label>
-          <mat-form-field 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}">
-                  {{(label ? label : placeholder) | translate}}
-              </mat-label>
-              <input matInput placeholder="{{placeholder|translate}}" [type]="type" [(ngModel)]="textValue"
-                     [pattern]="pattern"
-                     minLength="{{minLength ? minLength : 0}}"
-                     maxLength="{{maxLength ? maxLength : 524288}}"
-                     [required]="required"
-                     [disabled]="disabled"
-                     readonly="{{readonly}}"
-                     [inputDirective]="formatFunc"
-                     *ngIf="!multiline"
-                     (focus)="onFocus()"
-                     (blur)="onBlur()"
-                     pattern-directive
-                     [regPattern]="patternFilter"
-                     autocomplete="off">
-              <textarea matInput [(ngModel)]="textValue" placeholder="{{placeholder|translate}}"
-                        [pattern]="pattern"
-                        minLength="{{minLength ? minLength : 0}}"
-                        maxLength="{{maxLength ? maxLength : 524288}}"
-                        [required]="required"
-                        [disabled]="disabled"
-                        readonly="{{readonly}}"
-                        (focus)="onFocus()"
-                        (blur)="onBlur()"
-                        *ngIf="multiline"
-                        cdkTextareaAutosize cdkAutosizeMinRows="3"
-                        autocomplete="off"></textarea>
-              <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}}
-              </mat-hint>
-          </mat-form-field>
-      </div>
+          <div [title]="text ? text : ''">
+            {{ text ? text : '' }}
+          </div>
+        </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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaInputComponent, decorators: [{
@@ -3448,62 +3494,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     selector: 'cva-input',
                     standalone: false,
                     template: `
-      <!-- css labelOutside trong base.theme-->
-      <div class="cva-input"
-           [ngClass]="{'labelOutside': !!isLabelOutside,
+    <!-- css labelOutside trong base.theme-->
+    <div class="cva-input"
+         [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>
-                </div>
-              </div>
+         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>
+          </div>
+        </div>
+      </mat-label>
+      <mat-form-field *ngIf="isShowControl()"
+                      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}">
+          {{ (label ? label : placeholder) | translate }}
+        </mat-label>
+        <input matInput placeholder="{{placeholder|translate}}" [type]="type" [(ngModel)]="textValue"
+               [pattern]="pattern"
+               minLength="{{minLength ? minLength : 0}}"
+               maxLength="{{maxLength ? maxLength : 524288}}"
+               [required]="required"
+               [disabled]="disabled"
+               readonly="{{disabled}}"
+               [inputDirective]="formatFunc"
+               *ngIf="!multiline"
+               (focus)="onFocus()"
+               (blur)="onBlur()"
+               pattern-directive
+               [regPattern]="patternFilter"
+               autocomplete="off">
+        <textarea matInput [(ngModel)]="textValue" placeholder="{{placeholder|translate}}"
+                  [pattern]="pattern"
+                  minLength="{{minLength ? minLength : 0}}"
+                  maxLength="{{maxLength ? maxLength : 524288}}"
+                  [required]="required"
+                  [disabled]="disabled"
+                  readonly="{{disabled}}"
+                  (focus)="onFocus()"
+                  (blur)="onBlur()"
+                  *ngIf="multiline"
+                  cdkTextareaAutosize cdkAutosizeMinRows="3"
+                  autocomplete="off"></textarea>
+        <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 }}
+        </mat-hint>
+      </mat-form-field>
+
+      <ng-container *ngIf="!isShowControl()">
+        <div class="cva-style-disable-text">
+          <mat-label *ngIf="!isLabelOutside && isFloatLabel">
+            {{ (label ? label : placeholder) | translate }}
           </mat-label>
-          <mat-form-field 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}">
-                  {{(label ? label : placeholder) | translate}}
-              </mat-label>
-              <input matInput placeholder="{{placeholder|translate}}" [type]="type" [(ngModel)]="textValue"
-                     [pattern]="pattern"
-                     minLength="{{minLength ? minLength : 0}}"
-                     maxLength="{{maxLength ? maxLength : 524288}}"
-                     [required]="required"
-                     [disabled]="disabled"
-                     readonly="{{readonly}}"
-                     [inputDirective]="formatFunc"
-                     *ngIf="!multiline"
-                     (focus)="onFocus()"
-                     (blur)="onBlur()"
-                     pattern-directive
-                     [regPattern]="patternFilter"
-                     autocomplete="off">
-              <textarea matInput [(ngModel)]="textValue" placeholder="{{placeholder|translate}}"
-                        [pattern]="pattern"
-                        minLength="{{minLength ? minLength : 0}}"
-                        maxLength="{{maxLength ? maxLength : 524288}}"
-                        [required]="required"
-                        [disabled]="disabled"
-                        readonly="{{readonly}}"
-                        (focus)="onFocus()"
-                        (blur)="onBlur()"
-                        *ngIf="multiline"
-                        cdkTextareaAutosize cdkAutosizeMinRows="3"
-                        autocomplete="off"></textarea>
-              <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}}
-              </mat-hint>
-          </mat-form-field>
-      </div>
+          <div [title]="text ? text : ''">
+            {{ text ? text : '' }}
+          </div>
+        </div>
+      </ng-container>
+    </div>
   `,
                 }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$2.NgControl, decorators: [{
@@ -3528,8 +3587,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], pattern: [{
                 type: Input
-            }], readonly: [{
-                type: Input
             }], errorMessages: [{
                 type: Input
             }], onChange: [{
@@ -3668,9 +3725,6 @@ class CvaDatePickerComponent {
     // Chỉ bằng false khi trong NsSmartTable thôi @@
     isFormControl = true;
     formControl;
-    get NsValidator() {
-        return ValidatorService;
-    }
     constructor(dateServiceUtil, ngControl, injector) {
         this.dateServiceUtil = dateServiceUtil;
         this.injector = injector;
@@ -3680,8 +3734,25 @@ class CvaDatePickerComponent {
             ngControl.valueAccessor = this;
         }
     }
+    get NsValidator() {
+        return ValidatorService;
+    }
+    get datepickerValue() {
+        if (this.value instanceof Date) {
+            return this.value;
+        }
+        if (this.isString(this.value) && this.value.indexOf('Z') >= 0) {
+            return this.value.replace(' ', 'T');
+        }
+        return null;
+    }
+    set datepickerValue(val) {
+        this.writeValue(val);
+    }
     ngOnInit() {
-        this.callValidator();
+        if (this.isShowControl()) {
+            this.callValidator();
+        }
     }
     callValidator() {
         const ngControl = this.injector.get(NgControl);
@@ -3743,18 +3814,6 @@ class CvaDatePickerComponent {
     checkRequired(isRequired) {
         return isRequired ? typeof (isRequired) === 'boolean' ? isRequired : isRequired() : false;
     }
-    get datepickerValue() {
-        if (this.value instanceof Date) {
-            return this.value;
-        }
-        if (this.isString(this.value) && this.value.indexOf('Z') >= 0) {
-            return this.value.replace(' ', 'T');
-        }
-        return null;
-    }
-    set datepickerValue(val) {
-        this.writeValue(val);
-    }
     propagateChange = (_) => {
         /*NON-EMPTY FOR COMPILE*/
     };
@@ -3779,9 +3838,11 @@ class CvaDatePickerComponent {
         if (out) {
             this.title = this.dateServiceUtil.convertDateToDisplayGMT0(out);
         }
-        this.propagateChange(out);
-        this.callValidator();
-        this.onChange.emit(out ? out : '');
+        if (this.isShowControl()) {
+            this.propagateChange(out);
+            this.callValidator();
+            this.onChange.emit(out ? out : '');
+        }
     }
     onClear() {
         this.writeValue(null);
@@ -3801,6 +3862,9 @@ class CvaDatePickerComponent {
     isString(inputValue) {
         return typeof inputValue === 'string' || inputValue instanceof String;
     }
+    isShowControl() {
+        return !this.disabled || (this.disabled && this.config && this.config.STYLE_DISABLE === 'CONTROL');
+    }
     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 },
@@ -3822,7 +3886,8 @@ class CvaDatePickerComponent {
           </div>
         </div>
       </mat-label>
-      <mat-form-field appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
+      <mat-form-field *ngIf="isShowControl()"
+                      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>
@@ -3845,6 +3910,17 @@ class CvaDatePickerComponent {
         </mat-hint>
 
       </mat-form-field>
+
+      <ng-container *ngIf="!isShowControl()">
+        <div class="cva-style-disable-text">
+          <mat-label *ngIf="!isLabelOutside && isFloatLabel">
+            {{ (label ? label : placeholder) | translate }}
+          </mat-label>
+          <div [title]="title ? title : ''">
+            {{ title ? title : '' }}
+          </div>
+        </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" }] });
 }
@@ -3867,7 +3943,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
           </div>
         </div>
       </mat-label>
-      <mat-form-field appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
+      <mat-form-field *ngIf="isShowControl()"
+                      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>
@@ -3890,6 +3967,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
         </mat-hint>
 
       </mat-form-field>
+
+      <ng-container *ngIf="!isShowControl()">
+        <div class="cva-style-disable-text">
+          <mat-label *ngIf="!isLabelOutside && isFloatLabel">
+            {{ (label ? label : placeholder) | translate }}
+          </mat-label>
+          <div [title]="title ? title : ''">
+            {{ title ? title : '' }}
+          </div>
+        </div>
+      </ng-container>
     </div>
   `,
                     providers: [
@@ -3963,9 +4051,11 @@ class CvaMultiSelectAutocomplete {
     selectAllChecked = false;
     labelCount = 1;
     cdkVirtualScrollViewPort;
+    config;
     constructor(translateService, injector, ngControl) {
         this.translateService = translateService;
         this.injector = injector;
+        this.config = injector.get(InjectTokenNextSolutionsConfig);
         if (ngControl) {
             ngControl.valueAccessor = this;
         }
@@ -3974,6 +4064,10 @@ class CvaMultiSelectAutocomplete {
     get displayString() {
         return this._displayString;
     }
+    _titleString = '';
+    get titleString() {
+        return this._titleString;
+    }
     get NsValidator() {
         return ValidatorService;
     }
@@ -4036,7 +4130,9 @@ class CvaMultiSelectAutocomplete {
             }
             this.selectedOptionDataChange.emit(this.valueOptionRef);
         }
-        this._displayString = this.onDisplayString();
+        const { _displayString, _titleString } = this.onDisplayString();
+        this._displayString = _displayString;
+        this._titleString = _titleString;
     }
     registerOnChange(fn) {
         this.propagateChange = fn;
@@ -4096,6 +4192,7 @@ class CvaMultiSelectAutocomplete {
     }
     onDisplayString() {
         let _displayString = '';
+        const titles = [];
         if (this.value !== null && this.value !== undefined && this.value !== ''
             && (!this.multiple || this.value.length > 0)) {
             let displayOptions = [];
@@ -4116,6 +4213,12 @@ class CvaMultiSelectAutocomplete {
                         _displayString += ` (+${this.value.length - this.labelCount} ${strOthers})`;
                     }
                 }
+                for (let i = 0; i < this.value.length; i++) {
+                    const displayOption = this.options.filter(option => option.value === this.value[i])[0];
+                    if (displayOption) {
+                        titles.push(this.isTree ? this.onDisplayTreeData(displayOption.displayValue, true) : displayOption.displayValue);
+                    }
+                }
             }
             else {
                 // Single select display
@@ -4125,9 +4228,11 @@ class CvaMultiSelectAutocomplete {
                         ? this.onDisplayTreeData(displayOptions[0].displayValue, true)
                         : displayOptions[0].displayValue;
                 }
+                titles.push(_displayString);
             }
         }
-        return _displayString;
+        const _titleString = titles.join(', ');
+        return { _displayString, _titleString };
     }
     /* Nếu không dùng virtual scroll thì mat-options trong mat-select được load hết
      * Khi toàn bộ mat-options được load hết thì mat-select-trigger sẽ lưu trữ được các giá trị đã chọn
@@ -4213,6 +4318,9 @@ class CvaMultiSelectAutocomplete {
         const height = numberOfItems * this.sizeOfItemsInListByPixels;
         return height > 200 ? 200 : height;
     }
+    isShowControl() {
+        return !this.disabled || (this.disabled && this.config && this.config.STYLE_DISABLE === 'CONTROL');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiSelectAutocomplete, deps: [{ token: i1.TranslateService }, { 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: CvaMultiSelectAutocomplete, isStandalone: false, selector: "cva-multi-select-autocomplete", inputs: { placeholder: "placeholder", label: "label", hint: "hint", value: "value", options: "options", disabled: "disabled", errorMessages: "errorMessages", multiple: "multiple", required: "required", isTree: "isTree", treeSymbol: "treeSymbol", sizeOfItemsInListByPixels: "sizeOfItemsInListByPixels", isLabelOutside: "isLabelOutside", isFloatLabel: "isFloatLabel", percentOfLabelOutside: "percentOfLabelOutside", isFormControl: "isFormControl" }, outputs: { selectionChange: "selectionChange", selectedOptionDataChange: "selectedOptionDataChange" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "cdkVirtualScrollViewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <!-- css labelOutside trong base.theme-->
@@ -4228,7 +4336,8 @@ class CvaMultiSelectAutocomplete {
           </div>
         </div>
       </mat-label>
-      <mat-form-field appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
+      <mat-form-field *ngIf="isShowControl()"
+                      appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
                       [hideRequiredMarker]="!isFloatLabel"
                       fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
         <mat-label
@@ -4255,7 +4364,7 @@ class CvaMultiSelectAutocomplete {
               </button>
             </div>
           </div>
-          <mat-select-trigger title="{{displayString|translate}}">
+          <mat-select-trigger title="{{titleString|translate}}">
             {{ displayString | translate }}
           </mat-select-trigger>
           <cdk-virtual-scroll-viewport [itemSize]="getItemSize()"
@@ -4292,6 +4401,16 @@ class CvaMultiSelectAutocomplete {
           {{ NsValidator.getErrorMessage(formControl, errorMessages) | translate }}
         </mat-hint>
       </mat-form-field>
+      <ng-container *ngIf="!isShowControl()">
+        <div class="cva-style-disable-text">
+          <mat-label *ngIf="!isLabelOutside && isFloatLabel">
+            {{ (label ? label : placeholder) | translate }}
+          </mat-label>
+          <div [title]="titleString | translate">
+            {{ displayString | translate }}
+          </div>
+        </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" }] });
 }
@@ -4314,7 +4433,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
           </div>
         </div>
       </mat-label>
-      <mat-form-field appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
+      <mat-form-field *ngIf="isShowControl()"
+                      appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
                       [hideRequiredMarker]="!isFloatLabel"
                       fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
         <mat-label
@@ -4341,7 +4461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
               </button>
             </div>
           </div>
-          <mat-select-trigger title="{{displayString|translate}}">
+          <mat-select-trigger title="{{titleString|translate}}">
             {{ displayString | translate }}
           </mat-select-trigger>
           <cdk-virtual-scroll-viewport [itemSize]="getItemSize()"
@@ -4378,6 +4498,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
           {{ NsValidator.getErrorMessage(formControl, errorMessages) | translate }}
         </mat-hint>
       </mat-form-field>
+      <ng-container *ngIf="!isShowControl()">
+        <div class="cva-style-disable-text">
+          <mat-label *ngIf="!isLabelOutside && isFloatLabel">
+            {{ (label ? label : placeholder) | translate }}
+          </mat-label>
+          <div [title]="titleString | translate">
+            {{ displayString | translate }}
+          </div>
+        </div>
+      </ng-container>
     </div>
   `,
                 }]
@@ -4436,7 +4566,6 @@ class CvaLiveSearchingComponent {
     hint = '';
     required = false;
     disabled = false;
-    readonly = false;
     errorMessages = new Map();
     isLabelOutside = false;
     isFloatLabel = true;
@@ -4455,9 +4584,11 @@ class CvaLiveSearchingComponent {
     filteredOptions = [];
     selected;
     loading = false;
+    config;
     searchSub;
     constructor(injector, ngControl) {
         this.injector = injector;
+        this.config = injector.get(InjectTokenNextSolutionsConfig);
         if (ngControl) {
             // Hành động này thay cho provide: NG_VALUE_ACCESSOR và gắn ControlValueAccessor này vào parent FormControl
             ngControl.valueAccessor = this;
@@ -4601,8 +4732,11 @@ class CvaLiveSearchingComponent {
     onClear() {
         this.writeValue(null);
     }
+    isShowControl() {
+        return !this.disabled || (this.disabled && this.config && this.config.STYLE_DISABLE === 'CONTROL');
+    }
     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", readonly: "readonly", 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: `
+    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}"
@@ -4616,7 +4750,8 @@ class CvaLiveSearchingComponent {
           </div>
         </div>
       </mat-label>
-      <mat-form-field appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
+      <mat-form-field *ngIf="isShowControl()"
+                      appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
                       [hideRequiredMarker]="!isFloatLabel"
                       fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
         <mat-label *ngIf="!isLabelOutside && !!isFloatLabel">
@@ -4629,8 +4764,9 @@ class CvaLiveSearchingComponent {
                placeholder="{{placeholder|translate}}"
                [formControl]="textControl"
                [matAutocomplete]="auto"
-               readonly="{{readonly}}" />
-        <button mat-icon-button color="warn" class="btnClear" matSuffix (click)="onClear()" *ngIf="!loading">
+               readonly="{{disabled}}" />
+        <button mat-icon-button color="warn" class="btnClear" matSuffix (click)="onClear()"
+                *ngIf="!loading && !disabled">
           <mat-icon>clear</mat-icon>
         </button>
         <mat-spinner diameter="20" matSuffix *ngIf="loading"></mat-spinner>
@@ -4646,6 +4782,17 @@ class CvaLiveSearchingComponent {
           {{ NsValidator.getErrorMessageV1(control, errorMessages).msg | translate: NsValidator.getErrorMessageV1(control, errorMessages).params }}
         </mat-hint>
       </mat-form-field>
+
+      <ng-container *ngIf="!isShowControl()">
+        <div class="cva-style-disable-text">
+          <mat-label *ngIf="!isLabelOutside && isFloatLabel">
+            {{ (label ? label : placeholder) | translate }}
+          </mat-label>
+          <div [title]="textControl.value">
+            {{ textControl.value }}
+          </div>
+        </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" }] });
 }
@@ -4668,7 +4815,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
           </div>
         </div>
       </mat-label>
-      <mat-form-field appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
+      <mat-form-field *ngIf="isShowControl()"
+                      appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
                       [hideRequiredMarker]="!isFloatLabel"
                       fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
         <mat-label *ngIf="!isLabelOutside && !!isFloatLabel">
@@ -4681,8 +4829,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                placeholder="{{placeholder|translate}}"
                [formControl]="textControl"
                [matAutocomplete]="auto"
-               readonly="{{readonly}}" />
-        <button mat-icon-button color="warn" class="btnClear" matSuffix (click)="onClear()" *ngIf="!loading">
+               readonly="{{disabled}}" />
+        <button mat-icon-button color="warn" class="btnClear" matSuffix (click)="onClear()"
+                *ngIf="!loading && !disabled">
           <mat-icon>clear</mat-icon>
         </button>
         <mat-spinner diameter="20" matSuffix *ngIf="loading"></mat-spinner>
@@ -4698,6 +4847,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
           {{ NsValidator.getErrorMessageV1(control, errorMessages).msg | translate: NsValidator.getErrorMessageV1(control, errorMessages).params }}
         </mat-hint>
       </mat-form-field>
+
+      <ng-container *ngIf="!isShowControl()">
+        <div class="cva-style-disable-text">
+          <mat-label *ngIf="!isLabelOutside && isFloatLabel">
+            {{ (label ? label : placeholder) | translate }}
+          </mat-label>
+          <div [title]="textControl.value">
+            {{ textControl.value }}
+          </div>
+        </div>
+      </ng-container>
     </div>
   `,
                 }]
@@ -4715,8 +4875,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
-            }], readonly: [{
-                type: Input
             }], errorMessages: [{
                 type: Input
             }], isLabelOutside: [{
@@ -4954,7 +5112,7 @@ class CvaSmartTableComponent {
         }
     }
     getRequired(column) {
-        return typeof (column.isRequired) === 'function' ? column.isRequired() : column.isRequired;
+        return typeof (column.isRequired) === 'function' ? column.isRequired() : (column.isRequired ?? false);
     }
     getIsDecimal(column) {
         return column.isDecimal ? typeof (column.isDecimal) === 'boolean' ? column.isDecimal : column.isDecimal() : false;
@@ -5052,7 +5210,7 @@ class CvaSmartTableComponent {
                    *ngSwitchCase="ColumnTypes.LINK"
                    fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
                    title="{{column.title(result)}}">
-                <a [routerLink]="[column.link(result)]">{{ column.cell(result) }}</a>
+                <a [routerLink]="[column.link ? column.link(result) : '']">{{ column.cell(result) }}</a>
               </div>
               <div class="img-view viewData {{TableService.getColumnClassName(column,result)}}"
                    [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
@@ -5089,7 +5247,7 @@ class CvaSmartTableComponent {
                           color="{{column.button.color}}"
                           [ngClass]="column.button.className"
                           (click)="onClick(column.button.click, result, i)"
-                          disabled="{{column.button.disabled ? column.button.disabled(result) : false}}"
+                          disabled="{{column.button && column.button.disabled ? column.button.disabled(result) : false}}"
                           matTooltip="{{(column.button.title ? column.button.title : '') | translate}}"
                           [ngSwitch]="TableService.getIconType(column.button)">
                     <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ column.button.icon }}</mat-icon>
@@ -5133,13 +5291,13 @@ class CvaSmartTableComponent {
               <cva-multi-select-autocomplete [isFormControl]="false"
                                              *ngSwitchCase="ColumnTypes.MULTI_SELECT_AUTOCOMPLETE"
                                              class="multiSelectAutocomplete"
-                                             [isTree]="column.isTree"
+                                             [isTree]="column.isTree??false"
                                              [value]="result[column.columnDef]"
                                              [errorMessages]="getErrorMessageMap(column)"
                                              [required]="getRequired(column)"
                                              [disabled]="column.disabled ? column.disabled(result) : false"
-                                             [multiple]="column.isMultipleSelect"
-                                             [options]="column.optionValues(result)"
+                                             [multiple]="column.isMultipleSelect??false"
+                                             [options]="column.optionValues ? column.optionValues(result) : []"
                                              (selectionChange)="onCellValueChange(result, column, $event);">
               </cva-multi-select-autocomplete>
               <div class="checkbox-cell"
@@ -5157,7 +5315,7 @@ class CvaSmartTableComponent {
                                   [row]="result" [columnDef]="column.columnDef"
                                   [searchFn]="column.searchFn"
                                   [mappingConfig]="column.mappingConfig"
-                                  [displayKey]="column.displayKey"
+                                  [displayKey]="column.displayKey??''"
                                   [errorMessages]="getErrorMessageMap(column)"
                                   (onChange)="onCellValueChange(result, column, $event)">
               </cva-live-searching>
@@ -5203,7 +5361,7 @@ class CvaSmartTableComponent {
                       color="{{button.color}}"
                       [ngClass]="button.className"
                       (click)="onClick(button.click, cell, i)"
-                      disabled="{{button.disabled ? button.disabled(cell) : false}}"
+                      disabled="{{button && button.disabled ? button.disabled(cell) : false}}"
                       matTooltip="{{(button.title ? button.title : '') | translate}}"
                       [ngSwitch]="TableService.getIconType(button)">
                 <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ button.icon }}</mat-icon>
@@ -5241,7 +5399,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", "readonly", "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", "readonly", "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$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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaSmartTableComponent, decorators: [{
             type: Component,
@@ -5285,7 +5443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                    *ngSwitchCase="ColumnTypes.LINK"
                    fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
                    title="{{column.title(result)}}">
-                <a [routerLink]="[column.link(result)]">{{ column.cell(result) }}</a>
+                <a [routerLink]="[column.link ? column.link(result) : '']">{{ column.cell(result) }}</a>
               </div>
               <div class="img-view viewData {{TableService.getColumnClassName(column,result)}}"
                    [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
@@ -5322,7 +5480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                           color="{{column.button.color}}"
                           [ngClass]="column.button.className"
                           (click)="onClick(column.button.click, result, i)"
-                          disabled="{{column.button.disabled ? column.button.disabled(result) : false}}"
+                          disabled="{{column.button && column.button.disabled ? column.button.disabled(result) : false}}"
                           matTooltip="{{(column.button.title ? column.button.title : '') | translate}}"
                           [ngSwitch]="TableService.getIconType(column.button)">
                     <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ column.button.icon }}</mat-icon>
@@ -5366,13 +5524,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
               <cva-multi-select-autocomplete [isFormControl]="false"
                                              *ngSwitchCase="ColumnTypes.MULTI_SELECT_AUTOCOMPLETE"
                                              class="multiSelectAutocomplete"
-                                             [isTree]="column.isTree"
+                                             [isTree]="column.isTree??false"
                                              [value]="result[column.columnDef]"
                                              [errorMessages]="getErrorMessageMap(column)"
                                              [required]="getRequired(column)"
                                              [disabled]="column.disabled ? column.disabled(result) : false"
-                                             [multiple]="column.isMultipleSelect"
-                                             [options]="column.optionValues(result)"
+                                             [multiple]="column.isMultipleSelect??false"
+                                             [options]="column.optionValues ? column.optionValues(result) : []"
                                              (selectionChange)="onCellValueChange(result, column, $event);">
               </cva-multi-select-autocomplete>
               <div class="checkbox-cell"
@@ -5390,7 +5548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                                   [row]="result" [columnDef]="column.columnDef"
                                   [searchFn]="column.searchFn"
                                   [mappingConfig]="column.mappingConfig"
-                                  [displayKey]="column.displayKey"
+                                  [displayKey]="column.displayKey??''"
                                   [errorMessages]="getErrorMessageMap(column)"
                                   (onChange)="onCellValueChange(result, column, $event)">
               </cva-live-searching>
@@ -5436,7 +5594,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                       color="{{button.color}}"
                       [ngClass]="button.className"
                       (click)="onClick(button.click, cell, i)"
-                      disabled="{{button.disabled ? button.disabled(cell) : false}}"
+                      disabled="{{button && button.disabled ? button.disabled(cell) : false}}"
                       matTooltip="{{(button.title ? button.title : '') | translate}}"
                       [ngSwitch]="TableService.getIconType(button)">
                 <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ button.icon }}</mat-icon>
@@ -5558,9 +5716,6 @@ 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
-    get NsValiator() {
-        return ValidatorService;
-    }
     constructor(dateServiceUtil, ngControl, injector) {
         this.dateServiceUtil = dateServiceUtil;
         this.injector = injector;
@@ -5570,6 +5725,9 @@ class CvaRangeDatePickerComponent {
             ngControl.valueAccessor = this;
         }
     }
+    get NsValiator() {
+        return ValidatorService;
+    }
     get fromDateValue() {
         if (this.value.fromDate instanceof Date) {
             return this.value.fromDate;
@@ -8666,7 +8824,6 @@ class CvaQuillEditorComponent {
     onlyCheckTextValidation = true;
     format = 'html';
     pattern = null;
-    readonly = false;
     errorMessages = new Map();
     onChange = new EventEmitter();
     multiline = false;
@@ -8683,9 +8840,6 @@ class CvaQuillEditorComponent {
     isFormControl = true;
     formatFunc;
     control = undefined;
-    get NsValidator() {
-        return ValidatorService;
-    }
     constructor(injector, ngControl) {
         this.injector = injector;
         if (ngControl) {
@@ -8693,8 +8847,8 @@ class CvaQuillEditorComponent {
             ngControl.valueAccessor = this;
         }
     }
-    ngOnInit() {
-        this.callValidator();
+    get NsValidator() {
+        return ValidatorService;
     }
     get textValue() {
         return this.text;
@@ -8702,6 +8856,9 @@ class CvaQuillEditorComponent {
     set textValue(val) {
         this.writeValue(val);
     }
+    ngOnInit() {
+        this.callValidator();
+    }
     customLengthValidator = (control) => {
         let length = 0;
         if (!this.onlyCheckTextValidation) {
@@ -8715,16 +8872,16 @@ class CvaQuillEditorComponent {
             return {
                 minlength: {
                     min: this.minLength,
-                    actual: length
-                }
+                    actual: length,
+                },
             };
         }
         if (!!this.maxLength && length > this.maxLength) {
             return {
                 maxlength: {
                     max: this.maxLength,
-                    actual: length
-                }
+                    actual: length,
+                },
             };
         }
         return null;
@@ -8737,16 +8894,16 @@ class CvaQuillEditorComponent {
             return {
                 minsize: {
                     min: this.minSize,
-                    actual: size
-                }
+                    actual: size,
+                },
             };
         }
         if (!!this.maxSize && size > this.maxSize) {
             return {
                 maxsize: {
                     max: this.maxSize,
-                    actual: size
-                }
+                    actual: size,
+                },
             };
         }
         return null;
@@ -8846,89 +9003,91 @@ class CvaQuillEditorComponent {
         this.writeValue(this.text);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaQuillEditorComponent, 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: CvaQuillEditorComponent, isStandalone: false, selector: "cva-quill-editor", inputs: { label: "label", name: "name", placeholder: "placeholder", hint: "hint", required: "required", disabled: "disabled", text: "text", quillStyle: "quillStyle", quillModule: "quillModule", onlyCheckTextValidation: "onlyCheckTextValidation", format: "format", pattern: "pattern", readonly: "readonly", errorMessages: "errorMessages", multiline: "multiline", isLabelOutside: "isLabelOutside", isFloatLabel: "isFloatLabel", minLength: "minLength", maxLength: "maxLength", maxSize: "maxSize", minSize: "minSize", maxLengthDisplay: "maxLengthDisplay", isFormControl: "isFormControl", formatFunc: "formatFunc" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
-        <!-- css labelOutside trong base.theme-->
-        <div class="cva-quill-editor"
-             [ngClass]="{'labelOutside': !!isLabelOutside,
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaQuillEditorComponent, isStandalone: false, selector: "cva-quill-editor", inputs: { label: "label", name: "name", placeholder: "placeholder", hint: "hint", required: "required", disabled: "disabled", text: "text", quillStyle: "quillStyle", quillModule: "quillModule", onlyCheckTextValidation: "onlyCheckTextValidation", format: "format", pattern: "pattern", errorMessages: "errorMessages", multiline: "multiline", isLabelOutside: "isLabelOutside", isFloatLabel: "isFloatLabel", minLength: "minLength", maxLength: "maxLength", maxSize: "maxSize", minSize: "minSize", maxLengthDisplay: "maxLengthDisplay", isFormControl: "isFormControl", formatFunc: "formatFunc" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
+    <!-- css labelOutside trong base.theme-->
+    <div class="cva-quill-editor"
+         [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 : '') | translate}}<span
-                            class="required-label-outside">{{!!required ? '*' : ''}}</span>
-                    </div>
-                </div>
-            </mat-label>
-            <div class="editor" fxLayout="column" fxFlex="100%">
-                <quill-editor [(ngModel)]="textValue"
-                              [modules]="quillModule"
-                              [disabled]="disabled"
-                              [readOnly]="readonly"
-                              [maxLength]="maxLength"
-                              [minLength]="minLength"
-                              [placeholder]="placeholder | translate"
-                              [format]="format"
-                              (onFocus)="onFocus($event)"
-                              (onBlur)="onBlur($event)"
-                              #quill [ngStyle]="quillStyle"
-                              (onContentChanged)="onChangeContent(quill, $event)"
-                              fxFlex="100%" fxFlex.lt-md="100%"
-                ></quill-editor>
-                <div id="counter"
-                     *ngIf="!(disabled || readonly) && onFocusStatus && !!maxLength">{{textCounter + '/' + maxLength}}</div>
-                <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>
-            </div>
+         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 : '') | translate }}<span
+            class="required-label-outside">{{ !!required ? '*' : '' }}</span>
+          </div>
+        </div>
+      </mat-label>
+      <div class="editor" fxLayout="column" fxFlex="100%">
+        <quill-editor [(ngModel)]="textValue"
+                      [modules]="quillModule"
+                      [disabled]="disabled"
+                      [readOnly]="disabled"
+                      [maxLength]="maxLength??999999999"
+                      [minLength]="minLength??0"
+                      [placeholder]="placeholder | translate"
+                      [format]="format"
+                      (onFocus)="onFocus($event)"
+                      (onBlur)="onBlur($event)"
+                      #quill [ngStyle]="quillStyle"
+                      (onContentChanged)="onChangeContent(quill, $event)"
+                      fxFlex="100%" fxFlex.lt-md="100%"
+        ></quill-editor>
+        <div id="counter"
+             *ngIf="!disabled && onFocusStatus && !!maxLength">{{ textCounter + '/' + maxLength }}
         </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 });
+        <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>
+      </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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaQuillEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cva-quill-editor', standalone: false, template: `
-        <!-- css labelOutside trong base.theme-->
-        <div class="cva-quill-editor"
-             [ngClass]="{'labelOutside': !!isLabelOutside,
+    <!-- css labelOutside trong base.theme-->
+    <div class="cva-quill-editor"
+         [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 : '') | translate}}<span
-                            class="required-label-outside">{{!!required ? '*' : ''}}</span>
-                    </div>
-                </div>
-            </mat-label>
-            <div class="editor" fxLayout="column" fxFlex="100%">
-                <quill-editor [(ngModel)]="textValue"
-                              [modules]="quillModule"
-                              [disabled]="disabled"
-                              [readOnly]="readonly"
-                              [maxLength]="maxLength"
-                              [minLength]="minLength"
-                              [placeholder]="placeholder | translate"
-                              [format]="format"
-                              (onFocus)="onFocus($event)"
-                              (onBlur)="onBlur($event)"
-                              #quill [ngStyle]="quillStyle"
-                              (onContentChanged)="onChangeContent(quill, $event)"
-                              fxFlex="100%" fxFlex.lt-md="100%"
-                ></quill-editor>
-                <div id="counter"
-                     *ngIf="!(disabled || readonly) && onFocusStatus && !!maxLength">{{textCounter + '/' + maxLength}}</div>
-                <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>
-            </div>
+         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 : '') | translate }}<span
+            class="required-label-outside">{{ !!required ? '*' : '' }}</span>
+          </div>
+        </div>
+      </mat-label>
+      <div class="editor" fxLayout="column" fxFlex="100%">
+        <quill-editor [(ngModel)]="textValue"
+                      [modules]="quillModule"
+                      [disabled]="disabled"
+                      [readOnly]="disabled"
+                      [maxLength]="maxLength??999999999"
+                      [minLength]="minLength??0"
+                      [placeholder]="placeholder | translate"
+                      [format]="format"
+                      (onFocus)="onFocus($event)"
+                      (onBlur)="onBlur($event)"
+                      #quill [ngStyle]="quillStyle"
+                      (onContentChanged)="onChangeContent(quill, $event)"
+                      fxFlex="100%" fxFlex.lt-md="100%"
+        ></quill-editor>
+        <div id="counter"
+             *ngIf="!disabled && onFocusStatus && !!maxLength">{{ textCounter + '/' + maxLength }}
         </div>
-    `, encapsulation: ViewEncapsulation.None, 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"] }]
+        <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>
+      </div>
+    </div>
+  `, encapsulation: ViewEncapsulation.None, 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"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -8957,8 +9116,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], pattern: [{
                 type: Input
-            }], readonly: [{
-                type: Input
             }], errorMessages: [{
                 type: Input
             }], onChange: [{