@c10t/nice-component-library 0.0.20 → 0.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/components/cva-counter-input.component.d.ts +3 -0
  2. package/components/cva-input.component.d.ts +7 -5
  3. package/components/cva-live-searching.component.d.ts +7 -4
  4. package/components/cva-multi-select-autocomplete.d.ts +9 -1
  5. package/components/cva-quill-editor.component.d.ts +3 -4
  6. package/components/datepicker/cva-date-picker.component.d.ts +4 -3
  7. package/components/datepicker/cva-range-date-picker.component.d.ts +1 -1
  8. package/fesm2022/c10t-nice-component-library.mjs +509 -340
  9. package/fesm2022/c10t-nice-component-library.mjs.map +1 -1
  10. package/models/nice-component-library.config.d.ts +1 -0
  11. package/package.json +1 -1
  12. package/services/table.service.d.ts +7 -7
package/fesm2022/c10t-nice-component-library.mjs CHANGED
@@ -29,12 +29,12 @@ import * as i1$5 from '@angular/material/paginator';
29
29
  import { MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
30
30
  import * as i4$1 from '@angular/material/checkbox';
31
31
  import { MatCheckboxModule } from '@angular/material/checkbox';
32
- import * as i8$1 from '@angular/material/icon';
32
+ import * as i7 from '@angular/material/icon';
33
33
  import { MatIconModule } from '@angular/material/icon';
34
- import * as i8$2 from '@angular/material/tooltip';
34
+ import * as i8$1 from '@angular/material/tooltip';
35
35
  import { MatTooltipModule } from '@angular/material/tooltip';
36
36
  import * as i9 from '@angular/flex-layout/extended';
37
- import * as i7 from '@angular/material/menu';
37
+ import * as i7$1 from '@angular/material/menu';
38
38
  import { MatMenuModule } from '@angular/material/menu';
39
39
  import * as i2$2 from '@angular/platform-browser';
40
40
  import * as i5$1 from '@angular/cdk/text-field';
@@ -48,7 +48,7 @@ import * as i9$1 from '@angular/material/select';
48
48
  import { MatSelectModule } from '@angular/material/select';
49
49
  import * as i3$2 from '@angular/material/autocomplete';
50
50
  import { MatAutocompleteModule } from '@angular/material/autocomplete';
51
- import * as i7$1 from '@angular/material/progress-spinner';
51
+ import * as i9$2 from '@angular/material/progress-spinner';
52
52
  import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
53
53
  import * as i3$3 from '@angular/material/card';
54
54
  import { MatCardModule } from '@angular/material/card';
@@ -1870,8 +1870,10 @@ class CvaCounterInputComponent {
1870
1870
  onEnter = new EventEmitter();
1871
1871
  // Cái này là để gắn khi nó là FormControl trong 1 FormGroup
1872
1872
  formControl;
1873
+ config;
1873
1874
  constructor(injector, ngControl) {
1874
1875
  this.injector = injector;
1876
+ this.config = injector.get(InjectTokenNextSolutionsConfig);
1875
1877
  if (ngControl) {
1876
1878
  // ngControl là parent FormControl
1877
1879
  // 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 {
1965
1967
  registerOnTouched() {
1966
1968
  /*NON-EMPTY FOR COMPILE*/
1967
1969
  }
1970
+ isShowControl() {
1971
+ return !this.disabled || (this.disabled && this.config && this.config.STYLE_DISABLE === 'CONTROL');
1972
+ }
1968
1973
  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 });
1969
1974
  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: `
1970
1975
  <!-- css labelOutside trong base.theme-->
@@ -1980,18 +1985,19 @@ class CvaCounterInputComponent {
1980
1985
  </div>
1981
1986
  </div>
1982
1987
  </mat-label>
1983
- <mat-form-field appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
1988
+ <mat-form-field *ngIf="isShowControl()"
1989
+ appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
1984
1990
  [hideRequiredMarker]="!isFloatLabel"
1985
1991
  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
1986
1992
  <mat-label *ngIf="!isLabelOutside && !!isFloatLabel">{{ (label ? label : placeholder) | translate }}</mat-label>
1987
1993
  <div class="input-area">
1988
1994
  <input matInput type="number" [(ngModel)]="counterValue" #nsCounterInput="ngModel"
1989
- style="text-align:{{alignNumber}}"
1995
+ [style.text-align]="alignNumber"
1990
1996
  [disabled]="disabled" [required]="required"
1991
1997
  (keydown.enter)="onEnter.emit()"
1992
1998
  [placeholder]="placeholder|translate"
1993
1999
  autocomplete="off"
1994
- pattern="{{isDecimal ? '^[^-]?[0-9]+[.]?[0-9]*$' : '^[0-9]*$'}}" min="{{min}}" max="{{max}}" />
2000
+ [pattern]="isDecimal ? '^[^-]?[0-9]+[.]?[0-9]*$' : '^[0-9]*$'" min="{{min}}" max="{{max}}" />
1995
2001
  <span *ngIf="!!suffixText" class="input-suffix"
1996
2002
  matSuffix>{{ suffixText }}</span>
1997
2003
  </div>
@@ -2002,6 +2008,17 @@ class CvaCounterInputComponent {
2002
2008
  {{ NsValidator.getErrorMessage(formControl, errorMessages) | translate }}
2003
2009
  </mat-hint>
2004
2010
  </mat-form-field>
2011
+
2012
+ <ng-container *ngIf="!isShowControl()">
2013
+ <div class="cva-style-disable-text">
2014
+ <mat-label *ngIf="!isLabelOutside && isFloatLabel">
2015
+ {{ (label ? label : placeholder) | translate }}
2016
+ </mat-label>
2017
+ <div [title]="counterValue">
2018
+ {{ counterValue }}
2019
+ </div>
2020
+ </div>
2021
+ </ng-container>
2005
2022
  </div>
2006
2023
  `, 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" }] });
2007
2024
  }
@@ -2024,18 +2041,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
2024
2041
  </div>
2025
2042
  </div>
2026
2043
  </mat-label>
2027
- <mat-form-field appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
2044
+ <mat-form-field *ngIf="isShowControl()"
2045
+ appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
2028
2046
  [hideRequiredMarker]="!isFloatLabel"
2029
2047
  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
2030
2048
  <mat-label *ngIf="!isLabelOutside && !!isFloatLabel">{{ (label ? label : placeholder) | translate }}</mat-label>
2031
2049
  <div class="input-area">
2032
2050
  <input matInput type="number" [(ngModel)]="counterValue" #nsCounterInput="ngModel"
2033
- style="text-align:{{alignNumber}}"
2051
+ [style.text-align]="alignNumber"
2034
2052
  [disabled]="disabled" [required]="required"
2035
2053
  (keydown.enter)="onEnter.emit()"
2036
2054
  [placeholder]="placeholder|translate"
2037
2055
  autocomplete="off"
2038
- pattern="{{isDecimal ? '^[^-]?[0-9]+[.]?[0-9]*$' : '^[0-9]*$'}}" min="{{min}}" max="{{max}}" />
2056
+ [pattern]="isDecimal ? '^[^-]?[0-9]+[.]?[0-9]*$' : '^[0-9]*$'" min="{{min}}" max="{{max}}" />
2039
2057
  <span *ngIf="!!suffixText" class="input-suffix"
2040
2058
  matSuffix>{{ suffixText }}</span>
2041
2059
  </div>
@@ -2046,6 +2064,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
2046
2064
  {{ NsValidator.getErrorMessage(formControl, errorMessages) | translate }}
2047
2065
  </mat-hint>
2048
2066
  </mat-form-field>
2067
+
2068
+ <ng-container *ngIf="!isShowControl()">
2069
+ <div class="cva-style-disable-text">
2070
+ <mat-label *ngIf="!isLabelOutside && isFloatLabel">
2071
+ {{ (label ? label : placeholder) | translate }}
2072
+ </mat-label>
2073
+ <div [title]="counterValue">
2074
+ {{ counterValue }}
2075
+ </div>
2076
+ </div>
2077
+ </ng-container>
2049
2078
  </div>
2050
2079
  `,
2051
2080
  }]
@@ -2323,7 +2352,7 @@ class CvaHeaderExpandButtonComponent {
2323
2352
  </div>
2324
2353
  </mat-menu>
2325
2354
 
2326
- `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
2355
+ `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i7$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
2327
2356
  }
2328
2357
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaHeaderExpandButtonComponent, decorators: [{
2329
2358
  type: Component,
@@ -2760,7 +2789,7 @@ class CvaTableComponent {
2760
2789
  </div>
2761
2790
  </div>
2762
2791
  </div>
2763
- `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i8.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CvaCounterInputComponent, selector: "cva-counter-input", inputs: ["label", "placeholder", "suffixText", "hint", "value", "disabled", "required", "errorMessages", "min", "max", "error", "isDecimal", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "alignNumber", "isFormControl"], outputs: ["onChange", "onEnter"] }, { kind: "directive", type: StylePaginatorDirective, selector: "[style-paginator]", inputs: ["showTotalPages", "paging"], outputs: ["pagingChangeEvent"] }, { kind: "component", type: CvaHeaderExpandButtonComponent, selector: "cva-header-expand-button", inputs: ["expandHeaderButton", "columns", "moduleName"], outputs: ["onChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImgPipe, name: "secure" }] });
2792
+ `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$5.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultLayoutGapDirective, selector: " [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md], [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md], [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm], [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i8.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CvaCounterInputComponent, selector: "cva-counter-input", inputs: ["label", "placeholder", "suffixText", "hint", "value", "disabled", "required", "errorMessages", "min", "max", "error", "isDecimal", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "alignNumber", "isFormControl"], outputs: ["onChange", "onEnter"] }, { kind: "directive", type: StylePaginatorDirective, selector: "[style-paginator]", inputs: ["showTotalPages", "paging"], outputs: ["pagingChangeEvent"] }, { kind: "component", type: CvaHeaderExpandButtonComponent, selector: "cva-header-expand-button", inputs: ["expandHeaderButton", "columns", "moduleName"], outputs: ["onChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImgPipe, name: "secure" }] });
2764
2793
  }
2765
2794
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaTableComponent, decorators: [{
2766
2795
  type: Component,
@@ -3251,7 +3280,6 @@ class CvaInputComponent {
3251
3280
  text = '';
3252
3281
  type = 'text';
3253
3282
  pattern = null;
3254
- readonly = false;
3255
3283
  errorMessages = new Map();
3256
3284
  onChange = new EventEmitter();
3257
3285
  multiline = false;
@@ -3270,16 +3298,24 @@ class CvaInputComponent {
3270
3298
  isFormControl = true;
3271
3299
  formatFunc;
3272
3300
  control = undefined;
3273
- get NsValidator() {
3274
- return ValidatorService;
3275
- }
3301
+ config;
3276
3302
  constructor(injector, ngControl) {
3277
3303
  this.injector = injector;
3304
+ this.config = injector.get(InjectTokenNextSolutionsConfig);
3278
3305
  if (ngControl) {
3279
3306
  // Hành động này thay cho provide: NG_VALUE_ACCESSOR và gắn ControlValueAccessor này vào parent FormControl
3280
3307
  ngControl.valueAccessor = this;
3281
3308
  }
3282
3309
  }
3310
+ get NsValidator() {
3311
+ return ValidatorService;
3312
+ }
3313
+ get textValue() {
3314
+ return this.text;
3315
+ }
3316
+ set textValue(val) {
3317
+ this.writeValue(val);
3318
+ }
3283
3319
  // Vì không thể quất được NgControl ở constructor nên phải quất ở đây :(
3284
3320
  ngAfterViewInit() {
3285
3321
  // const ngControl = this.injector.get(NgControl);
@@ -3291,12 +3327,6 @@ class CvaInputComponent {
3291
3327
  ngOnInit() {
3292
3328
  this.callValidator();
3293
3329
  }
3294
- get textValue() {
3295
- return this.text;
3296
- }
3297
- set textValue(val) {
3298
- this.writeValue(val);
3299
- }
3300
3330
  callValidator() {
3301
3331
  const ngControl = this.injector.get(NgControl);
3302
3332
  // Nếu parent FormControl khởi tạo xong và formControl chưa có giá trị lưu
@@ -3382,64 +3412,80 @@ class CvaInputComponent {
3382
3412
  this.onFocusStatus = false;
3383
3413
  }
3384
3414
  }
3415
+ isShowControl() {
3416
+ return !this.disabled || (this.disabled && this.config && this.config.STYLE_DISABLE === 'CONTROL');
3417
+ }
3385
3418
  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 });
3386
- 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: `
3387
- <!-- css labelOutside trong base.theme-->
3388
- <div class="cva-input"
3389
- [ngClass]="{'labelOutside': !!isLabelOutside,
3419
+ 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: `
3420
+ <!-- css labelOutside trong base.theme-->
3421
+ <div class="cva-input"
3422
+ [ngClass]="{'labelOutside': !!isLabelOutside,
3390
3423
  'float_label': !!isFloatLabel && !isLabelOutside,
3391
3424
  'text_area': !!this.multiline}"
3392
- fxLayout="row" fxLayout.lt-sm="row wrap">
3393
- <mat-label *ngIf="isLabelOutside" class="label_width"
3394
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
3395
- <div class="label">
3396
- <div>
3397
- {{(label ? label : placeholder) | translate}}<span class="required-label-outside">{{!!required ? '*' : ''}}</span>
3398
- </div>
3399
- </div>
3425
+ fxLayout="row" fxLayout.lt-sm="row wrap">
3426
+ <mat-label *ngIf="isLabelOutside" class="label_width"
3427
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
3428
+ <div class="label">
3429
+ <div>
3430
+ {{ (label ? label : placeholder) | translate }}<span
3431
+ class="required-label-outside">{{ !!required ? '*' : '' }}</span>
3432
+ </div>
3433
+ </div>
3434
+ </mat-label>
3435
+ <mat-form-field *ngIf="isShowControl()"
3436
+ appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
3437
+ [ngClass]="{'cva-input-multiline': multiline}"
3438
+ [hideRequiredMarker]="!isFloatLabel"
3439
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
3440
+ <mat-label *ngIf="!isLabelOutside && !!isFloatLabel" [ngClass]="{'cva-input-multiline': multiline}">
3441
+ {{ (label ? label : placeholder) | translate }}
3442
+ </mat-label>
3443
+ <input matInput placeholder="{{placeholder|translate}}" [type]="type" [(ngModel)]="textValue"
3444
+ [pattern]="pattern"
3445
+ minLength="{{minLength ? minLength : 0}}"
3446
+ maxLength="{{maxLength ? maxLength : 524288}}"
3447
+ [required]="required"
3448
+ [disabled]="disabled"
3449
+ readonly="{{disabled}}"
3450
+ [inputDirective]="formatFunc"
3451
+ *ngIf="!multiline"
3452
+ (focus)="onFocus()"
3453
+ (blur)="onBlur()"
3454
+ pattern-directive
3455
+ [regPattern]="patternFilter"
3456
+ autocomplete="off">
3457
+ <textarea matInput [(ngModel)]="textValue" placeholder="{{placeholder|translate}}"
3458
+ [pattern]="pattern"
3459
+ minLength="{{minLength ? minLength : 0}}"
3460
+ maxLength="{{maxLength ? maxLength : 524288}}"
3461
+ [required]="required"
3462
+ [disabled]="disabled"
3463
+ readonly="{{disabled}}"
3464
+ (focus)="onFocus()"
3465
+ (blur)="onBlur()"
3466
+ *ngIf="multiline"
3467
+ cdkTextareaAutosize cdkAutosizeMinRows="3"
3468
+ autocomplete="off"></textarea>
3469
+ <i *ngIf="!!suffixFontAwesomeClass" class="input-suffix {{suffixFontAwesomeClass}}" matSuffix></i>
3470
+ <span *ngIf="onFocusStatus && (!!maxLength || !!maxLengthDisplay)" class="input-suffix"
3471
+ matSuffix>{{ displayLength() }}</span>
3472
+ <mat-hint align="start" *ngIf="!NsValidator.invalid(control)">{{ hint | translate }}</mat-hint>
3473
+ <mat-hint style="color: red" align="start" *ngIf="NsValidator.invalid(control)">
3474
+ {{ NsValidator.getErrorMessageV1(control, errorMessages).msg | translate: NsValidator.getErrorMessageV1(control, errorMessages).params }}
3475
+ </mat-hint>
3476
+ </mat-form-field>
3477
+
3478
+ <ng-container *ngIf="!isShowControl()">
3479
+ <div class="cva-style-disable-text">
3480
+ <mat-label *ngIf="!isLabelOutside && isFloatLabel">
3481
+ {{ (label ? label : placeholder) | translate }}
3400
3482
  </mat-label>
3401
- <mat-form-field appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
3402
- [ngClass]="{'cva-input-multiline': multiline}"
3403
- [hideRequiredMarker]="!isFloatLabel"
3404
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
3405
- <mat-label *ngIf="!isLabelOutside && !!isFloatLabel" [ngClass]="{'cva-input-multiline': multiline}">
3406
- {{(label ? label : placeholder) | translate}}
3407
- </mat-label>
3408
- <input matInput placeholder="{{placeholder|translate}}" [type]="type" [(ngModel)]="textValue"
3409
- [pattern]="pattern"
3410
- minLength="{{minLength ? minLength : 0}}"
3411
- maxLength="{{maxLength ? maxLength : 524288}}"
3412
- [required]="required"
3413
- [disabled]="disabled"
3414
- readonly="{{readonly}}"
3415
- [inputDirective]="formatFunc"
3416
- *ngIf="!multiline"
3417
- (focus)="onFocus()"
3418
- (blur)="onBlur()"
3419
- pattern-directive
3420
- [regPattern]="patternFilter"
3421
- autocomplete="off">
3422
- <textarea matInput [(ngModel)]="textValue" placeholder="{{placeholder|translate}}"
3423
- [pattern]="pattern"
3424
- minLength="{{minLength ? minLength : 0}}"
3425
- maxLength="{{maxLength ? maxLength : 524288}}"
3426
- [required]="required"
3427
- [disabled]="disabled"
3428
- readonly="{{readonly}}"
3429
- (focus)="onFocus()"
3430
- (blur)="onBlur()"
3431
- *ngIf="multiline"
3432
- cdkTextareaAutosize cdkAutosizeMinRows="3"
3433
- autocomplete="off"></textarea>
3434
- <i *ngIf="!!suffixFontAwesomeClass" class="input-suffix {{suffixFontAwesomeClass}}" matSuffix></i>
3435
- <span *ngIf="onFocusStatus && (!!maxLength || !!maxLengthDisplay)" class="input-suffix"
3436
- matSuffix>{{displayLength()}}</span>
3437
- <mat-hint align="start" *ngIf="!NsValidator.invalid(control)">{{hint | translate}}</mat-hint>
3438
- <mat-hint style="color: red" align="start" *ngIf="NsValidator.invalid(control)">
3439
- {{NsValidator.getErrorMessageV1(control, errorMessages).msg | translate: NsValidator.getErrorMessageV1(control, errorMessages).params}}
3440
- </mat-hint>
3441
- </mat-form-field>
3442
- </div>
3483
+ <div [title]="text ? text : ''">
3484
+ {{ text ? text : '' }}
3485
+ </div>
3486
+ </div>
3487
+ </ng-container>
3488
+ </div>
3443
3489
  `, 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" }] });
3444
3490
  }
3445
3491
  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
3448
3494
  selector: 'cva-input',
3449
3495
  standalone: false,
3450
3496
  template: `
3451
- <!-- css labelOutside trong base.theme-->
3452
- <div class="cva-input"
3453
- [ngClass]="{'labelOutside': !!isLabelOutside,
3497
+ <!-- css labelOutside trong base.theme-->
3498
+ <div class="cva-input"
3499
+ [ngClass]="{'labelOutside': !!isLabelOutside,
3454
3500
  'float_label': !!isFloatLabel && !isLabelOutside,
3455
3501
  'text_area': !!this.multiline}"
3456
- fxLayout="row" fxLayout.lt-sm="row wrap">
3457
- <mat-label *ngIf="isLabelOutside" class="label_width"
3458
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
3459
- <div class="label">
3460
- <div>
3461
- {{(label ? label : placeholder) | translate}}<span class="required-label-outside">{{!!required ? '*' : ''}}</span>
3462
- </div>
3463
- </div>
3502
+ fxLayout="row" fxLayout.lt-sm="row wrap">
3503
+ <mat-label *ngIf="isLabelOutside" class="label_width"
3504
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
3505
+ <div class="label">
3506
+ <div>
3507
+ {{ (label ? label : placeholder) | translate }}<span
3508
+ class="required-label-outside">{{ !!required ? '*' : '' }}</span>
3509
+ </div>
3510
+ </div>
3511
+ </mat-label>
3512
+ <mat-form-field *ngIf="isShowControl()"
3513
+ appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
3514
+ [ngClass]="{'cva-input-multiline': multiline}"
3515
+ [hideRequiredMarker]="!isFloatLabel"
3516
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
3517
+ <mat-label *ngIf="!isLabelOutside && !!isFloatLabel" [ngClass]="{'cva-input-multiline': multiline}">
3518
+ {{ (label ? label : placeholder) | translate }}
3519
+ </mat-label>
3520
+ <input matInput placeholder="{{placeholder|translate}}" [type]="type" [(ngModel)]="textValue"
3521
+ [pattern]="pattern"
3522
+ minLength="{{minLength ? minLength : 0}}"
3523
+ maxLength="{{maxLength ? maxLength : 524288}}"
3524
+ [required]="required"
3525
+ [disabled]="disabled"
3526
+ readonly="{{disabled}}"
3527
+ [inputDirective]="formatFunc"
3528
+ *ngIf="!multiline"
3529
+ (focus)="onFocus()"
3530
+ (blur)="onBlur()"
3531
+ pattern-directive
3532
+ [regPattern]="patternFilter"
3533
+ autocomplete="off">
3534
+ <textarea matInput [(ngModel)]="textValue" placeholder="{{placeholder|translate}}"
3535
+ [pattern]="pattern"
3536
+ minLength="{{minLength ? minLength : 0}}"
3537
+ maxLength="{{maxLength ? maxLength : 524288}}"
3538
+ [required]="required"
3539
+ [disabled]="disabled"
3540
+ readonly="{{disabled}}"
3541
+ (focus)="onFocus()"
3542
+ (blur)="onBlur()"
3543
+ *ngIf="multiline"
3544
+ cdkTextareaAutosize cdkAutosizeMinRows="3"
3545
+ autocomplete="off"></textarea>
3546
+ <i *ngIf="!!suffixFontAwesomeClass" class="input-suffix {{suffixFontAwesomeClass}}" matSuffix></i>
3547
+ <span *ngIf="onFocusStatus && (!!maxLength || !!maxLengthDisplay)" class="input-suffix"
3548
+ matSuffix>{{ displayLength() }}</span>
3549
+ <mat-hint align="start" *ngIf="!NsValidator.invalid(control)">{{ hint | translate }}</mat-hint>
3550
+ <mat-hint style="color: red" align="start" *ngIf="NsValidator.invalid(control)">
3551
+ {{ NsValidator.getErrorMessageV1(control, errorMessages).msg | translate: NsValidator.getErrorMessageV1(control, errorMessages).params }}
3552
+ </mat-hint>
3553
+ </mat-form-field>
3554
+
3555
+ <ng-container *ngIf="!isShowControl()">
3556
+ <div class="cva-style-disable-text">
3557
+ <mat-label *ngIf="!isLabelOutside && isFloatLabel">
3558
+ {{ (label ? label : placeholder) | translate }}
3464
3559
  </mat-label>
3465
- <mat-form-field appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
3466
- [ngClass]="{'cva-input-multiline': multiline}"
3467
- [hideRequiredMarker]="!isFloatLabel"
3468
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
3469
- <mat-label *ngIf="!isLabelOutside && !!isFloatLabel" [ngClass]="{'cva-input-multiline': multiline}">
3470
- {{(label ? label : placeholder) | translate}}
3471
- </mat-label>
3472
- <input matInput placeholder="{{placeholder|translate}}" [type]="type" [(ngModel)]="textValue"
3473
- [pattern]="pattern"
3474
- minLength="{{minLength ? minLength : 0}}"
3475
- maxLength="{{maxLength ? maxLength : 524288}}"
3476
- [required]="required"
3477
- [disabled]="disabled"
3478
- readonly="{{readonly}}"
3479
- [inputDirective]="formatFunc"
3480
- *ngIf="!multiline"
3481
- (focus)="onFocus()"
3482
- (blur)="onBlur()"
3483
- pattern-directive
3484
- [regPattern]="patternFilter"
3485
- autocomplete="off">
3486
- <textarea matInput [(ngModel)]="textValue" placeholder="{{placeholder|translate}}"
3487
- [pattern]="pattern"
3488
- minLength="{{minLength ? minLength : 0}}"
3489
- maxLength="{{maxLength ? maxLength : 524288}}"
3490
- [required]="required"
3491
- [disabled]="disabled"
3492
- readonly="{{readonly}}"
3493
- (focus)="onFocus()"
3494
- (blur)="onBlur()"
3495
- *ngIf="multiline"
3496
- cdkTextareaAutosize cdkAutosizeMinRows="3"
3497
- autocomplete="off"></textarea>
3498
- <i *ngIf="!!suffixFontAwesomeClass" class="input-suffix {{suffixFontAwesomeClass}}" matSuffix></i>
3499
- <span *ngIf="onFocusStatus && (!!maxLength || !!maxLengthDisplay)" class="input-suffix"
3500
- matSuffix>{{displayLength()}}</span>
3501
- <mat-hint align="start" *ngIf="!NsValidator.invalid(control)">{{hint | translate}}</mat-hint>
3502
- <mat-hint style="color: red" align="start" *ngIf="NsValidator.invalid(control)">
3503
- {{NsValidator.getErrorMessageV1(control, errorMessages).msg | translate: NsValidator.getErrorMessageV1(control, errorMessages).params}}
3504
- </mat-hint>
3505
- </mat-form-field>
3506
- </div>
3560
+ <div [title]="text ? text : ''">
3561
+ {{ text ? text : '' }}
3562
+ </div>
3563
+ </div>
3564
+ </ng-container>
3565
+ </div>
3507
3566
  `,
3508
3567
  }]
