@c10t/nice-component-library 0.0.25 → 0.0.27-a

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 (7) hide show
  1. package/components/tree/cva-flat-tree.component.d.ts +1 -1
  2. package/components/upload/cva-multi-upload.component.d.ts +2 -1
  3. package/directives/numeric-input-format.d.ts +1 -1
  4. package/fesm2022/c10t-nice-component-library.mjs +539 -531
  5. package/fesm2022/c10t-nice-component-library.mjs.map +1 -1
  6. package/models/components/flat-tree-node.model.d.ts +1 -0
  7. package/package.json +1 -1
package/fesm2022/c10t-nice-component-library.mjs CHANGED
@@ -436,6 +436,7 @@ class FlatTreeNodeModel {
436
436
  children = [];
437
437
  value;
438
438
  displayValue = '';
439
+ iconClass = '';
439
440
  checked;
440
441
  checkedDisplay;
441
442
  filterChecked;
@@ -2654,7 +2655,7 @@ class CvaTableComponent {
2654
2655
  this.buttonColspan = TableService.getHeaderButtonColspan(this.buttons, this.results.data);
2655
2656
  }
2656
2657
  onChangeGoToPageNumber($event) {
2657
- if ($event === null || Number.isNaN($event) || !Number.isSafeInteger($event)) {
2658
+ if ($event === null || Number.isNaN($event) || !Number.isSafeInteger($event) || this.goToPageNumber < 1) {
2658
2659
  this.goToPageNumber = 1;
2659
2660
  return;
2660
2661
  }
@@ -3135,15 +3136,14 @@ class NumericInputFormat {
3135
3136
  if (value === null || value === undefined) {
3136
3137
  return '';
3137
3138
  }
3138
- value += '';
3139
+ const raw = value.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 10, useGrouping: false });
3139
3140
  const [thousandSeparator, decimalMarker] = formatNumber(1000.99, this.locale).replace(/\d/g, '');
3140
3141
  this.decimalMarker = decimalMarker;
3141
3142
  // Here value should always come with . as decimal marker thus any other behavior is bug
3142
- const [integer, decimal] = value.toString().split('.');
3143
- // console.log('4');
3143
+ const [integer, decimal] = raw.split('.');
3144
3144
  // Group every three elements, and add thousandSeparator after them
3145
- const v = (Number(integer) + '').replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator);
3146
- return Number(decimal) ? v.concat('.', decimal) : (integer === '' ? '' : v);
3145
+ const v = integer.replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator);
3146
+ return typeof decimal !== 'undefined' ? v + '.' + decimal : v;
3147
3147
  }
3148
3148
  }
3149
3149
 
@@ -4023,56 +4023,58 @@ class CvaDatePickerComponent {
4023
4023
  useValue: APP_DATE_FORMATS,
4024
4024
  },
4025
4025
  ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["xDatepicker"], descendants: true }], ngImport: i0, template: `
4026
- <!-- css labelOutside trong base.theme-->
4027
- <div class="cva-date-picker"
4028
- [ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
4029
- fxLayout="row" fxLayout.lt-sm="row wrap">
4030
- <mat-label *ngIf="isLabelOutside" class="label_width"
4031
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4032
- <div class="label">
4033
- <div>
4034
- {{ (label ? label : placeholder) | translate }}<span
4035
- class="required-label-outside">{{ !!required ? '*' : '' }}</span>
4036
- </div>
4037
- </div>
4038
- </mat-label>
4039
- <mat-form-field *ngIf="isShowControl()"
4040
- appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
4041
- [hideRequiredMarker]="!isFloatLabel"
4042
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4043
- <mat-label *ngIf="!isLabelOutside && isFloatLabel">{{ (label ? label : placeholder) | translate }}</mat-label>
4044
- <input matInput [matDatepicker]="xDatepicker"
4045
- [placeholder]="placeholder|translate"
4046
- [(ngModel)]="datepickerValue"
4047
- [disabled]="disabled"
4048
- [readonly]="true"
4049
- [required]="checkRequired(required)"
4050
- [title]="title ? title : ''"
4051
- [min]="getMinDate()" [max]="getMaxDate()"
4052
- (click)="openDatepicker($event)">
4053
- <mat-datepicker-toggle matPrefix [for]="xDatepicker" [disabled]="disabled"></mat-datepicker-toggle>
4054
- <mat-datepicker #xDatepicker></mat-datepicker>
4055
- <button mat-icon-button color="warn" class="btnDatePicker" matSuffix (click)="onClear()" [disabled]="disabled">
4056
- <mat-icon>clear</mat-icon>
4057
- </button>
4026
+ <!-- css labelOutside trong base.theme-->
4027
+ <div class="cva-date-picker"
4028
+ [ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
4029
+ fxLayout="row" fxLayout.lt-sm="row wrap">
4030
+ <mat-label *ngIf="isLabelOutside" class="label_width"
4031
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4032
+ <div class="label">
4033
+ <div>
4034
+ {{ (label ? label : placeholder) | translate }}<span
4035
+ class="required-label-outside">{{ !!required ? '*' : '' }}</span>
4036
+ </div>
4037
+ </div>
4038
+ </mat-label>
4039
+ <mat-form-field *ngIf="isShowControl()"
4040
+ appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
4041
+ [hideRequiredMarker]="!isFloatLabel"
4042
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4043
+ <mat-label *ngIf="!isLabelOutside && isFloatLabel">{{ (label ? label : placeholder) | translate }}
4044
+ </mat-label>
4045
+ <input matInput [matDatepicker]="xDatepicker"
4046
+ [placeholder]="placeholder|translate"
4047
+ [(ngModel)]="datepickerValue"
4048
+ [disabled]="disabled"
4049
+ [readonly]="true"
4050
+ [required]="checkRequired(required)"
4051
+ [title]="title ? title : ''"
4052
+ [min]="getMinDate()" [max]="getMaxDate()"
4053
+ (click)="openDatepicker($event)">
4054
+ <mat-datepicker-toggle matPrefix [for]="xDatepicker" [disabled]="disabled"></mat-datepicker-toggle>
4055
+ <mat-datepicker #xDatepicker></mat-datepicker>
4056
+ <button mat-icon-button color="warn" class="btnDatePicker" matSuffix (click)="onClear()"
4057
+ [disabled]="disabled" type="button">
4058
+ <mat-icon>clear</mat-icon>
4059
+ </button>
4058
4060
 
4059
- <mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
4060
- {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
4061
- </mat-hint>
4061
+ <mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
4062
+ {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
4063
+ </mat-hint>
4062
4064
 
4063
- </mat-form-field>
4065
+ </mat-form-field>
4064
4066
 
4065
- <ng-container *ngIf="!isShowControl()">
4066
- <div class="cva-style-disable-text">
4067
- <mat-label *ngIf="!isLabelOutside && isFloatLabel">
4068
- {{ (label ? label : placeholder) | translate }}
4069
- </mat-label>
4070
- <div [title]="title ? title : ''">
4071
- {{ title ? title : '' }}
4072
- </div>
4073
- </div>
4074
- </ng-container>
4075
- </div>
4067
+ <ng-container *ngIf="!isShowControl()">
4068
+ <div class="cva-style-disable-text">
4069
+ <mat-label *ngIf="!isLabelOutside && isFloatLabel">
4070
+ {{ (label ? label : placeholder) | translate }}
4071
+ </mat-label>
4072
+ <div [title]="title ? title : ''">
4073
+ {{ title ? title : '' }}
4074
+ </div>
4075
+ </div>
4076
+ </ng-container>
4077
+ </div>
4076
4078
  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
4077
4079
  }
4078
4080
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaDatePickerComponent, decorators: [{
@@ -4081,56 +4083,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
4081
4083
  selector: 'cva-date-picker',
4082
4084
  standalone: false,
4083
4085
  template: `
