qms-angular 1.1.48 → 1.1.49

Sign up to get free protection for your applications and to get access to all the features.
Files changed (24) hide show
  1. package/bundles/qms-angular.umd.js +23 -17
  2. package/bundles/qms-angular.umd.js.map +1 -1
  3. package/esm2015/lib/components/select-department/model/select-department-popup-data.model.js +2 -1
  4. package/esm2015/lib/components/select-department/select-department.component.js +2 -2
  5. package/esm2015/lib/components/select-department-tree/select-department-tree.component.js +2 -2
  6. package/esm2015/lib/model/en.js +3 -1
  7. package/esm2015/lib/model/no.js +3 -1
  8. package/esm2015/lib/qms-ckeditor-components/common/functions/common.function.js +3 -3
  9. package/esm2015/lib/qms-ckeditor-components/components/qms-ckeditor-bpmn/qms-ckeditor-bpmn.component.js +5 -3
  10. package/esm2015/lib/qms-ckeditor-components/models/document-tree-node-data.model.js +3 -0
  11. package/esm2015/lib/qms-ckeditor-components/qms-ckeditor.component.js +3 -2
  12. package/esm2015/lib/qms-ckeditor-components/services/qms-ckeditor-bpmn.service.js +9 -11
  13. package/fesm2015/qms-angular.js +23 -16
  14. package/fesm2015/qms-angular.js.map +1 -1
  15. package/lib/components/select-department/model/select-department-popup-data.model.d.ts +1 -0
  16. package/lib/model/en.d.ts +2 -0
  17. package/lib/model/no.d.ts +2 -0
  18. package/lib/qms-ckeditor-components/components/qms-ckeditor-bpmn/qms-ckeditor-bpmn.component.d.ts +4 -3
  19. package/lib/qms-ckeditor-components/models/{process-document-tree-node-data.model.d.ts → document-tree-node-data.model.d.ts} +1 -1
  20. package/lib/qms-ckeditor-components/services/qms-ckeditor-bpmn.service.d.ts +1 -1
  21. package/package.json +1 -1
  22. package/qms-angular.metadata.json +1 -1
  23. package/src/lib/qms-ckeditor-components/components/qms-ckeditor-bpmn/qms-ckeditor-bpmn.component.scss +11 -0
  24. package/esm2015/lib/qms-ckeditor-components/models/process-document-tree-node-data.model.js +0 -3
@@ -541,6 +541,8 @@
541
541
  "CONFIRM_DELETE_EXISTING_CONNECTION": "You must remove existing connection before you do this action.",
542
542
  "CONFIRM_DELETE_ATTACHMENT": "Are you sure you want to delete this link?",
543
543
  "CONFIRM_DELETE_DOCUMENT_OR_PROCESS": "Are you sure you want to delete this document / process?",
544
+ "CONFIRM_DELETE_DEVIATION": "Are you sure you want to delete this deviation?",
545
+ "CONFIRM_DELETE_CHECKLIST": "Are you sure you want to delete this checklist?",
544
546
  },
545
547
  "FLOWCHART": {
546
548
  "REMOVE_ELEMENT": 'Click to remove the object',
@@ -1101,6 +1103,8 @@
1101
1103
  "CONFIRM_DELETE_EXISTING_CONNECTION": "Du må fjerne den eksisterende tilkoblingen før du utfører denne handlingen.",
1102
1104
  "CONFIRM_DELETE_ATTACHMENT": "Er du sikker på at du vil slette denne linken?",
1103
1105
  "CONFIRM_DELETE_DOCUMENT_OR_PROCESS": "Er du sikker på at du vil slette dette dokumentet / prosessen?",
1106
+ "CONFIRM_DELETE_DEVIATION": "Er du sikker på at du vil slette dette avvik?",
1107
+ "CONFIRM_DELETE_CHECKLIST": "Er du sikker på at du vil slette dette sjekklisten?",
1104
1108
  },
1105
1109
  "FLOWCHART": {
1106
1110
  "REMOVE_ELEMENT": 'Klikk for å fjerne objektet',
@@ -14070,8 +14074,8 @@
14070
14074
  '|',
14071
14075
  'imageMap',
14072
14076
  '|',
14073
- // 'qmsFlowchart',
14074
- // '|',
14077
+ 'qmsFlowchart',
14078
+ '|',
14075
14079
  'qmsBpmn'
14076
14080
  ],
