@c10t/nice-component-library 0.0.36 → 0.0.38

package/components/tree/cva-flat-tree.component.d.ts

@@ -28,6 +28,7 @@ export declare class CvaFlatTreeComponent implements ControlValueAccessor, OnIni
     /** height of node view */
     itemSize: number;
     paddingLeft: number;
+    ignoreCountValue: any[];
     percentOfLabelOutside: number;
     treeConfig?: FlatTreeConfigModel;
     isSearchOutSide: boolean;
@@ -94,5 +95,5 @@ export declare class CvaFlatTreeComponent implements ControlValueAccessor, OnIni
     private _isExpandable;
     private _getChildren;
     static ɵfac: i0.ɵɵFactoryDeclaration<CvaFlatTreeComponent, [null, null, null, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CvaFlatTreeComponent, "cva-flat-tree", never, { "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "isView": { "alias": "isView"; "required": false; }; "isDisplayChooseTreeOnly": { "alias": "isDisplayChooseTreeOnly"; "required": false; }; "isHideCheckbox": { "alias": "isHideCheckbox"; "required": false; }; "isCollapseSelected": { "alias": "isCollapseSelected"; "required": false; }; "selectedLabelTitle": { "alias": "selectedLabelTitle"; "required": false; }; "viewHeight": { "alias": "viewHeight"; "required": false; }; "itemSize": { "alias": "itemSize"; "required": false; }; "percentOfLabelOutside": { "alias": "percentOfLabelOutside"; "required": false; }; "treeConfig": { "alias": "treeConfig"; "required": false; }; "isSearchOutSide": { "alias": "isSearchOutSide"; "required": false; }; "searchTextOutSide": { "alias": "searchTextOutSide"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "fullDatasource": { "alias": "fullDatasource"; "required": false; }; "nodeClicked": { "alias": "nodeClicked"; "required": false; }; "isFormControl": { "alias": "isFormControl"; "required": false; }; }, { "selectionChange": "selectionChange"; "onNodeClick": "onNodeClick"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CvaFlatTreeComponent, "cva-flat-tree", never, { "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "isView": { "alias": "isView"; "required": false; }; "isDisplayChooseTreeOnly": { "alias": "isDisplayChooseTreeOnly"; "required": false; }; "isHideCheckbox": { "alias": "isHideCheckbox"; "required": false; }; "isCollapseSelected": { "alias": "isCollapseSelected"; "required": false; }; "selectedLabelTitle": { "alias": "selectedLabelTitle"; "required": false; }; "viewHeight": { "alias": "viewHeight"; "required": false; }; "itemSize": { "alias": "itemSize"; "required": false; }; "ignoreCountValue": { "alias": "ignoreCountValue"; "required": false; }; "percentOfLabelOutside": { "alias": "percentOfLabelOutside"; "required": false; }; "treeConfig": { "alias": "treeConfig"; "required": false; }; "isSearchOutSide": { "alias": "isSearchOutSide"; "required": false; }; "searchTextOutSide": { "alias": "searchTextOutSide"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "fullDatasource": { "alias": "fullDatasource"; "required": false; }; "nodeClicked": { "alias": "nodeClicked"; "required": false; }; "isFormControl": { "alias": "isFormControl"; "required": false; }; }, { "selectionChange": "selectionChange"; "onNodeClick": "onNodeClick"; }, never, never, false, never>;
 }

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

@@ -7878,45 +7878,44 @@ 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>
-                  <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()">
+    <ng-container [ngSwitch]="hasChild(node)">
+      <ng-container *ngSwitchCase="false">
+        <div title="{{node.displayValue}}"
+             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()" title="{{node.displayValue}}">
               <i *ngIf="node.iconClass" class="{{ node.iconClass }} icon-left"></i>
-                      {{ node.displayValue }}
+            {{ 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>
+        </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>
   `, 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: [{
@@ -7925,45 +7924,44 @@ 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>
-                  <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()">
+    <ng-container [ngSwitch]="hasChild(node)">
+      <ng-container *ngSwitchCase="false">
+        <div title="{{node.displayValue}}"
+             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()" title="{{node.displayValue}}">
               <i *ngIf="node.iconClass" class="{{ node.iconClass }} icon-left"></i>
-                      {{ node.displayValue }}
+            {{ 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>
+        </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>
   `,
                 }]
         }], propDecorators: { treeControl: [{
@@ -8127,6 +8125,7 @@ class CvaFlatTreeComponent {
     /** height of node view */
     itemSize = 48; // px
     paddingLeft = 20; //px
+    ignoreCountValue = [];
     /* percent label outside css */
     percentOfLabelOutside = 25;
     treeConfig;
@@ -8551,7 +8550,6 @@ class CvaFlatTreeComponent {
                 if (node.display) {
                     copiedData.push(copiedNode);
                 }
-                console.log(this.value.includes(node.value), 'node', node, 'copiedNode', copiedNode);
             }
             else {
                 node.display = node.displayValue.toLowerCase().includes(this.searchText.toLowerCase().trim())
@@ -8664,15 +8662,16 @@ class CvaFlatTreeComponent {
         let count = 0;
         for (const node of nodes) {
             const isLeaf = !FlatTreeService.hasChild(node);
+            const isCountValue = !this.ignoreCountValue.includes(node.value);
             if (isLeaf) {
-                if (this.value.includes(node.value)) {
+                if (this.value.includes(node.value) && isCountValue) {
                     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) {
+                if (childChecked === node.children.length && isCountValue) {
                     count += 1;
                 }
                 count += childChecked;
@@ -8684,7 +8683,7 @@ class CvaFlatTreeComponent {
     _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", 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: `
+    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", ignoreCountValue: "ignoreCountValue", 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"
@@ -8901,6 +8900,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], itemSize: [{
                 type: Input
+            }], ignoreCountValue: [{
+                type: Input
             }], percentOfLabelOutside: [{
                 type: Input
             }], treeConfig: [{