4084
- <!-- css labelOutside trong base.theme-->
4085
- <div class="cva-date-picker"
4086
- [ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
4087
- fxLayout="row" fxLayout.lt-sm="row wrap">
4088
- <mat-label *ngIf="isLabelOutside" class="label_width"
4089
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4090
- <div class="label">
4091
- <div>
4092
- {{ (label ? label : placeholder) | translate }}<span
4093
- class="required-label-outside">{{ !!required ? '*' : '' }}</span>
4094
- </div>
4095
- </div>
4096
- </mat-label>
4097
- <mat-form-field *ngIf="isShowControl()"
4098
- appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
4099
- [hideRequiredMarker]="!isFloatLabel"
4100
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4101
- <mat-label *ngIf="!isLabelOutside && isFloatLabel">{{ (label ? label : placeholder) | translate }}</mat-label>
4102
- <input matInput [matDatepicker]="xDatepicker"
4103
- [placeholder]="placeholder|translate"
4104
- [(ngModel)]="datepickerValue"
4105
- [disabled]="disabled"
4106
- [readonly]="true"
4107
- [required]="checkRequired(required)"
4108
- [title]="title ? title : ''"
4109
- [min]="getMinDate()" [max]="getMaxDate()"
4110
- (click)="openDatepicker($event)">
4111
- <mat-datepicker-toggle matPrefix [for]="xDatepicker" [disabled]="disabled"></mat-datepicker-toggle>
4112
- <mat-datepicker #xDatepicker></mat-datepicker>
4113
- <button mat-icon-button color="warn" class="btnDatePicker" matSuffix (click)="onClear()" [disabled]="disabled">
4114
- <mat-icon>clear</mat-icon>
4115
- </button>
4086
+ <!-- css labelOutside trong base.theme-->
4087
+ <div class="cva-date-picker"
4088
+ [ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
4089
+ fxLayout="row" fxLayout.lt-sm="row wrap">
4090
+ <mat-label *ngIf="isLabelOutside" class="label_width"
4091
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4092
+ <div class="label">
4093
+ <div>
4094
+ {{ (label ? label : placeholder) | translate }}<span
4095
+ class="required-label-outside">{{ !!required ? '*' : '' }}</span>
4096
+ </div>
4097
+ </div>
4098
+ </mat-label>
4099
+ <mat-form-field *ngIf="isShowControl()"
4100
+ appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
4101
+ [hideRequiredMarker]="!isFloatLabel"
4102
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4103
+ <mat-label *ngIf="!isLabelOutside && isFloatLabel">{{ (label ? label : placeholder) | translate }}
4104
+ </mat-label>
4105
+ <input matInput [matDatepicker]="xDatepicker"
4106
+ [placeholder]="placeholder|translate"
4107
+ [(ngModel)]="datepickerValue"
4108
+ [disabled]="disabled"
4109
+ [readonly]="true"
4110
+ [required]="checkRequired(required)"
4111
+ [title]="title ? title : ''"
4112
+ [min]="getMinDate()" [max]="getMaxDate()"
4113
+ (click)="openDatepicker($event)">
4114
+ <mat-datepicker-toggle matPrefix [for]="xDatepicker" [disabled]="disabled"></mat-datepicker-toggle>
4115
+ <mat-datepicker #xDatepicker></mat-datepicker>
4116
+ <button mat-icon-button color="warn" class="btnDatePicker" matSuffix (click)="onClear()"
4117
+ [disabled]="disabled" type="button">
4118
+ <mat-icon>clear</mat-icon>
4119
+ </button>
4116
4120
 
4117
- <mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
4118
- {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
4119
- </mat-hint>
4121
+ <mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
4122
+ {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
4123
+ </mat-hint>
4120
4124
 
4121
- </mat-form-field>
4125
+ </mat-form-field>
4122
4126
 
4123
- <ng-container *ngIf="!isShowControl()">
4124
- <div class="cva-style-disable-text">
4125
- <mat-label *ngIf="!isLabelOutside && isFloatLabel">
4126
- {{ (label ? label : placeholder) | translate }}
4127
- </mat-label>
4128
- <div [title]="title ? title : ''">
4129
- {{ title ? title : '' }}
4130
- </div>
4131
- </div>
4132
- </ng-container>
4133
- </div>
4127
+ <ng-container *ngIf="!isShowControl()">
4128
+ <div class="cva-style-disable-text">
4129
+ <mat-label *ngIf="!isLabelOutside && isFloatLabel">
4130
+ {{ (label ? label : placeholder) | translate }}
4131
+ </mat-label>
4132
+ <div [title]="title ? title : ''">
4133
+ {{ title ? title : '' }}
4134
+ </div>
4135
+ </div>
4136
+ </ng-container>
4137
+ </div>
4134
4138
  `,
4135
4139
  providers: [
4136
4140
  { provide: DateAdapter, useClass: NsDateAdapter },
@@ -5360,7 +5364,7 @@ class CvaSmartTableComponent {
5360
5364
  <cva-counter-input *ngSwitchCase="ColumnTypeEnum.INPUT_COUNTER"
5361
5365
  #cellComponentRef
5362
5366
  class="inputNumber" #nsCounterInput
5363
- [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5367
+ [placeholder]="moduleName + '.table.placeholder.input.counter'"
5364
5368
  [isFormControl]="false"
5365
5369
  [alignNumber]="getAlign(column)"
5366
5370
  [disabled]="column.disabled ? column.disabled(result) : false"
@@ -5374,7 +5378,7 @@ class CvaSmartTableComponent {
5374
5378
  </cva-counter-input>
5375
5379
  <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT"
5376
5380
  #cellComponentRef
5377
- [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5381
+ [placeholder]="moduleName + '.table.placeholder.input'"
5378
5382
  [isFormControl]="false"
5379
5383
  [alignText]="getAlign(column)"
5380
5384
  [disabled]="column.disabled ? column.disabled(result) : false"
@@ -5389,7 +5393,7 @@ class CvaSmartTableComponent {
5389
5393
  </cva-input>
5390
5394
  <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT_CURRENCY"
5391
5395
  #cellComponentRef
5392
- [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5396
+ [placeholder]="moduleName + '.table.placeholder.input.currency'"
5393
5397
  [isFormControl]="false"
5394
5398
  [alignText]="getAlign(column)"
5395
5399
  [disabled]="column.disabled ? column.disabled(result) : false"
@@ -5399,7 +5403,8 @@ class CvaSmartTableComponent {
5399
5403
  [required]="TableService.getRequired(column)"
5400
5404
  [errorMessages]="getErrorMessageMap(column)"
5401
5405
  (onChange)="onCellValueChange(result, column, $event);"
5402
- [pattern]="getIsDecimal(column) ? '^\\d{0,15}(\\.\\d*)?$' : '^\\d{0,15}$'"
5406
+ [pattern]="column.pattern ? column.pattern : (getIsDecimal(column) ? '^\\d{0,15}(\\.\\d*)?$' : '^\\d{0,15}$')"
5407
+ [patternFilter]="column.patternFilter ? column.patternFilter : ''"
5403
5408
  [formatFunc]="formatFunc">
5404
5409
  </cva-input>
5405
5410
  <cva-date-picker *ngSwitchCase="ColumnTypeEnum.DATE_PICKER"
@@ -5417,7 +5422,7 @@ class CvaSmartTableComponent {
5417
5422
  #cellComponentRef
5418
5423
  *ngSwitchCase="ColumnTypeEnum.MULTI_SELECT_AUTOCOMPLETE"
5419
5424
  class="multiSelectAutocomplete"
5420
- [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5425
+ [placeholder]="moduleName + '.table.placeholder.multi.select.autocomplete'"
5421
5426
  [isTree]="column.isTree??false"
5422
5427
  [value]="result[column.columnDef]"
5423
5428
  [errorMessages]="getErrorMessageMap(column)"
@@ -5636,7 +5641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5636
5641
  <cva-counter-input *ngSwitchCase="ColumnTypeEnum.INPUT_COUNTER"
5637
5642
  #cellComponentRef
5638
5643
  class="inputNumber" #nsCounterInput
5639
- [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5644
+ [placeholder]="moduleName + '.table.placeholder.input.counter'"
5640
5645
  [isFormControl]="false"
5641
5646
  [alignNumber]="getAlign(column)"
5642
5647
  [disabled]="column.disabled ? column.disabled(result) : false"
@@ -5650,7 +5655,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5650
5655
  </cva-counter-input>
5651
5656
  <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT"
5652
5657
  #cellComponentRef
5653
- [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5658
+ [placeholder]="moduleName + '.table.placeholder.input'"
5654
5659
  [isFormControl]="false"
5655
5660
  [alignText]="getAlign(column)"
5656
5661
  [disabled]="column.disabled ? column.disabled(result) : false"
@@ -5665,7 +5670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5665
5670
  </cva-input>
5666
5671
  <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT_CURRENCY"
5667
5672
  #cellComponentRef
5668
- [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5673
+ [placeholder]="moduleName + '.table.placeholder.input.currency'"
5669
5674
  [isFormControl]="false"
5670
5675
  [alignText]="getAlign(column)"
5671
5676
  [disabled]="column.disabled ? column.disabled(result) : false"
@@ -5675,7 +5680,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5675
5680
  [required]="TableService.getRequired(column)"
5676
5681
  [errorMessages]="getErrorMessageMap(column)"
5677
5682
  (onChange)="onCellValueChange(result, column, $event);"
5678
- [pattern]="getIsDecimal(column) ? '^\\d{0,15}(\\.\\d*)?$' : '^\\d{0,15}$'"
5683
+ [pattern]="column.pattern ? column.pattern : (getIsDecimal(column) ? '^\\d{0,15}(\\.\\d*)?$' : '^\\d{0,15}$')"
5684
+ [patternFilter]="column.patternFilter ? column.patternFilter : ''"
5679
5685
  [formatFunc]="formatFunc">
5680
5686
  </cva-input>
5681
5687
  <cva-date-picker *ngSwitchCase="ColumnTypeEnum.DATE_PICKER"
@@ -5693,7 +5699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5693
5699
  #cellComponentRef
5694
5700
  *ngSwitchCase="ColumnTypeEnum.MULTI_SELECT_AUTOCOMPLETE"
5695
5701
  class="multiSelectAutocomplete"
5696
- [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5702
+ [placeholder]="moduleName + '.table.placeholder.multi.select.autocomplete'"
5697
5703
  [isTree]="column.isTree??false"
5698
5704
  [value]="result[column.columnDef]"
5699
5705
  [errorMessages]="getErrorMessageMap(column)"
@@ -6142,56 +6148,56 @@ class CvaRangeDatePickerComponent {
6142
6148
  useValue: APP_DATE_FORMATS,
6143
6149
  },
6144
6150
  ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: `
6145
- <div class="cva-range-date-picker"
6146
- [ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
6147
- fxLayout="row" fxLayout.lt-sm="row wrap">
6148
- <mat-label *ngIf="isLabelOutside" class="label_width"
6149
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6150
- <div class="label">
6151
- <div>
6152
- {{ (label ? label : '') | translate }}<span
6153
- class="required-label-outside">{{ !!(requiredFromDate || requiredToDate) ? '*' : '' }}</span>
6154
- </div>
6155
- </div>
6156
- </mat-label>
6157
- <mat-form-field appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
6158
- [hideRequiredMarker]="!isFloatLabel"
6159
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6160
- <mat-label *ngIf="!isLabelOutside && isFloatLabel">{{ (label ? label : '') | translate }}</mat-label>
6161
- <mat-date-range-input [min]="getMinDate()"
6162
- [max]="getMaxDate()"
6163
- [rangePicker]="picker"
6164
- [disabled]="getDisabled(disabledAll)"
6165
- [title]="title">
6166
- <input matStartDate
6167
- [(ngModel)]="fromDateValue"
6168
- readonly="readonly"
6169
- [placeholder]="placeholderFromDate|translate"
6170
- (click)="openRangePicker($event)">
6171
- <input matEndDate
6172
- [(ngModel)]="toDateValue"
6173
- readOnly="true"
6174
- [placeholder]="placeholderToDate|translate"
6175
- (click)="openRangePicker($event)">
6176
- </mat-date-range-input>
6151
+ <div class="cva-range-date-picker"
6152
+ [ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
6153
+ fxLayout="row" fxLayout.lt-sm="row wrap">
6154
+ <mat-label *ngIf="isLabelOutside" class="label_width"
6155
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6156
+ <div class="label">
6157
+ <div>
6158
+ {{ (label ? label : '') | translate }}<span
6159
+ class="required-label-outside">{{ !!(requiredFromDate || requiredToDate) ? '*' : '' }}</span>
6160
+ </div>
6161
+ </div>
6162
+ </mat-label>
6163
+ <mat-form-field appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
6164
+ [hideRequiredMarker]="!isFloatLabel"
6165
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6166
+ <mat-label *ngIf="!isLabelOutside && isFloatLabel">{{ (label ? label : '') | translate }}</mat-label>
6167
+ <mat-date-range-input [min]="getMinDate()"
6168
+ [max]="getMaxDate()"
6169
+ [rangePicker]="picker"
6170
+ [disabled]="getDisabled(disabledAll)"
6171
+ [title]="title">
6172
+ <input matStartDate
6173
+ [(ngModel)]="fromDateValue"
6174
+ readonly="readonly"
6175
+ [placeholder]="placeholderFromDate|translate"
6176
+ (click)="openRangePicker($event)">
6177
+ <input matEndDate
6178
+ [(ngModel)]="toDateValue"
6179
+ readOnly="true"
6180
+ [placeholder]="placeholderToDate|translate"
6181
+ (click)="openRangePicker($event)">
6182
+ </mat-date-range-input>
6177
6183
 
6178
- <mat-datepicker-toggle matPrefix [for]="picker"
6179
- [disabled]="getDisabled(disabledAll)">
6180
- </mat-datepicker-toggle>
6181
- <button mat-icon-button matSuffix
6182
- color="warn" class="btnDatePicker"
6183
- (click)="clearRange($event)"
6184
- [disabled]="getDisabled(disabledAll) || (checkRequired(requiredFromDate) && checkRequired(requiredToDate))"
6185
- >
6186
- <mat-icon>clear</mat-icon>
6187
- </button>
6184
+ <mat-datepicker-toggle matPrefix [for]="picker"
6185
+ [disabled]="getDisabled(disabledAll)">
6186
+ </mat-datepicker-toggle>
6187
+ <button mat-icon-button matSuffix
6188
+ color="warn" class="btnDatePicker"
6189
+ (click)="clearRange($event)"
6190
+ [disabled]="getDisabled(disabledAll) || (checkRequired(requiredFromDate) && checkRequired(requiredToDate))"
6191
+ type="button">
6192
+ <mat-icon>clear</mat-icon>
6193
+ </button>
6188
6194
 
6189
- <mat-date-range-picker #picker (opened)="openPicker(picker)"></mat-date-range-picker>
6190
- <mat-hint style="color: red" *ngIf="NsValiator.invalid(formControl)">
6191
- {{ NsValiator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValiator.getErrorMessageV1(formControl, errorMessages).params }}
6192
- </mat-hint>
6193
- </mat-form-field>
6194
- </div>
6195
+ <mat-date-range-picker #picker (opened)="openPicker(picker)"></mat-date-range-picker>
6196
+ <mat-hint style="color: red" *ngIf="NsValiator.invalid(formControl)">
6197
+ {{ NsValiator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValiator.getErrorMessageV1(formControl, errorMessages).params }}
6198
+ </mat-hint>
6199
+ </mat-form-field>
6200
+ </div>
6195
6201
  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i5$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i5$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
6196
6202
  }
6197
6203
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaRangeDatePickerComponent, decorators: [{
@@ -6200,56 +6206,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
6200
6206
  selector: 'cva-range-date-picker',
6201
6207
  standalone: false,
6202
6208
  template: `
6203
- <div class="cva-range-date-picker"
6204
- [ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
6205
- fxLayout="row" fxLayout.lt-sm="row wrap">
6206
- <mat-label *ngIf="isLabelOutside" class="label_width"
6207
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6208
- <div class="label">
6209
- <div>
6210
- {{ (label ? label : '') | translate }}<span
6211
- class="required-label-outside">{{ !!(requiredFromDate || requiredToDate) ? '*' : '' }}</span>
6212
- </div>
6213
- </div>
6214
- </mat-label>
6215
- <mat-form-field appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
6216
- [hideRequiredMarker]="!isFloatLabel"
6217
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6218
- <mat-label *ngIf="!isLabelOutside && isFloatLabel">{{ (label ? label : '') | translate }}</mat-label>
6219
- <mat-date-range-input [min]="getMinDate()"
6220
- [max]="getMaxDate()"
6221
- [rangePicker]="picker"
6222
- [disabled]="getDisabled(disabledAll)"
6223
- [title]="title">
6224
- <input matStartDate
6225
- [(ngModel)]="fromDateValue"
6226
- readonly="readonly"
6227
- [placeholder]="placeholderFromDate|translate"
6228
- (click)="openRangePicker($event)">
6229
- <input matEndDate
6230
- [(ngModel)]="toDateValue"
6231
- readOnly="true"
6232
- [placeholder]="placeholderToDate|translate"
6233
- (click)="openRangePicker($event)">
6234
- </mat-date-range-input>
6209
+ <div class="cva-range-date-picker"
6210
+ [ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
6211
+ fxLayout="row" fxLayout.lt-sm="row wrap">
6212
+ <mat-label *ngIf="isLabelOutside" class="label_width"
6213
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6214
+ <div class="label">
6215
+ <div>
6216
+ {{ (label ? label : '') | translate }}<span
6217
+ class="required-label-outside">{{ !!(requiredFromDate || requiredToDate) ? '*' : '' }}</span>
6218
+ </div>
6219
+ </div>
6220
+ </mat-label>
6221
+ <mat-form-field appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
6222
+ [hideRequiredMarker]="!isFloatLabel"
6223
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6224
+ <mat-label *ngIf="!isLabelOutside && isFloatLabel">{{ (label ? label : '') | translate }}</mat-label>
6225
+ <mat-date-range-input [min]="getMinDate()"
6226
+ [max]="getMaxDate()"
6227
+ [rangePicker]="picker"
6228
+ [disabled]="getDisabled(disabledAll)"
6229
+ [title]="title">
6230
+ <input matStartDate
6231
+ [(ngModel)]="fromDateValue"
6232
+ readonly="readonly"
6233
+ [placeholder]="placeholderFromDate|translate"
6234
+ (click)="openRangePicker($event)">
6235
+ <input matEndDate
6236
+ [(ngModel)]="toDateValue"
6237
+ readOnly="true"
6238
+ [placeholder]="placeholderToDate|translate"
6239
+ (click)="openRangePicker($event)">
6240
+ </mat-date-range-input>
6235
6241
 
6236
- <mat-datepicker-toggle matPrefix [for]="picker"
6237
- [disabled]="getDisabled(disabledAll)">
6238
- </mat-datepicker-toggle>
6239
- <button mat-icon-button matSuffix
6240
- color="warn" class="btnDatePicker"
6241
- (click)="clearRange($event)"
6242
- [disabled]="getDisabled(disabledAll) || (checkRequired(requiredFromDate) && checkRequired(requiredToDate))"
6243
- >
6244
- <mat-icon>clear</mat-icon>
6245
- </button>
6242
+ <mat-datepicker-toggle matPrefix [for]="picker"
6243
+ [disabled]="getDisabled(disabledAll)">
6244
+ </mat-datepicker-toggle>
6245
+ <button mat-icon-button matSuffix
6246
+ color="warn" class="btnDatePicker"
6247
+ (click)="clearRange($event)"
6248
+ [disabled]="getDisabled(disabledAll) || (checkRequired(requiredFromDate) && checkRequired(requiredToDate))"
6249
+ type="button">
6250
+ <mat-icon>clear</mat-icon>
6251
+ </button>
6246
6252
 
6247
- <mat-date-range-picker #picker (opened)="openPicker(picker)"></mat-date-range-picker>
6248
- <mat-hint style="color: red" *ngIf="NsValiator.invalid(formControl)">
6249
- {{ NsValiator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValiator.getErrorMessageV1(formControl, errorMessages).params }}
6250
- </mat-hint>
6251
- </mat-form-field>
6252
- </div>
6253
+ <mat-date-range-picker #picker (opened)="openPicker(picker)"></mat-date-range-picker>
6254
+ <mat-hint style="color: red" *ngIf="NsValiator.invalid(formControl)">
6255
+ {{ NsValiator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValiator.getErrorMessageV1(formControl, errorMessages).params }}
6256
+ </mat-hint>
6257
+ </mat-form-field>
6258
+ </div>
6253
6259
  `,
6254
6260
  providers: [
6255
6261
  { provide: DateAdapter, useClass: NsDateAdapter },
@@ -6370,6 +6376,7 @@ class CvaMultiUploadComponent {
6370
6376
  maxSize = null;
6371
6377
  accept = null;
6372
6378
  label = '';
6379
+ placeholder = '';
6373
6380
  required = '';
6374
6381
  disabled = false;
6375
6382
  /* percent label outside css */
@@ -6384,12 +6391,10 @@ class CvaMultiUploadComponent {
6384
6391
  if (!obj) {
6385
6392
  return;
6386
6393
  }
6387
- if (this.multiple) {
6388
- this.files.push(obj);
6389
- }
6390
- else {
6391
- this.files = [obj];
6394
+ if (!this.multiple && this.files.length === 1) {
6395
+ this.files.length = 0;
6392
6396
  }
6397
+ this.files.push(obj);
6393
6398
  this.propagateChange(this.files);
6394
6399
  }
6395
6400
  registerOnChange(fn) {
@@ -6440,6 +6445,7 @@ class CvaMultiUploadComponent {
6440
6445
  const target = event.target;
6441
6446
  if (target && target.files) {
6442
6447
  this.convertToUploadModel(target.files);
6448
+ target.value = '';
6443
6449
  }
6444
6450
  }
6445
6451
  onFileDroppedAction(fileList) {
@@ -6461,41 +6467,43 @@ class CvaMultiUploadComponent {
6461
6467
  return true;
6462
6468
  }
6463
6469
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6464
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaMultiUploadComponent, isStandalone: false, selector: "cva-multi-upload", inputs: { files: "files", multiple: "multiple", maxSize: "maxSize", accept: "accept", label: "label", required: "required", disabled: "disabled", percentOfLabelOutside: "percentOfLabelOutside" }, outputs: { onFileChange: "onFileChange" }, providers: [
6470
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaMultiUploadComponent, isStandalone: false, selector: "cva-multi-upload", inputs: { files: "files", multiple: "multiple", maxSize: "maxSize", accept: "accept", label: "label", placeholder: "placeholder", required: "required", disabled: "disabled", percentOfLabelOutside: "percentOfLabelOutside" }, outputs: { onFileChange: "onFileChange" }, providers: [
6465
6471
  {
6466
6472
  provide: NG_VALUE_ACCESSOR,
6467
6473
  useExisting: forwardRef(() => CvaMultiUploadComponent),
6468
6474
  multi: true,
6469
6475
  },
6470
6476
  ], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }], ngImport: i0, template: `
6471
- <div class="cva-multi-upload"
6472
- fxLayout="row" fxLayout.lt-sm="row wrap">
6473
- <mat-label *ngIf="label" class="label_width"
6474
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6475
- <div class="label">{{ (label ? label : '') | translate }}<span
6476
- class="required-label-outside">{{ !!required ? '*' : '' }}</span></div>
6477
- </mat-label>
6478
- <div class="uploadArea"
6479
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%"
6480
- appDragDrop (onFileDropped)="onFileDroppedAction($event)">
6481
- <input type="file" multiple #fileUpload (change)="onFileChangeAction($event)"
6482
- [disabled]="disabled"
6483
- accept="{{accept ? accept.join() : '*/*'}}">
6484
- <mat-card>
6485
- <mat-card-actions>
6486
- <button mat-button class="upload-button" color="warn" (click)="onClick()">
6487
- <mat-icon>add</mat-icon>
6488
- <span>{{ 'common.upload.file' | translate }}</span>
6489
- </button>
6490
- </mat-card-actions>
6491
- <mat-card-content>
6492
- </mat-card-content>
6493
- </mat-card>
6494
- <mat-error *ngIf="sizeError!==null">{{ sizeError + ' ' + ('common.is.over-size' | translate) }}</mat-error>
6495
- <mat-error *ngIf="typeError!==null">{{ typeError + ' ' + ('common.is.not-accept' | translate) }}</mat-error>
6496
- </div>
6497
- </div>
6498
- `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: DragDropDirective, selector: "[appDragDrop]", outputs: ["onFileDropped"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
6477
+ <div class="cva-multi-upload"
6478
+ fxLayout="row" fxLayout.lt-sm="row wrap">
6479
+ <mat-label *ngIf="label" class="label_width"
6480
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6481
+ <div class="label">{{ (label ? label : '') | translate }}<span
6482
+ class="required-label-outside">{{ !!required ? '*' : '' }}</span></div>
6483
+ </mat-label>
6484
+ <div class="uploadArea"
6485
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%"
6486
+ appDragDrop (onFileDropped)="onFileDroppedAction($event)">
6487
+ <input type="file" [multiple]="multiple" #fileUpload (change)="onFileChangeAction($event)"
6488
+ [disabled]="disabled"
6489
+ accept="{{accept ? accept.join() : '*/*'}}">
6490
+ <mat-card>
6491
+ <mat-card-actions>
6492
+ <button mat-button class="upload-button" color="warn" (click)="onClick()">
6493
+ <mat-icon>add</mat-icon>
6494
+ <span>{{ !!placeholder ? placeholder : 'common.upload.file' | translate }}</span>
6495
+ </button>
6496
+ </mat-card-actions>
6497
+ <mat-card-content>
6498
+ </mat-card-content>
6499
+ </mat-card>
6500
+ <mat-error *ngIf="sizeError!==null">{{ sizeError + ' ' + ('common.is.over-size' | translate) }}
6501
+ </mat-error>
6502
+ <mat-error *ngIf="typeError!==null">{{ typeError + ' ' + ('common.is.not-accept' | translate) }}
6503
+ </mat-error>
6504
+ </div>
6505
+ </div>
6506
+ `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: DragDropDirective, selector: "[appDragDrop]", outputs: ["onFileDropped"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
6499
6507
  }
6500
6508
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiUploadComponent, decorators: [{
6501
6509
  type: Component,
@@ -6503,34 +6511,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
6503
6511
  selector: 'cva-multi-upload',
6504
6512
  standalone: false,
6505
6513
  template: `
6506
- <div class="cva-multi-upload"
6507
- fxLayout="row" fxLayout.lt-sm="row wrap">
6508
- <mat-label *ngIf="label" class="label_width"
6509
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6510
- <div class="label">{{ (label ? label : '') | translate }}<span
6511
- class="required-label-outside">{{ !!required ? '*' : '' }}</span></div>
6512
- </mat-label>
6513
- <div class="uploadArea"
6514
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%"
6515
- appDragDrop (onFileDropped)="onFileDroppedAction($event)">
6516
- <input type="file" multiple #fileUpload (change)="onFileChangeAction($event)"
6517
- [disabled]="disabled"
6518
- accept="{{accept ? accept.join() : '*/*'}}">
6519
- <mat-card>
6520
- <mat-card-actions>
6521
- <button mat-button class="upload-button" color="warn" (click)="onClick()">
6522
- <mat-icon>add</mat-icon>
6523
- <span>{{ 'common.upload.file' | translate }}</span>
6524
- </button>
6525
- </mat-card-actions>
6526
- <mat-card-content>
6527
- </mat-card-content>
6528
- </mat-card>
6529
- <mat-error *ngIf="sizeError!==null">{{ sizeError + ' ' + ('common.is.over-size' | translate) }}</mat-error>
6530
- <mat-error *ngIf="typeError!==null">{{ typeError + ' ' + ('common.is.not-accept' | translate) }}</mat-error>
6531
- </div>
6532
- </div>
6533
- `,
6514
+ <div class="cva-multi-upload"
6515
+ fxLayout="row" fxLayout.lt-sm="row wrap">
6516
+ <mat-label *ngIf="label" class="label_width"
6517
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6518
+ <div class="label">{{ (label ? label : '') | translate }}<span
6519
+ class="required-label-outside">{{ !!required ? '*' : '' }}</span></div>
6520
+ </mat-label>
6521
+ <div class="uploadArea"
6522
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%"
6523
+ appDragDrop (onFileDropped)="onFileDroppedAction($event)">
6524
+ <input type="file" [multiple]="multiple" #fileUpload (change)="onFileChangeAction($event)"
6525
+ [disabled]="disabled"
6526
+ accept="{{accept ? accept.join() : '*/*'}}">
6527
+ <mat-card>
6528
+ <mat-card-actions>
6529
+ <button mat-button class="upload-button" color="warn" (click)="onClick()">
6530
+ <mat-icon>add</mat-icon>
6531
+ <span>{{ !!placeholder ? placeholder : 'common.upload.file' | translate }}</span>
6532
+ </button>
6533
+ </mat-card-actions>
6534
+ <mat-card-content>
6535
+ </mat-card-content>
6536
+ </mat-card>
6537
+ <mat-error *ngIf="sizeError!==null">{{ sizeError + ' ' + ('common.is.over-size' | translate) }}
6538
+ </mat-error>
6539
+ <mat-error *ngIf="typeError!==null">{{ typeError + ' ' + ('common.is.not-accept' | translate) }}
6540
+ </mat-error>
6541
+ </div>
6542
+ </div>
6543
+ `,
6534
6544
  providers: [
6535
6545
  {
6536
6546
  provide: NG_VALUE_ACCESSOR,
@@ -6552,6 +6562,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
6552
6562
  type: Input
6553
6563
  }], label: [{
6554
6564
  type: Input
6565
+ }], placeholder: [{
6566
+ type: Input
6555
6567
  }], required: [{
6556
6568
  type: Input
6557
6569
  }], disabled: [{
@@ -7826,41 +7838,45 @@ class CvaFlatTreeNodeLeftComponent {
7826
7838
  }
7827
7839
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaFlatTreeNodeLeftComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7828
7840
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaFlatTreeNodeLeftComponent, isStandalone: false, selector: "cva-flat-tree-node-left", inputs: { treeControl: "treeControl", isHideCheckbox: "isHideCheckbox", node: "node", nodeClicked: "nodeClicked" }, outputs: { toggle: "toggle", onParentNodeClick: "onParentNodeClick", onLeafNodeClick: "onLeafNodeClick", ngModelParentChange: "ngModelParentChange", ngModelLeafChange: "ngModelLeafChange" }, ngImport: i0, template: `
7829
- <ng-container [ngSwitch]="hasChild(node)">
7830
- <ng-container *ngSwitchCase="false">
7831
- <div
7832
- class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
7833
- (click)="onLeafNodeClick.emit()"
7834
- fxLayoutAlign="space-between center">
7835
- <button *ngIf="node.level > 0" type="button" mat-icon-button disabled></button>
7836
- {{ node.displayValue }}
7837
- </div>
7838
- <mat-checkbox [(ngModel)]="node.checked"
7839
- [checked]="node.checked"
7840
- (ngModelChange)="ngModelLeafChange.emit($event)"
7841
- [disabled]="checkDisabledNode(node)"
7842
- *ngIf="!isHideCheckbox">
7843
- </mat-checkbox>
7844
- </ng-container>
7845
- <ng-container *ngSwitchCase="true">
7846
- <div
7847
- class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
7848
- fxLayoutAlign="space-between center">
7849
- <button type="button" mat-icon-button (click)="toggle.emit()"
7850
- [attr.aria-label]="'toggle ' + node.displayValue">
7851
- <i class="fas {{(treeControl && treeControl.isExpanded(node)) ? 'fa-chevron-up' : 'fa-chevron-down'}}"></i>
7852
- </button>
7853
- <span (click)="onParentNodeClick.emit()">{{ node.displayValue }}</span>
7854
- </div>
7855
- <mat-checkbox [(ngModel)]="node.checked"
7856
- *ngIf="!isHideCheckbox"
7857
- [checked]="descendantsAllSelected(node)"
7858
- [disabled]="onDisabledParent(node) || getDisabledInputFunc(node)"
7859
- [indeterminate]="descendantsPartiallySelected(node)"
7860
- (ngModelChange)="ngModelParentChange.emit($event)">
7861
- </mat-checkbox>
7841
+ <ng-container [ngSwitch]="hasChild(node)">
7842
+ <ng-container *ngSwitchCase="false">
7843
+ <div
7844
+ class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
7845
+ (click)="onLeafNodeClick.emit()"
7846
+ fxLayoutAlign="space-between center">
7847
+ <button *ngIf="node.level > 0" type="button" mat-icon-button disabled></button>
7848
+ <i *ngIf="node.iconClass" class="{{ node.iconClass }} icon-left"></i>
7849
+ {{ node.displayValue }}
7850
+ </div>
7851
+ <mat-checkbox [(ngModel)]="node.checked"
7852
+ [checked]="node.checked"
7853
+ (ngModelChange)="ngModelLeafChange.emit($event)"
7854
+ [disabled]="checkDisabledNode(node)"
7855
+ *ngIf="!isHideCheckbox">
7856
+ </mat-checkbox>
7857
+ </ng-container>
7858
+ <ng-container *ngSwitchCase="true">
7859
+ <div
7860
+ class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
7861
+ fxLayoutAlign="space-between center">
7862
+ <button type="button" mat-icon-button (click)="toggle.emit()"
7863
+ [attr.aria-label]="'toggle ' + node.displayValue">
7864
+ <i class="fas {{(treeControl && treeControl.isExpanded(node)) ? 'fa-chevron-up' : 'fa-chevron-down'}}"></i>
7865
+ </button>
7866
+ <span (click)="onParentNodeClick.emit()">
7867
+ <i *ngIf="node.iconClass" class="{{ node.iconClass }} icon-left"></i>
7868
+ {{ node.displayValue }}
7869
+ </span>
7870
+ </div>
7871
+ <mat-checkbox [(ngModel)]="node.checked"
7872
+ *ngIf="!isHideCheckbox"
7873
+ [checked]="descendantsAllSelected(node)"
7874
+ [disabled]="onDisabledParent(node) || getDisabledInputFunc(node)"
7875
+ [indeterminate]="descendantsPartiallySelected(node)"
7876
+ (ngModelChange)="ngModelParentChange.emit($event)">
7877
+ </mat-checkbox>
7878
+ </ng-container>
7862
7879
  </ng-container>
7863
- </ng-container>
7864
7880
  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i8$1.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
7865
7881
  }
7866
7882
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaFlatTreeNodeLeftComponent, decorators: [{
@@ -7869,41 +7885,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
7869
7885
  selector: 'cva-flat-tree-node-left',
7870
7886
  standalone: false,
7871
7887
  template: `
7872
- <ng-container [ngSwitch]="hasChild(node)">
7873
- <ng-container *ngSwitchCase="false">
7874
- <div
7875
- class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
7876
- (click)="onLeafNodeClick.emit()"
7877
- fxLayoutAlign="space-between center">
7878
- <button *ngIf="node.level > 0" type="button" mat-icon-button disabled></button>
7879
- {{ node.displayValue }}
7880
- </div>
7881
- <mat-checkbox [(ngModel)]="node.checked"
7882
- [checked]="node.checked"
7883
- (ngModelChange)="ngModelLeafChange.emit($event)"
7884
- [disabled]="checkDisabledNode(node)"
7885
- *ngIf="!isHideCheckbox">
7886
- </mat-checkbox>
7887
- </ng-container>
7888
- <ng-container *ngSwitchCase="true">
7889
- <div
7890
- class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
7891
- fxLayoutAlign="space-between center">
7892
- <button type="button" mat-icon-button (click)="toggle.emit()"
7893
- [attr.aria-label]="'toggle ' + node.displayValue">
7894
- <i class="fas {{(treeControl && treeControl.isExpanded(node)) ? 'fa-chevron-up' : 'fa-chevron-down'}}"></i>
7895
- </button>
7896
- <span (click)="onParentNodeClick.emit()">{{ node.displayValue }}</span>
7897
- </div>
7898
- <mat-checkbox [(ngModel)]="node.checked"
7899
- *ngIf="!isHideCheckbox"
7900
- [checked]="descendantsAllSelected(node)"
7901
- [disabled]="onDisabledParent(node) || getDisabledInputFunc(node)"
7902
- [indeterminate]="descendantsPartiallySelected(node)"
7903
- (ngModelChange)="ngModelParentChange.emit($event)">
7904
- </mat-checkbox>
7888
+ <ng-container [ngSwitch]="hasChild(node)">
7889
+ <ng-container *ngSwitchCase="false">
7890
+ <div
7891
+ class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
7892
+ (click)="onLeafNodeClick.emit()"
7893
+ fxLayoutAlign="space-between center">
7894
+ <button *ngIf="node.level > 0" type="button" mat-icon-button disabled></button>
7895
+ <i *ngIf="node.iconClass" class="{{ node.iconClass }} icon-left"></i>
7896
+ {{ node.displayValue }}
7897
+ </div>
7898
+ <mat-checkbox [(ngModel)]="node.checked"
7899
+ [checked]="node.checked"
7900
+ (ngModelChange)="ngModelLeafChange.emit($event)"
7901
+ [disabled]="checkDisabledNode(node)"
7902
+ *ngIf="!isHideCheckbox">
7903
+ </mat-checkbox>
7904
+ </ng-container>
7905
+ <ng-container *ngSwitchCase="true">
7906
+ <div
7907
+ class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
7908
+ fxLayoutAlign="space-between center">
7909
+ <button type="button" mat-icon-button (click)="toggle.emit()"
7910
+ [attr.aria-label]="'toggle ' + node.displayValue">
7911
+ <i class="fas {{(treeControl && treeControl.isExpanded(node)) ? 'fa-chevron-up' : 'fa-chevron-down'}}"></i>
7912
+ </button>
7913
+ <span (click)="onParentNodeClick.emit()">
7914
+ <i *ngIf="node.iconClass" class="{{ node.iconClass }} icon-left"></i>
7915
+ {{ node.displayValue }}
7916
+ </span>
7917
+ </div>
7918
+ <mat-checkbox [(ngModel)]="node.checked"
7919
+ *ngIf="!isHideCheckbox"
7920
+ [checked]="descendantsAllSelected(node)"
7921
+ [disabled]="onDisabledParent(node) || getDisabledInputFunc(node)"
7922
+ [indeterminate]="descendantsPartiallySelected(node)"
7923
+ (ngModelChange)="ngModelParentChange.emit($event)">
7924
+ </mat-checkbox>
7925
+ </ng-container>
7905
7926
  </ng-container>
7906
- </ng-container>
7907
7927
  `,
7908
7928
  }]
7909
7929
  }], propDecorators: { treeControl: [{
@@ -8586,40 +8606,22 @@ class CvaFlatTreeComponent {
8586
8606
  }
8587
8607
  toggleNodeCheck(node, checked) {
8588
8608
  const isLeaf = !FlatTreeService.hasChild(node);
8589
- // Gọi 1 lần duy nhất nếu là parent
8590
- const descendants = isLeaf ? [] : this.fullDataTreeControl.getDescendants(node);
8591
- const affectedNodes = isLeaf ? [node] : descendants.filter(n => !FlatTreeService.hasChild(n));
8592
- for (const leaf of affectedNodes) {
8609
+ // Lấy danh sách node đang hiển thị (filtered)
8610
+ const visibleNodes = isLeaf
8611
+ ? [node]
8612
+ : [...this.getAllChildNode(this.treeControl, node).filter(n => n.display), node];
8613
+ for (const leaf of visibleNodes) {
8593
8614
  if (!leaf.display || this.checkDisabledNode(leaf))
8594
8615
  continue;
8595
8616
  const index = this.value.indexOf(leaf.value);
8596
8617
  if (checked && index < 0) {
8597
8618
  this.value.push(leaf.value);
8598
- this.valueObjRef.set(leaf.value, leaf);
8599
- leaf.checked = true;
8600
8619
  }
8601
8620
  if (!checked && index >= 0) {
8602
8621
  this.value.splice(index, 1);
8603
- this.valueObjRef.delete(leaf.value);
8604
- leaf.checked = false;
8605
8622
  }
8606
- const orgNodeIndex = this.mapIndexes.get(leaf.value);
8607
- if (orgNodeIndex !== undefined) {
8608
- this.fullDataTreeControl.dataNodes[orgNodeIndex].checked = leaf.checked;
8609
- }
8610
- }
8611
- // Nếu node là cha → cập nhật isExpanded
8612
- if (!isLeaf) {
8613
- node.checked = checked;
8614
- const orgNodeIndex = this.mapIndexes.get(node.value);
8615
- if (orgNodeIndex !== undefined) {
8616
- this.fullDataTreeControl.dataNodes[orgNodeIndex].checked = checked;
8617
- this.fullDataTreeControl.dataNodes[orgNodeIndex].isExpanded = false;
8618
- }
8619
- }
8620
- else {
8621
- node.checked = checked;
8622
8623
  }
8624
+ // Gọi writeValue để cập nhật cho FormControl
8623
8625
  this.writeValue(this.value);
8624
8626
  this.cdr.detectChanges();
8625
8627
  }
@@ -8627,95 +8629,97 @@ class CvaFlatTreeComponent {
8627
8629
  _isExpandable = (node) => FlatTreeService.hasChild(node);
8628
8630
  _getChildren = (node) => of(node.children ? node.children : []);
8629
8631
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaFlatTreeComponent, deps: [{ token: i1.TranslateService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
8630
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaFlatTreeComponent, isStandalone: false, selector: "cva-flat-tree", inputs: { label: "label", required: "required", value: "value", multiple: "multiple", disabled: "disabled", isView: "isView", isDisplayChooseTreeOnly: "isDisplayChooseTreeOnly", isHideCheckbox: "isHideCheckbox", isCollapseSelected: "isCollapseSelected", selectedLabelTitle: "selectedLabelTitle", viewHeight: "viewHeight", itemSize: "itemSize", percentOfLabelOutside: "percentOfLabelOutside", treeConfig: "treeConfig", isSearchOutSide: "isSearchOutSide", searchTextOutSide: "searchTextOutSide", errorMessages: "errorMessages", fullDatasource: "fullDatasource", isFormControl: "isFormControl" }, outputs: { selectionChange: "selectionChange", onNodeClick: "onNodeClick" }, viewQueries: [{ propertyName: "chooseVirtualScroll", first: true, predicate: ["chooseAreaScrollViewport"], descendants: true }, { propertyName: "selectedVirtualScroll", first: true, predicate: ["selectedScrollViewport"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
8631
- <div class="cva-flat-tree labelOutside"
8632
- fxLayout="row" fxLayout.lt-sm="row wrap">
8633
- <mat-label *ngIf="label && !isSearchOutSide" class="label_width"
8632
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaFlatTreeComponent, isStandalone: false, selector: "cva-flat-tree", inputs: { label: "label", required: "required", value: "value", multiple: "multiple", disabled: "disabled", isView: "isView", isDisplayChooseTreeOnly: "isDisplayChooseTreeOnly", isHideCheckbox: "isHideCheckbox", isCollapseSelected: "isCollapseSelected", selectedLabelTitle: "selectedLabelTitle", viewHeight: "viewHeight", itemSize: "itemSize", percentOfLabelOutside: "percentOfLabelOutside", treeConfig: "treeConfig", isSearchOutSide: "isSearchOutSide", searchTextOutSide: "searchTextOutSide", errorMessages: "errorMessages", fullDatasource: "fullDatasource", nodeClicked: "nodeClicked", isFormControl: "isFormControl" }, outputs: { selectionChange: "selectionChange", onNodeClick: "onNodeClick" }, viewQueries: [{ propertyName: "chooseVirtualScroll", first: true, predicate: ["chooseAreaScrollViewport"], descendants: true }, { propertyName: "selectedVirtualScroll", first: true, predicate: ["selectedScrollViewport"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
8633
+ <div class="cva-flat-tree labelOutside"
8634
+ fxLayout="row" fxLayout.lt-sm="row wrap">
8635
+ <mat-label *ngIf="label && !isSearchOutSide" class="label_width"
8636
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8637
+ <div class="label">
8638
+ <div>
8639
+ {{ (label ? label : '') | translate }}<span
8640
+ class="required-label-outside">{{ required ? '*' : '' }}</span>
8641
+ </div>
8642
+ </div>
8643
+ </mat-label>
8644
+ <div class="tree-area"
8634
8645
  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8635
- <div class="label">
8636
- <div>
8637
- {{ (label ? label : '') | translate }}<span class="required-label-outside">{{ required ? '*' : '' }}</span>
8638
- </div>
8639
- </div>
8640
- </mat-label>
8641
- <div class="tree-area"
8642
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8643
- <div fxLayout="row wrap">
8644
- <div class="choose-area"
8645
- *ngIf="!checkIsView(isView) && !isCollapseSelected"
8646
- fxLayout="column" fxFlex="1 1 {{isDisplayChooseTreeOnly ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
8647
- <div class="header-choose-area">
8648
- <div class="title-choose-tree" fxLayout="row" fxLayout.lt-sm="row wrap">
8649
- <mat-label fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%" class="label_width"
8650
- *ngIf="label && isSearchOutSide">
8651
- <div class="label">{{ (label ? label : '') | translate }}<span
8652
- class="required-label-outside">{{ required ? '*' : '' }}</span></div>
8653
- </mat-label>
8654
- <mat-divider *ngIf="label && isSearchOutSide"></mat-divider>
8655
- </div>
8656
- <mat-form-field appearance="outline"
8657
- *ngIf="!isSearchOutSide"
8658
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8659
- <input matInput
8660
- placeholder="{{'common.searchText'|translate}}"
8661
- [(ngModel)]="searchText"
8662
- (ngModelChange)="onChangeSearchText()"
8663
- autocomplete="off">
8664
- </mat-form-field>
8665
- </div>
8666
- <cdk-virtual-scroll-viewport #chooseAreaScrollViewport itemSize="{{itemSize}}"
8667
- [ngStyle]="{height: viewHeight + 'px'}">
8668
- <ng-container *cdkVirtualFor="let node of dataSource">
8669
- <cva-flat-tree-node-left
8670
- [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8671
- [attr.aria-level]="node.level"
8672
- [treeControl]="treeControl"
8673
- [isHideCheckbox]="isHideCheckbox"
8674
- [nodeClicked]="nodeClicked"
8675
- [node]="node"
8676
- (toggle)="toggleTreeControl(treeControl, node)"
8677
- (onParentNodeClick)="onParentNodeClick(node)"
8678
- (onLeafNodeClick)="onLeafNodeClick(node)"
8679
- (ngModelParentChange)="toggleNodeCheck(node, $event)"
8680
- (ngModelLeafChange)="toggleNodeCheck(node, $event)">
8681
- </cva-flat-tree-node-left>
8682
- </ng-container>
8683
- </cdk-virtual-scroll-viewport>
8684
- </div>
8685
- <div class="selected-area {{isCollapseSelected ? 'hiddenTree' : ''}}"
8686
- *ngIf="!isDisplayChooseTreeOnly"
8687
- fxLayout="column" fxFlex="1 1 {{checkIsView(isView) ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
8688
- <div class="header-area" *ngIf="!isView">
8689
- <label>{{ selectedLabelTitle | translate }}{{ '(' + (value ? value.length : 0) + ')' }}</label>
8690
- <div class="collapse-expand-all" (click)="toggleSelectedTree()">
8691
- {{ (isCollapseSelected ? 'common.selected.tree.expandAll' : 'common.selected.tree.collapse') | translate }}
8692
- <i class="fa {{isCollapseSelected ? 'fa-chevron-down' : 'fa-chevron-up'}}"></i>
8693
- </div>
8646
+ <div fxLayout="row wrap">
8647
+ <div class="choose-area"
8648
+ *ngIf="!checkIsView(isView) && !isCollapseSelected"
8649
+ fxLayout="column" fxFlex="1 1 {{isDisplayChooseTreeOnly ? '100%' : '50%'}}"
8650
+ fxFlex.lt-sm="100%">
8651
+ <div class="header-choose-area">
8652
+ <div class="title-choose-tree" fxLayout="row" fxLayout.lt-sm="row wrap">
8653
+ <mat-label fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%" class="label_width"
8654
+ *ngIf="label && isSearchOutSide">
8655
+ <div class="label">{{ (label ? label : '') | translate }}<span
8656
+ class="required-label-outside">{{ required ? '*' : '' }}</span></div>
8657
+ </mat-label>
8658
+ <mat-divider *ngIf="label && isSearchOutSide"></mat-divider>
8659
+ </div>
8660
+ <mat-form-field appearance="outline"
8661
+ *ngIf="!isSearchOutSide"
8662
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8663
+ <input matInput
8664
+ placeholder="{{'common.searchText'|translate}}"
8665
+ [(ngModel)]="searchText"
8666
+ (ngModelChange)="onChangeSearchText()"
8667
+ autocomplete="off">
8668
+ </mat-form-field>
8669
+ </div>
8670
+ <cdk-virtual-scroll-viewport #chooseAreaScrollViewport itemSize="{{itemSize}}"
8671
+ [ngStyle]="{height: viewHeight + 'px'}">
8672
+ <ng-container *cdkVirtualFor="let node of dataSource">
8673
+ <cva-flat-tree-node-left
8674
+ [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8675
+ [attr.aria-level]="node.level"
8676
+ [treeControl]="treeControl"
8677
+ [isHideCheckbox]="isHideCheckbox"
8678
+ [nodeClicked]="nodeClicked"
8679
+ [node]="node"
8680
+ (toggle)="toggleTreeControl(treeControl, node)"
8681
+ (onParentNodeClick)="onParentNodeClick(node)"
8682
+ (onLeafNodeClick)="onLeafNodeClick(node)"
8683
+ (ngModelParentChange)="toggleNodeCheck(node, $event)"
8684
+ (ngModelLeafChange)="toggleNodeCheck(node, $event)">
8685
+ </cva-flat-tree-node-left>
8686
+ </ng-container>
8687
+ </cdk-virtual-scroll-viewport>
8688
+ </div>
8689
+ <div class="selected-area {{isCollapseSelected ? 'hiddenTree' : ''}}"
8690
+ *ngIf="!isDisplayChooseTreeOnly"
8691
+ fxLayout="column" fxFlex="1 1 {{checkIsView(isView) ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
8692
+ <div class="header-area" *ngIf="!isView">
8693
+ <label>{{ selectedLabelTitle | translate }}{{ '(' + (value ? value.length : 0) + ')' }}</label>
8694
+ <div class="collapse-expand-all" (click)="toggleSelectedTree()">
8695
+ {{ (isCollapseSelected ? 'common.selected.tree.expandAll' : 'common.selected.tree.collapse') | translate }}
8696
+ <i class="fa {{isCollapseSelected ? 'fa-chevron-down' : 'fa-chevron-up'}}"></i>
8697
+ </div>
8698
+ </div>
8699
+ <cdk-virtual-scroll-viewport #selectedScrollViewport
8700
+ *ngIf="!isCollapseSelected"
8701
+ itemSize="{{itemSize}}" [ngStyle]="{height: viewHeight + 'px'}">
8702
+ <ng-container *cdkVirtualFor="let node of selectedDataSource">
8703
+ <cva-flat-tree-node-right
8704
+ [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8705
+ [attr.aria-level]="node.level"
8706
+ [treeControl]="selectedTreeControl"
8707
+ [node]="node"
8708
+ [isView]="isView"
8709
+ (toggle)="toggleSelectedTree(node)"
8710
+ (deSelectLeafNode)="deSelect(node)"
8711
+ (deSelectParentNode)="deSelectParent(node)">
8712
+ </cva-flat-tree-node-right>
8713
+ </ng-container>
8714
+ </cdk-virtual-scroll-viewport>
8715
+ </div>
8716
+ </div>
8717
+ <mat-hint *ngIf="NsValiator.invalid(formControl)">
8718
+ {{ NsValiator.getErrorMessage(formControl, errorMessages) | translate }}
8719
+ </mat-hint>
8694
8720
  </div>
8695
- <cdk-virtual-scroll-viewport #selectedScrollViewport
8696
- *ngIf="!isCollapseSelected"
8697
- itemSize="{{itemSize}}" [ngStyle]="{height: viewHeight + 'px'}">
8698
- <ng-container *cdkVirtualFor="let node of selectedDataSource">
8699
- <cva-flat-tree-node-right
8700
- [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8701
- [attr.aria-level]="node.level"
8702
- [treeControl]="selectedTreeControl"
8703
- [node]="node"
8704
- [isView]="isView"
8705
- (toggle)="toggleSelectedTree(node)"
8706
- (deSelectLeafNode)="deSelect(node)"
8707
- (deSelectParentNode)="deSelectParent(node)">
8708
- </cva-flat-tree-node-right>
8709
- </ng-container>
8710
- </cdk-virtual-scroll-viewport>
8711
- </div>
8712
8721
  </div>
8713
- <mat-hint *ngIf="NsValiator.invalid(formControl)">
8714
- {{ NsValiator.getErrorMessage(formControl, errorMessages) | translate }}
8715
- </mat-hint>
8716
- </div>
8717
- </div>
8718
- `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i10.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i10.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i10.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultStyleDirective, selector: " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: CvaFlatTreeNodeLeftComponent, selector: "cva-flat-tree-node-left", inputs: ["treeControl", "isHideCheckbox", "node", "nodeClicked"], outputs: ["toggle", "onParentNodeClick", "onLeafNodeClick", "ngModelParentChange", "ngModelLeafChange"] }, { kind: "component", type: CvaFlatTreeNodeRightComponent, selector: "cva-flat-tree-node-right", inputs: ["treeControl", "node", "isView"], outputs: ["toggle", "deSelectLeafNode", "deSelectParentNode"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
8722
+ `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i10.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i10.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i10.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i8$1.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultStyleDirective, selector: " [ngStyle], [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl], [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl], [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: CvaFlatTreeNodeLeftComponent, selector: "cva-flat-tree-node-left", inputs: ["treeControl", "isHideCheckbox", "node", "nodeClicked"], outputs: ["toggle", "onParentNodeClick", "onLeafNodeClick", "ngModelParentChange", "ngModelLeafChange"] }, { kind: "component", type: CvaFlatTreeNodeRightComponent, selector: "cva-flat-tree-node-right", inputs: ["treeControl", "node", "isView"], outputs: ["toggle", "deSelectLeafNode", "deSelectParentNode"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
8719
8723
  }
8720
8724
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaFlatTreeComponent, decorators: [{
8721
8725
  type: Component,
@@ -8723,94 +8727,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
8723
8727
  selector: 'cva-flat-tree',
8724
8728
  standalone: false,
8725
8729
  template: `
8726
- <div class="cva-flat-tree labelOutside"
8727
- fxLayout="row" fxLayout.lt-sm="row wrap">
8728
- <mat-label *ngIf="label && !isSearchOutSide" class="label_width"
8730
+ <div class="cva-flat-tree labelOutside"
8731
+ fxLayout="row" fxLayout.lt-sm="row wrap">
8732
+ <mat-label *ngIf="label && !isSearchOutSide" class="label_width"
8733
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8734
+ <div class="label">
8735
+ <div>
8736
+ {{ (label ? label : '') | translate }}<span
8737
+ class="required-label-outside">{{ required ? '*' : '' }}</span>
8738
+ </div>
8739
+ </div>
8740
+ </mat-label>
8741
+ <div class="tree-area"
8729
8742
  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8730
- <div class="label">
8731
- <div>
8732
- {{ (label ? label : '') | translate }}<span class="required-label-outside">{{ required ? '*' : '' }}</span>
8733
- </div>
8734
- </div>
8735
- </mat-label>
8736
- <div class="tree-area"
8737
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8738
- <div fxLayout="row wrap">
8739
- <div class="choose-area"
8740
- *ngIf="!checkIsView(isView) && !isCollapseSelected"
8741
- fxLayout="column" fxFlex="1 1 {{isDisplayChooseTreeOnly ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
8742
- <div class="header-choose-area">
8743
- <div class="title-choose-tree" fxLayout="row" fxLayout.lt-sm="row wrap">
8744
- <mat-label fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%" class="label_width"
8745
- *ngIf="label && isSearchOutSide">
8746
- <div class="label">{{ (label ? label : '') | translate }}<span
8747
- class="required-label-outside">{{ required ? '*' : '' }}</span></div>
8748
- </mat-label>
8749
- <mat-divider *ngIf="label && isSearchOutSide"></mat-divider>
8750
- </div>
8751
- <mat-form-field appearance="outline"
8752
- *ngIf="!isSearchOutSide"
8753
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8754
- <input matInput
8755
- placeholder="{{'common.searchText'|translate}}"
8756
- [(ngModel)]="searchText"
8757
- (ngModelChange)="onChangeSearchText()"
8758
- autocomplete="off">
8759
- </mat-form-field>
8760
- </div>
8761
- <cdk-virtual-scroll-viewport #chooseAreaScrollViewport itemSize="{{itemSize}}"
8762
- [ngStyle]="{height: viewHeight + 'px'}">
8763
- <ng-container *cdkVirtualFor="let node of dataSource">
8764
- <cva-flat-tree-node-left
8765
- [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8766
- [attr.aria-level]="node.level"
8767
- [treeControl]="treeControl"
8768
- [isHideCheckbox]="isHideCheckbox"
8769
- [nodeClicked]="nodeClicked"
8770
- [node]="node"
8771
- (toggle)="toggleTreeControl(treeControl, node)"
8772
- (onParentNodeClick)="onParentNodeClick(node)"
8773
- (onLeafNodeClick)="onLeafNodeClick(node)"
8774
- (ngModelParentChange)="toggleNodeCheck(node, $event)"
8775
- (ngModelLeafChange)="toggleNodeCheck(node, $event)">
8776
- </cva-flat-tree-node-left>
8777
- </ng-container>
8778
- </cdk-virtual-scroll-viewport>
8779
- </div>
8780
- <div class="selected-area {{isCollapseSelected ? 'hiddenTree' : ''}}"
8781
- *ngIf="!isDisplayChooseTreeOnly"
8782
- fxLayout="column" fxFlex="1 1 {{checkIsView(isView) ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
8783
- <div class="header-area" *ngIf="!isView">
8784
- <label>{{ selectedLabelTitle | translate }}{{ '(' + (value ? value.length : 0) + ')' }}</label>
8785
- <div class="collapse-expand-all" (click)="toggleSelectedTree()">
8786
- {{ (isCollapseSelected ? 'common.selected.tree.expandAll' : 'common.selected.tree.collapse') | translate }}
8787
- <i class="fa {{isCollapseSelected ? 'fa-chevron-down' : 'fa-chevron-up'}}"></i>
8788
- </div>
8743
+ <div fxLayout="row wrap">
8744
+ <div class="choose-area"
8745
+ *ngIf="!checkIsView(isView) && !isCollapseSelected"
8746
+ fxLayout="column" fxFlex="1 1 {{isDisplayChooseTreeOnly ? '100%' : '50%'}}"
8747
+ fxFlex.lt-sm="100%">
8748
+ <div class="header-choose-area">
8749
+ <div class="title-choose-tree" fxLayout="row" fxLayout.lt-sm="row wrap">
8750
+ <mat-label fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%" class="label_width"
8751
+ *ngIf="label && isSearchOutSide">
8752
+ <div class="label">{{ (label ? label : '') | translate }}<span
8753
+ class="required-label-outside">{{ required ? '*' : '' }}</span></div>
8754
+ </mat-label>
8755
+ <mat-divider *ngIf="label && isSearchOutSide"></mat-divider>
8756
+ </div>
8757
+ <mat-form-field appearance="outline"
8758
+ *ngIf="!isSearchOutSide"
8759
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8760
+ <input matInput
8761
+ placeholder="{{'common.searchText'|translate}}"
8762
+ [(ngModel)]="searchText"
8763
+ (ngModelChange)="onChangeSearchText()"
8764
+ autocomplete="off">
8765
+ </mat-form-field>
8766
+ </div>
8767
+ <cdk-virtual-scroll-viewport #chooseAreaScrollViewport itemSize="{{itemSize}}"
8768
+ [ngStyle]="{height: viewHeight + 'px'}">
8769
+ <ng-container *cdkVirtualFor="let node of dataSource">
8770
+ <cva-flat-tree-node-left
8771
+ [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8772
+ [attr.aria-level]="node.level"
8773
+ [treeControl]="treeControl"
8774
+ [isHideCheckbox]="isHideCheckbox"
8775
+ [nodeClicked]="nodeClicked"
8776
+ [node]="node"
8777
+ (toggle)="toggleTreeControl(treeControl, node)"
8778
+ (onParentNodeClick)="onParentNodeClick(node)"
8779
+ (onLeafNodeClick)="onLeafNodeClick(node)"
8780
+ (ngModelParentChange)="toggleNodeCheck(node, $event)"
8781
+ (ngModelLeafChange)="toggleNodeCheck(node, $event)">
8782
+ </cva-flat-tree-node-left>
8783
+ </ng-container>
8784
+ </cdk-virtual-scroll-viewport>
8785
+ </div>
8786
+ <div class="selected-area {{isCollapseSelected ? 'hiddenTree' : ''}}"
8787
+ *ngIf="!isDisplayChooseTreeOnly"
8788
+ fxLayout="column" fxFlex="1 1 {{checkIsView(isView) ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
8789
+ <div class="header-area" *ngIf="!isView">
8790
+ <label>{{ selectedLabelTitle | translate }}{{ '(' + (value ? value.length : 0) + ')' }}</label>
8791
+ <div class="collapse-expand-all" (click)="toggleSelectedTree()">
8792
+ {{ (isCollapseSelected ? 'common.selected.tree.expandAll' : 'common.selected.tree.collapse') | translate }}
8793
+ <i class="fa {{isCollapseSelected ? 'fa-chevron-down' : 'fa-chevron-up'}}"></i>
8794
+ </div>
8795
+ </div>
8796
+ <cdk-virtual-scroll-viewport #selectedScrollViewport
8797
+ *ngIf="!isCollapseSelected"
8798
+ itemSize="{{itemSize}}" [ngStyle]="{height: viewHeight + 'px'}">
8799
+ <ng-container *cdkVirtualFor="let node of selectedDataSource">
8800
+ <cva-flat-tree-node-right
8801
+ [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8802
+ [attr.aria-level]="node.level"
8803
+ [treeControl]="selectedTreeControl"
8804
+ [node]="node"
8805
+ [isView]="isView"
8806
+ (toggle)="toggleSelectedTree(node)"
8807
+ (deSelectLeafNode)="deSelect(node)"
8808
+ (deSelectParentNode)="deSelectParent(node)">
8809
+ </cva-flat-tree-node-right>
8810
+ </ng-container>
8811
+ </cdk-virtual-scroll-viewport>
8812
+ </div>
8813
+ </div>
8814
+ <mat-hint *ngIf="NsValiator.invalid(formControl)">
8815
+ {{ NsValiator.getErrorMessage(formControl, errorMessages) | translate }}
8816
+ </mat-hint>
8789
8817
  </div>
8790
- <cdk-virtual-scroll-viewport #selectedScrollViewport
8791
- *ngIf="!isCollapseSelected"
8792
- itemSize="{{itemSize}}" [ngStyle]="{height: viewHeight + 'px'}">
8793
- <ng-container *cdkVirtualFor="let node of selectedDataSource">
8794
- <cva-flat-tree-node-right
8795
- [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8796
- [attr.aria-level]="node.level"
8797
- [treeControl]="selectedTreeControl"
8798
- [node]="node"
8799
- [isView]="isView"
8800
- (toggle)="toggleSelectedTree(node)"
8801
- (deSelectLeafNode)="deSelect(node)"
8802
- (deSelectParentNode)="deSelectParent(node)">
8803
- </cva-flat-tree-node-right>
8804
- </ng-container>
8805
- </cdk-virtual-scroll-viewport>
8806
- </div>
8807
8818
  </div>
8808
- <mat-hint *ngIf="NsValiator.invalid(formControl)">
8809
- {{ NsValiator.getErrorMessage(formControl, errorMessages) | translate }}
8810
- </mat-hint>
8811
- </div>
8812
- </div>
8813
- `,
8819
+ `,
8814
8820
  }]
8815
8821
  }], ctorParameters: () => [{ type: i1.TranslateService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$2.NgControl, decorators: [{
8816
8822
  type: Self
@@ -8856,6 +8862,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
8856
8862
  type: Output
8857
8863
  }], onNodeClick: [{
8858
8864
  type: Output
8865
+ }], nodeClicked: [{
8866
+ type: Input
8859
8867
  }], isFormControl: [{
8860
8868
  type: Input
8861
8869
  }], chooseVirtualScroll: [{