@c10t/nice-component-library 0.0.26 → 0.0.27-b

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

@@ -436,6 +436,7 @@ class FlatTreeNodeModel {
     children = [];
     value;
     displayValue = '';
+    iconClass = '';
     checked;
     checkedDisplay;
     filterChecked;
@@ -5391,7 +5392,7 @@ class CvaSmartTableComponent {
                                        [patternFilter]="column.patternFilter ? column.patternFilter : ''">
                             </cva-input>
                             <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT_CURRENCY"
-                                       type="number" #cellComponentRef
+                                       #cellComponentRef
                                        [placeholder]="moduleName + '.table.placeholder.input.currency'"
                                        [isFormControl]="false"
                                        [alignText]="getAlign(column)"
@@ -5668,7 +5669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                                        [patternFilter]="column.patternFilter ? column.patternFilter : ''">
                             </cva-input>
                             <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT_CURRENCY"
-                                       type="number" #cellComponentRef
+                                       #cellComponentRef
                                        [placeholder]="moduleName + '.table.placeholder.input.currency'"
                                        [isFormControl]="false"
                                        [alignText]="getAlign(column)"
@@ -6375,6 +6376,7 @@ class CvaMultiUploadComponent {
     maxSize = null;
     accept = null;
     label = '';
+    placeholder = '';
     required = '';
     disabled = false;
     /* percent label outside css */
@@ -6389,12 +6391,10 @@ class CvaMultiUploadComponent {
         if (!obj) {
             return;
         }
-        if (this.multiple) {
-            this.files.push(obj);
-        }
-        else {
-            this.files = [obj];
+        if (!this.multiple && this.files.length === 1) {
+            this.files.length = 0;
         }
+        this.files.push(obj);
         this.propagateChange(this.files);
     }
     registerOnChange(fn) {
@@ -6445,6 +6445,7 @@ class CvaMultiUploadComponent {
         const target = event.target;
         if (target && target.files) {
             this.convertToUploadModel(target.files);
+            target.value = '';
         }
     }
     onFileDroppedAction(fileList) {
@@ -6466,41 +6467,43 @@ class CvaMultiUploadComponent {
         return true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CvaMultiUploadComponent),
                 multi: true,
             },
         ], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true }], ngImport: i0, template: `
-    <div class="cva-multi-upload"
-         fxLayout="row" fxLayout.lt-sm="row wrap">
-      <mat-label *ngIf="label" class="label_width"
-                 fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
-        <div class="label">{{ (label ? label : '') | translate }}<span
-          class="required-label-outside">{{ !!required ? '*' : '' }}</span></div>
-      </mat-label>
-      <div class="uploadArea"
-           fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%"
-           appDragDrop (onFileDropped)="onFileDroppedAction($event)">
-        <input type="file" [multiple]="multiple" #fileUpload (change)="onFileChangeAction($event)"
-               [disabled]="disabled"
-               accept="{{accept ? accept.join() : '*/*'}}">
-        <mat-card>
-          <mat-card-actions>
-            <button mat-button class="upload-button" color="warn" (click)="onClick()">
-              <mat-icon>add</mat-icon>
-              <span>{{ 'common.upload.file' | translate }}</span>
-            </button>
-          </mat-card-actions>
-          <mat-card-content>
-          </mat-card-content>
-        </mat-card>
-        <mat-error *ngIf="sizeError!==null">{{ sizeError + ' ' + ('common.is.over-size' | translate) }}</mat-error>
-        <mat-error *ngIf="typeError!==null">{{ typeError + ' ' + ('common.is.not-accept' | translate) }}</mat-error>
-      </div>
-    </div>
-  `, 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" }] });
+        <div class="cva-multi-upload"
+             fxLayout="row" fxLayout.lt-sm="row wrap">
+            <mat-label *ngIf="label" class="label_width"
+                       fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
+                <div class="label">{{ (label ? label : '') | translate }}<span
+                        class="required-label-outside">{{ !!required ? '*' : '' }}</span></div>
+            </mat-label>
+            <div class="uploadArea"
+                 fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%"
+                 appDragDrop (onFileDropped)="onFileDroppedAction($event)">
+                <input type="file" [multiple]="multiple" #fileUpload (change)="onFileChangeAction($event)"
+                       [disabled]="disabled"
+                       accept="{{accept ? accept.join() : '*/*'}}">
+                <mat-card>
+                    <mat-card-actions>
+                        <button mat-button class="upload-button" color="warn" (click)="onClick()">
+                            <mat-icon>add</mat-icon>
+                            <span>{{ !!placeholder ? placeholder : 'common.upload.file' | translate }}</span>
+                        </button>
+                    </mat-card-actions>
+                    <mat-card-content>
+                    </mat-card-content>
+                </mat-card>
+                <mat-error *ngIf="sizeError!==null">{{ sizeError + ' ' + ('common.is.over-size' | translate) }}
+                </mat-error>
+                <mat-error *ngIf="typeError!==null">{{ typeError + ' ' + ('common.is.not-accept' | translate) }}
+                </mat-error>
+            </div>
+        </div>
+    `, 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiUploadComponent, decorators: [{
             type: Component,
@@ -6508,34 +6511,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     selector: 'cva-multi-upload',
                     standalone: false,
                     template: `
-    <div class="cva-multi-upload"
-         fxLayout="row" fxLayout.lt-sm="row wrap">
-      <mat-label *ngIf="label" class="label_width"
-                 fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
-        <div class="label">{{ (label ? label : '') | translate }}<span
-          class="required-label-outside">{{ !!required ? '*' : '' }}</span></div>
-      </mat-label>
-      <div class="uploadArea"
-           fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%"
-           appDragDrop (onFileDropped)="onFileDroppedAction($event)">
-        <input type="file" [multiple]="multiple" #fileUpload (change)="onFileChangeAction($event)"
-               [disabled]="disabled"
-               accept="{{accept ? accept.join() : '*/*'}}">
-        <mat-card>
-          <mat-card-actions>
-            <button mat-button class="upload-button" color="warn" (click)="onClick()">
-              <mat-icon>add</mat-icon>
-              <span>{{ 'common.upload.file' | translate }}</span>
-            </button>
-          </mat-card-actions>
-          <mat-card-content>
-          </mat-card-content>
-        </mat-card>
-        <mat-error *ngIf="sizeError!==null">{{ sizeError + ' ' + ('common.is.over-size' | translate) }}</mat-error>
-        <mat-error *ngIf="typeError!==null">{{ typeError + ' ' + ('common.is.not-accept' | translate) }}</mat-error>
-      </div>
-    </div>
-  `,
+        <div class="cva-multi-upload"
+             fxLayout="row" fxLayout.lt-sm="row wrap">
+            <mat-label *ngIf="label" class="label_width"
+                       fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
+                <div class="label">{{ (label ? label : '') | translate }}<span
+                        class="required-label-outside">{{ !!required ? '*' : '' }}</span></div>
+            </mat-label>
+            <div class="uploadArea"
+                 fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%"
+                 appDragDrop (onFileDropped)="onFileDroppedAction($event)">
+                <input type="file" [multiple]="multiple" #fileUpload (change)="onFileChangeAction($event)"
+                       [disabled]="disabled"
+                       accept="{{accept ? accept.join() : '*/*'}}">
+                <mat-card>
+                    <mat-card-actions>
+                        <button mat-button class="upload-button" color="warn" (click)="onClick()">
+                            <mat-icon>add</mat-icon>
+                            <span>{{ !!placeholder ? placeholder : 'common.upload.file' | translate }}</span>
+                        </button>
+                    </mat-card-actions>
+                    <mat-card-content>
+                    </mat-card-content>
+                </mat-card>
+                <mat-error *ngIf="sizeError!==null">{{ sizeError + ' ' + ('common.is.over-size' | translate) }}
+                </mat-error>
+                <mat-error *ngIf="typeError!==null">{{ typeError + ' ' + ('common.is.not-accept' | translate) }}
+                </mat-error>
+            </div>
+        </div>
+    `,
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -6557,6 +6562,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], label: [{
                 type: Input
+            }], placeholder: [{
+                type: Input
             }], required: [{
                 type: Input
             }], disabled: [{
@@ -7831,41 +7838,45 @@ class CvaFlatTreeNodeLeftComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaFlatTreeNodeLeftComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     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: `
-    <ng-container [ngSwitch]="hasChild(node)">
-      <ng-container *ngSwitchCase="false">
-        <div
-          class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
-          (click)="onLeafNodeClick.emit()"
-          fxLayoutAlign="space-between center">
-          <button *ngIf="node.level > 0" type="button" mat-icon-button disabled></button>
-          {{ node.displayValue }}
-        </div>
-        <mat-checkbox [(ngModel)]="node.checked"
-                      [checked]="node.checked"
-                      (ngModelChange)="ngModelLeafChange.emit($event)"
-                      [disabled]="checkDisabledNode(node)"
-                      *ngIf="!isHideCheckbox">
-        </mat-checkbox>
-      </ng-container>
-      <ng-container *ngSwitchCase="true">
-        <div
-          class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
-          fxLayoutAlign="space-between center">
-          <button type="button" mat-icon-button (click)="toggle.emit()"
-                  [attr.aria-label]="'toggle ' + node.displayValue">
-            <i class="fas {{(treeControl && treeControl.isExpanded(node)) ? 'fa-chevron-up' : 'fa-chevron-down'}}"></i>
-          </button>
-          <span (click)="onParentNodeClick.emit()">{{ node.displayValue }}</span>
-        </div>
-        <mat-checkbox [(ngModel)]="node.checked"
-                      *ngIf="!isHideCheckbox"
-                      [checked]="descendantsAllSelected(node)"
-                      [disabled]="onDisabledParent(node) || getDisabledInputFunc(node)"
-                      [indeterminate]="descendantsPartiallySelected(node)"
-                      (ngModelChange)="ngModelParentChange.emit($event)">
-        </mat-checkbox>
+      <ng-container [ngSwitch]="hasChild(node)">
+          <ng-container *ngSwitchCase="false">
+              <div
+                      class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
+                      (click)="onLeafNodeClick.emit()"
+                      fxLayoutAlign="space-between center">
+                  <button *ngIf="node.level > 0" type="button" mat-icon-button disabled></button>
+                  <i *ngIf="node.iconClass" class="{{ node.iconClass }} icon-left"></i>
+                  {{ node.displayValue }}
+              </div>
+              <mat-checkbox [(ngModel)]="node.checked"
+                            [checked]="node.checked"
+                            (ngModelChange)="ngModelLeafChange.emit($event)"
+                            [disabled]="checkDisabledNode(node)"
+                            *ngIf="!isHideCheckbox">
+              </mat-checkbox>
+          </ng-container>
+          <ng-container *ngSwitchCase="true">
+              <div
+                      class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
+                      fxLayoutAlign="space-between center">
+                  <button type="button" mat-icon-button (click)="toggle.emit()"
+                          [attr.aria-label]="'toggle ' + node.displayValue">
+                      <i class="fas {{(treeControl && treeControl.isExpanded(node)) ? 'fa-chevron-up' : 'fa-chevron-down'}}"></i>
+                  </button>
+                  <span (click)="onParentNodeClick.emit()">
+              <i *ngIf="node.iconClass" class="{{ node.iconClass }} icon-left"></i>
+                      {{ node.displayValue }}
+          </span>
+              </div>
+              <mat-checkbox [(ngModel)]="node.checked"
+                            *ngIf="!isHideCheckbox"
+                            [checked]="descendantsAllSelected(node)"
+                            [disabled]="onDisabledParent(node) || getDisabledInputFunc(node)"
+                            [indeterminate]="descendantsPartiallySelected(node)"
+                            (ngModelChange)="ngModelParentChange.emit($event)">
+              </mat-checkbox>
+          </ng-container>
       </ng-container>
-    </ng-container>
   `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaFlatTreeNodeLeftComponent, decorators: [{
@@ -7874,41 +7885,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     selector: 'cva-flat-tree-node-left',
                     standalone: false,
                     template: `
-    <ng-container [ngSwitch]="hasChild(node)">
-      <ng-container *ngSwitchCase="false">
-        <div
-          class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
-          (click)="onLeafNodeClick.emit()"
-          fxLayoutAlign="space-between center">
-          <button *ngIf="node.level > 0" type="button" mat-icon-button disabled></button>
-          {{ node.displayValue }}
-        </div>
-        <mat-checkbox [(ngModel)]="node.checked"
-                      [checked]="node.checked"
-                      (ngModelChange)="ngModelLeafChange.emit($event)"
-                      [disabled]="checkDisabledNode(node)"
-                      *ngIf="!isHideCheckbox">
-        </mat-checkbox>
-      </ng-container>
-      <ng-container *ngSwitchCase="true">
-        <div
-          class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
-          fxLayoutAlign="space-between center">
-          <button type="button" mat-icon-button (click)="toggle.emit()"
-                  [attr.aria-label]="'toggle ' + node.displayValue">
-            <i class="fas {{(treeControl && treeControl.isExpanded(node)) ? 'fa-chevron-up' : 'fa-chevron-down'}}"></i>
-          </button>
-          <span (click)="onParentNodeClick.emit()">{{ node.displayValue }}</span>
-        </div>
-        <mat-checkbox [(ngModel)]="node.checked"
-                      *ngIf="!isHideCheckbox"
-                      [checked]="descendantsAllSelected(node)"
-                      [disabled]="onDisabledParent(node) || getDisabledInputFunc(node)"
-                      [indeterminate]="descendantsPartiallySelected(node)"
-                      (ngModelChange)="ngModelParentChange.emit($event)">
-        </mat-checkbox>
+      <ng-container [ngSwitch]="hasChild(node)">
+          <ng-container *ngSwitchCase="false">
+              <div
+                      class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
+                      (click)="onLeafNodeClick.emit()"
+                      fxLayoutAlign="space-between center">
+                  <button *ngIf="node.level > 0" type="button" mat-icon-button disabled></button>
+                  <i *ngIf="node.iconClass" class="{{ node.iconClass }} icon-left"></i>
+                  {{ node.displayValue }}
+              </div>
+              <mat-checkbox [(ngModel)]="node.checked"
+                            [checked]="node.checked"
+                            (ngModelChange)="ngModelLeafChange.emit($event)"
+                            [disabled]="checkDisabledNode(node)"
+                            *ngIf="!isHideCheckbox">
+              </mat-checkbox>
+          </ng-container>
+          <ng-container *ngSwitchCase="true">
+              <div
+                      class="label-area {{isHideCheckbox ? 'isClickDiv' : ''}} {{isHideCheckbox && nodeClicked?.value === node.value ? 'nodeSelected': ''}}"
+                      fxLayoutAlign="space-between center">
+                  <button type="button" mat-icon-button (click)="toggle.emit()"
+                          [attr.aria-label]="'toggle ' + node.displayValue">
+                      <i class="fas {{(treeControl && treeControl.isExpanded(node)) ? 'fa-chevron-up' : 'fa-chevron-down'}}"></i>
+                  </button>
+                  <span (click)="onParentNodeClick.emit()">
+              <i *ngIf="node.iconClass" class="{{ node.iconClass }} icon-left"></i>
+                      {{ node.displayValue }}
+          </span>
+              </div>
+              <mat-checkbox [(ngModel)]="node.checked"
+                            *ngIf="!isHideCheckbox"
+                            [checked]="descendantsAllSelected(node)"
+                            [disabled]="onDisabledParent(node) || getDisabledInputFunc(node)"
+                            [indeterminate]="descendantsPartiallySelected(node)"
+                            (ngModelChange)="ngModelParentChange.emit($event)">
+              </mat-checkbox>
+          </ng-container>
       </ng-container>
-    </ng-container>
   `,
                 }]
         }], propDecorators: { treeControl: [{
@@ -8077,9 +8092,9 @@ class CvaFlatTreeComponent {
     treeConfig;
     isSearchOutSide = false;
     searchTextOutSide = '';
-    searchText = '';
     errorMessages = new Map();
     fullDatasource = [];
+    searchText = '';
     filterDatasource = [];
     treeControl;
     treeFlattener;
@@ -8141,9 +8156,6 @@ class CvaFlatTreeComponent {
     ngOnInit() {
         this.callValidator();
     }
-    ngAfterViewInit() {
-        // this.onChangeSearchText();
-    }
     getDisplayInputFunc(node) {
         return typeof (node._displayFuncInput) === 'function' ? node._displayFuncInput(node) : !!node._displayFuncInput;
     }
@@ -8266,13 +8278,8 @@ class CvaFlatTreeComponent {
         this.propagateChange(fn);
     }
     writeValue(obj) {
-        // if (this.multiple && !obj) {
-        //   obj = [];
-        // }
         if (obj) {
-            // if (this.multiple) {
             this.value = obj;
-            // }
             this.mapIndexes = new Map();
             for (let i = 0; i < this.fullDataTreeControl.dataNodes.length; i++) {
                 this.mapIndexes.set(this.fullDataTreeControl.dataNodes[i].value, i);
@@ -8451,12 +8458,6 @@ class CvaFlatTreeComponent {
         }
         return node;
     }
-    deSelect(node) {
-        this.checkLeafNode(false, node, true);
-    }
-    deSelectParent(node) {
-        this.checkParentNode(false, node, true);
-    }
     toggleTreeControl(treeControl, node) {
         treeControl.toggle(node);
         const orgNode = this.fullDataTreeControl.dataNodes.find(n => n.value === node.value);
@@ -8591,136 +8592,154 @@ class CvaFlatTreeComponent {
     }
     toggleNodeCheck(node, checked) {
         const isLeaf = !FlatTreeService.hasChild(node);
-        // Gọi 1 lần duy nhất nếu là parent
-        const descendants = isLeaf ? [] : this.fullDataTreeControl.getDescendants(node);
-        const affectedNodes = isLeaf ? [node] : descendants.filter(n => !FlatTreeService.hasChild(n));
-        for (const leaf of affectedNodes) {
+        // Lấy danh sách node đang hiển thị (filtered)
+        const visibleNodes = isLeaf
+            ? [node]
+            : [...this.getAllChildNode(this.treeControl, node).filter(n => n.display), node];
+        for (const leaf of visibleNodes) {
             if (!leaf.display || this.checkDisabledNode(leaf))
                 continue;
             const index = this.value.indexOf(leaf.value);
             if (checked && index < 0) {
                 this.value.push(leaf.value);
-                this.valueObjRef.set(leaf.value, leaf);
-                leaf.checked = true;
             }
             if (!checked && index >= 0) {
                 this.value.splice(index, 1);
-                this.valueObjRef.delete(leaf.value);
-                leaf.checked = false;
-            }
-            const orgNodeIndex = this.mapIndexes.get(leaf.value);
-            if (orgNodeIndex !== undefined) {
-                this.fullDataTreeControl.dataNodes[orgNodeIndex].checked = leaf.checked;
             }
         }
-        // Nếu node là cha → cập nhật isExpanded
-        if (!isLeaf) {
-            node.checked = checked;
-            const orgNodeIndex = this.mapIndexes.get(node.value);
-            if (orgNodeIndex !== undefined) {
-                this.fullDataTreeControl.dataNodes[orgNodeIndex].checked = checked;
-                this.fullDataTreeControl.dataNodes[orgNodeIndex].isExpanded = false;
+        if (isLeaf) {
+            const parentNode = this.getRootNode(node);
+            if (parentNode && FlatTreeService.hasChild(parentNode)) {
+                const allChild = this.getAllChildNode(this.fullDataTreeControl, parentNode);
+                // Kiểm tra còn node con nào trong value không
+                const hasChildInValue = allChild.some(child => this.value.includes(child.value));
+                if (!hasChildInValue) {
+                    const parentIndex = this.value.indexOf(parentNode.value);
+                    if (parentIndex >= 0) {
+                        this.value.splice(parentIndex, 1);
+                    }
+                }
             }
         }
-        else {
-            node.checked = checked;
-        }
+        // Gọi writeValue để cập nhật cho FormControl
         this.writeValue(this.value);
         this.cdr.detectChanges();
     }
+    getTotalSelected(nodes) {
+        let count = 0;
+        for (const node of nodes) {
+            const isLeaf = !FlatTreeService.hasChild(node);
+            if (isLeaf) {
+                if (this.value.includes(node.value)) {
+                    count += 1;
+                }
+            }
+            else if (node.children && node.children.length > 0) {
+                const childChecked = this.getTotalSelected(node.children);
+                // Nếu tất cả các con được checked đồng nghĩa cha được checked thì mới cộng
+                if (childChecked === node.children.length) {
+                    count += 1;
+                }
+                count += childChecked;
+            }
+        }
+        return count;
+    }
     _getLevel = (node) => node.level;
     _isExpandable = (node) => FlatTreeService.hasChild(node);
     _getChildren = (node) => of(node.children ? node.children : []);
     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 });
-    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: `
-    <div class="cva-flat-tree labelOutside"
-         fxLayout="row" fxLayout.lt-sm="row wrap">
-      <mat-label *ngIf="label && !isSearchOutSide" class="label_width"
+    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: `
+        <div class="cva-flat-tree labelOutside"
+             fxLayout="row" fxLayout.lt-sm="row wrap">
+            <mat-label *ngIf="label && !isSearchOutSide" class="label_width"
+                       fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
+                <div class="label">
+                    <div>
+                        {{ (label ? label : '') | translate }}<span
+                            class="required-label-outside">{{ required ? '*' : '' }}</span>
+                    </div>
+                </div>
+            </mat-label>
+            <div class="tree-area"
                  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
-        <div class="label">
-          <div>
-            {{ (label ? label : '') | translate }}<span class="required-label-outside">{{ required ? '*' : '' }}</span>
-          </div>
-        </div>
-      </mat-label>
-      <div class="tree-area"
-           fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
-        <div fxLayout="row wrap">
-          <div class="choose-area"
-               *ngIf="!checkIsView(isView) && !isCollapseSelected"
-               fxLayout="column" fxFlex="1 1 {{isDisplayChooseTreeOnly ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
-            <div class="header-choose-area">
-              <div class="title-choose-tree" fxLayout="row" fxLayout.lt-sm="row wrap">
-                <mat-label fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%" class="label_width"
-                           *ngIf="label && isSearchOutSide">
-                  <div class="label">{{ (label ? label : '') | translate }}<span
-                    class="required-label-outside">{{ required ? '*' : '' }}</span></div>
-                </mat-label>
-                <mat-divider *ngIf="label && isSearchOutSide"></mat-divider>
-              </div>
-              <mat-form-field appearance="outline"
-                              *ngIf="!isSearchOutSide"
-                              fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
-                <input matInput
-                       placeholder="{{'common.searchText'|translate}}"
-                       [(ngModel)]="searchText"
-                       (ngModelChange)="onChangeSearchText()"
-                       autocomplete="off">
-              </mat-form-field>
-            </div>
-            <cdk-virtual-scroll-viewport #chooseAreaScrollViewport itemSize="{{itemSize}}"
-                                         [ngStyle]="{height: viewHeight + 'px'}">
-              <ng-container *cdkVirtualFor="let node of dataSource">
-                <cva-flat-tree-node-left
-                  [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
-                  [attr.aria-level]="node.level"
-                  [treeControl]="treeControl"
-                  [isHideCheckbox]="isHideCheckbox"
-                  [nodeClicked]="nodeClicked"
-                  [node]="node"
-                  (toggle)="toggleTreeControl(treeControl, node)"
-                  (onParentNodeClick)="onParentNodeClick(node)"
-                  (onLeafNodeClick)="onLeafNodeClick(node)"
-                  (ngModelParentChange)="toggleNodeCheck(node, $event)"
-                  (ngModelLeafChange)="toggleNodeCheck(node, $event)">
-                </cva-flat-tree-node-left>
-              </ng-container>
-            </cdk-virtual-scroll-viewport>
-          </div>
-          <div class="selected-area {{isCollapseSelected ? 'hiddenTree' : ''}}"
-               *ngIf="!isDisplayChooseTreeOnly"
-               fxLayout="column" fxFlex="1 1 {{checkIsView(isView) ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
-            <div class="header-area" *ngIf="!isView">
-              <label>{{ selectedLabelTitle | translate }}{{ '(' + (value ? value.length : 0) + ')' }}</label>
-              <div class="collapse-expand-all" (click)="toggleSelectedTree()">
-                {{ (isCollapseSelected ? 'common.selected.tree.expandAll' : 'common.selected.tree.collapse') | translate }}
-                <i class="fa {{isCollapseSelected ? 'fa-chevron-down' : 'fa-chevron-up'}}"></i>
-              </div>
+                <div fxLayout="row wrap">
+                    <div class="choose-area"
+                         *ngIf="!checkIsView(isView) && !isCollapseSelected"
+                         fxLayout="column" fxFlex="1 1 {{isDisplayChooseTreeOnly ? '100%' : '50%'}}"
+                         fxFlex.lt-sm="100%">
+                        <div class="header-choose-area">
+                            <div class="title-choose-tree" fxLayout="row" fxLayout.lt-sm="row wrap">
+                                <mat-label fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%" class="label_width"
+                                           *ngIf="label && isSearchOutSide">
+                                    <div class="label">{{ (label ? label : '') | translate }}<span
+                                            class="required-label-outside">{{ required ? '*' : '' }}</span></div>
+                                </mat-label>
+                                <mat-divider *ngIf="label && isSearchOutSide"></mat-divider>
+                            </div>
+                            <mat-form-field appearance="outline"
+                                            *ngIf="!isSearchOutSide"
+                                            fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
+                                <input matInput
+                                       placeholder="{{'common.searchText'|translate}}"
+                                       [(ngModel)]="searchText"
+                                       (ngModelChange)="onChangeSearchText()"
+                                       autocomplete="off">
+                            </mat-form-field>
+                        </div>
+                        <cdk-virtual-scroll-viewport #chooseAreaScrollViewport itemSize="{{itemSize}}"
+                                                     [ngStyle]="{height: viewHeight + 'px'}">
+                            <ng-container *cdkVirtualFor="let node of dataSource">
+                                <cva-flat-tree-node-left
+                                        [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
+                                        [attr.aria-level]="node.level"
+                                        [treeControl]="treeControl"
+                                        [isHideCheckbox]="isHideCheckbox"
+                                        [nodeClicked]="nodeClicked"
+                                        [node]="node"
+                                        (toggle)="toggleTreeControl(treeControl, node)"
+                                        (onParentNodeClick)="onParentNodeClick(node)"
+                                        (onLeafNodeClick)="onLeafNodeClick(node)"
+                                        (ngModelParentChange)="toggleNodeCheck(node, $event)"
+                                        (ngModelLeafChange)="toggleNodeCheck(node, $event)">
+                                </cva-flat-tree-node-left>
+                            </ng-container>
+                        </cdk-virtual-scroll-viewport>
+                    </div>
+                    <div class="selected-area {{isCollapseSelected ? 'hiddenTree' : ''}}"
+                         *ngIf="!isDisplayChooseTreeOnly"
+                         fxLayout="column" fxFlex="1 1 {{checkIsView(isView) ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
+                        <div class="header-area" *ngIf="!isView">
+                            <label>{{ selectedLabelTitle | translate }}{{ '(' + getTotalSelected(fullDataDataSource.data) + ')' }}</label>
+                            <div class="collapse-expand-all" (click)="toggleSelectedTree()">
+                                {{ (isCollapseSelected ? 'common.selected.tree.expandAll' : 'common.selected.tree.collapse') | translate }}
+                                <i class="fa {{isCollapseSelected ? 'fa-chevron-down' : 'fa-chevron-up'}}"></i>
+                            </div>
+                        </div>
+                        <cdk-virtual-scroll-viewport #selectedScrollViewport
+                                                     *ngIf="!isCollapseSelected"
+                                                     itemSize="{{itemSize}}" [ngStyle]="{height: viewHeight + 'px'}">
+                            <ng-container *cdkVirtualFor="let node of selectedDataSource">
+                                <cva-flat-tree-node-right
+                                        [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
+                                        [attr.aria-level]="node.level"
+                                        [treeControl]="selectedTreeControl"
+                                        [node]="node"
+                                        [isView]="isView"
+                                        (toggle)="toggleSelectedTree(node)"
+                                        (deSelectLeafNode)="toggleNodeCheck(node, false)"
+                                        (deSelectParentNode)="toggleNodeCheck(node, false)">
+                                </cva-flat-tree-node-right>
+                            </ng-container>
+                        </cdk-virtual-scroll-viewport>
+                    </div>
+                </div>
+                <mat-hint *ngIf="NsValiator.invalid(formControl)">
+                    {{ NsValiator.getErrorMessage(formControl, errorMessages) | translate }}
+                </mat-hint>
             </div>
-            <cdk-virtual-scroll-viewport #selectedScrollViewport
-                                         *ngIf="!isCollapseSelected"
-                                         itemSize="{{itemSize}}" [ngStyle]="{height: viewHeight + 'px'}">
-              <ng-container *cdkVirtualFor="let node of selectedDataSource">
-                <cva-flat-tree-node-right
-                  [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
-                  [attr.aria-level]="node.level"
-                  [treeControl]="selectedTreeControl"
-                  [node]="node"
-                  [isView]="isView"
-                  (toggle)="toggleSelectedTree(node)"
-                  (deSelectLeafNode)="deSelect(node)"
-                  (deSelectParentNode)="deSelectParent(node)">
-                </cva-flat-tree-node-right>
-              </ng-container>
-            </cdk-virtual-scroll-viewport>
-          </div>
         </div>
-        <mat-hint *ngIf="NsValiator.invalid(formControl)">
-          {{ NsValiator.getErrorMessage(formControl, errorMessages) | translate }}
-        </mat-hint>
-      </div>
-    </div>
-  `, 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" }] });
+    `, 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaFlatTreeComponent, decorators: [{
             type: Component,
@@ -8728,94 +8747,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                     selector: 'cva-flat-tree',
                     standalone: false,
                     template: `
-    <div class="cva-flat-tree labelOutside"
-         fxLayout="row" fxLayout.lt-sm="row wrap">
-      <mat-label *ngIf="label && !isSearchOutSide" class="label_width"
+        <div class="cva-flat-tree labelOutside"
+             fxLayout="row" fxLayout.lt-sm="row wrap">
+            <mat-label *ngIf="label && !isSearchOutSide" class="label_width"
+                       fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
+                <div class="label">
+                    <div>
+                        {{ (label ? label : '') | translate }}<span
+                            class="required-label-outside">{{ required ? '*' : '' }}</span>
+                    </div>
+                </div>
+            </mat-label>
+            <div class="tree-area"
                  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
-        <div class="label">
-          <div>
-            {{ (label ? label : '') | translate }}<span class="required-label-outside">{{ required ? '*' : '' }}</span>
-          </div>
-        </div>
-      </mat-label>
-      <div class="tree-area"
-           fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
-        <div fxLayout="row wrap">
-          <div class="choose-area"
-               *ngIf="!checkIsView(isView) && !isCollapseSelected"
-               fxLayout="column" fxFlex="1 1 {{isDisplayChooseTreeOnly ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
-            <div class="header-choose-area">
-              <div class="title-choose-tree" fxLayout="row" fxLayout.lt-sm="row wrap">
-                <mat-label fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%" class="label_width"
-                           *ngIf="label && isSearchOutSide">
-                  <div class="label">{{ (label ? label : '') | translate }}<span
-                    class="required-label-outside">{{ required ? '*' : '' }}</span></div>
-                </mat-label>
-                <mat-divider *ngIf="label && isSearchOutSide"></mat-divider>
-              </div>
-              <mat-form-field appearance="outline"
-                              *ngIf="!isSearchOutSide"
-                              fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
-                <input matInput
-                       placeholder="{{'common.searchText'|translate}}"
-                       [(ngModel)]="searchText"
-                       (ngModelChange)="onChangeSearchText()"
-                       autocomplete="off">
-              </mat-form-field>
-            </div>
-            <cdk-virtual-scroll-viewport #chooseAreaScrollViewport itemSize="{{itemSize}}"
-                                         [ngStyle]="{height: viewHeight + 'px'}">
-              <ng-container *cdkVirtualFor="let node of dataSource">
-                <cva-flat-tree-node-left
-                  [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
-                  [attr.aria-level]="node.level"
-                  [treeControl]="treeControl"
-                  [isHideCheckbox]="isHideCheckbox"
-                  [nodeClicked]="nodeClicked"
-                  [node]="node"
-                  (toggle)="toggleTreeControl(treeControl, node)"
-                  (onParentNodeClick)="onParentNodeClick(node)"
-                  (onLeafNodeClick)="onLeafNodeClick(node)"
-                  (ngModelParentChange)="toggleNodeCheck(node, $event)"
-                  (ngModelLeafChange)="toggleNodeCheck(node, $event)">
-                </cva-flat-tree-node-left>
-              </ng-container>
-            </cdk-virtual-scroll-viewport>
-          </div>
-          <div class="selected-area {{isCollapseSelected ? 'hiddenTree' : ''}}"
-               *ngIf="!isDisplayChooseTreeOnly"
-               fxLayout="column" fxFlex="1 1 {{checkIsView(isView) ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
-            <div class="header-area" *ngIf="!isView">
-              <label>{{ selectedLabelTitle | translate }}{{ '(' + (value ? value.length : 0) + ')' }}</label>
-              <div class="collapse-expand-all" (click)="toggleSelectedTree()">
-                {{ (isCollapseSelected ? 'common.selected.tree.expandAll' : 'common.selected.tree.collapse') | translate }}
-                <i class="fa {{isCollapseSelected ? 'fa-chevron-down' : 'fa-chevron-up'}}"></i>
-              </div>
+                <div fxLayout="row wrap">
+                    <div class="choose-area"
+                         *ngIf="!checkIsView(isView) && !isCollapseSelected"
+                         fxLayout="column" fxFlex="1 1 {{isDisplayChooseTreeOnly ? '100%' : '50%'}}"
+                         fxFlex.lt-sm="100%">
+                        <div class="header-choose-area">
+                            <div class="title-choose-tree" fxLayout="row" fxLayout.lt-sm="row wrap">
+                                <mat-label fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%" class="label_width"
+                                           *ngIf="label && isSearchOutSide">
+                                    <div class="label">{{ (label ? label : '') | translate }}<span
+                                            class="required-label-outside">{{ required ? '*' : '' }}</span></div>
+                                </mat-label>
+                                <mat-divider *ngIf="label && isSearchOutSide"></mat-divider>
+                            </div>
+                            <mat-form-field appearance="outline"
+                                            *ngIf="!isSearchOutSide"
+                                            fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
+                                <input matInput
+                                       placeholder="{{'common.searchText'|translate}}"
+                                       [(ngModel)]="searchText"
+                                       (ngModelChange)="onChangeSearchText()"
+                                       autocomplete="off">
+                            </mat-form-field>
+                        </div>
+                        <cdk-virtual-scroll-viewport #chooseAreaScrollViewport itemSize="{{itemSize}}"
+                                                     [ngStyle]="{height: viewHeight + 'px'}">
+                            <ng-container *cdkVirtualFor="let node of dataSource">
+                                <cva-flat-tree-node-left
+                                        [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
+                                        [attr.aria-level]="node.level"
+                                        [treeControl]="treeControl"
+                                        [isHideCheckbox]="isHideCheckbox"
+                                        [nodeClicked]="nodeClicked"
+                                        [node]="node"
+                                        (toggle)="toggleTreeControl(treeControl, node)"
+                                        (onParentNodeClick)="onParentNodeClick(node)"
+                                        (onLeafNodeClick)="onLeafNodeClick(node)"
+                                        (ngModelParentChange)="toggleNodeCheck(node, $event)"
+                                        (ngModelLeafChange)="toggleNodeCheck(node, $event)">
+                                </cva-flat-tree-node-left>
+                            </ng-container>
+                        </cdk-virtual-scroll-viewport>
+                    </div>
+                    <div class="selected-area {{isCollapseSelected ? 'hiddenTree' : ''}}"
+                         *ngIf="!isDisplayChooseTreeOnly"
+                         fxLayout="column" fxFlex="1 1 {{checkIsView(isView) ? '100%' : '50%'}}" fxFlex.lt-sm="100%">
+                        <div class="header-area" *ngIf="!isView">
+                            <label>{{ selectedLabelTitle | translate }}{{ '(' + getTotalSelected(fullDataDataSource.data) + ')' }}</label>
+                            <div class="collapse-expand-all" (click)="toggleSelectedTree()">
+                                {{ (isCollapseSelected ? 'common.selected.tree.expandAll' : 'common.selected.tree.collapse') | translate }}
+                                <i class="fa {{isCollapseSelected ? 'fa-chevron-down' : 'fa-chevron-up'}}"></i>
+                            </div>
+                        </div>
+                        <cdk-virtual-scroll-viewport #selectedScrollViewport
+                                                     *ngIf="!isCollapseSelected"
+                                                     itemSize="{{itemSize}}" [ngStyle]="{height: viewHeight + 'px'}">
+                            <ng-container *cdkVirtualFor="let node of selectedDataSource">
+                                <cva-flat-tree-node-right
+                                        [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
+                                        [attr.aria-level]="node.level"
+                                        [treeControl]="selectedTreeControl"
+                                        [node]="node"
+                                        [isView]="isView"
+                                        (toggle)="toggleSelectedTree(node)"
+                                        (deSelectLeafNode)="toggleNodeCheck(node, false)"
+                                        (deSelectParentNode)="toggleNodeCheck(node, false)">
+                                </cva-flat-tree-node-right>
+                            </ng-container>
+                        </cdk-virtual-scroll-viewport>
+                    </div>
+                </div>
+                <mat-hint *ngIf="NsValiator.invalid(formControl)">
+                    {{ NsValiator.getErrorMessage(formControl, errorMessages) | translate }}
+                </mat-hint>
             </div>
-            <cdk-virtual-scroll-viewport #selectedScrollViewport
-                                         *ngIf="!isCollapseSelected"
-                                         itemSize="{{itemSize}}" [ngStyle]="{height: viewHeight + 'px'}">
-              <ng-container *cdkVirtualFor="let node of selectedDataSource">
-                <cva-flat-tree-node-right
-                  [ngStyle]="{height: itemSize + 'px', padding: '0px 0px 0px '+ (node.level * paddingLeft) +'px'}"
-                  [attr.aria-level]="node.level"
-                  [treeControl]="selectedTreeControl"
-                  [node]="node"
-                  [isView]="isView"
-                  (toggle)="toggleSelectedTree(node)"
-                  (deSelectLeafNode)="deSelect(node)"
-                  (deSelectParentNode)="deSelectParent(node)">
-                </cva-flat-tree-node-right>
-              </ng-container>
-            </cdk-virtual-scroll-viewport>
-          </div>
         </div>
-        <mat-hint *ngIf="NsValiator.invalid(formControl)">
-          {{ NsValiator.getErrorMessage(formControl, errorMessages) | translate }}
-        </mat-hint>
-      </div>
-    </div>
-  `,
+    `,
                 }]
         }], ctorParameters: () => [{ type: i1.TranslateService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$2.NgControl, decorators: [{
                     type: Self
@@ -8861,6 +8882,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Output
             }], onNodeClick: [{
                 type: Output
+            }], nodeClicked: [{
+                type: Input
             }], isFormControl: [{
                 type: Input
             }], chooseVirtualScroll: [{