qms-angular 1.1.55 → 1.1.56

package/bundles/qms-angular.umd.js

@@ -602,7 +602,9 @@
             "SAVE_AS_TEMPLATE": "Save as template",
             "RESET_TO_LAST_SAVE": "Reset to last saved"
         },
-        "INTERCONNECTED_PROCESSES": "Interconnected Processes"
+        "INTERCONNECTED_PROCESSES": "Interconnected Processes",
+        "PLACE_NEXT_TO": "Place next to",
+        "PLACE_UNDER": "Place under",
     };
 
     var no = {
@@ -1164,7 +1166,9 @@
             "SAVE_AS_TEMPLATE": "Lagre som mal",
             "RESET_TO_LAST_SAVE": "Forkast ulagrede endringer"
         },
-        "INTERCONNECTED_PROCESSES": "Sammenkoblede Prosesser"
+        "INTERCONNECTED_PROCESSES": "Sammenkoblede Prosesser",
+        "PLACE_NEXT_TO": "Plasser ved siden av",
+        "PLACE_UNDER": "Plasser under"
     };
 
     var sv = {
@@ -1600,7 +1604,9 @@
             "SELECT_TEMPLATE": "Välj mall",
             "DELETE_TEMPLATE": "Ta bort mall",
             "SAVE_AS_TEMPLATE": "Spara som mall",
-            "RESET_TO_LAST_SAVE": "Släng osparade ändringar"
+            "RESET_TO_LAST_SAVE": "Släng osparade ändringar",
+            "PLACE_NEXT_TO": "Placera bredvid",
+            "PLACE_UNDER": "Placera under",
         }
     };
 
@@ -34009,11 +34015,10 @@
                 if (res) {
                     setTimeout(function () {
                         var element = document.querySelector('.mat-tree-node.active');
-                        console.log(res, element, 'xxxxx');
                         if (element) {
                             element.scrollIntoView({ behavior: 'smooth' });
                         }
-                    });
+                    }, 200);
                 }
             });
         };
@@ -34045,6 +34050,7 @@
                 _loop_1(i);
             }
             this._activeNode();
