qms-angular 1.1.59 → 1.1.60

package/bundles/qms-angular.umd.js

@@ -7522,7 +7522,7 @@
     RelatedListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-related-list',
-                    template: "<div class=\"container list-related\">\n  <div class=\"list-related__title\">\n    <strong>{{ title }}</strong>\n  </div>\n  <div\n    class=\"list-related__body\"\n    *ngFor=\"let item of relatedData; let i = index\"\n  >\n    <div class=\"list-related__body-parent\">\n      <qms-list-item type=\"image-square\">\n        <mat-icon\n          type=\"image-square\"\n          leading-icon\n          [svgIcon]=\"getNodeIcon(item)\"\n        ></mat-icon>\n        <div qms-list-header>\n          <div\n            qms-line\n            (click)=\"onItemClick(item)\"\n            type=\"caption\"\n            *ngIf=\"canShowParent(item)\"\n          >\n            {{ item?.parentName }}\n          </div>\n          <div qms-line (click)=\"onItemClick(item)\" type=\"subtitle\">\n            {{ item.itemName }}\n          </div>\n        </div>\n        <div qms-line *ngIf=\"item.breadcumbs && item.breadcumbs.length\">\n          <qms-breadcrumb\n            class=\"breadcrumb-container\"\n            type=\"table\"\n            numDisplayItem=\"1\"\n            [nodes]=\"item.breadcumbs\"\n          >\n          </qms-breadcrumb>\n        </div>\n        <div qms-line color=\"default-subtitle\" *ngIf=\"item?.displayId\">\n          <ng-container *ngIf=\"item?.displayId\">\n            <span>\n              <mat-icon class=\"material-icons-outlined\"> local_offer </mat-icon>\n            </span>\n            &nbsp;ID:\n            {{ item?.displayId }}\n          </ng-container>\n          <ng-container *ngIf=\"item.statusName\">\n            {{ getItemStatus(item) }}\n          </ng-container>\n        </div>\n        <button\n          qms-btn-icon\n          color=\"light\"\n          mode=\"dark\"\n          *ngIf=\"!isNotEditedItem && (item.canRemove === undefined || item.canRemove)\"\n          (click)=\"removeItem(i)\"\n          >\n            <mat-icon>close</mat-icon>\n        </button>\n      </qms-list-item>\n    </div>\n  </div>\n</div>\n",
+                    template: "<div class=\"container list-related\">\r\n  <div class=\"list-related__title\">\r\n    <strong>{{ title }}</strong>\r\n  </div>\r\n  <div class=\"list-related__body\" *ngFor=\"let item of relatedData; let i = index\">\r\n    <div class=\"list-related__body-parent\">\r\n      <qms-list-item type=\"image-square\">\r\n        <mat-icon type=\"image-square\" leading-icon [svgIcon]=\"getNodeIcon(item)\"></mat-icon>\r\n        <div qms-list-header>\r\n          <div qms-line (click)=\"onItemClick(item)\" type=\"caption\" *ngIf=\"canShowParent(item)\">\r\n            {{ item?.parentName }}\r\n          </div>\r\n          <div qms-line (click)=\"onItemClick(item)\" type=\"subtitle\">\r\n            {{ item.itemName }}\r\n          </div>\r\n        </div>\r\n        <div qms-line *ngIf=\"item.breadcumbs && item.breadcumbs.length\">\r\n          <qms-breadcrumb class=\"breadcrumb-container\" type=\"table\" numDisplayItem=\"1\" [nodes]=\"item.breadcumbs\">\r\n          </qms-breadcrumb>\r\n        </div>\r\n        <div qms-line color=\"default-subtitle\" *ngIf=\"item?.displayId\">\r\n          <ng-container *ngIf=\"item?.displayId\">\r\n            <span>\r\n              <mat-icon class=\"material-icons-outlined\"> local_offer </mat-icon>\r\n            </span>\r\n            &nbsp;ID:\r\n            {{ item?.displayId }}\r\n          </ng-container>\r\n          <ng-container *ngIf=\"item.statusName\">\r\n            {{ getItemStatus(item) }}\r\n          </ng-container>\r\n        </div>\r\n        <button qms-btn-icon color=\"light\" mode=\"dark\"\r\n          *ngIf=\"!isNotEditedItem && (item.canRemove === undefined || item.canRemove)\" (click)=\"removeItem(i)\">\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </qms-list-item>\r\n    </div>\r\n  </div>\r\n</div>",
                     encapsulation: i0.ViewEncapsulation.None,
                     styles: [".list-related{font-family:Open Sans;font-style:normal;font-weight:400;color:var(--default-color)}.list-related .list-related__title{font-weight:600;font-size:.875rem;line-height:22px;margin-bottom:1rem}.list-related .list-related__body .list-related__body-parent{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-parent .qms-list-item{height:unset!important}.list-related .list-related__body .list-related__body-parent .qms-list-item.mat-2-line.image-item{height:auto}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-item-content{margin:0}.list-related .list-related__body .list-related__body-parent .wrap-image.image-square,.list-related .list-related__body .list-related__body-parent .wrap-image.image-square img{background:transparent;margin:auto;height:24px;width:24px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box{margin-left:1.5rem;border-bottom:none;padding-bottom:7px;padding-top:7px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text .material-icons-outlined,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box .material-icons-outlined{font-size:13px;height:13px;width:13px}.list-related .list-related__body .list-related__body-parent .block{font-weight:400;font-size:1rem;line-height:28px;display:flex;align-items:center}.list-related .list-related__body .list-related__body-parent .block .title{margin-left:1.5rem;padding-top:5px;padding-bottom:5px}.list-related .list-related__body .list-related__body-parent .block .title .caption{color:rgba(0,0,0,.6);font-size:.75rem;line-height:22px}.list-related .list-related__body .list-related__body-parent .block mat-icon{color:rgba(0,0,0,.6);padding:0}.list-related .list-related__body .list-related__body-parent .block button.qms-btn-icon{width:40px;height:40px;line-height:40px}.list-related .list-related__body .list-related__body-child{font-weight:400;font-size:.875rem;line-height:22px}.list-related .list-related__body .list-related__body-child .default{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-child .default .title{margin-left:3rem}.list-related .list-related__body .list-related__body-child .default .group-button{margin-right:2rem;display:flex}.list-related .list-related__body .remain{font-weight:600;font-size:.875rem;line-height:22px;display:flex;align-items:center;justify-content:space-between;background-color:#fafafa;color:var(--primary);min-height:48px;border-bottom:1px solid #ddd}.list-related .list-related__body .remain .title{margin-left:3rem}.list-related .list-related__body .qms-line{display:flex;align-items:center}.list-related .list-related__body .breadcrumb-container .qms-breadcrumb-item{cursor:inherit;line-height:16px;font-size:.75rem;color:rgba(0,0,0,.6);font-weight:400;line-height:22px;margin:0}.list-related .list-related__body .trailing-box{display:flex;align-items:center}.list-related .list-related__body .trailing-box button{height:24px;width:24px;line-height:24px}.label-green,.label-red,.label-yellow{font-family:Open Sans;font-style:normal;font-weight:600;display:inline-block;text-align:center;margin-left:1rem;width:24px;height:24px;font-size:.75rem;border-radius:1px}.label-red{background-color:var(--secondary);color:#fff}.label-yellow{background-color:var(--risk-yellow);color:rgba(0,0,0,.87)}.label-green{background-color:var(--risk-green);color:#fff}.cursor{cursor:pointer}"]
                 },] }
