@c10t/nice-component-library 0.0.26 → 0.0.27

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 (5) hide show
  1. package/components/tree/cva-flat-tree.component.d.ts +1 -1
  2. package/fesm2022/c10t-nice-component-library.mjs +326 -326
  3. package/fesm2022/c10t-nice-component-library.mjs.map +1 -1
  4. package/models/components/flat-tree-node.model.d.ts +1 -0
  5. 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;
@@ -5391,7 +5392,7 @@ class CvaSmartTableComponent {
5391
5392
  [patternFilter]="column.patternFilter ? column.patternFilter : ''">
5392
5393
  </cva-input>
5393
5394
  <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT_CURRENCY"
5394
- type="number" #cellComponentRef
5395
+ #cellComponentRef
5395
5396
  [placeholder]="moduleName + '.table.placeholder.input.currency'"
5396
5397
  [isFormControl]="false"
5397
5398
  [alignText]="getAlign(column)"
@@ -5668,7 +5669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5668
5669
  [patternFilter]="column.patternFilter ? column.patternFilter : ''">
5669
5670
  </cva-input>
5670
5671
  <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT_CURRENCY"
5671
- type="number" #cellComponentRef
5672
+ #cellComponentRef
5672
5673
  [placeholder]="moduleName + '.table.placeholder.input.currency'"
5673
5674
  [isFormControl]="false"
5674
5675
  [alignText]="getAlign(column)"
@@ -6389,12 +6390,10 @@ class CvaMultiUploadComponent {
6389
6390
  if (!obj) {
6390
6391
  return;
6391
6392
  }
6392
- if (this.multiple) {
6393
- this.files.push(obj);
6394
- }
6395
- else {
6396
- this.files = [obj];
6393
+ if (!this.multiple && this.files.length === 1) {
6394
+ this.files.length = 0;
6397
6395
  }
6396
+ this.files.push(obj);
6398
6397
  this.propagateChange(this.files);
6399
6398
  }
6400
6399
  registerOnChange(fn) {
@@ -6445,6 +6444,7 @@ class CvaMultiUploadComponent {
6445
6444
  const target = event.target;
6446
6445
  if (target && target.files) {
6447
6446
  this.convertToUploadModel(target.files);
6447
+ target.value = '';
6448
6448
  }
6449
6449
  }
6450
6450
  onFileDroppedAction(fileList) {
@@ -6473,34 +6473,36 @@ class CvaMultiUploadComponent {
6473
6473
  multi: true,
6474
6474
  },
6475
6475
  ], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }], ngImport: i0, template: `
6476
- <div class="cva-multi-upload"
6477
- fxLayout="row" fxLayout.lt-sm="row wrap">
6478
- <mat-label *ngIf="label" class="label_width"
6479
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6480
- <div class="label">{{ (label ? label : '') | translate }}<span
6481
- class="required-label-outside">{{ !!required ? '*' : '' }}</span></div>
6482
- </mat-label>
6483
- <div class="uploadArea"
6484
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%"
6485
- appDragDrop (onFileDropped)="onFileDroppedAction($event)">
6486
- <input type="file" [multiple]="multiple" #fileUpload (change)="onFileChangeAction($event)"
6487
- [disabled]="disabled"
6488
- accept="{{accept ? accept.join() : '*/*'}}">
6489
- <mat-card>
6490
- <mat-card-actions>
6491
- <button mat-button class="upload-button" color="warn" (click)="onClick()">
6492
- <mat-icon>add</mat-icon>
6493
- <span>{{ 'common.upload.file' | translate }}</span>
6494
- </button>
6495
- </mat-card-actions>
6496
- <mat-card-content>
6497
- </mat-card-content>
6498
- </mat-card>
6499
- <mat-error *ngIf="sizeError!==null">{{ sizeError + ' ' + ('common.is.over-size' | translate) }}</mat-error>
6500
- <mat-error *ngIf="typeError!==null">{{ typeError + ' ' + ('common.is.not-accept' | translate) }}</mat-error>
6501
- </div>
6502
- </div>
6503
- `, 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" }] });
6476
+ <div class="cva-multi-upload"
6477
+ fxLayout="row" fxLayout.lt-sm="row wrap">
6478
+ <mat-label *ngIf="label" class="label_width"
6479
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6480
+ <div class="label">{{ (label ? label : '') | translate }}<span
6481
+ class="required-label-outside">{{ !!required ? '*' : '' }}</span></div>
6482
+ </mat-label>
6483
+ <div class="uploadArea"
6484
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%"
6485
+ appDragDrop (onFileDropped)="onFileDroppedAction($event)">
6486
+ <input type="file" [multiple]="multiple" #fileUpload (change)="onFileChangeAction($event)"
6487
+ [disabled]="disabled"
6488
+ accept="{{accept ? accept.join() : '*/*'}}">
6489
+ <mat-card>
6490
+ <mat-card-actions>
6491
+ <button mat-button class="upload-button" color="warn" (click)="onClick()">
6492
+ <mat-icon>add</mat-icon>
6493
+ <span>{{ 'common.upload.file' | translate }}</span>
6494
+ </button>
6495
+ </mat-card-actions>
6496
+ <mat-card-content>
6497
+ </mat-card-content>
6498
+ </mat-card>
6499
+ <mat-error *ngIf="sizeError!==null">{{ sizeError + ' ' + ('common.is.over-size' | translate) }}
6500
+ </mat-error>
6501
+ <mat-error *ngIf="typeError!==null">{{ typeError + ' ' + ('common.is.not-accept' | translate) }}
6502
+ </mat-error>
6503
+ </div>
6504
+ </div>
6505
+ `, 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" }] });
6504
6506
  }
6505
6507
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiUploadComponent, decorators: [{
6506
6508
  type: Component,
@@ -6508,34 +6510,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
6508
6510
  selector: 'cva-multi-upload',
6509
6511
  standalone: false,
6510
6512
  template: `
6511
- <div class="cva-multi-upload"
6512
- fxLayout="row" fxLayout.lt-sm="row wrap">
6513
- <mat-label *ngIf="label" class="label_width"
6514
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6515
- <div class="label">{{ (label ? label : '') | translate }}<span
6516
- class="required-label-outside">{{ !!required ? '*' : '' }}</span></div>
6517
- </mat-label>
6518
- <div class="uploadArea"
6519
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%"
6520
- appDragDrop (onFileDropped)="onFileDroppedAction($event)">
6521
- <input type="file" [multiple]="multiple" #fileUpload (change)="onFileChangeAction($event)"
6522
- [disabled]="disabled"
6523
- accept="{{accept ? accept.join() : '*/*'}}">
6524
- <mat-card>
6525
- <mat-card-actions>
6526
- <button mat-button class="upload-button" color="warn" (click)="onClick()">
6527
- <mat-icon>add</mat-icon>
6528
- <span>{{ 'common.upload.file' | translate }}</span>
6529
- </button>
6530
- </mat-card-actions>
6531
- <mat-card-content>
6532
- </mat-card-content>
6533
- </mat-card>
6534
- <mat-error *ngIf="sizeError!==null">{{ sizeError + ' ' + ('common.is.over-size' | translate) }}</mat-error>
6535
- <mat-error *ngIf="typeError!==null">{{ typeError + ' ' + ('common.is.not-accept' | translate) }}</mat-error>
6536
- </div>
6537
- </div>
6538
- `,
6513
+ <div class="cva-multi-upload"
6514
+ fxLayout="row" fxLayout.lt-sm="row wrap">
6515
+ <mat-label *ngIf="label" class="label_width"
6516
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6517
+ <div class="label">{{ (label ? label : '') | translate }}<span
6518
+ class="required-label-outside">{{ !!required ? '*' : '' }}</span></div>
6519
+ </mat-label>
6520
+ <div class="uploadArea"
6521
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%"
6522
+ appDragDrop (onFileDropped)="onFileDroppedAction($event)">
6523
+ <input type="file" [multiple]="multiple" #fileUpload (change)="onFileChangeAction($event)"
6524
+ [disabled]="disabled"
6525
+ accept="{{accept ? accept.join() : '*/*'}}">
6526
+ <mat-card>
6527
+ <mat-card-actions>
6528
+ <button mat-button class="upload-button" color="warn" (click)="onClick()">
6529
+ <mat-icon>add</mat-icon>
6530
+ <span>{{ 'common.upload.file' | translate }}</span>
6531
+ </button>
6532
+ </mat-card-actions>
6533
+ <mat-card-content>
6534
+ </mat-card-content>
6535
+ </mat-card>
6536
+ <mat-error *ngIf="sizeError!==null">{{ sizeError + ' ' + ('common.is.over-size' | translate) }}
6537
+ </mat-error>
6538
+ <mat-error *ngIf="typeError!==null">{{ typeError + ' ' + ('common.is.not-accept' | translate) }}
6539
+ </mat-error>
6540
+ </div>
6541
+ </div>
6542
+ `,
6539
6543
  providers: [
6540
6544
  {
6541
6545
  provide: NG_VALUE_ACCESSOR,
@@ -7831,41 +7835,45 @@ class CvaFlatTreeNodeLeftComponent {
7831
7835
  }
7832
7836
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaFlatTreeNodeLeftComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7833
7837
  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: `
7834
- <ng-container [ngSwitch]="hasChild(node)">
7835
- <ng-container *ngSwitchCase="false">
7836
- <div
7837
- class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
7838
- (click)="onLeafNodeClick.emit()"
7839
- fxLayoutAlign="space-between center">
7840
- <button *ngIf="node.level > 0" type="button" mat-icon-button disabled></button>
7841
- {{ node.displayValue }}
7842
- </div>
7843
- <mat-checkbox [(ngModel)]="node.checked"
7844
- [checked]="node.checked"
7845
- (ngModelChange)="ngModelLeafChange.emit($event)"
7846
- [disabled]="checkDisabledNode(node)"
7847
- *ngIf="!isHideCheckbox">
7848
- </mat-checkbox>
7849
- </ng-container>
7850
- <ng-container *ngSwitchCase="true">
7851
- <div
7852
- class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
7853
- fxLayoutAlign="space-between center">
7854
- <button type="button" mat-icon-button (click)="toggle.emit()"
7855
- [attr.aria-label]="'toggle ' + node.displayValue">
7856
- <i class="fas {{(treeControl && treeControl.isExpanded(node)) ? 'fa-chevron-up' : 'fa-chevron-down'}}"></i>
7857
- </button>
7858
- <span (click)="onParentNodeClick.emit()">{{ node.displayValue }}</span>
7859
- </div>
7860
- <mat-checkbox [(ngModel)]="node.checked"
7861
- *ngIf="!isHideCheckbox"
7862
- [checked]="descendantsAllSelected(node)"
7863
- [disabled]="onDisabledParent(node) || getDisabledInputFunc(node)"
7864
- [indeterminate]="descendantsPartiallySelected(node)"
7865
- (ngModelChange)="ngModelParentChange.emit($event)">
7866
- </mat-checkbox>
7838
+ <ng-container [ngSwitch]="hasChild(node)">
7839
+ <ng-container *ngSwitchCase="false">
7840
+ <div
7841
+ class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
7842
+ (click)="onLeafNodeClick.emit()"
7843
+ fxLayoutAlign="space-between center">
7844
+ <button *ngIf="node.level > 0" type="button" mat-icon-button disabled></button>
7845
+ <i *ngIf="node.iconClass" class="{{ node.iconClass }} icon-left"></i>
7846
+ {{ node.displayValue }}
7847
+ </div>
7848
+ <mat-checkbox [(ngModel)]="node.checked"
7849
+ [checked]="node.checked"
7850
+ (ngModelChange)="ngModelLeafChange.emit($event)"
7851
+ [disabled]="checkDisabledNode(node)"
7852
+ *ngIf="!isHideCheckbox">
7853
+ </mat-checkbox>
7854
+ </ng-container>
7855
+ <ng-container *ngSwitchCase="true">
7856
+ <div
7857
+ class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
7858
+ fxLayoutAlign="space-between center">
7859
+ <button type="button" mat-icon-button (click)="toggle.emit()"
7860
+ [attr.aria-label]="'toggle ' + node.displayValue">
7861
+ <i class="fas {{(treeControl && treeControl.isExpanded(node)) ? 'fa-chevron-up' : 'fa-chevron-down'}}"></i>
7862
+ </button>
7863
+ <span (click)="onParentNodeClick.emit()">
7864
+ <i *ngIf="node.iconClass" class="{{ node.iconClass }} icon-left"></i>
7865
+ {{ node.displayValue }}
7866
+ </span>
7867
+ </div>
7868
+ <mat-checkbox [(ngModel)]="node.checked"
7869
+ *ngIf="!isHideCheckbox"
7870
+ [checked]="descendantsAllSelected(node)"
7871
+ [disabled]="onDisabledParent(node) || getDisabledInputFunc(node)"
7872
+ [indeterminate]="descendantsPartiallySelected(node)"
7873
+ (ngModelChange)="ngModelParentChange.emit($event)">
7874
+ </mat-checkbox>
7875
+ </ng-container>
7867
7876
  </ng-container>
7868
- </ng-container>
7869
7877
  `, 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"] }] });
7870
7878
  }
7871
7879
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaFlatTreeNodeLeftComponent, decorators: [{
@@ -7874,41 +7882,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
7874
7882
  selector: 'cva-flat-tree-node-left',
7875
7883
  standalone: false,
7876
7884
  template: `
7877
- <ng-container [ngSwitch]="hasChild(node)">
7878
- <ng-container *ngSwitchCase="false">
7879
- <div
7880
- class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
7881
- (click)="onLeafNodeClick.emit()"
7882
- fxLayoutAlign="space-between center">
7883
- <button *ngIf="node.level > 0" type="button" mat-icon-button disabled></button>
7884
- {{ node.displayValue }}
7885
- </div>
7886
- <mat-checkbox [(ngModel)]="node.checked"
7887
- [checked]="node.checked"
7888
- (ngModelChange)="ngModelLeafChange.emit($event)"
7889
- [disabled]="checkDisabledNode(node)"
7890
- *ngIf="!isHideCheckbox">
7891
- </mat-checkbox>
7892
- </ng-container>
7893
- <ng-container *ngSwitchCase="true">
7894
- <div
7895
- class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
7896
- fxLayoutAlign="space-between center">
7897
- <button type="button" mat-icon-button (click)="toggle.emit()"
7898
- [attr.aria-label]="'toggle ' + node.displayValue">
7899
- <i class="fas {{(treeControl && treeControl.isExpanded(node)) ? 'fa-chevron-up' : 'fa-chevron-down'}}"></i>
7900
- </button>
7901
- <span (click)="onParentNodeClick.emit()">{{ node.displayValue }}</span>
7902
- </div>
7903
- <mat-checkbox [(ngModel)]="node.checked"
7904
- *ngIf="!isHideCheckbox"
7905
- [checked]="descendantsAllSelected(node)"
7906
- [disabled]="onDisabledParent(node) || getDisabledInputFunc(node)"
7907
- [indeterminate]="descendantsPartiallySelected(node)"
7908
- (ngModelChange)="ngModelParentChange.emit($event)">
7909
- </mat-checkbox>
7885
+ <ng-container [ngSwitch]="hasChild(node)">
7886
+ <ng-container *ngSwitchCase="false">
7887
+ <div
7888
+ class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
7889
+ (click)="onLeafNodeClick.emit()"
7890
+ fxLayoutAlign="space-between center">
7891
+ <button *ngIf="node.level > 0" type="button" mat-icon-button disabled></button>
7892
+ <i *ngIf="node.iconClass" class="{{ node.iconClass }} icon-left"></i>
7893
+ {{ node.displayValue }}
7894
+ </div>
7895
+ <mat-checkbox [(ngModel)]="node.checked"
7896
+ [checked]="node.checked"
7897
+ (ngModelChange)="ngModelLeafChange.emit($event)"
7898
+ [disabled]="checkDisabledNode(node)"
7899
+ *ngIf="!isHideCheckbox">
7900
+ </mat-checkbox>
7901
+ </ng-container>
7902
+ <ng-container *ngSwitchCase="true">
7903
+ <div
7904
+ class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
7905
+ fxLayoutAlign="space-between center">
7906
+ <button type="button" mat-icon-button (click)="toggle.emit()"
7907
+ [attr.aria-label]="'toggle ' + node.displayValue">
7908
+ <i class="fas {{(treeControl && treeControl.isExpanded(node)) ? 'fa-chevron-up' : 'fa-chevron-down'}}"></i>
7909
+ </button>
7910
+ <span (click)="onParentNodeClick.emit()">
7911
+ <i *ngIf="node.iconClass" class="{{ node.iconClass }} icon-left"></i>
7912
+ {{ node.displayValue }}
7913
+ </span>
7914
+ </div>
7915
+ <mat-checkbox [(ngModel)]="node.checked"
7916
+ *ngIf="!isHideCheckbox"
7917
+ [checked]="descendantsAllSelected(node)"
7918
+ [disabled]="onDisabledParent(node) || getDisabledInputFunc(node)"
7919
+ [indeterminate]="descendantsPartiallySelected(node)"
7920
+ (ngModelChange)="ngModelParentChange.emit($event)">
7921
+ </mat-checkbox>
7922
+ </ng-container>
7910
7923
  </ng-container>
7911
- </ng-container>
7912
7924
  `,
7913
7925
  }]
7914
7926
  }], propDecorators: { treeControl: [{
@@ -8591,40 +8603,22 @@ class CvaFlatTreeComponent {
8591
8603
  }
8592
8604
  toggleNodeCheck(node, checked) {
8593
8605
  const isLeaf = !FlatTreeService.hasChild(node);
8594
- // Gọi 1 lần duy nhất nếu là parent
8595
- const descendants = isLeaf ? [] : this.fullDataTreeControl.getDescendants(node);
8596
- const affectedNodes = isLeaf ? [node] : descendants.filter(n => !FlatTreeService.hasChild(n));
8597
- for (const leaf of affectedNodes) {
8606
+ // Lấy danh sách node đang hiển thị (filtered)
8607
+ const visibleNodes = isLeaf
8608
+ ? [node]
8609
+ : [...this.getAllChildNode(this.treeControl, node).filter(n => n.display), node];
8610
+ for (const leaf of visibleNodes) {
8598
8611
  if (!leaf.display || this.checkDisabledNode(leaf))
8599
8612
  continue;
8600
8613
  const index = this.value.indexOf(leaf.value);
8601
8614
  if (checked && index < 0) {
8602
8615
  this.value.push(leaf.value);
8603
- this.valueObjRef.set(leaf.value, leaf);
8604
- leaf.checked = true;
8605
8616
  }
8606
8617
  if (!checked && index >= 0) {
8607
8618
  this.value.splice(index, 1);
8608
- this.valueObjRef.delete(leaf.value);
8609
- leaf.checked = false;
8610
- }
8611
- const orgNodeIndex = this.mapIndexes.get(leaf.value);
8612
- if (orgNodeIndex !== undefined) {
8613
- this.fullDataTreeControl.dataNodes[orgNodeIndex].checked = leaf.checked;
8614
- }
8615
- }
8616
- // Nếu node là cha → cập nhật isExpanded
8617
- if (!isLeaf) {
8618
- node.checked = checked;
8619
- const orgNodeIndex = this.mapIndexes.get(node.value);
8620
- if (orgNodeIndex !== undefined) {
8621
- this.fullDataTreeControl.dataNodes[orgNodeIndex].checked = checked;
8622
- this.fullDataTreeControl.dataNodes[orgNodeIndex].isExpanded = false;
8623
8619
  }
8624
8620
  }
8625
- else {
8626
- node.checked = checked;
8627
- }
8621
+ // Gọi writeValue để cập nhật cho FormControl
8628
8622
  this.writeValue(this.value);
8629
8623
  this.cdr.detectChanges();
8630
8624
  }
@@ -8632,95 +8626,97 @@ class CvaFlatTreeComponent {
8632
8626
  _isExpandable = (node) => FlatTreeService.hasChild(node);
8633
8627
  _getChildren = (node) => of(node.children ? node.children : []);
8634
8628
  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 });
8635
- 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: `
8636
- <div class="cva-flat-tree labelOutside"
8637
- fxLayout="row" fxLayout.lt-sm="row wrap">
8638
- <mat-label *ngIf="label && !isSearchOutSide" class="label_width"
8629
+ 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: `
8630
+ <div class="cva-flat-tree labelOutside"
8631
+ fxLayout="row" fxLayout.lt-sm="row wrap">
8632
+ <mat-label *ngIf="label && !isSearchOutSide" class="label_width"
8633
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8634
+ <div class="label">
8635
+ <div>
8636
+ {{ (label ? label : '') | translate }}<span
8637
+ class="required-label-outside">{{ required ? '*' : '' }}</span>
8638
+ </div>
8639
+ </div>
8640
+ </mat-label>
8641
+ <div class="tree-area"
8639
8642
  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8640
- <div class="label">
8641
- <div>
8642
- {{ (label ? label : '') | translate }}<span class="required-label-outside">{{ required ? '*' : '' }}</span>
8643
- </div>
8644
- </div>
8645
- </mat-label>
8646
- <div class="tree-area"
8647
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8648
- <div fxLayout="row wrap">
8649
- <div class="choose-area"
8650
- *ngIf="!checkIsView(isView) && !isCollapseSelected"
8651
- fxLayout="column" fxFlex="1 1 {{isDisplayChooseTreeOnly ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
8652
- <div class="header-choose-area">
8653
- <div class="title-choose-tree" fxLayout="row" fxLayout.lt-sm="row wrap">
8654
- <mat-label fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%" class="label_width"
8655
- *ngIf="label && isSearchOutSide">
8656
- <div class="label">{{ (label ? label : '') | translate }}<span
8657
- class="required-label-outside">{{ required ? '*' : '' }}</span></div>
8658
- </mat-label>
8659
- <mat-divider *ngIf="label && isSearchOutSide"></mat-divider>
8660
- </div>
8661
- <mat-form-field appearance="outline"
8662
- *ngIf="!isSearchOutSide"
8663
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8664
- <input matInput
8665
- placeholder="{{'common.searchText'|translate}}"
8666
- [(ngModel)]="searchText"
8667
- (ngModelChange)="onChangeSearchText()"
8668
- autocomplete="off">
8669
- </mat-form-field>
8670
- </div>
8671
- <cdk-virtual-scroll-viewport #chooseAreaScrollViewport itemSize="{{itemSize}}"
8672
- [ngStyle]="{height: viewHeight + 'px'}">
8673
- <ng-container *cdkVirtualFor="let node of dataSource">
8674
- <cva-flat-tree-node-left
8675
- [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8676
- [attr.aria-level]="node.level"
8677
- [treeControl]="treeControl"
8678
- [isHideCheckbox]="isHideCheckbox"
8679
- [nodeClicked]="nodeClicked"
8680
- [node]="node"
8681
- (toggle)="toggleTreeControl(treeControl, node)"
8682
- (onParentNodeClick)="onParentNodeClick(node)"
8683
- (onLeafNodeClick)="onLeafNodeClick(node)"
8684
- (ngModelParentChange)="toggleNodeCheck(node, $event)"
8685
- (ngModelLeafChange)="toggleNodeCheck(node, $event)">
8686
- </cva-flat-tree-node-left>
8687
- </ng-container>
8688
- </cdk-virtual-scroll-viewport>
8689
- </div>
8690
- <div class="selected-area {{isCollapseSelected ? 'hiddenTree' : ''}}"
8691
- *ngIf="!isDisplayChooseTreeOnly"
8692
- fxLayout="column" fxFlex="1 1 {{checkIsView(isView) ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
8693
- <div class="header-area" *ngIf="!isView">
8694
- <label>{{ selectedLabelTitle | translate }}{{ '(' + (value ? value.length : 0) + ')' }}</label>
8695
- <div class="collapse-expand-all" (click)="toggleSelectedTree()">
8696
- {{ (isCollapseSelected ? 'common.selected.tree.expandAll' : 'common.selected.tree.collapse') | translate }}
8697
- <i class="fa {{isCollapseSelected ? 'fa-chevron-down' : 'fa-chevron-up'}}"></i>
8698
- </div>
8643
+ <div fxLayout="row wrap">
8644
+ <div class="choose-area"
8645
+ *ngIf="!checkIsView(isView) && !isCollapseSelected"
8646
+ fxLayout="column" fxFlex="1 1 {{isDisplayChooseTreeOnly ? '100%' : '50%'}}"
8647
+ fxFlex.lt-sm="100%">
8648
+ <div class="header-choose-area">
8649
+ <div class="title-choose-tree" fxLayout="row" fxLayout.lt-sm="row wrap">
8650
+ <mat-label fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%" class="label_width"
8651
+ *ngIf="label && isSearchOutSide">
8652
+ <div class="label">{{ (label ? label : '') | translate }}<span
8653
+ class="required-label-outside">{{ required ? '*' : '' }}</span></div>
8654
+ </mat-label>
8655
+ <mat-divider *ngIf="label && isSearchOutSide"></mat-divider>
8656
+ </div>
8657
+ <mat-form-field appearance="outline"
8658
+ *ngIf="!isSearchOutSide"
8659
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8660
+ <input matInput
8661
+ placeholder="{{'common.searchText'|translate}}"
8662
+ [(ngModel)]="searchText"
8663
+ (ngModelChange)="onChangeSearchText()"
8664
+ autocomplete="off">
8665
+ </mat-form-field>
8666
+ </div>
8667
+ <cdk-virtual-scroll-viewport #chooseAreaScrollViewport itemSize="{{itemSize}}"
8668
+ [ngStyle]="{height: viewHeight + 'px'}">
8669
+ <ng-container *cdkVirtualFor="let node of dataSource">
8670
+ <cva-flat-tree-node-left
8671
+ [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8672
+ [attr.aria-level]="node.level"
8673
+ [treeControl]="treeControl"
8674
+ [isHideCheckbox]="isHideCheckbox"
8675
+ [nodeClicked]="nodeClicked"
8676
+ [node]="node"
8677
+ (toggle)="toggleTreeControl(treeControl, node)"
8678
+ (onParentNodeClick)="onParentNodeClick(node)"
8679
+ (onLeafNodeClick)="onLeafNodeClick(node)"
8680
+ (ngModelParentChange)="toggleNodeCheck(node, $event)"
8681
+ (ngModelLeafChange)="toggleNodeCheck(node, $event)">
8682
+ </cva-flat-tree-node-left>
8683
+ </ng-container>
8684
+ </cdk-virtual-scroll-viewport>
8685
+ </div>
8686
+ <div class="selected-area {{isCollapseSelected ? 'hiddenTree' : ''}}"
8687
+ *ngIf="!isDisplayChooseTreeOnly"
8688
+ fxLayout="column" fxFlex="1 1 {{checkIsView(isView) ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
8689
+ <div class="header-area" *ngIf="!isView">
8690
+ <label>{{ selectedLabelTitle | translate }}{{ '(' + (value ? value.length : 0) + ')' }}</label>
8691
+ <div class="collapse-expand-all" (click)="toggleSelectedTree()">
8692
+ {{ (isCollapseSelected ? 'common.selected.tree.expandAll' : 'common.selected.tree.collapse') | translate }}
8693
+ <i class="fa {{isCollapseSelected ? 'fa-chevron-down' : 'fa-chevron-up'}}"></i>
8694
+ </div>
8695
+ </div>
8696
+ <cdk-virtual-scroll-viewport #selectedScrollViewport
8697
+ *ngIf="!isCollapseSelected"
8698
+ itemSize="{{itemSize}}" [ngStyle]="{height: viewHeight + 'px'}">
8699
+ <ng-container *cdkVirtualFor="let node of selectedDataSource">
8700
+ <cva-flat-tree-node-right
8701
+ [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8702
+ [attr.aria-level]="node.level"
8703
+ [treeControl]="selectedTreeControl"
8704
+ [node]="node"
8705
+ [isView]="isView"
8706
+ (toggle)="toggleSelectedTree(node)"
8707
+ (deSelectLeafNode)="deSelect(node)"
8708
+ (deSelectParentNode)="deSelectParent(node)">
8709
+ </cva-flat-tree-node-right>
8710
+ </ng-container>
8711
+ </cdk-virtual-scroll-viewport>
8712
+ </div>
8713
+ </div>
8714
+ <mat-hint *ngIf="NsValiator.invalid(formControl)">
8715
+ {{ NsValiator.getErrorMessage(formControl, errorMessages) | translate }}
8716
+ </mat-hint>
8699
8717
  </div>
8700
- <cdk-virtual-scroll-viewport #selectedScrollViewport
8701
- *ngIf="!isCollapseSelected"
8702
- itemSize="{{itemSize}}" [ngStyle]="{height: viewHeight + 'px'}">
8703
- <ng-container *cdkVirtualFor="let node of selectedDataSource">
8704
- <cva-flat-tree-node-right
8705
- [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8706
- [attr.aria-level]="node.level"
8707
- [treeControl]="selectedTreeControl"
8708
- [node]="node"
8709
- [isView]="isView"
8710
- (toggle)="toggleSelectedTree(node)"
8711
- (deSelectLeafNode)="deSelect(node)"
8712
- (deSelectParentNode)="deSelectParent(node)">
8713
- </cva-flat-tree-node-right>
8714
- </ng-container>
8715
- </cdk-virtual-scroll-viewport>
8716
- </div>
8717
8718
  </div>
8718
- <mat-hint *ngIf="NsValiator.invalid(formControl)">
8719
- {{ NsValiator.getErrorMessage(formControl, errorMessages) | translate }}
8720
- </mat-hint>
8721
- </div>
8722
- </div>
8723
- `, 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
+ `, 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" }] });
8724
8720
  }
8725
8721
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaFlatTreeComponent, decorators: [{
8726
8722
  type: Component,
@@ -8728,94 +8724,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
8728
8724
  selector: 'cva-flat-tree',
8729
8725
  standalone: false,
8730
8726
  template: `
8731
- <div class="cva-flat-tree labelOutside"
8732
- fxLayout="row" fxLayout.lt-sm="row wrap">
8733
- <mat-label *ngIf="label && !isSearchOutSide" class="label_width"
8727
+ <div class="cva-flat-tree labelOutside"
8728
+ fxLayout="row" fxLayout.lt-sm="row wrap">
8729
+ <mat-label *ngIf="label && !isSearchOutSide" class="label_width"
8730
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8731
+ <div class="label">
8732
+ <div>
8733
+ {{ (label ? label : '') | translate }}<span
8734
+ class="required-label-outside">{{ required ? '*' : '' }}</span>
8735
+ </div>
8736
+ </div>
8737
+ </mat-label>
8738
+ <div class="tree-area"
8734
8739
  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8735
- <div class="label">
8736
- <div>
8737
- {{ (label ? label : '') | translate }}<span class="required-label-outside">{{ required ? '*' : '' }}</span>
8738
- </div>
8739
- </div>
8740
- </mat-label>
8741
- <div class="tree-area"
8742
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8743
- <div fxLayout="row wrap">
8744
- <div class="choose-area"
8745
- *ngIf="!checkIsView(isView) && !isCollapseSelected"
8746
- fxLayout="column" fxFlex="1 1 {{isDisplayChooseTreeOnly ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
8747
- <div class="header-choose-area">
8748
- <div class="title-choose-tree" fxLayout="row" fxLayout.lt-sm="row wrap">
8749
- <mat-label fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%" class="label_width"
8750
- *ngIf="label && isSearchOutSide">
8751
- <div class="label">{{ (label ? label : '') | translate }}<span
8752
- class="required-label-outside">{{ required ? '*' : '' }}</span></div>
8753
- </mat-label>
8754
- <mat-divider *ngIf="label && isSearchOutSide"></mat-divider>
8755
- </div>
8756
- <mat-form-field appearance="outline"
8757
- *ngIf="!isSearchOutSide"
8758
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8759
- <input matInput
8760
- placeholder="{{'common.searchText'|translate}}"
8761
- [(ngModel)]="searchText"
8762
- (ngModelChange)="onChangeSearchText()"
8763
- autocomplete="off">
8764
- </mat-form-field>
8765
- </div>
8766
- <cdk-virtual-scroll-viewport #chooseAreaScrollViewport itemSize="{{itemSize}}"
8767
- [ngStyle]="{height: viewHeight + 'px'}">
8768
- <ng-container *cdkVirtualFor="let node of dataSource">
8769
- <cva-flat-tree-node-left
8770
- [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8771
- [attr.aria-level]="node.level"
8772
- [treeControl]="treeControl"
8773
- [isHideCheckbox]="isHideCheckbox"
8774
- [nodeClicked]="nodeClicked"
8775
- [node]="node"
8776
- (toggle)="toggleTreeControl(treeControl, node)"
8777
- (onParentNodeClick)="onParentNodeClick(node)"
8778
- (onLeafNodeClick)="onLeafNodeClick(node)"
8779
- (ngModelParentChange)="toggleNodeCheck(node, $event)"
8780
- (ngModelLeafChange)="toggleNodeCheck(node, $event)">
8781
- </cva-flat-tree-node-left>
8782
- </ng-container>
8783
- </cdk-virtual-scroll-viewport>
8784
- </div>
8785
- <div class="selected-area {{isCollapseSelected ? 'hiddenTree' : ''}}"
8786
- *ngIf="!isDisplayChooseTreeOnly"
8787
- fxLayout="column" fxFlex="1 1 {{checkIsView(isView) ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
8788
- <div class="header-area" *ngIf="!isView">
8789
- <label>{{ selectedLabelTitle | translate }}{{ '(' + (value ? value.length : 0) + ')' }}</label>
8790
- <div class="collapse-expand-all" (click)="toggleSelectedTree()">
8791
- {{ (isCollapseSelected ? 'common.selected.tree.expandAll' : 'common.selected.tree.collapse') | translate }}
8792
- <i class="fa {{isCollapseSelected ? 'fa-chevron-down' : 'fa-chevron-up'}}"></i>
8793
- </div>
8740
+ <div fxLayout="row wrap">
8741
+ <div class="choose-area"
8742
+ *ngIf="!checkIsView(isView) && !isCollapseSelected"
8743
+ fxLayout="column" fxFlex="1 1 {{isDisplayChooseTreeOnly ? '100%' : '50%'}}"
8744
+ fxFlex.lt-sm="100%">
8745
+ <div class="header-choose-area">
8746
+ <div class="title-choose-tree" fxLayout="row" fxLayout.lt-sm="row wrap">
8747
+ <mat-label fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%" class="label_width"
8748
+ *ngIf="label && isSearchOutSide">
8749
+ <div class="label">{{ (label ? label : '') | translate }}<span
8750
+ class="required-label-outside">{{ required ? '*' : '' }}</span></div>
8751
+ </mat-label>
8752
+ <mat-divider *ngIf="label && isSearchOutSide"></mat-divider>
8753
+ </div>
8754
+ <mat-form-field appearance="outline"
8755
+ *ngIf="!isSearchOutSide"
8756
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
8757
+ <input matInput
8758
+ placeholder="{{'common.searchText'|translate}}"
8759
+ [(ngModel)]="searchText"
8760
+ (ngModelChange)="onChangeSearchText()"
8761
+ autocomplete="off">
8762
+ </mat-form-field>
8763
+ </div>
8764
+ <cdk-virtual-scroll-viewport #chooseAreaScrollViewport itemSize="{{itemSize}}"
8765
+ [ngStyle]="{height: viewHeight + 'px'}">
8766
+ <ng-container *cdkVirtualFor="let node of dataSource">
8767
+ <cva-flat-tree-node-left
8768
+ [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8769
+ [attr.aria-level]="node.level"
8770
+ [treeControl]="treeControl"
8771
+ [isHideCheckbox]="isHideCheckbox"
8772
+ [nodeClicked]="nodeClicked"
8773
+ [node]="node"
8774
+ (toggle)="toggleTreeControl(treeControl, node)"
8775
+ (onParentNodeClick)="onParentNodeClick(node)"
8776
+ (onLeafNodeClick)="onLeafNodeClick(node)"
8777
+ (ngModelParentChange)="toggleNodeCheck(node, $event)"
8778
+ (ngModelLeafChange)="toggleNodeCheck(node, $event)">
8779
+ </cva-flat-tree-node-left>
8780
+ </ng-container>
8781
+ </cdk-virtual-scroll-viewport>
8782
+ </div>
8783
+ <div class="selected-area {{isCollapseSelected ? 'hiddenTree' : ''}}"
8784
+ *ngIf="!isDisplayChooseTreeOnly"
8785
+ fxLayout="column" fxFlex="1 1 {{checkIsView(isView) ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
8786
+ <div class="header-area" *ngIf="!isView">
8787
+ <label>{{ selectedLabelTitle | translate }}{{ '(' + (value ? value.length : 0) + ')' }}</label>
8788
+ <div class="collapse-expand-all" (click)="toggleSelectedTree()">
8789
+ {{ (isCollapseSelected ? 'common.selected.tree.expandAll' : 'common.selected.tree.collapse') | translate }}
8790
+ <i class="fa {{isCollapseSelected ? 'fa-chevron-down' : 'fa-chevron-up'}}"></i>
8791
+ </div>
8792
+ </div>
8793
+ <cdk-virtual-scroll-viewport #selectedScrollViewport
8794
+ *ngIf="!isCollapseSelected"
8795
+ itemSize="{{itemSize}}" [ngStyle]="{height: viewHeight + 'px'}">
8796
+ <ng-container *cdkVirtualFor="let node of selectedDataSource">
8797
+ <cva-flat-tree-node-right
8798
+ [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8799
+ [attr.aria-level]="node.level"
8800
+ [treeControl]="selectedTreeControl"
8801
+ [node]="node"
8802
+ [isView]="isView"
8803
+ (toggle)="toggleSelectedTree(node)"
8804
+ (deSelectLeafNode)="deSelect(node)"
8805
+ (deSelectParentNode)="deSelectParent(node)">
8806
+ </cva-flat-tree-node-right>
8807
+ </ng-container>
8808
+ </cdk-virtual-scroll-viewport>
8809
+ </div>
8810
+ </div>
8811
+ <mat-hint *ngIf="NsValiator.invalid(formControl)">
8812
+ {{ NsValiator.getErrorMessage(formControl, errorMessages) | translate }}
8813
+ </mat-hint>
8794
8814
  </div>
8795
- <cdk-virtual-scroll-viewport #selectedScrollViewport
8796
- *ngIf="!isCollapseSelected"
8797
- itemSize="{{itemSize}}" [ngStyle]="{height: viewHeight + 'px'}">
8798
- <ng-container *cdkVirtualFor="let node of selectedDataSource">
8799
- <cva-flat-tree-node-right
8800
- [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
8801
- [attr.aria-level]="node.level"
8802
- [treeControl]="selectedTreeControl"
8803
- [node]="node"
8804
- [isView]="isView"
8805
- (toggle)="toggleSelectedTree(node)"
8806
- (deSelectLeafNode)="deSelect(node)"
8807
- (deSelectParentNode)="deSelectParent(node)">
8808
- </cva-flat-tree-node-right>
8809
- </ng-container>
8810
- </cdk-virtual-scroll-viewport>
8811
- </div>
8812
8815
  </div>
8813
- <mat-hint *ngIf="NsValiator.invalid(formControl)">
8814
- {{ NsValiator.getErrorMessage(formControl, errorMessages) | translate }}
8815
- </mat-hint>
8816
- </div>
8817
- </div>
8818
- `,
8816
+ `,
8819
8817
  }]
8820
8818
  }], ctorParameters: () => [{ type: i1.TranslateService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$2.NgControl, decorators: [{
8821
8819
  type: Self
@@ -8861,6 +8859,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
8861
8859
  type: Output
8862
8860
  }], onNodeClick: [{
8863
8861
  type: Output
8862
+ }], nodeClicked: [{
8863
+ type: Input
8864
8864
  }], isFormControl: [{
8865
8865
  type: Input
8866
8866
  }], chooseVirtualScroll: [{