+            this.cdRef.detectChanges();
         };
         QMSNavDrawerComponent.prototype.onClickNode = function (node) {
             this.activeNode = this.getActiveNode(node.id, node.parentId);
@@ -35770,7 +35776,7 @@
     SelectDepartmentTreeComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-select-department-tree',
-                    template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\n  <div class=\"input-select-department\">\n    <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\n      <mat-form-field class=\"w100\" qms-form qms-search-field>\n        <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput />\n        <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\n          <mat-icon>search</mat-icon>\n        </button>\n        <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\n          *ngIf=\"getLoading$.value\"></mat-progress-spinner>\n        <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\n          <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n      </mat-form-field>\n    </form>\n    <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\n      class=\"sub-text ms-1 fw500\">\n      {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\n    </div>\n    <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\n      class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end  align-items-center\">\n      <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\n        [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\n        [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\n        qms-group-options>\n        <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\n      </mat-slide-toggle>\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\n        (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\n        position=\"top\">\n        <mat-icon>arrow_back</mat-icon>\n      </button>\n      <button class=\"btn-arrow\" [@inOutAnimation]\n        *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\n        (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\n        position=\"top\">\n        <mat-icon>arrow_forward</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div [@inOutAnimation]\n    *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\n    class=\"header-view-tree\">\n    <div class=\"header-view header-title\">\n      {{config.headerName.treeName}}\n    </div>\n    <div class=\"header-view header-title\">\n      {{config.headerName.externalName}}\n    </div>\n  </div>\n  <mat-divider class=\"mx-auto\"></mat-divider>\n  <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\n    minHeight: height\n  }\" class=\"tree-department-wrapper\">\n    <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\n      <div class=\"tree-view-main h100\">\n        <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\n          class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\n          <!-- Checkbox all root node -->\n          <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\n            [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\n            color=\"default\" label=\"none\" class=\"checkbox-all\">\n            <span class=\"text-label \">{{LANG.CHOOSE_ALL}}</span>\n            <span>(<b>{{treeControl.dataNodes.length}}</b>)</span>\n          </mat-checkbox>\n          <mat-divider class=\"mx-auto\"></mat-divider>\n        </div>\n        <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\n                    'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\n                    'select-department-tree': true\n                  }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\n          <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\n            <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\n              [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\n                              'w-100': config.isSelectOne,\n                              'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\n                              'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\n                              'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\n                              'node-loading': node.isLoading,\n                              'move-location-mode': config.moveLocationMode\n                        }\">\n              <div class=\"node-expand-area\">\n                <button class=\"btn-toggle\" qms-btn-icon color=\"light\"\n                  [disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\n                  (click)=\"onExpandNode(node)\" *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\n                  <mat-icon>\n                    {{ treeControl.isExpanded(node) ? node?.expandIcon?.collapse : node?.expandIcon?.expand }}\n                  </mat-icon>\n                </button>\n                <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\n              </div>\n              <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\n                [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\n                <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\n                  {{node.externalName || ''}}\n                </span>\n              </div>\n            </div>\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n        <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\n        </ng-container>\n      </div>\n    </div>\n    <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\n      height: height\n    }\" class=\"qms-view-search-result\">\n      <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n        class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\n        <div class=\"header-title\">\n          <span qms-elipsify mode=\"dark\" position=\"top\">\n            {{config.headerName.resultSearchName}}\n          </span>\n        </div>\n        <div class=\"header-title\">\n          <span qms-elipsify mode=\"dark\" position=\"top\">\n            {{config.headerName.externalName}}\n          </span>\n        </div>\n      </div>\n      <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\n      <div class=\"qms-view-search-result__wrapper\"\n        [class.active-external]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n        *ngIf=\"!!resultSearch.length && !getLoading$.value\">\n        <div class=\"\">\n          <mat-checkbox [@inOutAnimation]\n            [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\n            [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\n            color=\"default\" label=\"none\" class=\"checkbox-all\"\n            (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\n            <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n            <span>(<b>{{resultSearch.length}}</b>)</span>\n          </mat-checkbox>\n        </div>\n        <div [@inOutAnimation] [@listAnimation]\n          [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\n          <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\n            position=\"top\" *ngFor=\"let item of resultSearch\"\n            (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n            [class.active]=\"checkListSelectionSearch.isSelected(item)\" class=\"result-item user-select-none\" matRipple>\n            <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading\" [disabled]=\"item.disabled\"\n              (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n              [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\n            </mat-checkbox>\n            <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\n              <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\n            </div>\n            <div class=\"result-item__content\">\n              <div class=\"item-result-content-wraper\">\n                <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\n                <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\n                  [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\n                  [nodes]=\"item.location\">\n                </qms-breadcrumb>\n                <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\n                  <span qms-elipsify mode=\"dark\" position=\"top\"\n                    class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\n                </div>\n              </div>\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\n                <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\n        <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n      </div>\n      <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\n        class=\"mx-auto\"></mat-divider>\n      <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\n        [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\n        [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\n        [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\n      </qms-paginator>\n    </div>\n  </div>\n\n  <!-- Template for Checkbox -->\n  <ng-template #showCheckboxTemplate let-node=\"node\">\n    <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\n      [disabled]=\"node.isLoading || node.disabled\" [checked]=\"checkListSelection.isSelected(node)\"\n      (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\n      <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\n        [src]=\"node.itemIconSvg\" />\n      <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n        class=\"material-icons-outlined type-icon\"></span>\n      <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n        node.itemMatIcon }}\n      </span>\n      <div class=\"node-text\" [ngStyle]=\"{\n        maxWidth: (maxWidthNode - 20*node.level)+ 'px'\n      }\">\n        <span qms-elipsify [mode]=\"'dark'\" position=\"top\" class=\"text-name cursor-pointer ml5 123\"\n          [ngClass]=\"{ disabled: node.disabled}\">{{ node.name}}\n        </span>\n      </div>\n    </mat-checkbox>\n  </ng-template>\n\n  <!-- Template node without checkbox -->\n  <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\n    <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\n      <div class=\"node-info\">\n        <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n          class=\"material-icons-outlined type-icon\"></span>\n        <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n          node.itemMatIcon }}\n        </span>\n        <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\n      </div>\n      <div class=\"node-state\">\n        <mat-icon [class.disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\n          *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\n        <button class=\"move-location-btn\" *ngIf=\"config.moveLocationMode && !checkListSelection.isSelected(node)\"\n          qms-btn-icon [matMenuTriggerFor]=\"menu\">\n          <mat-icon>swap_vert</mat-icon>\n        </button>\n        <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\n          <button (click)=\"moveToLocation(node, 'sibling')\" mat-menu-item>\n            <span>Set as sibling</span>\n          </button>\n          <button (click)=\"moveToLocation(node, 'child')\" mat-menu-item>\n            <span>Set as child</span>\n          </button>\n        </mat-menu>\n      </div>\n    </div>\n  </ng-template>\n</div>\n\n<ng-template #noResult>\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n    <path\n      d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n      fill=\"#0163B3\" />\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n  </svg>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n  <div [ngStyle]=\"{\n    'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\n  }\" class=\"qms-loading-container\">\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n      <div class=\"qms-loader__wrapper\">\n        <div class=\"row-loader\">\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template mask overlay -->\n<ng-template #maskOverlay>\n  <div class=\"mask-overlay\">\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\" color=\"primary\"></mat-spinner>\n  </div>\n</ng-template>\n\n<!-- Loading spinner -->\n<ng-template #loadingSpinner>\n  <div class=\"qms-spinner center\">\n    <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\n  </div>\n</ng-template>",
+                    template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\n  <div class=\"input-select-department\">\n    <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\n      <mat-form-field class=\"w100\" qms-form qms-search-field>\n        <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput />\n        <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\n          <mat-icon>search</mat-icon>\n        </button>\n        <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\n          *ngIf=\"getLoading$.value\"></mat-progress-spinner>\n        <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\n          <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </div>\n      </mat-form-field>\n    </form>\n    <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\n      class=\"sub-text ms-1 fw500\">\n      {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\n    </div>\n    <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\n      class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end  align-items-center\">\n      <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\n        [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\n        [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\n        qms-group-options>\n        <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\n      </mat-slide-toggle>\n      <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\n        (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\n        position=\"top\">\n        <mat-icon>arrow_back</mat-icon>\n      </button>\n      <button class=\"btn-arrow\" [@inOutAnimation]\n        *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\n        (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\n        position=\"top\">\n        <mat-icon>arrow_forward</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div [@inOutAnimation]\n    *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\n    class=\"header-view-tree\">\n    <div class=\"header-view header-title\">\n      {{config.headerName.treeName}}\n    </div>\n    <div class=\"header-view header-title\">\n      {{config.headerName.externalName}}\n    </div>\n  </div>\n  <mat-divider class=\"mx-auto\"></mat-divider>\n  <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\n    minHeight: height\n  }\" class=\"tree-department-wrapper\">\n    <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\n      <div class=\"tree-view-main h100\">\n        <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\n          class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\n          <!-- Checkbox all root node -->\n          <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\n            [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\n            color=\"default\" label=\"none\" class=\"checkbox-all\">\n            <span class=\"text-label \">{{LANG.CHOOSE_ALL}}</span>\n            <span>(<b>{{treeControl.dataNodes.length}}</b>)</span>\n          </mat-checkbox>\n          <mat-divider class=\"mx-auto\"></mat-divider>\n        </div>\n        <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\n                    'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\n                    'select-department-tree': true\n                  }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\n          <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\n            <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\n              [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\n                              'w-100': config.isSelectOne,\n                              'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\n                              'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\n                              'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\n                              'node-loading': node.isLoading,\n                              'move-location-mode': config.moveLocationMode\n                        }\">\n              <div class=\"node-expand-area\">\n                <button class=\"btn-toggle\" qms-btn-icon color=\"light\"\n                  [disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\n                  (click)=\"onExpandNode(node)\" *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\n                  <mat-icon>\n                    {{ treeControl.isExpanded(node) ? node?.expandIcon?.collapse : node?.expandIcon?.expand }}\n                  </mat-icon>\n                </button>\n                <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\n              </div>\n              <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\n                [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\n                <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\n                  {{node.externalName || ''}}\n                </span>\n              </div>\n            </div>\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n        <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\n        </ng-container>\n      </div>\n    </div>\n    <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\n      height: height\n    }\" class=\"qms-view-search-result\">\n      <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n        class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\n        <div class=\"header-title\">\n          <span qms-elipsify mode=\"dark\" position=\"top\">\n            {{config.headerName.resultSearchName}}\n          </span>\n        </div>\n        <div class=\"header-title\">\n          <span qms-elipsify mode=\"dark\" position=\"top\">\n            {{config.headerName.externalName}}\n          </span>\n        </div>\n      </div>\n      <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\n      <div class=\"qms-view-search-result__wrapper\"\n        [class.active-external]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n        *ngIf=\"!!resultSearch.length && !getLoading$.value\">\n        <div class=\"\">\n          <mat-checkbox [@inOutAnimation]\n            [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\n            [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\n            color=\"default\" label=\"none\" class=\"checkbox-all\"\n            (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\n            <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n            <span>(<b>{{resultSearch.length}}</b>)</span>\n          </mat-checkbox>\n        </div>\n        <div [@inOutAnimation] [@listAnimation]\n          [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\n          <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\n            position=\"top\" *ngFor=\"let item of resultSearch\"\n            (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n            [class.active]=\"checkListSelectionSearch.isSelected(item)\" class=\"result-item user-select-none\" matRipple>\n            <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading\" [disabled]=\"item.disabled\"\n              (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n              [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\n            </mat-checkbox>\n            <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\n              <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\n            </div>\n            <div class=\"result-item__content\">\n              <div class=\"item-result-content-wraper\">\n                <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\n                <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\n                  [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\n                  [nodes]=\"item.location\">\n                </qms-breadcrumb>\n                <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\n                  <span qms-elipsify mode=\"dark\" position=\"top\"\n                    class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\n                </div>\n              </div>\n              <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\n                <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\n        <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n      </div>\n      <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\n        class=\"mx-auto\"></mat-divider>\n      <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\n        [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\n        [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\n        [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\n      </qms-paginator>\n    </div>\n  </div>\n\n  <!-- Template for Checkbox -->\n  <ng-template #showCheckboxTemplate let-node=\"node\">\n    <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\n      [disabled]=\"node.isLoading || node.disabled\" [checked]=\"checkListSelection.isSelected(node)\"\n      (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\n      <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\n        [src]=\"node.itemIconSvg\" />\n      <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n        class=\"material-icons-outlined type-icon\"></span>\n      <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n        node.itemMatIcon }}\n      </span>\n      <div class=\"node-text\" [ngStyle]=\"{\n        maxWidth: (maxWidthNode - 20*node.level)+ 'px'\n      }\">\n        <span qms-elipsify [mode]=\"'dark'\" position=\"top\" class=\"text-name cursor-pointer ml5 123\"\n          [ngClass]=\"{ disabled: node.disabled}\">{{ node.name}}\n        </span>\n      </div>\n    </mat-checkbox>\n  </ng-template>\n\n  <!-- Template node without checkbox -->\n  <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\n    <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\n      <div class=\"node-info\">\n        <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n          class=\"material-icons-outlined type-icon\"></span>\n        <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n          node.itemMatIcon }}\n        </span>\n        <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\n      </div>\n      <div class=\"node-state\">\n        <mat-icon [class.disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\n          *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\n        <button class=\"move-location-btn\" *ngIf=\"config.moveLocationMode && !checkListSelection.isSelected(node)\"\n          qms-btn-icon [matMenuTriggerFor]=\"menu\">\n          <mat-icon>swap_vert</mat-icon>\n        </button>\n        <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\n          <button (click)=\"moveToLocation(node, 'sibling')\" mat-menu-item>\n            <span>{{LANG.PLACE_NEXT_TO}}</span>\n          </button>\n          <button (click)=\"moveToLocation(node, 'child')\" mat-menu-item>\n            <span>{{LANG.PLACE_UNDER}}</span>\n          </button>\n        </mat-menu>\n      </div>\n    </div>\n  </ng-template>\n</div>\n\n<ng-template #noResult>\n  <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n    <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n    <path\n      d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n      fill=\"#0163B3\" />\n    <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n  </svg>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n  <div [ngStyle]=\"{\n    'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\n  }\" class=\"qms-loading-container\">\n    <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n      <div class=\"qms-loader__wrapper\">\n        <div class=\"row-loader\">\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template mask overlay -->\n<ng-template #maskOverlay>\n  <div class=\"mask-overlay\">\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\" color=\"primary\"></mat-spinner>\n  </div>\n</ng-template>\n\n<!-- Loading spinner -->\n<ng-template #loadingSpinner>\n  <div class=\"qms-spinner center\">\n    <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\n  </div>\n</ng-template>",
                     animations: [
                         AnimationTreeDepartment
                     ],