@@ -36464,6 +36464,7 @@
             this.formatTooltip = null;
             this.formatMsgDisable = null;
             this.maxWidthNode = 510;
+            this.skipFirstAskingScreen = false;
         }
         return QMSSelectAccessDialog;
     }());
@@ -36635,11 +36636,14 @@
                 }
             };
             for (var item in this.dialogData) {
-                if (!!this.dialogData[item] && optionObj[item]) {
+                if (!!this.dialogData[item] && optionObj[item] && !this.dialogData.skipFirstAskingScreen) {
+                    this.options.push(optionObj[item]);
+                }
+                if (this.dialogData.skipFirstAskingScreen && optionObj[item]) {
                     this.options.push(optionObj[item]);
                 }
             }
-            if (this.options.length === 1) {
+            if (this.options.length === 1 || this.dialogData.skipFirstAskingScreen) {
                 this.dialogRef.updateSize(this.dialogData.sizeUpdateDefault);
                 this.optionSelect.setValue(this.options[0].type);
                 var event$ = new select.MatSelectChange(null, this.options[0].type);
@@ -37055,7 +37059,7 @@
     QMSSelectAccessDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-select-access-dialog',
-                    template: "<div qms-dialog-container-v2 class=\"select-access-dialog-container\">\n  <div qms-dialog-header>\n    <div class=\"access-dialog-header mb-2\">\n      <span class=\"header-title\">{{dialogData.titleDialog || LANG.SELECT_ACCESS}}</span>\n      <button matDialogClose class=\"btn-close-dialog\" qms-btn-icon color=\"light\">\n        <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div [class.active]=\"optionSelect.value !== null\" qms-dialog-content class=\"qms-dialog-content\">\n    <div class=\"access-dialog-wraper\">\n      <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option  w-100\"\n        appearance=\"fill\">\n        <mat-label qms-select-input>{{LANG.TYPE}}</mat-label>\n        <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\n          disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\n\n          <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\n            {{ LANG[item.displayName] }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"body-dialog-container\">\n        <!-- Person Access -->\n        <div class=\"option-selected-content\">\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n            <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n              <mat-dialog-content>\n                <div class=\"group-filter-person-option\">\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n                    class=\"w-100\" appearance=\"fill\">\n                    <mat-label qms-select-input>{{LANG.ROLE}}</mat-label>\n                    <mat-select panelClass=\"qms-select-panel\" qms-select formControlName=\"userGroup\"\n                      disableOptionCentering>\n                      <mat-select-trigger>\n                        {{personForm.controls['userGroup'].value?.name || ''}}\n                      </mat-select-trigger>\n                      <mat-option>\n                        <ngx-mat-select-search formControlName=\"userGroupFilter\" placeholderLabel=\"{{ LANG.ROLE }}\"\n                          noEntriesFoundLabel=\"\">\n                        </ngx-mat-select-search>\n                      </mat-option>\n                      <mat-option mode=\"dark\" class=\"opt-check-icon\"\n                        *ngFor=\"let item of filteredSearchTextBox.userGroup.value\" [value]=\"item\">\n                        <span qms-elipsify position=\"top\" mode=\"dark\" class=\"text-option-content\">{{ item.name }}</span>\n                        <mat-icon class=\"check-icon\"\n                          *ngIf=\"personForm.controls['userGroup'].value?.id == item.id\">check</mat-icon>\n                      </mat-option>\n                    </mat-select>\n                    <span [@inOutAnimation] (click)=\"personForm.get('userGroup').setValue('')\" class=\"pointer \"\n                      matSuffix aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\n                      <mat-icon>close</mat-icon>\n                    </span>\n                  </mat-form-field>\n                  <!-- input field department filter person -->\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\n                    class=\"w-100 input-select-option\" qms-form qms-select-input>\n                    <mat-label>{{LANG.DEPARTMENT_UNIT}}</mat-label>\n                    <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering\n                      formControlName=\"department\">\n                      <mat-select-trigger>\n                        {{personForm.controls['department'].value?.name || ''}}\n                      </mat-select-trigger>\n                      <mat-option>\n                        <ngx-mat-select-search formControlName=\"departmentFilter\"\n                          [placeholderLabel]=\"LANG.DEPARTMENT_UNIT\" noEntriesFoundLabel=\"\">\n                        </ngx-mat-select-search>\n                      </mat-option>\n                      <mat-option class=\"opt-check-icon\" *ngFor=\"let item of filteredSearchTextBox.department.value\"\n                        [value]=\"item\">\n                        <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-option-content\">{{ item.name }}</span>\n                        <mat-icon class=\"check-icon\"\n                          *ngIf=\"personForm.controls['department'].value?.id == item.id\">check</mat-icon>\n                      </mat-option>\n                    </mat-select>\n                    <span (click)=\"setFormControlValue(['recursive','department'], [false,''])\" [@inOutAnimation]\n                      class=\"pointer\" matSuffix aria-label=\"Clear\"\n                      *ngIf=\"personForm.get('department').value && !getLoading$.value\">\n                      <mat-icon>close</mat-icon>\n                    </span>\n                  </mat-form-field>\n                </div>\n\n                <mat-slide-toggle [@inOutAnimation] *ngIf=\"personForm.controls['department'].value\"\n                  class=\"w-100 slide-toggle\" formControlName=\"recursive\" color=\"default\" qms-group-options>\n                  <span class=\"text-label\">{{LANG.INCLUDE_SUB_DEPARTMENTS}}</span>\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"w-100\" appearance=\"fill\" qms-form qms-search-field>\n                  <input matInput appearance=\"off\" [placeholder]=\"LANG.SEARCH_WITH_NAME\" formControlName=\"keyword\"\n                    type=\"text\" autocomplete=\"off\" />\n                  <button *ngIf=\"!getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\n                    (click)=\"onSearchPersonFreeText()\" class=\"pointer me-1\" matSuffix aria-label=\"Search\">\n                    <mat-icon>search</mat-icon>\n                  </button>\n                  <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n                    diameter=\"20\"></mat-progress-spinner>\n                  <span [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\"\n                    class=\"pointer btn-icon-clear d-flex justify-content-center align-items-center \" matSuffix\n                    aria-label=\"Clear\" *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\n                    <button qms-btn-icon color=\"light\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  </span>\n                </mat-form-field>\n                <button (click)=\"onFilterPerson()\" qms-btn-outlined class=\"w-100 my-1\">\n                  {{LANG.FILTER}}\n                </button>\n              </mat-dialog-content>\n\n              <mat-dialog-content class=\"items-list\">\n                <div qms-scrollbar>\n                  <div class=\"item\">\n                    <mat-checkbox [@inOutAnimation]\n                      *ngIf=\"!getLoading$.value && personFiltered.length && !dialogData.modeSelectOnePerson\"\n                      [disabled]=\"isDisabledSelectAll(OPTION_ENUM.PERSON)\" #checkPerson class=\"w-100 mb-1 checkbox-all\"\n                      (click)=\"personFiltered.length && onCheckAll(OPTION_ENUM.PERSON,checkPerson)\"\n                      [checked]=\"isCheckAll(OPTION_ENUM.PERSON)\" [indeterminate]=\"isIndeterminate(OPTION_ENUM.PERSON)\"\n                      color=\"default\" qms-group-options>\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}} </span>\n                      <span>(<b>{{personFiltered.length}}</b>)</span>\n                    </mat-checkbox>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <ng-container *ngIf=\"getLoading$.value; then loading\">\n                  </ng-container>\n                  <div [@inOutAnimation] *ngIf=\"personFiltered.length && !getLoading$.value\" [@listAnimation]\n                    class=\"item-list-wrapper\">\n                    <div class=\"item  mt-1\" [@inOutAnimation]\n                      *ngFor=\"let employee of personFiltered; trackBy: trackByFn\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOnePerson ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n                        [ngTemplateOutletContext]=\"{item: employee, type: OPTION_ENUM.PERSON}\">\n                      </ng-container>\n                    </div>\n                  </div>\n                  <div [@inOutAnimation] *ngIf=\"!personFiltered.length && !getLoading$.value\"\n                    class=\"item-list-wrapper no-result\">\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingPerson\n                    *ngIf=\"getPerson$.value.length > 10\" [length]=\"getPerson$.value.length\" [numHidden]=\"0\"\n                    [pageSize]=\"getPerson$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n                    (page)='onPaginatorEvent($event, OPTION_ENUM.PERSON)' [size]='PAGINATION_SIZE.medium'>\n                  </qms-paginator>\n                </div>\n              </mat-dialog-content>\n            </form>\n          </ng-container>\n\n          <!-- UserGroup Access -->\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\n            <div>\n              <mat-dialog-content>\n                <form (submit)=\"onFilterUserGroup()\">\n                  <mat-form-field class=\"w-100\" qms-form qms-search-field>\n                    <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\n                      placeholder=\"User group\" />\n                    <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n                      matSuffix>\n                      <mat-icon>search</mat-icon>\n                    </button>\n                    <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n                      diameter=\"20\"></mat-progress-spinner>\n                    <div [@inOutAnimation] *ngIf=\"!!userGroupForm.value && !getLoading$.value\" matSuffix\n                      qms-input-clear>\n                      <button (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </div>\n                  </mat-form-field>\n                </form>\n              </mat-dialog-content>\n              <mat-dialog-content class=\"items-list\">\n                <div qms-scrollbar>\n                  <div class=\"item\">\n                    <mat-checkbox [@inOutAnimation]\n                      *ngIf=\"!getLoading$.value && (userGroupFiltered.length && !dialogData.modeSelectOneUserGroup)\"\n                      [disabled]=\"isDisabledSelectAll(OPTION_ENUM.USER_GROUP)\" #checkUserGroup\n                      class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.USER_GROUP)\"\n                      [indeterminate]=\"isIndeterminate(OPTION_ENUM.USER_GROUP)\"\n                      (click)=\"userGroupFiltered.length && onCheckAll(OPTION_ENUM.USER_GROUP,checkUserGroup)\"\n                      qms-group-options>\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n                      <span>(<b>{{userGroupFiltered.length}}</b>)</span>\n                    </mat-checkbox>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <ng-container *ngIf=\"getLoading$.value;then loading\">\n                  </ng-container>\n                  <div *ngIf=\"userGroupFiltered.length && !getLoading$.value\" [@listAnimation]\n                    class=\"item-list-wrapper\">\n                    <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let userGroup of userGroupFiltered\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOneUserGroup ? itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n                        [ngTemplateOutletContext]=\"{item: userGroup,type: OPTION_ENUM.USER_GROUP}\">\n                      </ng-container>\n                    </div>\n                  </div>\n                  <div [@inOutAnimation] *ngIf=\"!userGroupFiltered.length && !getLoading$.value\"\n                    class=\"item-list-wrapper no-result\">\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingUserGroup class=\"my-1\"\n                    *ngIf=\"getUserGroup$.value.length > 10 \" [length]=\"getUserGroup$.value.length\" [numHidden]=\"0\"\n                    [pageSize]=\"getUserGroup$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n                    (page)='onPaginatorEvent($event, OPTION_ENUM.USER_GROUP)' [size]='PAGINATION_SIZE.medium'>\n                  </qms-paginator>\n                </div>\n              </mat-dialog-content>\n            </div>\n          </ng-container>\n\n          <!-- Department Access -->\n          <ng-container\n            *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && getLoading$.value; then loading\"></ng-container>\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && !getLoading$.value\"\n            class=\"person-access\">\n            <qms-select-department-tree #tree [rowsSkeleton]=\"8\" [config]=\"dialogData.treeDepartmentConfig\"\n              [maxWidthNode]=\"dialogData.maxWidthNode\" (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\n              (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n              (selectionNodeChangeEvent)=\"onSelectionNodeDepartmentChange($event)\"\n              (onPagingSearchEvent)=\"onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)\">\n            </qms-select-department-tree>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"optionSelect.value !== null\" class=\"result-wrapper\">\n      <div class=\"result-selected-container\">\n        <div [@inOutAnimation] *ngIf=\"(options.length === 1) || (options.length > 1 && optionSelect.value !== null)\"\n          class=\"header-title result-header\">\n          <span>\n            {{\n            dialogData.titleResult || LANG.RESULTS}}\n            <span *ngIf=\"options.length === 1 && hasItemSelected()\">\n              ({{getResultTabActive().length}})\n            </span>\n          </span>\n        </div>\n        <div class=\"result-body\">\n          <!-- Result Person  -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\n          </ng-container>\n          <!-- Result User group -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title:LANG.USER_GROUP}\">\n          </ng-container>\n          <!-- Result Department -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data: resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n  <mat-divider class=\"mx-auto\"></mat-divider>\n  <div qms-dialog-footer class=\"confirm__button__groups\" [class.none-option]=\"optionSelect.value === null\">\n    <button *ngIf=\"optionSelect.value !== null\" [disabled]=\"!hasItemSelected()\" class=\"btn-add\"\n      [class.qms-btn-disabled]=\"!hasItemSelected()\" [mat-dialog-close]=\"resultAccess\" qms-btn>\n      <span>{{LANG.ADD}}</span>\n    </button>\n    <button qms-btn-text mat-dialog-close>\n      {{LANG.CANCEL}}\n    </button>\n  </div>\n</div>\n\n<!-- Template -->\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 list chip -->\n<ng-template #listChip let-data=\"data\" let-type=\"type\">\n  <mat-chip-list [@inOutAnimation] *ngIf=\"data?.length\" class=\"panel__item qms-scrollbar\">\n    <div [@inOutAnimation_2] *ngFor=\"let item of data; let i = index\">\n      <mat-chip (click)=\"onScollToNodeTreeDepartment(item)\" [@updateItemAnimation]\n        *qmsContentChanges=\"item.children?.length\" class=\"chip-item-result\" qms-chip [removable]=\"true\">\n        <span qms-chip-body>\n          <span [qms-tool-tip]=\"generateTooltip(item)\" position=\"top\" mode=\"dark\" class=\"text-label\">\n            {{item.name}}\n            <span *ngIf=\"item.subName\">({{ item.subName }})</span>\n          </span>\n          <span class=\"chip-item-children__count ms-1\" *ngIf=\"item?.children && item?.isGroup\">\n            {{item.children.length}}/{{item.childCount}}\n          </span>\n        </span>\n        <mat-icon *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\"\n          class=\"remove-chip-icon\">cancel</mat-icon>\n        <mat-icon *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\"\n          [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</mat-icon>\n      </mat-chip>\n    </div>\n  </mat-chip-list>\n</ng-template>\n\n<!-- Template result with collapse -->\n<ng-template #viewResultCollapse let-title=\"title\" let-data=\"data\" let-type=\"type\">\n  <mat-expansion-panel qms-expansion [expanded]=\"optionSelect.value === type\">\n    <mat-expansion-panel-header>\n      <div class=\"title-content\">\n        <div class=\"qms-list-text\">\n          <div qms-line color=\"default-subtitle\">{{title}}\n            <span class=\"fw-600\">\n              ({{data?.length}})\n            </span>\n          </div>\n        </div>\n      </div>\n    </mat-expansion-panel-header>\n    <ng-container [ngTemplateOutlet]=\"listChip\" [ngTemplateOutletContext]=\"{data: data,type: type}\">\n    </ng-container>\n  </mat-expansion-panel>\n</ng-template>\n\n<!-- Template row without checkbox -->\n<ng-template #itemWithoutCheckboxTemplate let-item=\"item\" let-type=\"type\">\n  <div (click)=\"onSelectItem(type,item)\" class=\"item-without-checkbox w-100\" [class.active]=\"item.selected\">\n    <div class=\"item-content\">\n      <div class=\"text-label\">\n        <span class=\"text-label label-item fs-14 \">\n          {{ item.name }}\n        </span>\n        <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n      </div>\n      <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n    </div>\n    <div class=\"item-state\">\n      <mat-icon [@inOutAnimation] *ngIf=\"item.selected\">check</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template checkbox  -->\n<ng-template #itemCheckboxTemplate let-item=\"item\" let-type=\"type\">\n  <mat-checkbox [disabled]=\"!allowRemove(type, item)\" [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\"\n    class=\"w-100\" color=\"default\" qms-group-options>\n    <div class=\"text-label\">\n      <span class=\"text-label label-item fs-14 \">\n        {{ item.name }}\n      </span>\n      <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n    </div>\n    <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n  </mat-checkbox>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n  <div 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>",
+                    template: "<div qms-dialog-container-v2 class=\"select-access-dialog-container\">\n  <div qms-dialog-header>\n    <div class=\"access-dialog-header mb-2\">\n      <span class=\"header-title\">{{dialogData.titleDialog || LANG.SELECT_ACCESS}}</span>\n      <button matDialogClose class=\"btn-close-dialog\" qms-btn-icon color=\"light\">\n        <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n  <div [class.active]=\"optionSelect.value !== null\" qms-dialog-content class=\"qms-dialog-content\">\n    <div class=\"access-dialog-wraper\">\n      <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option  w-100\"\n        appearance=\"fill\">\n        <mat-label qms-select-input>{{LANG.TYPE}}</mat-label>\n        <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\n          disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\n\n          <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\n            {{ LANG[item.displayName] }}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n      <div class=\"body-dialog-container\">\n        <!-- Person Access -->\n        <div class=\"option-selected-content\">\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n            <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n              <mat-dialog-content>\n                <div class=\"group-filter-person-option\">\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n                    class=\"w-100\" appearance=\"fill\">\n                    <mat-label qms-select-input>{{LANG.ROLE}}</mat-label>\n                    <mat-select panelClass=\"qms-select-panel\" qms-select formControlName=\"userGroup\"\n                      disableOptionCentering>\n                      <mat-select-trigger>\n                        {{personForm.controls['userGroup'].value?.name || ''}}\n                      </mat-select-trigger>\n                      <mat-option>\n                        <ngx-mat-select-search formControlName=\"userGroupFilter\" placeholderLabel=\"{{ LANG.ROLE }}\"\n                          noEntriesFoundLabel=\"\">\n                        </ngx-mat-select-search>\n                      </mat-option>\n                      <mat-option mode=\"dark\" class=\"opt-check-icon\"\n                        *ngFor=\"let item of filteredSearchTextBox.userGroup.value\" [value]=\"item\">\n                        <span qms-elipsify position=\"top\" mode=\"dark\" class=\"text-option-content\">{{ item.name }}</span>\n                        <mat-icon class=\"check-icon\"\n                          *ngIf=\"personForm.controls['userGroup'].value?.id == item.id\">check</mat-icon>\n                      </mat-option>\n                    </mat-select>\n                    <span [@inOutAnimation] (click)=\"personForm.get('userGroup').setValue('')\" class=\"pointer \"\n                      matSuffix aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\n                      <mat-icon>close</mat-icon>\n                    </span>\n                  </mat-form-field>\n                  <!-- input field department filter person -->\n                  <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\n                    class=\"w-100 input-select-option\" qms-form qms-select-input>\n                    <mat-label>{{LANG.DEPARTMENT_UNIT}}</mat-label>\n                    <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering\n                      formControlName=\"department\">\n                      <mat-select-trigger>\n                        {{personForm.controls['department'].value?.name || ''}}\n                      </mat-select-trigger>\n                      <mat-option>\n                        <ngx-mat-select-search formControlName=\"departmentFilter\"\n                          [placeholderLabel]=\"LANG.DEPARTMENT_UNIT\" noEntriesFoundLabel=\"\">\n                        </ngx-mat-select-search>\n                      </mat-option>\n                      <mat-option class=\"opt-check-icon\" *ngFor=\"let item of filteredSearchTextBox.department.value\"\n                        [value]=\"item\">\n                        <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-option-content\">{{ item.name }}</span>\n                        <mat-icon class=\"check-icon\"\n                          *ngIf=\"personForm.controls['department'].value?.id == item.id\">check</mat-icon>\n                      </mat-option>\n                    </mat-select>\n                    <span (click)=\"setFormControlValue(['recursive','department'], [false,''])\" [@inOutAnimation]\n                      class=\"pointer\" matSuffix aria-label=\"Clear\"\n                      *ngIf=\"personForm.get('department').value && !getLoading$.value\">\n                      <mat-icon>close</mat-icon>\n                    </span>\n                  </mat-form-field>\n                </div>\n\n                <mat-slide-toggle [@inOutAnimation] *ngIf=\"personForm.controls['department'].value\"\n                  class=\"w-100 slide-toggle\" formControlName=\"recursive\" color=\"default\" qms-group-options>\n                  <span class=\"text-label\">{{LANG.INCLUDE_SUB_DEPARTMENTS}}</span>\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"w-100\" appearance=\"fill\" qms-form qms-search-field>\n                  <input matInput appearance=\"off\" [placeholder]=\"LANG.SEARCH_WITH_NAME\" formControlName=\"keyword\"\n                    type=\"text\" autocomplete=\"off\" />\n                  <button *ngIf=\"!getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\n                    (click)=\"onSearchPersonFreeText()\" class=\"pointer me-1\" matSuffix aria-label=\"Search\">\n                    <mat-icon>search</mat-icon>\n                  </button>\n                  <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n                    diameter=\"20\"></mat-progress-spinner>\n                  <span [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\"\n                    class=\"pointer btn-icon-clear d-flex justify-content-center align-items-center \" matSuffix\n                    aria-label=\"Clear\" *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\n                    <button qms-btn-icon color=\"light\">\n                      <mat-icon>close</mat-icon>\n                    </button>\n                  </span>\n                </mat-form-field>\n                <button (click)=\"onFilterPerson()\" qms-btn-outlined class=\"w-100 my-1\">\n                  {{LANG.FILTER}}\n                </button>\n              </mat-dialog-content>\n\n              <mat-dialog-content class=\"items-list\">\n                <div qms-scrollbar>\n                  <div class=\"item\">\n                    <mat-checkbox [@inOutAnimation]\n                      *ngIf=\"!getLoading$.value && personFiltered.length && !dialogData.modeSelectOnePerson\"\n                      [disabled]=\"isDisabledSelectAll(OPTION_ENUM.PERSON)\" #checkPerson class=\"w-100 mb-1 checkbox-all\"\n                      (click)=\"personFiltered.length && onCheckAll(OPTION_ENUM.PERSON,checkPerson)\"\n                      [checked]=\"isCheckAll(OPTION_ENUM.PERSON)\" [indeterminate]=\"isIndeterminate(OPTION_ENUM.PERSON)\"\n                      color=\"default\" qms-group-options>\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}} </span>\n                      <span>(<b>{{personFiltered.length}}</b>)</span>\n                    </mat-checkbox>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <ng-container *ngIf=\"getLoading$.value; then loading\">\n                  </ng-container>\n                  <div [@inOutAnimation] *ngIf=\"personFiltered.length && !getLoading$.value\" [@listAnimation]\n                    class=\"item-list-wrapper\">\n                    <div class=\"item  mt-1\" [@inOutAnimation]\n                      *ngFor=\"let employee of personFiltered; trackBy: trackByFn\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOnePerson ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n                        [ngTemplateOutletContext]=\"{item: employee, type: OPTION_ENUM.PERSON}\">\n                      </ng-container>\n                    </div>\n                  </div>\n                  <div [@inOutAnimation] *ngIf=\"!personFiltered.length && !getLoading$.value\"\n                    class=\"item-list-wrapper no-result\">\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingPerson\n                    *ngIf=\"getPerson$.value.length > 10\" [length]=\"getPerson$.value.length\" [numHidden]=\"0\"\n                    [pageSize]=\"getPerson$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n                    (page)='onPaginatorEvent($event, OPTION_ENUM.PERSON)' [size]='PAGINATION_SIZE.medium'>\n                  </qms-paginator>\n                </div>\n              </mat-dialog-content>\n            </form>\n          </ng-container>\n\n          <!-- UserGroup Access -->\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\n            <div>\n              <mat-dialog-content>\n                <form (submit)=\"onFilterUserGroup()\">\n                  <mat-form-field class=\"w-100\" qms-form qms-search-field>\n                    <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\n                      placeholder=\"User group\" />\n                    <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n                      matSuffix>\n                      <mat-icon>search</mat-icon>\n                    </button>\n                    <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n                      diameter=\"20\"></mat-progress-spinner>\n                    <div [@inOutAnimation] *ngIf=\"!!userGroupForm.value && !getLoading$.value\" matSuffix\n                      qms-input-clear>\n                      <button (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n                        <mat-icon>close</mat-icon>\n                      </button>\n                    </div>\n                  </mat-form-field>\n                </form>\n              </mat-dialog-content>\n              <mat-dialog-content class=\"items-list\">\n                <div qms-scrollbar>\n                  <div class=\"item\">\n                    <mat-checkbox [@inOutAnimation]\n                      *ngIf=\"!getLoading$.value && (userGroupFiltered.length && !dialogData.modeSelectOneUserGroup)\"\n                      [disabled]=\"isDisabledSelectAll(OPTION_ENUM.USER_GROUP)\" #checkUserGroup\n                      class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.USER_GROUP)\"\n                      [indeterminate]=\"isIndeterminate(OPTION_ENUM.USER_GROUP)\"\n                      (click)=\"userGroupFiltered.length && onCheckAll(OPTION_ENUM.USER_GROUP,checkUserGroup)\"\n                      qms-group-options>\n                      <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n                      <span>(<b>{{userGroupFiltered.length}}</b>)</span>\n                    </mat-checkbox>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <ng-container *ngIf=\"getLoading$.value;then loading\">\n                  </ng-container>\n                  <div *ngIf=\"userGroupFiltered.length && !getLoading$.value\" [@listAnimation]\n                    class=\"item-list-wrapper\">\n                    <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let userGroup of userGroupFiltered\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"dialogData.modeSelectOneUserGroup ? itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n                        [ngTemplateOutletContext]=\"{item: userGroup,type: OPTION_ENUM.USER_GROUP}\">\n                      </ng-container>\n                    </div>\n                  </div>\n                  <div [@inOutAnimation] *ngIf=\"!userGroupFiltered.length && !getLoading$.value\"\n                    class=\"item-list-wrapper no-result\">\n                    <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n                  </div>\n                  <mat-divider class=\"mx-auto\"></mat-divider>\n                  <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingUserGroup class=\"my-1\"\n                    *ngIf=\"getUserGroup$.value.length > 10 \" [length]=\"getUserGroup$.value.length\" [numHidden]=\"0\"\n                    [pageSize]=\"getUserGroup$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n                    (page)='onPaginatorEvent($event, OPTION_ENUM.USER_GROUP)' [size]='PAGINATION_SIZE.medium'>\n                  </qms-paginator>\n                </div>\n              </mat-dialog-content>\n            </div>\n          </ng-container>\n\n          <!-- Department Access -->\n          <ng-container\n            *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && getLoading$.value; then loading\"></ng-container>\n          <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && !getLoading$.value\"\n            class=\"person-access\">\n            <qms-select-department-tree #tree [rowsSkeleton]=\"8\" [config]=\"dialogData.treeDepartmentConfig\"\n              [maxWidthNode]=\"dialogData.maxWidthNode\" (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\n              (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n              (selectionNodeChangeEvent)=\"onSelectionNodeDepartmentChange($event)\"\n              (onPagingSearchEvent)=\"onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)\">\n            </qms-select-department-tree>\n          </ng-container>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"optionSelect.value !== null\" class=\"result-wrapper\">\n      <div class=\"result-selected-container\">\n        <div [@inOutAnimation] *ngIf=\"(options.length === 1) || (options.length > 1 && optionSelect.value !== null)\"\n          class=\"header-title result-header\">\n          <span>\n            {{\n            dialogData.titleResult || LANG.RESULTS}}\n            <span *ngIf=\"options.length === 1 && hasItemSelected()\">\n              ({{getResultTabActive().length}})\n            </span>\n          </span>\n        </div>\n        <div class=\"result-body\">\n          <!-- Result Person  -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\n          </ng-container>\n          <!-- Result User group -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title:LANG.USER_GROUP}\">\n          </ng-container>\n          <!-- Result Department -->\n          <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\"\n            [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n            [ngTemplateOutletContext]=\"{data: resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n  <mat-divider class=\"mx-auto\"></mat-divider>\n  <div qms-dialog-footer class=\"confirm__button__groups\" [class.none-option]=\"optionSelect.value === null\">\n    <button *ngIf=\"optionSelect.value !== null\"\n      [disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\" class=\"btn-add\"\n      [class.qms-btn-disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\"\n      [mat-dialog-close]=\"resultAccess\" qms-btn>\n      <span>{{LANG.ADD}}</span>\n    </button>\n    <button qms-btn-text mat-dialog-close>\n      {{LANG.CANCEL}}\n    </button>\n  </div>\n</div>\n\n<!-- Template -->\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 list chip -->\n<ng-template #listChip let-data=\"data\" let-type=\"type\">\n  <mat-chip-list [@inOutAnimation] *ngIf=\"data?.length\" class=\"panel__item qms-scrollbar\">\n    <div [@inOutAnimation_2] *ngFor=\"let item of data; let i = index\">\n      <mat-chip (click)=\"onScollToNodeTreeDepartment(item)\" [@updateItemAnimation]\n        *qmsContentChanges=\"item.children?.length\" class=\"chip-item-result\" qms-chip [removable]=\"true\">\n        <span qms-chip-body>\n          <span [qms-tool-tip]=\"generateTooltip(item)\" position=\"top\" mode=\"dark\" class=\"text-label\">\n            {{item.name}}\n            <span *ngIf=\"item.subName\">({{ item.subName }})</span>\n          </span>\n          <span class=\"chip-item-children__count ms-1\" *ngIf=\"item?.children && item?.isGroup\">\n            {{item.children.length}}/{{item.childCount}}\n          </span>\n        </span>\n        <mat-icon *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\"\n          class=\"remove-chip-icon\">cancel</mat-icon>\n        <mat-icon *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\"\n          [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</mat-icon>\n      </mat-chip>\n    </div>\n  </mat-chip-list>\n</ng-template>\n\n<!-- Template result with collapse -->\n<ng-template #viewResultCollapse let-title=\"title\" let-data=\"data\" let-type=\"type\">\n  <mat-expansion-panel qms-expansion [expanded]=\"optionSelect.value === type\">\n    <mat-expansion-panel-header>\n      <div class=\"title-content\">\n        <div class=\"qms-list-text\">\n          <div qms-line color=\"default-subtitle\">{{title}}\n            <span class=\"fw-600\">\n              ({{data?.length}})\n            </span>\n          </div>\n        </div>\n      </div>\n    </mat-expansion-panel-header>\n    <ng-container [ngTemplateOutlet]=\"listChip\" [ngTemplateOutletContext]=\"{data: data,type: type}\">\n    </ng-container>\n  </mat-expansion-panel>\n</ng-template>\n\n<!-- Template row without checkbox -->\n<ng-template #itemWithoutCheckboxTemplate let-item=\"item\" let-type=\"type\">\n  <div (click)=\"onSelectItem(type,item)\" class=\"item-without-checkbox w-100\" [class.active]=\"item.selected\">\n    <div class=\"item-content\">\n      <div class=\"text-label\">\n        <span class=\"text-label label-item fs-14 \">\n          {{ item.name }}\n        </span>\n        <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n      </div>\n      <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n    </div>\n    <div class=\"item-state\">\n      <mat-icon [@inOutAnimation] *ngIf=\"item.selected\">check</mat-icon>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Template checkbox  -->\n<ng-template #itemCheckboxTemplate let-item=\"item\" let-type=\"type\">\n  <mat-checkbox [disabled]=\"!allowRemove(type, item)\" [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\"\n    class=\"w-100\" color=\"default\" qms-group-options>\n    <div class=\"text-label\">\n      <span class=\"text-label label-item fs-14 \">\n        {{ item.name }}\n      </span>\n      <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n    </div>\n    <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n  </mat-checkbox>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n  <div 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>",
                     animations: [SelectAccessAnimationTrigger],
                     providers: [
                         {
@@ -37243,7 +37247,7 @@
             this._handleActiveNodeEvent();
             this._handleItemSelectionChanged();
             this.getLoading$.pipe(operators.takeUntil(this.ngUnsubscribe), operators.tap(function (res) {
-                res ? _this.formSearchControl.disable() : _this.formSearchControl.enable();
+                // res ? this.formSearchControl.disable() : this.formSearchControl.enable();
             })).subscribe();
         }
         Object.defineProperty(SelectProcessDataTreeComponent.prototype, "rowsSkeleton", {
@@ -37311,8 +37315,8 @@
                 if (value === 0)
                     _this.cdkVirtualScrollViewport &&
                         _this.cdkVirtualScrollViewport.scrolledIndexChange
-                            .pipe(operators.takeUntil(_this.untilDestroyLoadMore$), operators.map(function (_) { return _this.cdkVirtualScrollViewport.measureScrollOffset('bottom'); }), operators.pairwise(), operators.filter(function (_b) {
-                            var _c = __read(_b, 2), x1 = _c[0], x2 = _c[1];
+                            .pipe(operators.takeUntil(_this.untilDestroyLoadMore$), operators.map(function (_) { return _this.cdkVirtualScrollViewport.measureScrollOffset('bottom'); }), operators.pairwise(), operators.filter(function (_c) {
+                            var _d = __read(_c, 2), x1 = _d[0], x2 = _d[1];
                             return x1 > x2 && x2 < 140;
                         }), operators.throttleTime(200), operators.tap(function (_) {
                             if (_this.getLoadingMore$.value)
@@ -37333,8 +37337,14 @@
             this.cdRef.detectChanges();
         };
         SelectProcessDataTreeComponent.prototype.ngOnInit = function () {
+            var _this = this;
             this.isIncludeChildren = this.config.isIncludeChildren;
             this._initTreeData();
+            this.formSearchControl.valueChanges.pipe(operators.debounceTime(2000), operators.takeUntil(this.ngUnsubscribe)).subscribe(function (val) {
+                if (typeof val === 'string' && val && val.trim().length >= 2) {
+                    _this.onSearch();
+                }
+            });
             if (!this.config.lazy) {
                 this._handleListSelected();
                 return;
@@ -37382,7 +37392,7 @@
             this.cdRef.detectChanges();
         };
         SelectProcessDataTreeComponent.prototype._initListSelected = function () {
-            var _b;
+            var _c;
             this._selectedList = this.treeDepartmentService.convertToTreeData(this.config.selectedList);
             //Convert array selectedList into nested array as 1 level form
             var indexRemove = [];
@@ -37400,7 +37410,7 @@
                 _loop_1(i);
             }
             this._selectedList = this._selectedList.filter(function (_, index) { return !indexRemove.includes(index); });
-            (_b = this.resultSelected).push.apply(_b, __spreadArray([], __read(this._selectedList)));
+            (_c = this.resultSelected).push.apply(_c, __spreadArray([], __read(this._selectedList)));
             this.onValueChangeEvent.emit(this.resultSelected);
         };
         // handle selected list when data nodes change
@@ -37419,7 +37429,7 @@
                         }
                     });
                     var _loop_2 = function (i) {
-                        var _b;
+                        var _c;
                         var element = data[i];
                         var item = _this._selectedList.find(function (x) { var _a; return x.id === element.id || ((_a = x.children) === null || _a === void 0 ? void 0 : _a.some(function (x1) { return x1.id === element.id; })); });
                         if (!!item) {
@@ -37442,7 +37452,7 @@
                                     _nestedNode.groupId = item.children[0].groupId;
                                     _nestedNode.isGroup = false;
                                 });
-                                (_b = _this.checkListSelection).select.apply(_b, __spreadArray([], __read(itemSelect)));
+                                (_c = _this.checkListSelection).select.apply(_c, __spreadArray([], __read(itemSelect)));
                             }
                         }
                     };
@@ -37460,8 +37470,8 @@
          */
         SelectProcessDataTreeComponent.prototype.onBeforeInitNodeSelected = function (callback) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             if (!this.config.lazy)
                                 return [2 /*return*/];
@@ -37469,8 +37479,8 @@
                             if (!!!callback) return [3 /*break*/, 2];
                             return [4 /*yield*/, callback()];
                         case 1:
-                            _b.sent();
-                            _b.label = 2;
+                            _c.sent();
+                            _c.label = 2;
                         case 2:
                             this.onBeforeInitNodeSelected$.next();
                             return [2 /*return*/];
@@ -37483,8 +37493,8 @@
             var _this = this;
             this.checkListSelection.changed
                 .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (_b) {
-                var added = _b.added, removed = _b.removed;
+                .subscribe(function (_c) {
+                var added = _c.added, removed = _c.removed;
                 var checkExistInResult = function (node) { return _this.resultSelected.findIndex(function (x) { return x.id === node.id; }) > -1; };
                 if (added.length) {
                     added.forEach(function (node) {
@@ -37675,7 +37685,7 @@
             this.onScrollIntoNode(flatNode.id);
         };
         SelectProcessDataTreeComponent.prototype.onCheckAllRootTreeNode = function () {
-            var _b;
+            var _c;
             var _this = this;
             if (this.config.isSelectOne || !this.config.activeSelectAllNode)
                 return;
@@ -37684,7 +37694,7 @@
                     var nestedNode = _this.convertToNestedNode(node);
                     nestedNode.isGroup = false;
                 });
-                (_b = this.checkListSelection).deselect.apply(_b, __spreadArray([], __read(this.treeControl.dataNodes)));
+                (_c = this.checkListSelection).deselect.apply(_c, __spreadArray([], __read(this.treeControl.dataNodes)));
                 return;
             }
             ;
@@ -37797,7 +37807,7 @@
             this.handleCheckNode(flatNode);
         };
         SelectProcessDataTreeComponent.prototype.onSelectNode = function () {
-            var _b;
+            var _c;
             var nodeIds = [];
             for (var _i = 0; _i < arguments.length; _i++) {
                 nodeIds[_i] = arguments[_i];
@@ -37805,10 +37815,10 @@
             var nodes = this.treeControl.dataNodes.filter(function (x) { return nodeIds.includes(x.id); });
             if (!nodes.length)
                 return;
-            (_b = this.checkListSelection).select.apply(_b, __spreadArray([], __read(nodes)));
+            (_c = this.checkListSelection).select.apply(_c, __spreadArray([], __read(nodes)));
         };
         SelectProcessDataTreeComponent.prototype.onDeselectNode = function () {
-            var _b;
+            var _c;
             var nodeIds = [];
             for (var _i = 0; _i < arguments.length; _i++) {
                 nodeIds[_i] = arguments[_i];
@@ -37816,7 +37826,7 @@
             var nodes = this.treeControl.dataNodes.filter(function (x) { return nodeIds.includes(x.id); });
             if (!nodes.length)
                 return;
-            (_b = this.checkListSelection).deselect.apply(_b, __spreadArray([], __read(nodes)));
+            (_c = this.checkListSelection).deselect.apply(_c, __spreadArray([], __read(nodes)));
         };
         /**
          * Toggles a value between selected and deselected.
@@ -37846,15 +37856,15 @@
          */
         SelectProcessDataTreeComponent.prototype.onBeforeCheckNode = function (node, callback) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             this._handlingLazyObject.checkNode = true;
                             if (!!!callback) return [3 /*break*/, 2];
                             return [4 /*yield*/, callback(node)];
                         case 1:
-                            _b.sent();
-                            _b.label = 2;
+                            _c.sent();
+                            _c.label = 2;
                         case 2:
                             this.handleCheckNode(node);
                             this._handlingLazyObject.checkNode = false;
@@ -37864,7 +37874,7 @@
             });
         };
         SelectProcessDataTreeComponent.prototype.handleCheckNode = function (node) {
-            var _b, _c, _d;
+            var _c, _d, _e;
             var _this = this;
             var isSelected = this.isSelectedNode(node);
             var childSelected = this.getChildrenSelected(node);
@@ -37886,14 +37896,14 @@
                     _node.isGroup = false;
                 });
                 this.updateDataTree(this.currentTreeData);
-                (_b = this.checkListSelection).deselect.apply(_b, __spreadArray([], __read(childSelected.map(function (x) { return _this.resetNode(x); }))));
-                (_c = this.checkListSelection).select.apply(_c, __spreadArray([], __read(children.map(function (x) { return _this.resetNode(x); }))));
+                (_c = this.checkListSelection).deselect.apply(_c, __spreadArray([], __read(childSelected.map(function (x) { return _this.resetNode(x); }))));
+                (_d = this.checkListSelection).select.apply(_d, __spreadArray([], __read(children.map(function (x) { return _this.resetNode(x); }))));
                 return;
             }
             var _selectedIndex = this._selectedList.findIndex(function (x) { return x.id === node.id; });
             _selectedIndex > -1 && this._selectedList.splice(_selectedIndex, 1);
             var deselectNodes = (this.isIncludeChildren || nestedNode.isGroup) ? childSelected : [node];
-            (_d = this.checkListSelection).deselect.apply(_d, __spreadArray([], __read(deselectNodes)));
+            (_e = this.checkListSelection).deselect.apply(_e, __spreadArray([], __read(deselectNodes)));
             nestedNode.isGroup = false;
             this.updateDataTree(this.currentTreeData);
             return;
@@ -37974,8 +37984,8 @@
             this.getActiveNodeEvent$.next(nodeId);
         };
         SelectProcessDataTreeComponent.prototype.onSearch = function () {
-            var _a;
-            if (!this.formSearchControl.value || ((_a = this.formSearchControl.value) === null || _a === void 0 ? void 0 : _a.trim()) === '')
+            var _a, _b;
+            if (!this.formSearchControl.value || ((_a = this.formSearchControl.value) === null || _a === void 0 ? void 0 : _a.trim()) === '' || ((_b = this.formSearchControl.value) === null || _b === void 0 ? void 0 : _b.trim().length) < 2)
                 return;
             this.getLoading$.next(true);
             this.setIndexView(1);
@@ -38005,10 +38015,10 @@
             }
         };
         SelectProcessDataTreeComponent.prototype.onCheckItemSearchResult = function (item) {
-            var _b;
+            var _c;
             this.checkListSelectionSearch.toggle(item);
             if (this.config.isSelectOne) {
-                (_b = this.checkListSelectionSearch).deselect.apply(_b, __spreadArray([], __read(this.checkListSelectionSearch.selected.filter(function (x) { return x.id != item.id; }))));
+                (_c = this.checkListSelectionSearch).deselect.apply(_c, __spreadArray([], __read(this.checkListSelectionSearch.selected.filter(function (x) { return x.id != item.id; }))));
             }
             this.onCheckItemSearchEvent.emit({
                 state: this.checkListSelectionSearch.isSelected(item),
@@ -38027,8 +38037,8 @@
         SelectProcessDataTreeComponent.prototype.onBeforeCheckItemSearch = function (item, callback) {
             return __awaiter(this, void 0, void 0, function () {
                 var isSelect;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             item.isLoading = true;
                             this._handlingLazyObject.checkItemSearch = true;
@@ -38036,8 +38046,8 @@
                             if (!!!callback) return [3 /*break*/, 2];
                             return [4 /*yield*/, callback(item)];
                         case 1:
-                            _b.sent();
-                            _b.label = 2;
+                            _c.sent();
+                            _c.label = 2;
                         case 2:
                             item.isLoading = false;
                             this._handleCheckResutlSearch(item, isSelect);
@@ -38051,15 +38061,15 @@
         SelectProcessDataTreeComponent.prototype.onBeforeCheckAllSearch = function (callback) {
             return __awaiter(this, void 0, void 0, function () {
                 var i, item;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             this._handlingLazyObject.checkAllSearch = true;
                             if (!!!callback) return [3 /*break*/, 2];
                             return [4 /*yield*/, callback(this.resultSearch)];
                         case 1:
-                            _b.sent();
-                            _b.label = 2;
+                            _c.sent();
+                            _c.label = 2;
                         case 2:
                             this._handlingLazyObject.checkAllSearch = false;
                             if (!this.resultSearch.length)
@@ -38162,7 +38172,7 @@
                 return;
             if (this.config.handleCheckAllItemSearch) {
                 var _loop_4 = function (i) {
-                    var _b;
+                    var _c;
                     var item = this_2.resultSearch[i];
                     if (checked) {
                         var treeNode = this_2.treeControl.dataNodes.find(function (node) { return node.id === item.id; });
@@ -38174,7 +38184,7 @@
                     else {
                         var _itemSelections = this_2.checkListSelectionSearch.selected.filter(function (x) { return x.id === item.id; });
                         if (_itemSelections.length)
-                            (_b = this_2.checkListSelectionSearch).deselect.apply(_b, __spreadArray([], __read(_itemSelections)));
+                            (_c = this_2.checkListSelectionSearch).deselect.apply(_c, __spreadArray([], __read(_itemSelections)));
                     }
                     if (!this_2.config.lazy || !this_2._handlingLazyObject.checkAllSearch)
                         this_2._handleCheckResutlSearch(item, checked);
@@ -38231,7 +38241,7 @@
              * @param mode default is update that replace current list children by new list children , if mode = 'insert' will insert new values to list children existed before.
         */
         SelectProcessDataTreeComponent.prototype.updateChildOfNode = function (node, data, mode) {
-            var _b;
+            var _c;
             if (data === void 0) { data = []; }
             if (mode === void 0) { mode = 'update'; }
             node.isLoading = false;
@@ -38242,7 +38252,7 @@
                 return;
             switch (mode) {
                 case 'insert':
-                    (_b = nestedNode.children).push.apply(_b, __spreadArray([], __read(dataNodes)));
+                    (_c = nestedNode.children).push.apply(_c, __spreadArray([], __read(dataNodes)));
                     break;
                 case 'update':
                     nestedNode.children = dataNodes;
@@ -38347,7 +38357,7 @@
     SelectProcessDataTreeComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'qms-select-process-data-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=\"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                              'mat-tree-node-disabled-all': node.disabled,\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                        }\">\n              <div class=\"node-expand-area\">\n                <button class=\"btn-toggle\" qms-btn-icon color=\"light\" (click)=\"onExpandNode(node)\"\n                  *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\n                  <mat-icon>\n                    {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\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\" [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      <span class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name}}\n      </span>\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 *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\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\"></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\" *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                              'mat-tree-node-disabled-all': node.disabled,\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                        }\">\n              <div class=\"node-expand-area\">\n                <button class=\"btn-toggle\" qms-btn-icon color=\"light\" (click)=\"onExpandNode(node)\"\n                  *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\n                  <mat-icon>\n                    {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\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\" [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      <span class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name}}\n      </span>\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 *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\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\"></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
                     ],