14077
14081
  resizeOptions: [
@@ -16915,16 +16919,14 @@
16915
16919
  this.ngUnsubscribe.next();
16916
16920
  this.ngUnsubscribe.complete();
16917
16921
  };
16918
- BpmnService.prototype.buildDiagram = function (diagramTemplates, diagramTemplate, bpmnTheme, jsonContent, editMode, shapeImages, toolbarConfiguration) {
16919
- var _this = this;
16920
- this.translate.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (res) {
16921
- if (res) {
16922
- _this.LANG = _this.translate.getObjectLang(res);
16923
- }
16924
- if (_this.LANG) {
16925
- _this.excutedBuildDiagram(diagramTemplates, diagramTemplate, bpmnTheme, jsonContent, editMode, _this.LANG, shapeImages, toolbarConfiguration);
16926
- }
16927
- });
16922
+ BpmnService.prototype.buildDiagram = function (diagramTemplates, diagramTemplate, bpmnTheme, jsonContent, editMode, shapeImages, toolbarConfiguration, language) {
16923
+ if (!language) {
16924
+ this.LANG = this.translate.getObjectLang('en');
16925
+ }
16926
+ else {
16927
+ this.LANG = this.translate.getObjectLang(language);
16928
+ }
16929
+ this.excutedBuildDiagram(diagramTemplates, diagramTemplate, bpmnTheme, jsonContent, editMode, this.LANG, shapeImages, toolbarConfiguration);
16928
16930
  };