3509
3568
  }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$2.NgControl, decorators: [{
@@ -3528,8 +3587,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
3528
3587
  type: Input
3529
3588
  }], pattern: [{
3530
3589
  type: Input
3531
- }], readonly: [{
3532
- type: Input
3533
3590
  }], errorMessages: [{
3534
3591
  type: Input
3535
3592
  }], onChange: [{
@@ -3668,9 +3725,6 @@ class CvaDatePickerComponent {
3668
3725
  // Chỉ bằng false khi trong NsSmartTable thôi @@
3669
3726
  isFormControl = true;
3670
3727
  formControl;
3671
- get NsValidator() {
3672
- return ValidatorService;
3673
- }
3674
3728
  constructor(dateServiceUtil, ngControl, injector) {
3675
3729
  this.dateServiceUtil = dateServiceUtil;
3676
3730
  this.injector = injector;
@@ -3680,8 +3734,25 @@ class CvaDatePickerComponent {
3680
3734
  ngControl.valueAccessor = this;
3681
3735
  }
3682
3736
  }
3737
+ get NsValidator() {
3738
+ return ValidatorService;
3739
+ }
3740
+ get datepickerValue() {
3741
+ if (this.value instanceof Date) {
3742
+ return this.value;
3743
+ }
3744
+ if (this.isString(this.value) && this.value.indexOf('Z') >= 0) {
3745
+ return this.value.replace(' ', 'T');
3746
+ }
3747
+ return null;
3748
+ }
3749
+ set datepickerValue(val) {
3750
+ this.writeValue(val);
3751
+ }
3683
3752
  ngOnInit() {
3684
- this.callValidator();
3753
+ if (this.isShowControl()) {
3754
+ this.callValidator();
3755
+ }
3685
3756
  }
3686
3757
  callValidator() {
3687
3758
  const ngControl = this.injector.get(NgControl);
@@ -3743,18 +3814,6 @@ class CvaDatePickerComponent {
3743
3814
  checkRequired(isRequired) {
3744
3815
  return isRequired ? typeof (isRequired) === 'boolean' ? isRequired : isRequired() : false;
3745
3816
  }
3746
- get datepickerValue() {
3747
- if (this.value instanceof Date) {
3748
- return this.value;
3749
- }
3750
- if (this.isString(this.value) && this.value.indexOf('Z') >= 0) {
3751
- return this.value.replace(' ', 'T');
3752
- }
3753
- return null;
3754
- }
3755
- set datepickerValue(val) {
3756
- this.writeValue(val);
3757
- }
3758
3817
  propagateChange = (_) => {
3759
3818
  /*NON-EMPTY FOR COMPILE*/
3760
3819
  };
@@ -3779,9 +3838,11 @@ class CvaDatePickerComponent {
3779
3838
  if (out) {
3780
3839
  this.title = this.dateServiceUtil.convertDateToDisplayGMT0(out);
3781
3840
  }
3782
- this.propagateChange(out);
3783
- this.callValidator();
3784
- this.onChange.emit(out ? out : '');
3841
+ if (this.isShowControl()) {
3842
+ this.propagateChange(out);
3843
+ this.callValidator();
3844
+ this.onChange.emit(out ? out : '');
3845
+ }
3785
3846
  }
3786
3847
  onClear() {
3787
3848
  this.writeValue(null);
@@ -3801,6 +3862,9 @@ class CvaDatePickerComponent {
3801
3862
  isString(inputValue) {
3802
3863
  return typeof inputValue === 'string' || inputValue instanceof String;
3803
3864
  }
3865
+ isShowControl() {
3866
+ return !this.disabled || (this.disabled && this.config && this.config.STYLE_DISABLE === 'CONTROL');
3867
+ }
3804
3868
  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 });
3805
3869
  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: [
3806
3870
  { provide: DateAdapter, useClass: NsDateAdapter },
@@ -3822,7 +3886,8 @@ class CvaDatePickerComponent {
3822
3886
  </div>
3823
3887
  </div>
3824
3888
  </mat-label>
3825
- <mat-form-field appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
3889
+ <mat-form-field *ngIf="isShowControl()"
3890
+ appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
3826
3891
  [hideRequiredMarker]="!isFloatLabel"
3827
3892
  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
3828
3893
  <mat-label *ngIf="!isLabelOutside && isFloatLabel">{{ (label ? label : placeholder) | translate }}</mat-label>
@@ -3845,8 +3910,19 @@ class CvaDatePickerComponent {
3845
3910
  </mat-hint>
3846
3911
 
3847
3912
  </mat-form-field>
3913
+
3914
+ <ng-container *ngIf="!isShowControl()">
3915
+ <div class="cva-style-disable-text">
3916
+ <mat-label *ngIf="!isLabelOutside && isFloatLabel">
3917
+ {{ (label ? label : placeholder) | translate }}
3918
+ </mat-label>
3919
+ <div [title]="title ? title : ''">
3920
+ {{ title ? title : '' }}
3921
+ </div>
3922
+ </div>
3923
+ </ng-container>
3848
3924
  </div>
3849
- `, 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: i8$1.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" }] });
3925
+ `, 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" }] });
3850
3926
  }
3851
3927
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaDatePickerComponent, decorators: [{
3852
3928
  type: Component,
@@ -3867,7 +3943,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
3867
3943
  </div>
3868
3944
  </div>
3869
3945
  </mat-label>
3870
- <mat-form-field appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
3946
+ <mat-form-field *ngIf="isShowControl()"
3947
+ appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
3871
3948
  [hideRequiredMarker]="!isFloatLabel"
3872
3949
  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
3873
3950
  <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
3890
3967
  </mat-hint>
3891
3968
 
3892
3969
  </mat-form-field>
3970
+
3971
+ <ng-container *ngIf="!isShowControl()">
3972
+ <div class="cva-style-disable-text">
3973
+ <mat-label *ngIf="!isLabelOutside && isFloatLabel">
3974
+ {{ (label ? label : placeholder) | translate }}
3975
+ </mat-label>
3976
+ <div [title]="title ? title : ''">
3977
+ {{ title ? title : '' }}
3978
+ </div>
3979
+ </div>
3980
+ </ng-container>
3893
3981
  </div>
3894
3982
  `,
3895
3983
  providers: [
@@ -3963,9 +4051,11 @@ class CvaMultiSelectAutocomplete {
3963
4051
  selectAllChecked = false;
3964
4052
  labelCount = 1;
3965
4053
  cdkVirtualScrollViewPort;
4054
+ config;
3966
4055
  constructor(translateService, injector, ngControl) {
3967
4056
  this.translateService = translateService;
3968
4057
  this.injector = injector;
4058
+ this.config = injector.get(InjectTokenNextSolutionsConfig);
3969
4059
  if (ngControl) {
3970
4060
  ngControl.valueAccessor = this;
3971
4061
  }
@@ -3974,6 +4064,10 @@ class CvaMultiSelectAutocomplete {
3974
4064
  get displayString() {
3975
4065
  return this._displayString;
3976
4066
  }
4067
+ _titleString = '';
4068
+ get titleString() {
4069
+ return this._titleString;
4070
+ }
3977
4071
  get NsValidator() {
3978
4072
  return ValidatorService;
3979
4073
  }
@@ -4036,7 +4130,9 @@ class CvaMultiSelectAutocomplete {
4036
4130
  }
4037
4131
  this.selectedOptionDataChange.emit(this.valueOptionRef);
4038
4132
  }
4039
- this._displayString = this.onDisplayString();
4133
+ const { _displayString, _titleString } = this.onDisplayString();
4134
+ this._displayString = _displayString;
4135
+ this._titleString = _titleString;
4040
4136
  }
4041
4137
  registerOnChange(fn) {
4042
4138
  this.propagateChange = fn;
@@ -4096,6 +4192,7 @@ class CvaMultiSelectAutocomplete {
4096
4192
  }
4097
4193
  onDisplayString() {
4098
4194
  let _displayString = '';
4195
+ const titles = [];
4099
4196
  if (this.value !== null && this.value !== undefined && this.value !== ''
4100
4197
  && (!this.multiple || this.value.length > 0)) {
4101
4198
  let displayOptions = [];
@@ -4116,6 +4213,12 @@ class CvaMultiSelectAutocomplete {
4116
4213
  _displayString += ` (+${this.value.length - this.labelCount} ${strOthers})`;
4117
4214
  }
4118
4215
  }
4216
+ for (let i = 0; i < this.value.length; i++) {
4217
+ const displayOption = this.options.filter(option => option.value === this.value[i])[0];
4218
+ if (displayOption) {
4219
+ titles.push(this.isTree ? this.onDisplayTreeData(displayOption.displayValue, true) : displayOption.displayValue);
4220
+ }
4221
+ }
4119
4222
  }
4120
4223
  else {
4121
4224
  // Single select display
@@ -4125,9 +4228,11 @@ class CvaMultiSelectAutocomplete {
4125
4228
  ? this.onDisplayTreeData(displayOptions[0].displayValue, true)
4126
4229
  : displayOptions[0].displayValue;
4127
4230
  }
4231
+ titles.push(_displayString);
4128
4232
  }
4129
4233
  }
4130
- return _displayString;
4234
+ const _titleString = titles.join(', ');
4235
+ return { _displayString, _titleString };
4131
4236
  }
4132
4237
  /* Nếu không dùng virtual scroll thì mat-options trong mat-select được load hết
4133
4238
  * 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 {
4213
4318
  const height = numberOfItems * this.sizeOfItemsInListByPixels;
4214
4319
  return height > 200 ? 200 : height;
4215
4320
  }
4321
+ isShowControl() {
4322
+ return !this.disabled || (this.disabled && this.config && this.config.STYLE_DISABLE === 'CONTROL');
4323
+ }
4216
4324
  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 });
4217
4325
  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: `
4218
4326
  <!-- css labelOutside trong base.theme-->
@@ -4228,7 +4336,8 @@ class CvaMultiSelectAutocomplete {
4228
4336
  </div>
4229
4337
  </div>
4230
4338
  </mat-label>
4231
- <mat-form-field appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
4339
+ <mat-form-field *ngIf="isShowControl()"
4340
+ appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
4232
4341
  [hideRequiredMarker]="!isFloatLabel"
4233
4342
  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4234
4343
  <mat-label
@@ -4255,7 +4364,7 @@ class CvaMultiSelectAutocomplete {
4255
4364
  </button>
4256
4365
  </div>
4257
4366
  </div>
4258
- <mat-select-trigger title="{{displayString|translate}}">
4367
+ <mat-select-trigger title="{{titleString|translate}}">
4259
4368
  {{ displayString | translate }}
4260
4369
  </mat-select-trigger>
4261
4370
  <cdk-virtual-scroll-viewport [itemSize]="getItemSize()"
@@ -4292,8 +4401,18 @@ class CvaMultiSelectAutocomplete {
4292
4401
  {{ NsValidator.getErrorMessage(formControl, errorMessages) | translate }}
4293
4402
  </mat-hint>
4294
4403
  </mat-form-field>
4404
+ <ng-container *ngIf="!isShowControl()">
4405
+ <div class="cva-style-disable-text">
4406
+ <mat-label *ngIf="!isLabelOutside && isFloatLabel">
4407
+ {{ (label ? label : placeholder) | translate }}
4408
+ </mat-label>
4409
+ <div [title]="titleString | translate">
4410
+ {{ displayString | translate }}
4411
+ </div>
4412
+ </div>
4413
+ </ng-container>
4295
4414
  </div>
4296
- `, 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: i8$1.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" }] });
4415
+ `, 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" }] });
4297
4416
  }
4298
4417
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiSelectAutocomplete, decorators: [{
4299
4418
  type: Component,
@@ -4314,7 +4433,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
4314
4433
  </div>
4315
4434
  </div>
4316
4435
  </mat-label>
4317
- <mat-form-field appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
4436
+ <mat-form-field *ngIf="isShowControl()"
4437
+ appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
4318
4438
  [hideRequiredMarker]="!isFloatLabel"
4319
4439
  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4320
4440
  <mat-label
@@ -4341,7 +4461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
4341
4461
  </button>
4342
4462
  </div>
4343
4463
  </div>
4344
- <mat-select-trigger title="{{displayString|translate}}">
4464
+ <mat-select-trigger title="{{titleString|translate}}">
4345
4465
  {{ displayString | translate }}
4346
4466
  </mat-select-trigger>
4347
4467
  <cdk-virtual-scroll-viewport [itemSize]="getItemSize()"
@@ -4378,6 +4498,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
4378
4498
  {{ NsValidator.getErrorMessage(formControl, errorMessages) | translate }}
4379
4499
  </mat-hint>
4380
4500
  </mat-form-field>
4501
+ <ng-container *ngIf="!isShowControl()">
4502
+ <div class="cva-style-disable-text">
4503
+ <mat-label *ngIf="!isLabelOutside && isFloatLabel">
4504
+ {{ (label ? label : placeholder) | translate }}
4505
+ </mat-label>
4506
+ <div [title]="titleString | translate">
4507
+ {{ displayString | translate }}
4508
+ </div>
4509
+ </div>
4510
+ </ng-container>
4381
4511
  </div>
4382
4512
  `,
4383
4513
  }]
@@ -4436,7 +4566,6 @@ class CvaLiveSearchingComponent {
4436
4566
  hint = '';
4437
4567
  required = false;
4438
4568
  disabled = false;
4439
- readonly = false;
4440
4569
  errorMessages = new Map();
4441
4570
  isLabelOutside = false;
4442
4571
  isFloatLabel = true;
@@ -4455,9 +4584,11 @@ class CvaLiveSearchingComponent {
4455
4584
  filteredOptions = [];
4456
4585
  selected;
4457
4586
  loading = false;
4587
+ config;
4458
4588
  searchSub;
4459
4589
  constructor(injector, ngControl) {
4460
4590
  this.injector = injector;
4591
+ this.config = injector.get(InjectTokenNextSolutionsConfig);
4461
4592
  if (ngControl) {
4462
4593
  // Hành động này thay cho provide: NG_VALUE_ACCESSOR và gắn ControlValueAccessor này vào parent FormControl
4463
4594
  ngControl.valueAccessor = this;
@@ -4532,6 +4663,8 @@ class CvaLiveSearchingComponent {
4532
4663
  writeValue(obj) {
4533
4664
  if (!obj || typeof obj !== 'string') {
4534
4665
  this.selected = {};
4666
+ this.filteredOptions.length = 0;
4667
+ this.filteredOptions = [];
4535
4668
  this.textControl.setValue('', { emitEvent: false });
4536
4669
  this.updateRowOrFormGroup();
4537
4670
  return;
@@ -4546,9 +4679,7 @@ class CvaLiveSearchingComponent {
4546
4679
  // Khi textValueChange chưa chạy không tìm thấy
4547
4680
  this.searchFn(obj).subscribe(values => {
4548
4681
  if (values && values.length > 0) {
4549
- const emptyObj = {};
4550
- emptyObj[this.displayKey] = '';
4551
- this.filteredOptions = [emptyObj, ...values];
4682
+ this.filteredOptions = [...values];
4552
4683
  this.onOptionSelect(obj);
4553
4684
  }
4554
4685
  });
@@ -4569,11 +4700,15 @@ class CvaLiveSearchingComponent {
4569
4700
  return of([]);
4570
4701
  return this.searchFn ? this.searchFn(text) : of([]);
4571
4702
  }), tap(() => this.loading = false)).subscribe((data) => {
4572
- const emptyObj = {};
4573
- emptyObj[this.displayKey] = '';
4574
- this.filteredOptions = this.selected
4575
- ? [this.selected, emptyObj, ...data.filter((x) => x[this.displayKey] !== this.selected[this.displayKey])]
4576
- : data;
4703
+ this.filteredOptions.length = 0;
4704
+ this.filteredOptions = [];
4705
+ if (!!this.selected && !!this.selected[this.displayKey]) {
4706
+ this.filteredOptions.push(this.selected);
4707
+ this.filteredOptions.push(...data.filter((x) => x[this.displayKey] !== this.selected[this.displayKey]));
4708
+ }
4709
+ else {
4710
+ this.filteredOptions.push(...data);
4711
+ }
4577
4712
  });
4578
4713
  }
4579
4714
  updateRowOrFormGroup() {
@@ -4594,8 +4729,14 @@ class CvaLiveSearchingComponent {
4594
4729
  this.propagateChange(this.selected[this.displayKey]);
4595
4730
  this.onChange.emit(this.selected[this.displayKey]);
4596
4731
  }
4732
+ onClear() {
4733
+ this.writeValue(null);
4734
+ }
4735
+ isShowControl() {
4736
+ return !this.disabled || (this.disabled && this.config && this.config.STYLE_DISABLE === 'CONTROL');
4737
+ }
4597
4738
  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 });
4598
- 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: `
4739
+ 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: `
4599
4740
  <div class="cva-live-searching"
4600
4741
  [ngClass]="{'labelOutside': !!isLabelOutside,
4601
4742
  'float_label': !!isFloatLabel && !isLabelOutside}"
@@ -4609,7 +4750,8 @@ class CvaLiveSearchingComponent {
4609
4750
  </div>
4610
4751
  </div>
4611
4752
  </mat-label>
4612
- <mat-form-field appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
4753
+ <mat-form-field *ngIf="isShowControl()"
4754
+ appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
4613
4755
  [hideRequiredMarker]="!isFloatLabel"
4614
4756
  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4615
4757
  <mat-label *ngIf="!isLabelOutside && !!isFloatLabel">
@@ -4619,15 +4761,17 @@ class CvaLiveSearchingComponent {
4619
4761
  matInput
4620
4762
  [required]="required"
4621
4763
  [disabled]="disabled"
4622
- [placeholder]="placeholder"
4764
+ placeholder="{{placeholder|translate}}"
4623
4765
  [formControl]="textControl"
4624
4766
  [matAutocomplete]="auto"
4625
- readonly="{{readonly}}" />
4767
+ readonly="{{disabled}}" />
4768
+ <button mat-icon-button color="warn" class="btnClear" matSuffix (click)="onClear()"
4769
+ *ngIf="!loading && !disabled">
4770
+ <mat-icon>clear</mat-icon>
4771
+ </button>
4772
+ <mat-spinner diameter="20" matSuffix *ngIf="loading"></mat-spinner>
4626
4773
  <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption
4627
4774
  (optionSelected)="onOptionSelect($event.option.value)">
4628
- <mat-option *ngIf="loading" class="loading-option">
4629
- <mat-spinner diameter="20"></mat-spinner>
4630
- </mat-option>
4631
4775
  <mat-option *ngFor="let option of filteredOptions" [value]="option[displayKey]">
4632
4776
  {{ option[displayKey] }}
4633
4777
  </mat-option>
@@ -4638,8 +4782,19 @@ class CvaLiveSearchingComponent {
4638
4782
  {{ NsValidator.getErrorMessageV1(control, errorMessages).msg | translate: NsValidator.getErrorMessageV1(control, errorMessages).params }}
4639
4783
  </mat-hint>
4640
4784
  </mat-form-field>
4785
+
4786
+ <ng-container *ngIf="!isShowControl()">
4787
+ <div class="cva-style-disable-text">
4788
+ <mat-label *ngIf="!isLabelOutside && isFloatLabel">
4789
+ {{ (label ? label : placeholder) | translate }}
4790
+ </mat-label>
4791
+ <div [title]="textControl.value">
4792
+ {{ textControl.value }}
4793
+ </div>
4794
+ </div>
4795
+ </ng-container>
4641
4796
  </div>
4642
- `, 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: 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: "component", type: i7$1.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" }] });
4797
+ `, 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" }] });
4643
4798
  }
4644
4799
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaLiveSearchingComponent, decorators: [{
4645
4800
  type: Component,
@@ -4660,7 +4815,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
4660
4815
  </div>
4661
4816
  </div>
4662
4817
  </mat-label>
4663
- <mat-form-field appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
4818
+ <mat-form-field *ngIf="isShowControl()"
4819
+ appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
4664
4820
  [hideRequiredMarker]="!isFloatLabel"
4665
4821
  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4666
4822
  <mat-label *ngIf="!isLabelOutside && !!isFloatLabel">
@@ -4670,15 +4826,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
4670
4826
  matInput
4671
4827
  [required]="required"
4672
4828
  [disabled]="disabled"
4673
- [placeholder]="placeholder"
4829
+ placeholder="{{placeholder|translate}}"
4674
4830
  [formControl]="textControl"
4675
4831
  [matAutocomplete]="auto"
4676
- readonly="{{readonly}}" />
4832
+ readonly="{{disabled}}" />
4833
+ <button mat-icon-button color="warn" class="btnClear" matSuffix (click)="onClear()"
4834
+ *ngIf="!loading && !disabled">
4835
+ <mat-icon>clear</mat-icon>
4836
+ </button>
4837
+ <mat-spinner diameter="20" matSuffix *ngIf="loading"></mat-spinner>
4677
4838
  <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption
4678
4839
  (optionSelected)="onOptionSelect($event.option.value)">
4679
- <mat-option *ngIf="loading" class="loading-option">
4680
- <mat-spinner diameter="20"></mat-spinner>
4681
- </mat-option>
4682
4840
  <mat-option *ngFor="let option of filteredOptions" [value]="option[displayKey]">
4683
4841
  {{ option[displayKey] }}
4684
4842
  </mat-option>
@@ -4689,6 +4847,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
4689
4847
  {{ NsValidator.getErrorMessageV1(control, errorMessages).msg | translate: NsValidator.getErrorMessageV1(control, errorMessages).params }}
4690
4848
  </mat-hint>
4691
4849
  </mat-form-field>
4850
+
4851
+ <ng-container *ngIf="!isShowControl()">
4852
+ <div class="cva-style-disable-text">
4853
+ <mat-label *ngIf="!isLabelOutside && isFloatLabel">
4854
+ {{ (label ? label : placeholder) | translate }}
4855
+ </mat-label>
4856
+ <div [title]="textControl.value">
4857
+ {{ textControl.value }}
4858
+ </div>
4859
+ </div>
4860
+ </ng-container>
4692
4861
  </div>
4693
4862
  `,
4694
4863
  }]
@@ -4706,8 +4875,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
4706
4875
  type: Input
4707
4876
  }], disabled: [{
4708
4877
  type: Input
4709
- }], readonly: [{
4710
- type: Input
4711
4878
  }], errorMessages: [{
4712
4879
  type: Input
4713
4880
  }], isLabelOutside: [{
@@ -4945,7 +5112,7 @@ class CvaSmartTableComponent {
4945
5112
  }
4946
5113
  }
4947
5114
  getRequired(column) {
4948
- return typeof (column.isRequired) === 'function' ? column.isRequired() : column.isRequired;
5115
+ return typeof (column.isRequired) === 'function' ? column.isRequired() : (column.isRequired ?? false);
4949
5116
  }
4950
5117
  getIsDecimal(column) {
4951
5118
  return column.isDecimal ? typeof (column.isDecimal) === 'boolean' ? column.isDecimal : column.isDecimal() : false;
@@ -5043,7 +5210,7 @@ class CvaSmartTableComponent {
5043
5210
  *ngSwitchCase="ColumnTypes.LINK"
5044
5211
  fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
5045
5212
  title="{{column.title(result)}}">
5046
- <a [routerLink]="[column.link(result)]">{{ column.cell(result) }}</a>
5213
+ <a [routerLink]="[column.link ? column.link(result) : '']">{{ column.cell(result) }}</a>
5047
5214
  </div>
5048
5215
  <div class="img-view viewData {{TableService.getColumnClassName(column,result)}}"
5049
5216
  [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
@@ -5080,7 +5247,7 @@ class CvaSmartTableComponent {
5080
5247
  color="{{column.button.color}}"
5081
5248
  [ngClass]="column.button.className"
5082
5249
  (click)="onClick(column.button.click, result, i)"
5083
- disabled="{{column.button.disabled ? column.button.disabled(result) : false}}"
5250
+ disabled="{{column.button && column.button.disabled ? column.button.disabled(result) : false}}"
5084
5251
  matTooltip="{{(column.button.title ? column.button.title : '') | translate}}"
5085
5252
  [ngSwitch]="TableService.getIconType(column.button)">
5086
5253
  <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ column.button.icon }}</mat-icon>
@@ -5124,13 +5291,13 @@ class CvaSmartTableComponent {
5124
5291
  <cva-multi-select-autocomplete [isFormControl]="false"
5125
5292
  *ngSwitchCase="ColumnTypes.MULTI_SELECT_AUTOCOMPLETE"
5126
5293
  class="multiSelectAutocomplete"
5127
- [isTree]="column.isTree"
5294
+ [isTree]="column.isTree??false"
5128
5295
  [value]="result[column.columnDef]"
5129
5296
  [errorMessages]="getErrorMessageMap(column)"
5130
5297
  [required]="getRequired(column)"
5131
5298
  [disabled]="column.disabled ? column.disabled(result) : false"
5132
- [multiple]="column.isMultipleSelect"
5133
- [options]="column.optionValues(result)"
5299
+ [multiple]="column.isMultipleSelect??false"
5300
+ [options]="column.optionValues ? column.optionValues(result) : []"
5134
5301
  (selectionChange)="onCellValueChange(result, column, $event);">
5135
5302
  </cva-multi-select-autocomplete>
5136
5303
  <div class="checkbox-cell"
@@ -5148,7 +5315,7 @@ class CvaSmartTableComponent {
5148
5315
  [row]="result" [columnDef]="column.columnDef"
5149
5316
  [searchFn]="column.searchFn"
5150
5317
  [mappingConfig]="column.mappingConfig"
5151
- [displayKey]="column.displayKey"
5318
+ [displayKey]="column.displayKey??''"
5152
5319
  [errorMessages]="getErrorMessageMap(column)"
5153
5320
  (onChange)="onCellValueChange(result, column, $event)">
5154
5321
  </cva-live-searching>
@@ -5194,7 +5361,7 @@ class CvaSmartTableComponent {
5194
5361
  color="{{button.color}}"
5195
5362
  [ngClass]="button.className"
5196
5363
  (click)="onClick(button.click, cell, i)"
5197
- disabled="{{button.disabled ? button.disabled(cell) : false}}"
5364
+ disabled="{{button && button.disabled ? button.disabled(cell) : false}}"
5198
5365
  matTooltip="{{(button.title ? button.title : '') | translate}}"
5199
5366
  [ngSwitch]="TableService.getIconType(button)">
5200
5367
  <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ button.icon }}</mat-icon>
@@ -5232,7 +5399,7 @@ class CvaSmartTableComponent {
5232
5399
  </ng-container>
5233
5400
  </table>
5234
5401
  </div>
5235
- `, 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: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.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" }] });
5402
+ `, 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" }] });
5236
5403
  }
5237
5404
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaSmartTableComponent, decorators: [{
5238
5405
  type: Component,
@@ -5276,7 +5443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5276
5443
  *ngSwitchCase="ColumnTypes.LINK"
5277
5444
  fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
5278
5445
  title="{{column.title(result)}}">
5279
- <a [routerLink]="[column.link(result)]">{{ column.cell(result) }}</a>
5446
+ <a [routerLink]="[column.link ? column.link(result) : '']">{{ column.cell(result) }}</a>
5280
5447
  </div>
5281
5448
  <div class="img-view viewData {{TableService.getColumnClassName(column,result)}}"
5282
5449
  [ngClass]="{'break-word-style-view': column.hasWordBreakStyle}"
@@ -5313,7 +5480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5313
5480
  color="{{column.button.color}}"
5314
5481
  [ngClass]="column.button.className"
5315
5482
  (click)="onClick(column.button.click, result, i)"
5316
- disabled="{{column.button.disabled ? column.button.disabled(result) : false}}"
5483
+ disabled="{{column.button && column.button.disabled ? column.button.disabled(result) : false}}"
5317
5484
  matTooltip="{{(column.button.title ? column.button.title : '') | translate}}"
5318
5485
  [ngSwitch]="TableService.getIconType(column.button)">
5319
5486
  <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ column.button.icon }}</mat-icon>
@@ -5357,13 +5524,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5357
5524
  <cva-multi-select-autocomplete [isFormControl]="false"
5358
5525
  *ngSwitchCase="ColumnTypes.MULTI_SELECT_AUTOCOMPLETE"
5359
5526
  class="multiSelectAutocomplete"
5360
- [isTree]="column.isTree"
5527
+ [isTree]="column.isTree??false"
5361
5528
  [value]="result[column.columnDef]"
5362
5529
  [errorMessages]="getErrorMessageMap(column)"
5363
5530
  [required]="getRequired(column)"
5364
5531
  [disabled]="column.disabled ? column.disabled(result) : false"
5365
- [multiple]="column.isMultipleSelect"
5366
- [options]="column.optionValues(result)"
5532
+ [multiple]="column.isMultipleSelect??false"
5533
+ [options]="column.optionValues ? column.optionValues(result) : []"
5367
5534
  (selectionChange)="onCellValueChange(result, column, $event);">
5368
5535
  </cva-multi-select-autocomplete>
5369
5536
  <div class="checkbox-cell"
@@ -5381,7 +5548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5381
5548
  [row]="result" [columnDef]="column.columnDef"
5382
5549
  [searchFn]="column.searchFn"
5383
5550
  [mappingConfig]="column.mappingConfig"
5384
- [displayKey]="column.displayKey"
5551
+ [displayKey]="column.displayKey??''"
5385
5552
  [errorMessages]="getErrorMessageMap(column)"
5386
5553
  (onChange)="onCellValueChange(result, column, $event)">
5387
5554
  </cva-live-searching>
@@ -5427,7 +5594,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5427
5594
  color="{{button.color}}"
5428
5595
  [ngClass]="button.className"
5429
5596
  (click)="onClick(button.click, cell, i)"
5430
- disabled="{{button.disabled ? button.disabled(cell) : false}}"
5597
+ disabled="{{button && button.disabled ? button.disabled(cell) : false}}"
5431
5598
  matTooltip="{{(button.title ? button.title : '') | translate}}"
5432
5599
  [ngSwitch]="TableService.getIconType(button)">
5433
5600
  <mat-icon *ngSwitchCase="IconTypes.MATERIAL_ICON">{{ button.icon }}</mat-icon>
@@ -5549,9 +5716,6 @@ class CvaRangeDatePickerComponent {
5549
5716
  isFormControl = true;
5550
5717
  formControl;
5551
5718
  defaultFromDate; // lưu giá trị khởi tạo ban đầu khi truyền từ bên ngoài vào
5552
- get NsValiator() {
5553
- return ValidatorService;
5554
- }
5555
5719
  constructor(dateServiceUtil, ngControl, injector) {
5556
5720
  this.dateServiceUtil = dateServiceUtil;
5557
5721
  this.injector = injector;
@@ -5561,6 +5725,9 @@ class CvaRangeDatePickerComponent {
5561
5725
  ngControl.valueAccessor = this;
5562
5726
  }
5563
5727
  }
5728
+ get NsValiator() {
5729
+ return ValidatorService;
5730
+ }
5564
5731
  get fromDateValue() {
5565
5732
  if (this.value.fromDate instanceof Date) {
5566
5733
  return this.value.fromDate;
@@ -5815,7 +5982,7 @@ class CvaRangeDatePickerComponent {
5815
5982
  </mat-hint>
5816
5983
  </mat-form-field>
5817
5984
  </div>
5818
- `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i5$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i5$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
5985
+ `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i5$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i5$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
5819
5986
  }
5820
5987
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaRangeDatePickerComponent, decorators: [{
5821
5988
  type: Component,
@@ -6113,7 +6280,7 @@ class CvaMultiUploadComponent {
6113
6280
  <mat-error *ngIf="typeError!==null">{{ typeError + ' ' + ('common.is.not-accept' | translate) }}</mat-error>
6114
6281
  </div>
6115
6282
  </div>
6116
- `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: DragDropDirective, selector: "[appDragDrop]", outputs: ["onFileDropped"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
6283
+ `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: DragDropDirective, selector: "[appDragDrop]", outputs: ["onFileDropped"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
6117
6284
  }
6118
6285
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiUploadComponent, decorators: [{
6119
6286
  type: Component,
@@ -6841,7 +7008,7 @@ class CvaLoaderComponent {
6841
7008
  </div>
6842
7009
  <img *ngIf="!!imgSrc" [src]="imgSrc" alt=""/>
6843
7010
  </div>
6844
- `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
7011
+ `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i9$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
6845
7012
  }
6846
7013
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaLoaderComponent, decorators: [{
6847
7014
  type: Component,
@@ -7085,7 +7252,7 @@ class CvaTreeComponent {
7085
7252
  </mat-tree>
7086
7253
  </div>
7087
7254
  </div>
7088
- `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i6$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i6$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i6$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i6$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i6$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CvaMultiSelectAutocomplete, selector: "cva-multi-select-autocomplete", inputs: ["placeholder", "label", "hint", "value", "options", "disabled", "errorMessages", "multiple", "required", "isTree", "treeSymbol", "sizeOfItemsInListByPixels", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "isFormControl"], outputs: ["selectionChange", "selectedOptionDataChange"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
7255
+ `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6$1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i6$1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i6$1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i6$1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i6$1.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i6$1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CvaMultiSelectAutocomplete, selector: "cva-multi-select-autocomplete", inputs: ["placeholder", "label", "hint", "value", "options", "disabled", "errorMessages", "multiple", "required", "isTree", "treeSymbol", "sizeOfItemsInListByPixels", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "isFormControl"], outputs: ["selectionChange", "selectedOptionDataChange"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
7089
7256
  }
7090
7257
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaTreeComponent, decorators: [{
7091
7258
  type: Component,
@@ -7466,7 +7633,7 @@ class CvaFlatTreeNodeLeftComponent {
7466
7633
  fxLayoutAlign="space-between center">
7467
7634
  <button type="button" mat-icon-button (click)="toggle.emit()"
7468
7635
  [attr.aria-label]="'toggle ' + node.displayValue">
7469
- <i class="fas {{treeControl?.isExpanded(node) ? 'fa-chevron-up' : 'fa-chevron-down'}}"></i>
7636
+ <i class="fas {{(treeControl && treeControl.isExpanded(node)) ? 'fa-chevron-up' : 'fa-chevron-down'}}"></i>
7470
7637
  </button>
7471
7638
  <span (click)="onParentNodeClick.emit()">{{ node.displayValue }}</span>
7472
7639
  </div>
@@ -7509,7 +7676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
7509
7676
  fxLayoutAlign="space-between center">
7510
7677
  <button type="button" mat-icon-button (click)="toggle.emit()"
7511
7678
  [attr.aria-label]="'toggle ' + node.displayValue">
7512
- <i class="fas {{treeControl?.isExpanded(node) ? 'fa-chevron-up' : 'fa-chevron-down'}}"></i>
7679
+ <i class="fas {{(treeControl && treeControl.isExpanded(node)) ? 'fa-chevron-up' : 'fa-chevron-down'}}"></i>
7513
7680
  </button>
7514
7681
  <span (click)="onParentNodeClick.emit()">{{ node.displayValue }}</span>
7515
7682
  </div>
@@ -7892,6 +8059,7 @@ class CvaFlatTreeComponent {
7892
8059
  }
7893
8060
  this.checkedDefaultValue();
7894
8061
  this.updateSelectAll();
8062
+ this.expandTreeDataSource(this.treeControl, 'isExpanded');
7895
8063
  this.updateSelectedTree();
7896
8064
  this.callValidator();
7897
8065
  if (this.isView) {
@@ -8075,9 +8243,7 @@ class CvaFlatTreeComponent {
8075
8243
  if (orgNode) {
8076
8244
  orgNode.isFilterExpanded = treeControl.isExpanded(node);
8077
8245
  }
8078
- if (this.chooseVirtualScroll) {
8079
- this.chooseVirtualScroll.checkViewportSize();
8080
- }
8246
+ this.setDataSourceOrigin();
8081
8247
  }
8082
8248
  toggleSelectedTree(node) {
8083
8249
  if (node) {
@@ -8285,17 +8451,18 @@ class CvaFlatTreeComponent {
8285
8451
  <cdk-virtual-scroll-viewport #chooseAreaScrollViewport itemSize="{{itemSize}}"
8286
8452
  [ngStyle]="{height: viewHeight + 'px'}">
8287
8453
  <ng-container *cdkVirtualFor="let node of dataSource">
8288
- <cva-flat-tree-node-left [style.padding-left]="node.level * paddingLeft + 'px'"
8289
- [attr.aria-level]="node.level"
8290
- [treeControl]="treeControl"
8291
- [isHideCheckbox]="isHideCheckbox"
8292
- [nodeClicked]="nodeClicked"
8293
- [node]="node"
8294
- (toggle)="toggleTreeControl(treeControl, node)"
8295
- (onParentNodeClick)="onParentNodeClick(node)"
8296
- (onLeafNodeClick)="onLeafNodeClick(node)"
8297
- (ngModelParentChange)="toggleNodeCheck(node, $event)"
8298
- (ngModelLeafChange)="toggleNodeCheck(node, $event)">
8454
+ <cva-flat-tree-node-left
8455
+ [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8456
+ [attr.aria-level]="node.level"
8457
+ [treeControl]="treeControl"
8458
+ [isHideCheckbox]="isHideCheckbox"
8459
+ [nodeClicked]="nodeClicked"
8460
+ [node]="node"
8461
+ (toggle)="toggleTreeControl(treeControl, node)"
8462
+ (onParentNodeClick)="onParentNodeClick(node)"
8463
+ (onLeafNodeClick)="onLeafNodeClick(node)"
8464
+ (ngModelParentChange)="toggleNodeCheck(node, $event)"
8465
+ (ngModelLeafChange)="toggleNodeCheck(node, $event)">
8299
8466
  </cva-flat-tree-node-left>
8300
8467
  </ng-container>
8301
8468
  </cdk-virtual-scroll-viewport>
@@ -8314,14 +8481,15 @@ class CvaFlatTreeComponent {
8314
8481
  *ngIf="!isCollapseSelected"
8315
8482
  itemSize="{{itemSize}}" [ngStyle]="{height: viewHeight + 'px'}">
8316
8483
  <ng-container *cdkVirtualFor="let node of selectedDataSource">
8317
- <cva-flat-tree-node-right [style.padding-left]="node.level * paddingLeft + 'px'"
8318
- [attr.aria-level]="node.level"
8319
- [treeControl]="selectedTreeControl"
8320
- [node]="node"
8321
- [isView]="isView"
8322
- (toggle)="toggleSelectedTree(node)"
8323
- (deSelectLeafNode)="deSelect(node)"
8324
- (deSelectParentNode)="deSelectParent(node)">
8484
+ <cva-flat-tree-node-right
8485
+ [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8486
+ [attr.aria-level]="node.level"
8487
+ [treeControl]="selectedTreeControl"
8488
+ [node]="node"
8489
+ [isView]="isView"
8490
+ (toggle)="toggleSelectedTree(node)"
8491
+ (deSelectLeafNode)="deSelect(node)"
8492
+ (deSelectParentNode)="deSelectParent(node)">
8325
8493
  </cva-flat-tree-node-right>
8326
8494
  </ng-container>
8327
8495
  </cdk-virtual-scroll-viewport>
@@ -8378,17 +8546,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
8378
8546
  <cdk-virtual-scroll-viewport #chooseAreaScrollViewport itemSize="{{itemSize}}"
8379
8547
  [ngStyle]="{height: viewHeight + 'px'}">
8380
8548
  <ng-container *cdkVirtualFor="let node of dataSource">
8381
- <cva-flat-tree-node-left [style.padding-left]="node.level * paddingLeft + 'px'"
8382
- [attr.aria-level]="node.level"
8383
- [treeControl]="treeControl"
8384
- [isHideCheckbox]="isHideCheckbox"
8385
- [nodeClicked]="nodeClicked"
8386
- [node]="node"
8387
- (toggle)="toggleTreeControl(treeControl, node)"
8388
- (onParentNodeClick)="onParentNodeClick(node)"
8389
- (onLeafNodeClick)="onLeafNodeClick(node)"
8390
- (ngModelParentChange)="toggleNodeCheck(node, $event)"
8391
- (ngModelLeafChange)="toggleNodeCheck(node, $event)">
8549
+ <cva-flat-tree-node-left
8550
+ [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8551
+ [attr.aria-level]="node.level"
8552
+ [treeControl]="treeControl"
8553
+ [isHideCheckbox]="isHideCheckbox"
8554
+ [nodeClicked]="nodeClicked"
8555
+ [node]="node"
8556
+ (toggle)="toggleTreeControl(treeControl, node)"
8557
+ (onParentNodeClick)="onParentNodeClick(node)"
8558
+ (onLeafNodeClick)="onLeafNodeClick(node)"
8559
+ (ngModelParentChange)="toggleNodeCheck(node, $event)"
8560
+ (ngModelLeafChange)="toggleNodeCheck(node, $event)">
8392
8561
  </cva-flat-tree-node-left>
8393
8562
  </ng-container>
8394
8563
  </cdk-virtual-scroll-viewport>
@@ -8407,14 +8576,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
8407
8576
  *ngIf="!isCollapseSelected"
8408
8577
  itemSize="{{itemSize}}" [ngStyle]="{height: viewHeight + 'px'}">
8409
8578
  <ng-container *cdkVirtualFor="let node of selectedDataSource">
8410
- <cva-flat-tree-node-right [style.padding-left]="node.level * paddingLeft + 'px'"
8411
- [attr.aria-level]="node.level"
8412
- [treeControl]="selectedTreeControl"
8413
- [node]="node"
8414
- [isView]="isView"
8415
- (toggle)="toggleSelectedTree(node)"
8416
- (deSelectLeafNode)="deSelect(node)"
8417
- (deSelectParentNode)="deSelectParent(node)">
8579
+ <cva-flat-tree-node-right
8580
+ [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8581
+ [attr.aria-level]="node.level"
8582
+ [treeControl]="selectedTreeControl"
8583
+ [node]="node"
8584
+ [isView]="isView"
8585
+ (toggle)="toggleSelectedTree(node)"
8586
+ (deSelectLeafNode)="deSelect(node)"
8587
+ (deSelectParentNode)="deSelectParent(node)">
8418
8588
  </cva-flat-tree-node-right>
8419
8589
  </ng-container>
8420
8590
  </cdk-virtual-scroll-viewport>
@@ -8654,7 +8824,6 @@ class CvaQuillEditorComponent {
8654
8824
  onlyCheckTextValidation = true;
8655
8825
  format = 'html';
8656
8826
  pattern = null;
8657
- readonly = false;
8658
8827
  errorMessages = new Map();
8659
8828
  onChange = new EventEmitter();
8660
8829
  multiline = false;
@@ -8671,9 +8840,6 @@ class CvaQuillEditorComponent {
8671
8840
  isFormControl = true;
8672
8841
  formatFunc;
8673
8842
  control = undefined;
8674
- get NsValidator() {
8675
- return ValidatorService;
8676
- }
8677
8843
  constructor(injector, ngControl) {
8678
8844
  this.injector = injector;
8679
8845
  if (ngControl) {
@@ -8681,8 +8847,8 @@ class CvaQuillEditorComponent {
8681
8847
  ngControl.valueAccessor = this;
8682
8848
  }
8683
8849
  }
8684
- ngOnInit() {
8685
- this.callValidator();
8850
+ get NsValidator() {
8851
+ return ValidatorService;
8686
8852
  }
8687
8853
  get textValue() {
8688
8854
  return this.text;
@@ -8690,6 +8856,9 @@ class CvaQuillEditorComponent {
8690
8856
  set textValue(val) {
8691
8857
  this.writeValue(val);
8692
8858
  }
8859
+ ngOnInit() {
8860
+ this.callValidator();
8861
+ }
8693
8862
  customLengthValidator = (control) => {
8694
8863
  let length = 0;
8695
8864
  if (!this.onlyCheckTextValidation) {
@@ -8703,16 +8872,16 @@ class CvaQuillEditorComponent {
8703
8872
  return {
8704
8873
  minlength: {
8705
8874
  min: this.minLength,
8706
- actual: length
8707
- }
8875
+ actual: length,
8876
+ },
8708
8877
  };
8709
8878
  }
8710
8879
  if (!!this.maxLength && length > this.maxLength) {
8711
8880
  return {
8712
8881
  maxlength: {
8713
8882
  max: this.maxLength,
8714
- actual: length
8715
- }
8883
+ actual: length,
8884
+ },
8716
8885
  };
8717
8886
  }
8718
8887
  return null;
@@ -8725,16 +8894,16 @@ class CvaQuillEditorComponent {
8725
8894
  return {
8726
8895
  minsize: {
8727
8896
  min: this.minSize,
8728
- actual: size
8729
- }
8897
+ actual: size,
8898
+ },
8730
8899
  };
8731
8900
  }
8732
8901
  if (!!this.maxSize && size > this.maxSize) {
8733
8902
  return {
8734
8903
  maxsize: {
8735
8904
  max: this.maxSize,
8736
- actual: size
8737
- }
8905
+ actual: size,
8906
+ },
8738
8907
  };
8739
8908
  }
8740
8909
  return null;
@@ -8834,89 +9003,91 @@ class CvaQuillEditorComponent {
8834
9003
  this.writeValue(this.text);
8835
9004
  }
8836
9005
  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 });
8837
- 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: `
8838
- <!-- css labelOutside trong base.theme-->
8839
- <div class="cva-quill-editor"
8840
- [ngClass]="{'labelOutside': !!isLabelOutside,
9006
+ 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: `
9007
+ <!-- css labelOutside trong base.theme-->
9008
+ <div class="cva-quill-editor"
9009
+ [ngClass]="{'labelOutside': !!isLabelOutside,
8841
9010
  'float_label': !!isFloatLabel && !isLabelOutside,
8842
9011
  'text_area': !!this.multiline}"
8843
- fxLayout="row" fxLayout.lt-sm="row wrap">
8844
- <mat-label *ngIf="isLabelOutside" class="label_width"
8845
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8846
- <div class="label">
8847
- <div>
8848
- {{(label ? label : '') | translate}}<span
8849
- class="required-label-outside">{{!!required ? '*' : ''}}</span>
8850
- </div>
8851
- </div>
8852
- </mat-label>
8853
- <div class="editor" fxLayout="column" fxFlex="100%">
8854
- <quill-editor [(ngModel)]="textValue"
8855
- [modules]="quillModule"
8856
- [disabled]="disabled"
8857
- [readOnly]="readonly"
8858
- [maxLength]="maxLength"
8859
- [minLength]="minLength"
8860
- [placeholder]="placeholder | translate"
8861
- [format]="format"
8862
- (onFocus)="onFocus($event)"
8863
- (onBlur)="onBlur($event)"
8864
- #quill [ngStyle]="quillStyle"
8865
- (onContentChanged)="onChangeContent(quill, $event)"
8866
- fxFlex="100%" fxFlex.lt-md="100%"
8867
- ></quill-editor>
8868
- <div id="counter"
8869
- *ngIf="!(disabled || readonly) && onFocusStatus && !!maxLength">{{textCounter + '/' + maxLength}}</div>
8870
- <mat-hint align="start" *ngIf="!NsValidator.invalid(control)">{{hint | translate}}</mat-hint>
8871
- <mat-hint style="color: red" align="start" *ngIf="NsValidator.invalid(control)">
8872
- {{NsValidator.getErrorMessageV1(control, errorMessages).msg | translate: NsValidator.getErrorMessageV1(control, errorMessages).params}}
8873
- </mat-hint>
8874
- </div>
9012
+ fxLayout="row" fxLayout.lt-sm="row wrap">
9013
+ <mat-label *ngIf="isLabelOutside" class="label_width"
9014
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
9015
+ <div class="label">
9016
+ <div>
9017
+ {{ (label ? label : '') | translate }}<span
9018
+ class="required-label-outside">{{ !!required ? '*' : '' }}</span>
9019
+ </div>
9020
+ </div>
9021
+ </mat-label>
9022
+ <div class="editor" fxLayout="column" fxFlex="100%">
9023
+ <quill-editor [(ngModel)]="textValue"
9024
+ [modules]="quillModule"
9025
+ [disabled]="disabled"
9026
+ [readOnly]="disabled"
9027
+ [maxLength]="maxLength??999999999"
9028
+ [minLength]="minLength??0"
9029
+ [placeholder]="placeholder | translate"
9030
+ [format]="format"
9031
+ (onFocus)="onFocus($event)"
9032
+ (onBlur)="onBlur($event)"
9033
+ #quill [ngStyle]="quillStyle"
9034
+ (onContentChanged)="onChangeContent(quill, $event)"
9035
+ fxFlex="100%" fxFlex.lt-md="100%"
9036
+ ></quill-editor>
9037
+ <div id="counter"
9038
+ *ngIf="!disabled && onFocusStatus && !!maxLength">{{ textCounter + '/' + maxLength }}
8875
9039
  </div>
8876
- `, 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 });
9040
+ <mat-hint align="start" *ngIf="!NsValidator.invalid(control)">{{ hint | translate }}</mat-hint>
9041
+ <mat-hint style="color: red" align="start" *ngIf="NsValidator.invalid(control)">
9042
+ {{ NsValidator.getErrorMessageV1(control, errorMessages).msg | translate: NsValidator.getErrorMessageV1(control, errorMessages).params }}
9043
+ </mat-hint>
9044
+ </div>
9045
+ </div>
9046
+ `, 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 });
8877
9047
  }
8878
9048
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaQuillEditorComponent, decorators: [{
8879
9049
  type: Component,
8880
9050
  args: [{ selector: 'cva-quill-editor', standalone: false, template: `
8881
- <!-- css labelOutside trong base.theme-->
8882
- <div class="cva-quill-editor"
8883
- [ngClass]="{'labelOutside': !!isLabelOutside,
9051
+ <!-- css labelOutside trong base.theme-->
9052
+ <div class="cva-quill-editor"
9053
+ [ngClass]="{'labelOutside': !!isLabelOutside,
8884
9054
  'float_label': !!isFloatLabel && !isLabelOutside,
8885
9055
  'text_area': !!this.multiline}"
8886
- fxLayout="row" fxLayout.lt-sm="row wrap">
8887
- <mat-label *ngIf="isLabelOutside" class="label_width"
8888
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8889
- <div class="label">
8890
- <div>
8891
- {{(label ? label : '') | translate}}<span
8892
- class="required-label-outside">{{!!required ? '*' : ''}}</span>
8893
- </div>
8894
- </div>
8895
- </mat-label>
8896
- <div class="editor" fxLayout="column" fxFlex="100%">
8897
- <quill-editor [(ngModel)]="textValue"
8898
- [modules]="quillModule"
8899
- [disabled]="disabled"
8900
- [readOnly]="readonly"
8901
- [maxLength]="maxLength"
8902
- [minLength]="minLength"
8903
- [placeholder]="placeholder | translate"
8904
- [format]="format"
8905
- (onFocus)="onFocus($event)"
8906
- (onBlur)="onBlur($event)"
8907
- #quill [ngStyle]="quillStyle"
8908
- (onContentChanged)="onChangeContent(quill, $event)"
8909
- fxFlex="100%" fxFlex.lt-md="100%"
8910
- ></quill-editor>
8911
- <div id="counter"
8912
- *ngIf="!(disabled || readonly) && onFocusStatus && !!maxLength">{{textCounter + '/' + maxLength}}</div>
8913
- <mat-hint align="start" *ngIf="!NsValidator.invalid(control)">{{hint | translate}}</mat-hint>
8914
- <mat-hint style="color: red" align="start" *ngIf="NsValidator.invalid(control)">
8915
- {{NsValidator.getErrorMessageV1(control, errorMessages).msg | translate: NsValidator.getErrorMessageV1(control, errorMessages).params}}
8916
- </mat-hint>
8917
- </div>
9056
+ fxLayout="row" fxLayout.lt-sm="row wrap">
9057
+ <mat-label *ngIf="isLabelOutside" class="label_width"
9058
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
9059
+ <div class="label">
9060
+ <div>
9061
+ {{ (label ? label : '') | translate }}<span
9062
+ class="required-label-outside">{{ !!required ? '*' : '' }}</span>
9063
+ </div>
9064
+ </div>
9065
+ </mat-label>
9066
+ <div class="editor" fxLayout="column" fxFlex="100%">
9067
+ <quill-editor [(ngModel)]="textValue"
9068
+ [modules]="quillModule"
9069
+ [disabled]="disabled"
9070
+ [readOnly]="disabled"
9071
+ [maxLength]="maxLength??999999999"
9072
+ [minLength]="minLength??0"
9073
+ [placeholder]="placeholder | translate"
9074
+ [format]="format"
9075
+ (onFocus)="onFocus($event)"
9076
+ (onBlur)="onBlur($event)"
9077
+ #quill [ngStyle]="quillStyle"
9078
+ (onContentChanged)="onChangeContent(quill, $event)"
9079
+ fxFlex="100%" fxFlex.lt-md="100%"
9080
+ ></quill-editor>
9081
+ <div id="counter"
9082
+ *ngIf="!disabled && onFocusStatus && !!maxLength">{{ textCounter + '/' + maxLength }}
8918
9083
  </div>
8919
- `, 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"] }]
9084
+ <mat-hint align="start" *ngIf="!NsValidator.invalid(control)">{{ hint | translate }}</mat-hint>
9085
+ <mat-hint style="color: red" align="start" *ngIf="NsValidator.invalid(control)">
9086
+ {{ NsValidator.getErrorMessageV1(control, errorMessages).msg | translate: NsValidator.getErrorMessageV1(control, errorMessages).params }}
9087
+ </mat-hint>
9088
+ </div>
9089
+ </div>
9090
+ `, 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"] }]
8920
9091
  }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$2.NgControl, decorators: [{
8921
9092
  type: Self
8922
9093
  }, {
@@ -8945,8 +9116,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
8945
9116
  type: Input
8946
9117
  }], pattern: [{
8947
9118
  type: Input
8948
- }], readonly: [{
8949
- type: Input
8950
9119
  }], errorMessages: [{
8951
9120
  type: Input
8952
9121
  }], onChange: [{