16929
16931
  BpmnService.prototype.excutedBuildDiagram = function (diagramTemplates, diagramTemplate, bpmnTheme, jsonContent, editMode, LANG, shapeImages, toolbarConfiguration) {
16930
16932
  var _this = this;
@@ -19040,6 +19042,7 @@
19040
19042
  _this.shapeModel = new ShapeModel();
19041
19043
  _this.targets = [];
19042
19044
  _this.anchors = [];
19045
+ _this.language = 'en';
19043
19046
  _this.id = data.id;
19044
19047
  _this.module = data.module;
19045
19048
  _this.entityId = data.entityId;
@@ -19059,6 +19062,7 @@
19059
19062
  this.QMSBPMNConfig.editMode = exports.FlowchartViewMode.Edit;
19060
19063
  this.translate.getLanguageSubject$.pipe(operators.takeUntil(this.ngUnsubcribe)).subscribe(function (res) {
19061
19064
  if (res) {
19065
+ _this.language = res;
19062
19066
  _this.LANG = _this.translate.getObjectLang(res);
19063
19067
  _this.QMSBPMNConfig.changeTemplatePopupContent = _this.LANG.BPMN.CHANGE_TEMPLATE_NOTE;
19064
19068
  }
@@ -19083,7 +19087,7 @@
19083
19087
  _d.jsonContent = _e.sent();
19084
19088
  _e.label = 3;
19085
19089
  case 3:
19086
- this.bpmnService.buildDiagram(temlates, this.template, 'default joint-theme-bpmn', this.jsonContent, this.QMSBPMNConfig.editMode, null, ToolbarFunction$1.getToolbarConfiguration(this.LANG));
19090
+ this.bpmnService.buildDiagram(temlates, this.template, 'default joint-theme-bpmn', this.jsonContent, this.QMSBPMNConfig.editMode, null, ToolbarFunction$1.getToolbarConfiguration(this.LANG), this.language);
19087
19091
  this.splitView = this.QMSBPMNConfig.showProcessDocumentTreeDataInSplitView;
19088
19092
  this.initConnectionTypes();
19089
19093
  this.initTarget();
@@ -19961,7 +19965,7 @@
19961
19965
  { type: i0.Component, args: [{
19962
19966
  selector: 'qms-ckeditor-bpmn',
19963
19967
  template: "<div id=\"qmsckeditor-bpmn\" class=\"qmsckeditor qmsckeditor__bpmn__container\">\n <div id=\"qmsckeditor-load-template-header\">\n <span id=\"qmsckeditor-bpmn-header_001\" mat-icon-button class=\"qmsckeditor button__close\" (click)=\"onCloseDialog()\">\n <mat-icon>close</mat-icon>\n </span>\n <span id=\"qmsckeditor-bpmn-header_002\" mat-icon-button class=\"qmsckeditor button__done\" (click)=\"onInsertImage()\">\n <mat-icon>done</mat-icon>\n </span>\n <div id=\"qmsckeditor-load-template-header_002\" mat-dialog-content>\n <h2 id=\"qmsckeditor-template_002_001\">\n {{ LANG.BPMN.BUSINESS_PROCESS_MODEL_AND_NOTATION }}\n </h2>\n </div>\n </div>\n <div class=\"mask-overlay\" *ngIf=\"loadingRelatedData\">\n <mat-spinner class=\"spinner\" diameter=\"65\"></mat-spinner>\n </div>\n <qms-bpmn [QMSBPMNConfig]=\"QMSBPMNConfig\" [shapeModel]=\"shapeModel\" [targets]=\"targets\" [anchors]=\"anchors\"\n (onSelectConnectType)=\"selectConnectType($event)\" (onSaveAsTemplate)=\"saveAsTemplate($event)\"\n (onDeleteTemplate)=\"deleteTemplate()\" (onSelectTemplate)=\"selectTemplate()\" (onResetTemplate)=\"resetTemplate()\"\n (onGetShapeActivity)=\"getShapeActivity($event)\" (onChangeShapeTarget)=\"saveShapeTarget($event)\"\n (onChangeShapeAnchor)=\"saveShapeAnchor($event)\" (onReloadAnchorDocumentClick)=\"reloadAnchorDocument()\"\n (onDeleteConnection)=\"deleteConnection($event)\"></qms-bpmn>\n</div>",
19964
- styles: [":host ::ng-deep .qmsckeditor__bpmn__container ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .qmsckeditor__bpmn__container .mask-overlay{z-index:1000;background-color:rgba(34,33,33,.1);position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}"]
19968
+ styles: [":host ::ng-deep .qmsckeditor__bpmn__container ::ng-deep .mat-tab-body-wrapper{height:100%}:host ::ng-deep .qmsckeditor__bpmn__container .mask-overlay{z-index:1000;background-color:rgba(34,33,33,.1);position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}:host ::ng-deep .qmsckeditor__bpmn__container .joint-widget.joint-theme-default[data-type=zoomToFit]:after{display:block;content:\" \";background-color:transparent;background-repeat:no-repeat;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggc3R5bGU9InN0cm9rZTpub25lO2ZpbGwtcnVsZTpub256ZXJvO2ZpbGw6IzAwMDtmaWxsLW9wYWNpdHk6MSIgZD0iTTMgMjF2LTUuNzVoMS41djMuMTc2bDMuNy0zLjcgMS4wNzMgMS4wNzVMNS41NzQgMTkuNUg4Ljc1VjIxWm0xMi4yNSAwdi0xLjVoMy4xNzZsLTMuNjc2LTMuNjc2IDEuMDc0LTEuMDc0IDMuNjc2IDMuNjc2VjE1LjI1SDIxVjIxWk04LjE3NiA5LjI1IDQuNSA1LjU3NFY4Ljc1SDNWM2g1Ljc1djEuNUg1LjU3NEw5LjI1IDguMTc2Wm03LjY0OCAwTDE0Ljc1IDguMTc2IDE4LjQyNiA0LjVIMTUuMjVWM0gyMXY1Ljc1aC0xLjVWNS41NzRabTAgMCIvPjwvc3ZnPg==\")!important;width:50px;height:50px;background-position:7px 7px}"]
19965
19969
  },] }
19966
19970
  ];
19967
19971
  QMSCKEditorBpmnComponent.ctorParameters = function () { return [
@@ -29497,7 +29501,8 @@
29497
29501
  });
29498
29502
  var toolbarItems = this.qmsckPlugin.itemToolbar;
29499
29503
  if (this.isEnabledToggleToolbar() && this.qmsckData.toggledToolbarItems) {
29500
- var strToolbars = this.qmsckData.toggledToolbarItems.replace(/qmsFlowchart,/g, "");
29504
+ // let strToolbars = this.qmsckData.toggledToolbarItems.replace(/qmsFlowchart,/g, "");
29505
+ var strToolbars = this.qmsckData.toggledToolbarItems;
29501
29506
  if (!this.qmsckData.enableTemplate) {
29502
29507
  strToolbars = strToolbars.replace(/qmsTemplate,/g, ""); // disable qmsTemplate if user don't have handbookAdmin Role
29503
29508
  }
@@ -35355,7 +35360,7 @@
35355
35360
  SelectDepartmentTreeComponent.decorators = [
35356
35361
  { type: i0.Component, args: [{
35357
35362
  selector: 'qms-select-department-tree',
35358
- 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 '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) ? node?.expandIcon?.collapse : node?.expandIcon?.expand }}\n </mat-icon>\n </button>\n <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\n </div>\n <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\n <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\n {{node.externalName || ''}}\n </span>\n </div>\n </div>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\n height: height\n }\" class=\"qms-view-search-result\">\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\n <div class=\"header-title\">\n <span qms-elipsify mode=\"dark\" position=\"top\">\n {{config.headerName.resultSearchName}}\n </span>\n </div>\n <div class=\"header-title\">\n <span qms-elipsify mode=\"dark\" position=\"top\">\n {{config.headerName.externalName}}\n </span>\n </div>\n </div>\n <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\n <div class=\"qms-view-search-result__wrapper\"\n [class.active-external]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n *ngIf=\"!!resultSearch.length && !getLoading$.value\">\n <div class=\"\">\n <mat-checkbox [@inOutAnimation]\n [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\n [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\n color=\"default\" label=\"none\" class=\"checkbox-all\"\n (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n <span>(<b>{{resultSearch.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <div [@inOutAnimation] [@listAnimation]\n [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\n <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\n position=\"top\" *ngFor=\"let item of resultSearch\"\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n [class.active]=\"checkListSelectionSearch.isSelected(item)\" class=\"result-item user-select-none\" matRipple>\n <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading\" [disabled]=\"item.disabled\"\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\n </mat-checkbox>\n <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\n <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\n </div>\n <div class=\"result-item__content\">\n <div class=\"item-result-content-wraper\">\n <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\n <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\n [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\n [nodes]=\"item.location\">\n </qms-breadcrumb>\n <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\n <span qms-elipsify mode=\"dark\" position=\"top\"\n class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\n </div>\n </div>\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\n <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\n class=\"mx-auto\"></mat-divider>\n <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\n [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\n [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\n [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </div>\n\n <!-- Template for Checkbox -->\n <ng-template #showCheckboxTemplate let-node=\"node\">\n <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\n [disabled]=\"node.isLoading || node.disabled\" [checked]=\"checkListSelection.isSelected(node)\"\n (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\n <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\n [src]=\"node.itemIconSvg\" />\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n node.itemMatIcon }}\n </span>\n <div class=\"node-text\" [ngStyle]=\"{\n maxWidth: (maxWidthNode - 20*node.level)+ 'px'\n }\">\n <span qms-elipsify [mode]=\"'dark'\" position=\"top\" class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled}\">{{ node.name}}\n </span>\n </div>\n </mat-checkbox>\n </ng-template>\n\n <!-- Template node without checkbox -->\n <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\n <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\n <div class=\"node-info\">\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n node.itemMatIcon }}\n </span>\n <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\n </div>\n <div class=\"node-state\">\n <mat-icon *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\" color=\"primary\"></mat-spinner>\n </div>\n</ng-template>\n\n<!-- Loading spinner -->\n<ng-template #loadingSpinner>\n <div class=\"qms-spinner center\">\n <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\n </div>\n</ng-template>\n",
35363
+ template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\n <div class=\"input-select-department\">\n <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\n <mat-form-field class=\"w100\" qms-form qms-search-field>\n <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput />\n <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\n *ngIf=\"getLoading$.value\"></mat-progress-spinner>\n <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\n <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </mat-form-field>\n </form>\n <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\n class=\"sub-text ms-1 fw500\">\n {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\n </div>\n <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\n class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end align-items-center\">\n <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\n [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\n [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\n qms-group-options>\n <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\n </mat-slide-toggle>\n <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\n (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\n position=\"top\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n <button class=\"btn-arrow\" [@inOutAnimation]\n *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\n (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\n position=\"top\">\n <mat-icon>arrow_forward</mat-icon>\n </button>\n </div>\n </div>\n <div [@inOutAnimation]\n *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\n class=\"header-view-tree\">\n <div class=\"header-view header-title\">\n {{config.headerName.treeName}}\n </div>\n <div class=\"header-view header-title\">\n {{config.headerName.externalName}}\n </div>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\n minHeight: height\n }\" class=\"tree-department-wrapper\">\n <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\n <div class=\"tree-view-main h100\">\n <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\n class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\n <!-- Checkbox all root node -->\n <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\n [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\n color=\"default\" label=\"none\" class=\"checkbox-all\">\n <span class=\"text-label \">{{LANG.CHOOSE_ALL}}</span>\n <span>(<b>{{treeControl.dataNodes.length}}</b>)</span>\n </mat-checkbox>\n <mat-divider class=\"mx-auto\"></mat-divider>\n </div>\n <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\n 'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\n 'select-department-tree': true\n }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\n <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\n <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\n [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\n 'w-100': config.isSelectOne,\n 'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\n 'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\n 'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\n 'node-loading': node.isLoading\n }\">\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) ? node?.expandIcon?.collapse : node?.expandIcon?.expand }}\n </mat-icon>\n </button>\n <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\n </div>\n <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\n <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\n {{node.externalName || ''}}\n </span>\n </div>\n </div>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\n height: height\n }\" class=\"qms-view-search-result\">\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\n <div class=\"header-title\">\n <span qms-elipsify mode=\"dark\" position=\"top\">\n {{config.headerName.resultSearchName}}\n </span>\n </div>\n <div class=\"header-title\">\n <span qms-elipsify mode=\"dark\" position=\"top\">\n {{config.headerName.externalName}}\n </span>\n </div>\n </div>\n <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\n <div class=\"qms-view-search-result__wrapper\"\n [class.active-external]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n *ngIf=\"!!resultSearch.length && !getLoading$.value\">\n <div class=\"\">\n <mat-checkbox [@inOutAnimation]\n [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\n [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\n color=\"default\" label=\"none\" class=\"checkbox-all\"\n (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n <span>(<b>{{resultSearch.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <div [@inOutAnimation] [@listAnimation]\n [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\n <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\n position=\"top\" *ngFor=\"let item of resultSearch\"\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n [class.active]=\"checkListSelectionSearch.isSelected(item)\" class=\"result-item user-select-none\" matRipple>\n <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading\" [disabled]=\"item.disabled\"\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\n </mat-checkbox>\n <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\n <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\n </div>\n <div class=\"result-item__content\">\n <div class=\"item-result-content-wraper\">\n <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\n <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\n [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\n [nodes]=\"item.location\">\n </qms-breadcrumb>\n <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\n <span qms-elipsify mode=\"dark\" position=\"top\"\n class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\n </div>\n </div>\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\n <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\n class=\"mx-auto\"></mat-divider>\n <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\n [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\n [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\n [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </div>\n\n <!-- Template for Checkbox -->\n <ng-template #showCheckboxTemplate let-node=\"node\">\n <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\n [disabled]=\"node.isLoading || node.disabled\" [checked]=\"checkListSelection.isSelected(node)\"\n (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\n <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\n [src]=\"node.itemIconSvg\" />\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n node.itemMatIcon }}\n </span>\n <div class=\"node-text\" [ngStyle]=\"{\n maxWidth: (maxWidthNode - 20*node.level)+ 'px'\n }\">\n <span qms-elipsify [mode]=\"'dark'\" position=\"top\" class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled}\">{{ node.name}}\n </span>\n </div>\n </mat-checkbox>\n </ng-template>\n\n <!-- Template node without checkbox -->\n <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\n <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\n <div class=\"node-info\">\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n node.itemMatIcon }}\n </span>\n <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\n </div>\n <div class=\"node-state\">\n <mat-icon *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\" color=\"primary\"></mat-spinner>\n </div>\n</ng-template>\n\n<!-- Loading spinner -->\n<ng-template #loadingSpinner>\n <div class=\"qms-spinner center\">\n <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\n </div>\n</ng-template>\n",
35359
35364
  animations: [
35360
35365
  AnimationTreeDepartment
35361
35366
  ],
@@ -35453,6 +35458,7 @@
35453
35458
  this.headerName = '';
35454
35459
  this.config = new QMSSelectDepartmentTreeConfig;
35455
35460
  this.hidePanelResult = false;
35461
+ this.resultTitle = '';
35456
35462
  }
35457
35463
  return SelectDepartmentPopupData;
35458
35464
  }());
@@ -35792,7 +35798,7 @@
35792
35798
  SelectDepartmentComponent.decorators = [
35793
35799
  { type: i0.Component, args: [{
35794
35800
  selector: 'qms-select-department',
35795
- template: "<div class=\"qms-select-department\">\n <div class=\"header-dialog mb-2\">\n <span>{{popupData.headerName}}</span>\n <button matDialogClose class=\"btn-close-dialog\" color=\"light\" qms-btn-icon>\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div>\n <div class=\"qms-scrollbar\">\n <div>\n <qms-select-department-tree #treeDepartment customClass=\"custom-department-tree\"\n [height]=\"popupData.config.isMobile ? '38vh' : '50vh'\" [rowsSkeleton]=\"9\" [config]=\"popupData.config\"\n (onSearchEvent)=\"onSearchEvent.emit($event)\" (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n (onPagingSearchEvent)=\"onPagingEvent.emit($event)\" (onCheckNodeEvent)=\"onCheckNodeEvent.emit($event)\"\n (onExpandNodeEvent)=\"onExpandNodeEvent.emit($event)\" (onLoadMoreEvent)=\"onLoadMoreEvent.emit()\"\n (onCheckAllItemSearchEvent)=\"onCheckAllItemSearchEvent.emit($event)\"\n (onCheckItemSearchEvent)=\"onCheckItemSearchEvent.emit($event)\"\n (toggleIncludeChildEvent)=\"toggleIncludeChildEvent.emit($event)\">\n </qms-select-department-tree>\n </div>\n </div>\n <div class=\"line__divider\"></div>\n <div [@heightAnimation] *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length && !popupData.hidePanelResult\" class=\" pr-0 pe-0\">\n <div class=\"header-title\">{{LANG.RESULTS}}</div>\n <div class=\"result-content pr-0 pe-0\">\n <mat-chip-list class=\"panel__item qms-scrollbar\">\n <div [@inOutAnimation_2] [id]=\"'item-result-'+item.id\" *ngFor=\"let item of treeDepartment.resultSelected\">\n <mat-chip [@updateItemAnimation] *qmsContentChanges=\"item.children?.length\"\n [qms-tool-tip]=\"generateTootip(item)\" position=\"top\" mode=\"dark\" qms-chip [removable]=\"true\">\n <span (click)=\"onScrollToNode(item)\" qms-chip-body>\n <span class=\"related__item__content_name\" #itemName>\n <span>{{item.name}}</span>\n <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup && !popupData.config.lazy\">\n {{item.children.length}}/{{item.childCount}}\n </span>\n <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup && popupData.config.lazy\">\n {{item.selectedChildCount || item.children.length}}/{{item.childCount}}\n </span>\n </span>\n </span>\n <ng-container *ngIf=\"isNodeLoading(item.id)\" [ngTemplateOutlet]=\"loadingSpinner\"></ng-container>\n <mat-icon *ngIf=\"!treeDepartment.isDisabledNode(item.id) && !isNodeLoading(item.id)\"\n (click)=\"onRemoveNode(item)\">cancel</mat-icon>\n </mat-chip>\n </div>\n </mat-chip-list>\n </div>\n </div>\n <mat-divider *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length && !popupData.hidePanelResult\" class=\"mx-auto\"></mat-divider>\n <div class=\"confirm__button__groups\">\n <button (click)=\"onCloseDialog()\" class=\"btn-add\"\n [disabled]=\"!resultSelected.length && !popupData.config.canAddNullResult\"\n [class.qms-btn-disabled]=\"!resultSelected.length && !popupData.config.canAddNullResult\" qms-btn>\n <span>{{LANG.ADD}}</span>\n <span>\n ({{treeDepartment.resultSelected.length}})\n </span>\n </button>\n <button qms-btn-text mat-dialog-close>\n Cancel\n </button>\n </div>\n </div>\n</div>\n\n<!-- Loading spinner -->\n<ng-template #loadingSpinner>\n <div class=\"qms-spinner-wrapper\">\n <div class=\"qms-spinner center\">\n <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\" color=\"primary\"></mat-spinner>\n </div>\n </div>\n</ng-template>\n",
35801
+ template: "<div class=\"qms-select-department\">\n <div class=\"header-dialog mb-2\">\n <span>{{popupData.headerName}}</span>\n <button matDialogClose class=\"btn-close-dialog\" color=\"light\" qms-btn-icon>\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div>\n <div class=\"qms-scrollbar\">\n <div>\n <qms-select-department-tree #treeDepartment customClass=\"custom-department-tree\"\n [height]=\"popupData.config.isMobile ? '38vh' : '50vh'\" [rowsSkeleton]=\"9\" [config]=\"popupData.config\"\n (onSearchEvent)=\"onSearchEvent.emit($event)\" (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n (onPagingSearchEvent)=\"onPagingEvent.emit($event)\" (onCheckNodeEvent)=\"onCheckNodeEvent.emit($event)\"\n (onExpandNodeEvent)=\"onExpandNodeEvent.emit($event)\" (onLoadMoreEvent)=\"onLoadMoreEvent.emit()\"\n (onCheckAllItemSearchEvent)=\"onCheckAllItemSearchEvent.emit($event)\"\n (onCheckItemSearchEvent)=\"onCheckItemSearchEvent.emit($event)\"\n (toggleIncludeChildEvent)=\"toggleIncludeChildEvent.emit($event)\">\n </qms-select-department-tree>\n </div>\n </div>\n <div class=\"line__divider\"></div>\n <div [@heightAnimation]\n *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length && !popupData.hidePanelResult\" class=\" pr-0 pe-0\">\n <div class=\"header-title\">{{popupData.resultTitle || LANG.RESULT}}</div>\n <div class=\"result-content pr-0 pe-0\">\n <mat-chip-list class=\"panel__item qms-scrollbar\">\n <div [@inOutAnimation_2] [id]=\"'item-result-'+item.id\" *ngFor=\"let item of treeDepartment.resultSelected\">\n <mat-chip [@updateItemAnimation] *qmsContentChanges=\"item.children?.length\"\n [qms-tool-tip]=\"generateTootip(item)\" position=\"top\" mode=\"dark\" qms-chip [removable]=\"true\">\n <span (click)=\"onScrollToNode(item)\" qms-chip-body>\n <span class=\"related__item__content_name\" #itemName>\n <span>{{item.name}}</span>\n <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup && !popupData.config.lazy\">\n {{item.children.length}}/{{item.childCount}}\n </span>\n <span class=\"select__include-children__count\" *ngIf=\"!!item?.isGroup && popupData.config.lazy\">\n {{item.selectedChildCount || item.children.length}}/{{item.childCount}}\n </span>\n </span>\n </span>\n <ng-container *ngIf=\"isNodeLoading(item.id)\" [ngTemplateOutlet]=\"loadingSpinner\"></ng-container>\n <mat-icon *ngIf=\"!treeDepartment.isDisabledNode(item.id) && !isNodeLoading(item.id)\"\n (click)=\"onRemoveNode(item)\">cancel</mat-icon>\n </mat-chip>\n </div>\n </mat-chip-list>\n </div>\n </div>\n <mat-divider *ngIf=\"treeDepartment && !!treeDepartment.resultSelected.length && !popupData.hidePanelResult\"\n class=\"mx-auto\"></mat-divider>\n <div class=\"confirm__button__groups\">\n <button (click)=\"onCloseDialog()\" class=\"btn-add\"\n [disabled]=\"!resultSelected.length && !popupData.config.canAddNullResult\"\n [class.qms-btn-disabled]=\"!resultSelected.length && !popupData.config.canAddNullResult\" qms-btn>\n <span>{{LANG.ADD}}</span>\n <span>\n ({{treeDepartment.resultSelected.length}})\n </span>\n </button>\n <button qms-btn-text mat-dialog-close>\n {{LANG.CANCEL}}\n </button>\n </div>\n </div>\n</div>\n\n<!-- Loading spinner -->\n<ng-template #loadingSpinner>\n <div class=\"qms-spinner-wrapper\">\n <div class=\"qms-spinner center\">\n <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\" color=\"primary\"></mat-spinner>\n </div>\n </div>\n</ng-template>",
35796
35802
  providers: [
35797
35803
  {
35798
35804
  provide: checkbox.MAT_CHECKBOX_DEFAULT_OPTIONS,